1. Die sinnvolle Verwendung von CSS-Abkürzungen kann die Größe der Seitendatei reduzieren, die Download-Geschwindigkeit erhöhen und den Code prägnant und lesbar machen.
wie:
div{
border-top:1px solide #cccccc;
border-left:1px solid #cccccc;
border-right:1px soli #cccccc;
border-bottom:1px solid #cccccc;
}
kann geschrieben werden als
p{border:1px solid #cccccc}
Ein weiteres Beispiel:
div{
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}
kann umgeschrieben werden als:
/*Achten Sie auf die Schreibreihenfolge oben, rechts, unten und links*/
div{margin:10px 20px 30px 40px}
/*Beachten Sie, dass Werte und Einheiten keine Leerzeichen enthalten dürfen und jeder Wert durch ein Leerzeichen getrennt ist*/
(Einzelheiten finden Sie im CSS2-Referenzhandbuch, Zusammenfassung gängiger CSS-Abkürzungen)
2. Sie können mehrere Klassenattribute festlegen ein HTML-Element gleichzeitig Regeln (mehrere Klassendefinitionen).
Normalerweise schreiben wir es als:
Tatsächlich können wir mehrere Regeln für das p-Element angeben, wie zum Beispiel:
CSS:
.A{…}
.B{….}
HTML:
Dieses Element enthält die in a und b festgelegten Stile
Hinweis: Trennen Sie mehrere Regeln durch Leerzeichen.
3. Definieren Sie die Einheit eindeutig, es sei denn, der Wert ist 0
Das Vergessen, Dimensionen zu definieren, ist ein häufiges Problem bei unerfahrenen CSS-Anfängern. In HTML können wir width="100" schreiben, aber in CSS sollte eine genaue Einheit angegeben werden. Beispiel: width:100px;height:50px;font-size:9pt, mit Ausnahme des Werts 0, da dieser für keine Einheit von Bedeutung ist. 0-Werte sind alle gleich groß.
Hinweis: Fügen Sie zwischen dem Wert und der Einheit keine Leerzeichen ein.
4. Groß-/Kleinschreibung In XHTML wird bei den durch CSS definierten Elementnamen die Groß-/Kleinschreibung beachtet. Um Fehler zu vermeiden, wird daher empfohlen, immer Kleinbuchstaben zu verwenden.
Beispielsweise unterscheidet sich #aaa von #AAA. In xhtml unterscheiden sich auch p und P. Sie werden nicht überschrieben.
Wenn #aaa in CSS definiert ist, wird bei Verwendung von AAA zur Anwendung im HTML-Element nicht der in #aaa definierte Stil erhalten.
Beispielcode:
CSS:
#aaa{border:1px solid #ccc}
HTML:
1-Pixel-Kante kann nicht angezeigt werden
. 5. Das neueste Prioritätsprinzip von CSS. Wenn für ein Element mehrere Stile definiert sind, hat die neueste Ebene Vorrang und der neueste Stil überschreibt andere Stildefinitionen.
wie:
CSS:
p{color:red}
.blue{color:blue}
.gelb{Farbe:gelb}
HTML:
hier rot dargestellt
Hier in Blau dargestellt
Hier in Grün dargestellt
Hier in Gelb dargestellt
Beachten:
(1) Achten Sie auf verschiedene Prioritäten der Stile (die Prioritäten nehmen von oben nach unten ab):
--Elementstileinstellungen
--Einstellungen im Kopfbereich
--Extern referenzierte CSS-Dateien (2) Die Priorität wird nicht durch die Zugriffsreihenfolge festgelegt, sondern durch die Deklarationsreihenfolge in CSS.
Wie im obigen Beispiel wird es hier gelb angezeigt,
da .gelb in der CSS-Definition nach .blau steht.
6. Verwenden Sie Unterselektoren, um die Definition von ID und Klasse zu reduzieren. Beispiel:
#enthalten{..}
#contain_ul{...}
.contail_li{...}
kann geändert werden in:
#enthalten{..}
#containul{...}
.contain ul li{...}
7. Fügen Sie keine Anführungszeichen zum Hintergrundbildpfad hinzu und ändern Sie „background:url("xxx.gif") in „background:url(xxx.gif)“.
Denn das Hinzufügen von Anführungszeichen führt bei einigen Browsern zu Fehlern.
8. Der Pfad des Hintergrundbilds ist relativ zum Pfad der aktuellen CSS-Seite.
Zum Beispiel:
Es gibt die folgende Verzeichnisstruktur: Bilder
--xxx.gif
--css
--xx.css
--index.html
Codeinhalt
index.html bezieht sich auf die Datei xx.css.
xx.css sollte auf das xxx.gif-Bild verweisen und seine Schreibmethode ist: background:url(../images/xxx.gif)
9. Verwenden Sie die Gruppenauswahl, um den gleichen Stil auf verschiedene Elemente wie h1, h2, h3 anzuwenden , div{font- size:16px;font-weight:bold}
Dann sind die Stile der Elemente h1, h2, h3 und div alle 16 Pixel groß und fett
10. Wenn Sie CSS verwenden, um verschiedene Status von Links zu definieren, müssen Sie auf die Schreibreihenfolge achten ist: :link: besucht :hover :aktiv.
Wenn Sie nicht in dieser Reihenfolge schreiben, können Sie möglicherweise nicht den gewünschten Effekt erzielen. Um uns die Reihenfolge zu merken, extrahieren wir den ersten Buchstaben jedes Wortes: LVHA. Sie können sich die Reihenfolge merken, indem Sie sich die beiden Wörter LoVe und Hate merken.
11. Das Umbrechen von Inhalten verbieten und das Umbrechen von Inhalten erzwingen. In einer Tabelle oder Ebene möchten wir möglicherweise, dass der Inhalt nicht umgebrochen wird. Diese Anforderungen können wir durch einige CSS-Attribute erreichen.
Zeilenumbrüche deaktivieren: white-space:nowrap
Erzwungener Zeilenumbruch: Zeilenumbruch: Wortumbruch: normal
12. Der Unterschied zwischen relativ und absolut
Absolut, die Schreibmethode in CSS ist: position:absolute; Sie bezieht sich auf die obere linke Ecke des Browsers und arbeitet mit TOP, RIGHT, BOTTOM und LEFT (im Folgenden als TRBL bezeichnet) zusammen TRBL ist nicht festgelegt. Standardmäßig ist der Ursprungspunkt der ursprüngliche Punkt des übergeordneten Elements. 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 ist die Schreibmethode in CSS: position:relative; Es bezieht sich auf den ursprünglichen Punkt des übergeordneten Elements. Wenn kein übergeordneter Punkt vorhanden ist, wird der ursprüngliche Punkt von BODY als ursprünglicher Punkt verwendet und wird mit TRBL positioniert. Wenn im übergeordneten Element CSS-Attribute wie Auffüllung vorhanden sind, wird der ursprüngliche Punkt der aktuellen Ebene in Bezug auf den ursprünglichen Punkt des übergeordneten Inhaltsbereichs positioniert.
13. Unterscheiden Sie zwischen div und span
div ist ein Element auf Blockebene, das Absätze, Tabellen usw. enthalten kann und zum Platzieren unterschiedlicher Inhalte verwendet wird. Im Allgemeinen verwenden wir Divs, um jeden Block auf der Webseite zu gestalten und zu positionieren.
span ist ein Inline-Element ohne praktische Bedeutung. Es dient lediglich der Anwendung von Stilen auf einen Inhalt und kann den Stil seines Inhalts festlegen, indem ein Stil auf der Spanne definiert wird.
14. Unterscheiden Sie zwischen Anzeige und Sichtbarkeit
Sowohl „display:none“ als auch „visibility:hidden“ können 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.