Was sind die CSS-Regeln?
Hier sind 31 CSS-Grammatikregeln:
1 . Nutzen Sie die CSS-Abkürzungsregeln
/*Achten Sie auf die Schreibreihenfolge von oben, rechts, unten und links*/
1. Informationen zu Rändern (4 Seiten):
1px 2px 3px 4px (oben, rechts, unten, links)
1px 2px 3px (das weggelassene linke ist gleich rechts)
1px 2px (das weggelassene obere ist gleich unten )
1px (alle vier Seiten sind gleich)
2. Alles vereinfachen:
*/ body{margin:0}--------- --- stellt alle Elemente auf der Webseite dar. Der Rand ist 0
#menu{ margin:0}------------Gibt den Rand aller Elemente unter dem Menüfeld an ist 0
3. Abkürzung (Rahmen) spezifischer Stil:
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;
4. Abkürzungsregeln für Text:
Schriftart: kursiv
Schriftart: Kapitälchen/normal
Schriftstärke:fett;
Schriftgröße:12px;
Zeilenhöhe:1,2em(120%)/1,5em(150%);
Schriftfamilie:arrial,sans-serif, verdana;
abgekürzt zu:
Schriftart:italic small-caps fat 12px/1.5em arrial,sans-serif;
Hinweis: Schriftgröße und Zeilenhöhe werden verwendet. Schrägstriche können nicht separat geschrieben werden, wenn sie zusammen kombiniert werden.
5. Über das Hintergrundbild:
Hintergrund:#FFF url(log.gif) nicht wiederholt oben links;
6. Über die Liste:
List-style-type:square/none;
List-style-position:inside;
List-style-image:url(filename.gif);
Abgekürzt als:
List-style:none inside url(filename.gif)
2. Verwenden Sie 4 Methoden, um CSS-Stile einzuführen
1.link
rel-Beziehung
Typ-Datentyp, es gibt viele
href-Pfad
Einige Browser unterstützen alternative Stile, Schlüsselwörter: alternative:
2. Interner Stilblock
h1{color:red;}
–>
3.@import
@import url {a .css🎜>
Hinweis: Diese Direktive muss im Einstellungen in--Extern referenzierte CSS-Dateien
(2) Die Priorität wird nicht gemäß der Zugriffsreihenfolge festgelegt, sondern anhand der Deklarationsreihenfolge im CSS. Einrichten.
Wie im obigen Beispiel wird
auch hier als Gelb angezeigt, da .Yellow in der CSS-Definition nach .Blue steht.
8. Schreiben Sie den richtigen Linkstil
Achten Sie beim Definieren der verschiedenen Status des Links auf die Schreibreihenfolge: :link :visited :hover :active mit dem ersten Buchstaben: L V H A , Sie können sich die Reihenfolge merken, indem Sie sich die beiden Wörter LoVe, Hate merken.
:link --------Die Farbe des Links
:visited -----Die Farbe nach dem Mausklick
:hover -- --- --Die Farbe, wenn die Maus platziert, aber nicht angeklickt wird (Hover)
:aktiv-------Die Farbe, wenn die Maus angeklickt wird
9 von :hover
IE6 unterstützt das Attribut :hover außer dem Tag a nicht. Wir verstehen, dass das Attribut :hover der Maus-Hover-Effekt ist. In IE7 und FF können Sie den :hover-Attributeffekt für fast jedes Element festlegen. Das funktioniert hervorragend, wenn wir verschiedene Besuche durchführen.
Zum Beispiel:
Breite: 360 Pixel;
Höhe: 80 Pixel;
Rand: 50px auto 0 auto;
Rahmen: 1px durchgezogen #ccc; 🎜 >}
p:hover {
border : 1px solid #000;background : #ddd;
- --------------Dieser Effekt gilt für IE7 und FF
p a {
color : #00f; Dekoration: keine;
Schriftgröße: 13px
p a:hover {
Farbe: #036; Textdekoration: unterstrichen;
}
-----------------Dieser Effekt ist für IE6
10. Definieren die A-Tag-Anforderungen. Kleine Punkte, die es zu beachten gilt
Wenn wir a{color:red;} definieren, stellt es die Stile der vier Zustände von A dar. Wenn Sie einen Zustand definieren möchten, in dem sich die Maus befindet, tun Sie dies einfach Definieren Sie a:hover. Okay, die anderen drei Zustände sind die in A definierten Stile.
Wenn nur ein a:link definiert ist, denken Sie unbedingt daran, die anderen drei Zustände zu definieren!
Verbieten des Umbrechens von Inhalten und Erzwingen des Umbrechens von Inhalten
In Tabellen oder Ebenen möchten wir möglicherweise, dass der Inhalt nicht umgebrochen wird oder dass wir das Umbrechen erzwingen.
Zeilenumbrüche verbieten: white-space:nowrap
Zeilenumbrüche erzwingen: word-break: break-all;
Der Unterschied zwischen relativ und absolut
Absolut---Die Schreibmethode in CSS ist: position:absolute; Dies bedeutet absolute Positionierung. Es bezieht sich auf die obere linke Ecke des Browsers und arbeitet mit TOP, RIGHT, BOTTOM und LEFT zusammen (im Folgenden als TRBL bezeichnet) Die Positionierung erfolgt standardmäßig auf den Ursprungspunkt des übergeordneten Elements, wenn TRBL nicht festgelegt ist. Wenn TRBL festgelegt ist und das übergeordnete Element das Positionsattribut nicht festlegt, wird der aktuelle Absolutwert mit der oberen linken Ecke des Browsers als Originalpunkt positioniert und die Position wird durch TRBL bestimmt.
Relativ---Die Schreibmethode in CSS ist: position:relative; Es bezieht sich auf den ursprünglichen Punkt des übergeordneten Elements, wenn es keinen übergeordneten Punkt gibt Wird als Originalpunkt für die Positionierung verwendet. Wenn in der übergeordneten Ebene CSS-Attribute wie Auffüllung vorhanden sind, wird der Originalpunkt der aktuellen Ebene in Bezug auf den Originalpunkt des übergeordneten Inhaltsbereichs positioniert.
13. Unterschied zwischen Block-Level-Elementen und Inline-Elementen
Block-Level --- Sie können die Breite und Höhe definieren und eine neue Zeile beginnen (z. B. div ul )
Inline---Die Breite und Höhe können nicht definiert werden, z. B. Textelemente (z. B. eine Spanne)
14. Der Unterschied zwischen Anzeige und Sichtbarkeit
Anzeige :none und Visibility:hidden können beide ein Element ausblenden, Visibility:hidden verbirgt jedoch nur den Inhalt des Elements, der verwendete Positionsraum bleibt jedoch weiterhin erhalten. Display:none entspricht dem Entfernen des Elements von der Seite und seine belegte Position wird ebenfalls gelöscht.
15. Etwas Syntax von Hintergrund
Hintergrundbild:url(Hintergrundmuster.jpg,gif,bmp);
Hintergrundfarbe:#FFFFFF; )
Hintergrundfarbe: transparent;
Hintergrundwiederholung Ändern Sie die Wiederholungseinstellung des Hintergrundbilds nebeneinander
Anleitung
repeat Hintergrundbilder sind nebeneinander
repeat-x Hintergrundbilder sind nebeneinander in X-Richtung
repeat-y Hintergrundbilder sind nebeneinander in Y-Richtung
Nein - sich wiederholende Hintergrundbilder werden nicht nebeneinander verarbeitet
Ob der Hintergrundanhang die Bildposition fixiert
Beschreibung
scrollen Wenn die Schriftrolle gezogen wird, verschiebt sich das Hintergrundbild (Standardwert)
behoben Wenn die Schriftrolle gezogen wird, verschiebt sich das Hintergrundbild nicht
Hintergrundposition nach Länge positionieren: x y
Prozentsatz zum Positionieren der Hintergrundposition verwenden: x% y%
Beschreibung
x% Nach rechts verschieben
y% Nach unten verschieben
Hintergrundposition: 0 % 0 %; oben links
Hintergrundposition: 0 % 50 %; links in der Mitte
Hintergrundposition: 50 % 0 %; Mitte oben
Hintergrundposition: 50 % 50 %; MitteHintergrundposition: 100 % 0 %; oben rechtsHintergrundposition: 0 % 100 %; unten linksHintergrundposition: 100 % 50 %; Mitte rechts
Hintergrundposition: 50 % 100 %; unten rechts Hintergrundposition: 100 % 100 %; >
nach Schlüsselwörtern positioniert
Schlüsselwortbeschreibung
oben (y = 0)
Mitte (x = 50, y = 50)
unten ( y = 100 )
left Left ( x= 0 )
Exp:
background-position:center;
Das Bild befindet sich am X =50% Y=50% Position der angegebenen Hintergrundmitte
Hintergrundposition: 200px 30px
16. So schreiben Sie Kommentare
in HTML:
content
in CSS:
/ * ---------- Header --- ------------- */
Stil
17. CSS-Namenskonventionen
1. Benennung von IDs
(1) Seitenstruktur
Container: Container
Header: Header
Inhalt: Inhalt/Container
Seitentext: Hauptseite
Fußzeile: Fußzeile
Navigation: Navigation
Seitenleiste: Seitenleiste
Spalte: Spalte
Seitenperipheriesteuerung Gesamtlayoutbreite: Wrapper
links rechts in der Mitte
(2)Navigation
Navigation: nav
Hauptnavigation: mainnav
Unternavigation: Subnav
Navigation oben: Topnav
Seitennavigation: Seitenleiste
Linke Navigation: linke Seitenleiste
Rechte Navigation: rechte Seitenleiste
Menü: Menü
Untermenü: Untermenü
Titel: Titel
Zusammenfassung: Zusammenfassung
(3) Funktion
Logo: Logo
Werbung: Banner
Login: Login
Login-Leiste: Loginbar
Registrieren: Regsiter
Suchen: Suchen
Funktionsbereich: Shop
Titel: Titel
Beitreten: joinus
Status: Status
Button: btn
Scrollen: scrollen
Tab-Seite: Tab
Artikelliste: Liste
Eingabeaufforderung: msg
Aktuell: aktuell
Tipps : Tipps
Symbol: Symbol
Hinweis: Hinweis
Anleitung: Gilde
Service: Service
Hot Spot: Hot
Neuigkeiten: Neuigkeiten
Download: Download
Abstimmung: Abstimmung
Partner: Partner
Freundlicher Link: Link
Urheberrecht: Copyright
2. Klassenbenennung
(1) Farbe: Verwenden Sie den Farbnamen oder einen Hexadezimalcode, z. B.
.red { color: red; >
.f60 { color: #f60; } .ff8600 { color: #ff8600; } (2) Schriftgröße, verwenden Sie direkt „Schriftart+Schriftgröße“. Name, z. B. .font12px { Schriftgröße: 12px; }.font9pt {Schriftgröße: 9pt; Englischer Name des Ausrichtungsziels, z. B. .left { float:left; }.bottom { float:bottom } (4) Titelleistenstil, Verwenden der Methode „Kategorie + Funktion“ Benennung, z. B. .barnews { }.barproduct { }Hinweis:: u ist immer Kleinbuchstaben; u Verwenden Sie so viel wie möglich Englisch; u Fügen Sie keine Bindestriche und Unterstriche hinzu u Für 2 Wortkombinationen können Sie den ersten Buchstaben von großschreiben das zweite Wort ohne Bindestriche und Unterstreichungen (z. B. mainContent) ;u Versuchen Sie, Wörter nicht abzukürzen, es sei denn, es handelt sich um Wörter, die Sie auf einen Blick verstehen können.
3. Hauptseite-CSS-Datei
Hauptmaster.css
Modulmodul .css
Grundsätzlich base.css (root.css) teilen
Layout, layout.css
themes.css
columns.css
Textfont.css
Forms.css
Patch mend.css
Drucken print.css
18. Auffüllen wirkt sich auf die Breite aus Problem
Wenn zwischen einer Gruppe verschachtelter Tags ein gewisser Abstand erforderlich ist, belassen Sie ihn beim Randattribut des Tags, das sich darin befindet, anstatt den Abstand zu definieren
table{border-collapse:collapse;}td{border:1px solid #000;} 20. Wenn der Text zu lang ist, wird der Ein zu langer Teil wird als Ellipsen angezeigt >21. Nicht alle Stile müssen abgekürzt werden Wenn das Stylesheet wie p{padding:1px 2px 3px 4px} definiert ist, wurde in nachfolgenden Projekten ein weiterer Stil mit 5px oberem Abstand und 6px unterem Abstand hinzugefügt . Wir müssen nicht unbedingt p.style1{padding:5px 6px 3px 4px} schreiben. Es kann als p.style1{padding-top:5px;padding-right:6px;} geschrieben werden. Sie haben vielleicht das Gefühl, dass es nicht so gut ist, es auf diese Weise zu schreiben, aber haben Sie jemals darüber nachgedacht? Die Methode definiert wiederholt den Stil. Darüber hinaus müssen Sie nicht herausfinden, wie hoch die ursprünglichen Werte für die untere und linke Polsterung sind! Wenn sich der vorherige Stil P in Zukunft ändert, ändert sich auch der Stil von p.style1, den Sie definiert haben. (Diese Methode ist sehr wichtig für die spätere Änderung von Stilen) 22. Mehrere häufig verwendete CSS-Detailsverarbeitungsstile 1) Ausrichtung chinesischer Zeichen an beiden Enden: text-align: justify;text -justify:inter-ideograph;2) Kürzung chinesischer Zeichen mit fester Breite: overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(erlaubt keinen Umbruch, sondern kann nur verarbeitet werden Text in einer Zeile abschneiden, mehrere Zeilen nicht verarbeiten (IE5 und höher) FF kann nicht, es wird nur ausgeblendet. ***Universeller erzwungener Zeilenumbruch: white-space:normal;word-break:break-allVerbotener Zeilenumbruch: white-space:nowrapErzwungene Zeile break: word -wrap: break-word; word-break: normal;.AutoNewline{/*word-break: break-all; Methode 1 ist erforderlich*//*word-wrap:break-word;overflow:hidden; Methode 2*//*word-wrap:break-word; Methode 3*/word-wrap:break-word; word-break:break-all;}.NoNewline{/ *word-break: keep-all; Methode 1 muss*/white-space:nowrap;}3) Chinesisches Schriftzeichen mit fester Breite (word) line break: table-layout:fixed; word-break:break-all; (IE5 und höher) FF nicht. 4)TextPlatzieren Sie den vorherigen Text mit der Maus, um den Effekt zu sehen. Dieser Effekt ist auf vielen ausländischen Websites zu beobachten, jedoch nur auf sehr wenigen inländischen. 5) Stellen Sie das Bild auf halbtransparent ein: .halfalpha {background-color:#000000;filter:Alpha(Opacity=50)} hat den Test in IE6 und IE5 bestanden, ist jedoch in FF fehlgeschlagen weil es sich bei diesem Stil um privates IE-Material handelt; object> Das Obige gilt für IE-Code. Fügen Sie für FIREFOX einen ähnlichen Parameter wmode=“transparent“ zum
Das obige ist der detaillierte Inhalt vonWas sind CSS-Regeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!