HTML (CSS-Stilspezifikation) muss lauten

HTML (CSS-Stilspezifikation) muss lauten

CSS-Stilspezifikationen

1. Klassenauswahl

2. Tag-Selektor

3. ID-Selektor

4. Untergeordneter Selektor im CSS-Stil

Klassenselektoren

1. Die feste Struktur, die man sich merken muss, wird zu einem CSS-Style-Tag. Alle Stile können in CSS-Style-Tags geschrieben werden

<style type="text/css">

</Stil>

2. type="text/css" bedeutet, dass dieses Tag als CSS-Stiltyp deklariert wird

Typ: Typ bedeutet
Text: die Bedeutung des Textes
CSS: Kaskadierende Stilvorlagen

3. Syntaxformat des Klassenselektors. Klassenname (Punkt plus Klassenname)

Schreibort: Rufen Sie die Methode im CSS-Style-Tag auf und schreiben Sie class=Klassenname in den HTML-Tag

4. Namenskonventionen

Es wird empfohlen, reine Buchstaben oder Buchstaben gefolgt von Zahlen zu verwenden. Beginnen Sie nicht mit Zahlen. Obwohl andere Namen verwendet werden können, fragen Sie bitte nach, wie diese zu verwenden sind.

5. Warum sollten wir das Inline-CSS in das CSS-Tag extrahieren?

Vorteil 1: Die HTML-Hierarchie bleibt klar und Fehler sind leicht zu erkennen. Vorteil 2: CSS-Stile können wiederverwendet werden.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2.   
  3. < html   lang = "en" >   
  4.   
  5. <Kopf>​​   
  6.   
  7.      < Meta   Zeichensatz = "UTF-8" >   
  8.   
  9.      < Titel > Klassenselektor </ Titel >   
  10.   
  11.      < Stil   Typ = "Text/CSS" >   
  12.   
  13. /*Klassenselektor*/
  14.   
  15. .box{Breite: 200px; Höhe: 50px; Hintergrundfarbe: Aqua;Rahmen: 10px lachsfarben}
  16.   
  17.      </ Stil >   
  18.   
  19. </ Kopf >   
  20.   
  21. < Textkörper >   
  22.   
  23. < div   Klasse = "Box" > </ div >   
  24.   
  25. < div   Klasse = "Box" > </ div >   
  26.   
  27. < div   Klasse = "Box" > </ div >   
  28.   
  29.    
  30.   
  31. </ Körper >   
  32.   
  33. </ html >   
Ergebnisse im Style

ID-Selektor

1. Das Syntaxformat des ID-Selektors ist #ID-Name

Schreibort: Rufen Sie die Methode im CSS-Style-Tag auf und schreiben Sie id="ID-Name" in den HTML-Tag

2. Namenskonventionen

Aus dem gleichen Grund wie der Klassenname im vorherigen Abschnitt

3. Warum Inline-CSS in CSS-Tags extrahieren?

Vorteil 1: HTML-Ebenen übersichtlich halten und Fehler leicht erkennen Vorteil 2: Prioritäten unterscheiden. Bei Wiederverwendung bitte einen Klassenselektor wählen

4. ID erlaubt keine wiederholten Anrufe. ID ist wie eine Ausweisnummer. Jede ist anders.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2.   
  3. < html   lang = "en" >   
  4.   
  5. <Kopf>​​   
  6.   
  7.         < Meta   Zeichensatz = "UTF-8" >   
  8.   
  9.         <Titel> Titel </Titel>​​​​   
  10.   
  11.         < Stil   Typ = "Text/CSS" >   
  12.   
  13. /*ID-Selektor*/
  14.   
  15. /*Die Bedeutung der eindeutigen ID-Kennung. Der Zweck des Designs besteht darin, die ID eindeutig zu machen*/
  16.   
  17. #box{Breite: 200px;Höhe: 50px;Hintergrundfarbe: Biskuit}
  18.   
  19. #Junge,#Junge1,#Junge2{Breite: 200px;Höhe: 50px;Hintergrundfarbe: Biskuit;
  20.   
  21. Rand: 2px seegrün durchgezogen}
  22.   
  23. #gil,.doc{Breite: 200px;Höhe: 50px;Hintergrundfarbe: Biskuit;
  24.   
  25. Rand: 2px seegrün durchgezogen}
  26.   
  27. /*Mehrere gemeinsam genutzte Parameter festlegen*/
  28.   
  29.    
  30.   
  31.      </ Stil >   
  32.   
  33.    
  34.   
  35. </ Kopf >   
  36.   
  37. < Textkörper >   
  38.   
  39.      < div   id = "gil" > </ div >   
  40.   
  41.      < div   Klasse = "doc" > </ div >   
  42.   
  43.      < div   Klasse = "doc" > </ div >   
  44.   
  45.    
  46.   
  47. </ Körper >   
  48.   
  49. </ html >   
Ergebnisse im Style

Tag-Namensauswahl

Wenn mehrere Tags dasselbe Attribut verwenden, können sie als Selektor geschrieben werden. Alle folgenden Tags haben dieses Attribut

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2. < html   lang = "en" >   
  3. <Kopf>​​   
  4.      < Meta   Zeichensatz = "UTF-8" >   
  5.      <Titel> Titel </Titel>​​​​   
  6.      < Stil   Typ = "Text/CSS" >   
  7. /*Tag-Namensselektor*/
  8. div{border: 10px lachsfarben durchgezogen; Breite: 99px; Höhe: 20px}
  9.      </ Stil >   
  10. </ Kopf >   
  11. < Textkörper >   
  12.      <div> Jay Chou </div>​​​   
  13.      <div> Sonne Qihu </div>​​​   
  14.      <div> Zhang Jie </div>​​​   
  15. </ Körper >   
  16. </ html >   

Untergeordneter Selektor im CSS-Stil

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2.   
  3. < html   lang = "en" >   
  4.   
  5. <Kopf>​​   
  6.   
  7.      < Meta   Zeichensatz = "UTF-8" >   
  8.   
  9.      <Titel> Untergeordneter Selektor </Titel>​​​   
  10.   
  11.      < Stil   Typ = "Text/CSS" >   
  12.   
  13. div b{Farbe: purpurrot}
  14.   
  15. /*Betrifft nur die untergeordneten b-Tags unter dem div*/
  16.   
  17. div > b{Farbe: himmelblau}
  18.   
  19. /*Betrifft nur Söhne, nicht Enkelkinder*/
  20.   
  21.      </ Stil >   
  22.   
  23. </ Kopf >   
  24.   
  25. < Textkörper >   
  26.   
  27.      < div > < b > Vereinigte Staaten </ b > </ div >   
  28.   
  29.      <div> <b> <b> China </b> </b> </div>​​​​​​​​​​​​   
  30.   
  31.    
  32.   
  33. </ Körper >   
  34.   
  35. </ html >   
Ergebnisse im Style

2. Stilpriorität

1. CSS-Ausführungsreihenfolge. Wenn bei gleicher Priorität die nächste CSS-Zeile mit der vorherigen CSS-Zeile in Konflikt steht, wird die nächste Zeile die Standardzeile sein.

Bei unterschiedlichen Prioritäten hat die höhere Priorität Vorrang vor der niedrigeren Priorität.

2. Selektor-Prioritätsreihenfolge

Erster Platz: Inline Style 1000;
2. Platz: ID-Selektor 100;
Dritter Platz: Elementname.Klassenname 10;
4. Platz: Klassenname 5. Platz: Tagname 1;

3. Zu beachten:

Wenn das von Ihnen geschriebene CSS nicht funktioniert, prüfen Sie zuerst, ob der Code falsch ist, und prüfen Sie dann, ob die Priorität falsch ist.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2.   
  3. < html   lang = "en" >   
  4.   
  5. <Kopf>​​   
  6.   
  7.      < Meta   Zeichensatz = "UTF-8" >   
  8.   
  9.      < Titel > Prioritätsdefinition </ Titel >   
  10.   
  11.      < Stil   Typ = "Text/CSS" >   
  12.   
  13. .red{Farbe: aqua}
  14.   
  15. .blau{Farbe: purpurrot}
  16.   
  17. .dce{Farbe: Antikweiß}
  18.   
  19. /* Für gleiche Attribute auf gleicher Ebene lautet der Standardaufruf wie folgt*/
  20.   
  21. div{Farbe: blau}
  22.   
  23. /*Je größer die Auswirkung, desto niedriger die Priorität*/
  24.   
  25.    
  26.   
  27. #blau{ Farbe: Frühlingsgrün}
  28.   
  29. #ket{Farbe: blauviolett}
  30.   
  31. div.red{Farbe: aqua}
  32.   
  33. /*Klassenname > Elementname*/
  34.   
  35. /*ID hat die höchste Priorität*/
  36.   
  37. #alex b{Farbe: Chartreuse}
  38.   
  39. b{Farbe: blau;Rahmen: 2px maisgelb}
  40.   
  41.    
  42.   
  43.      </ Stil >   
  44.   
  45. </ Kopf >   
  46.   
  47. < Textkörper >   
  48.   
  49. < div   id = "ket"   Klasse = "rot"   Stil = "Farbe: schwarz" > Geschlecht zuerst </ div >   
  50.   
  51. <!--Höchster Stil in der Reihe-->   
  52.   
  53. < div   id = "blau"   Klasse = " rot " > Priorität </div>   
  54.   
  55. < div   Klasse = "blau rot dce" > Priorität </ div >   
  56.   
  57. < div   id = "alex" > < b > China </ b > </ div >   
  58.   
  59. < b > Vereinigte Staaten </ b >   
  60.   
  61. </ Körper >   
  62.   
  63. </ html >   
Stil

Das Obige ist der gesamte Inhalt des vom Herausgeber bereitgestellten, unbedingt zu lesenden Artikels zu HTML (CSS-Stilspezifikationen). Ich hoffe, Sie unterstützen 123WORDPRESS.COM~

Ursprüngliche Adresse: http://www.cnblogs.com/pythonxiaohu/archive/2016/06/25/5616511.html

<<:  5 Tipps zum Schreiben von CSS, um Ihren Stil standardisierter zu gestalten

>>:  MySQL-Tutorial: Beispiel einer DML-Datenmanipulationssprache, ausführliche Erklärung

Artikel empfehlen

Halbtransparente Bildverarbeitung. Ideen und Code zur Implementierung von halbtransparentem Hintergrund.

Code kopieren Der Code lautet wie folgt: <!DOC...

Zusammenfassung der Unterschiede zwischen Get- und Post-Anfragen in Vue

Die Betriebsumgebung dieses Tutorials: Windows 7-...

Prinzip des Linux-Nohup-Befehls und Beispielanalyse

nohup-Befehl Bei der Verwendung von Unix/Linux mö...

Detaillierte Erklärung gängiger Docker Compose-Befehle

1. Die Verwendung von Docker Compose ist der Verw...

Einfaches Anwendungsbeispiel für eine rekursive Vue-Komponente

Vorwort Ich glaube, dass viele Studenten bereits ...

Detaillierte Erklärung zur Verwendung von Docker zum Erstellen einer Entwicklungsumgebung für Laravel- und Vue-Projekte

Dieser Artikel stellt die Entwicklungsumgebung vo...

Zusammenfassung des Umschaltproblems und der Lösung zur Installation mehrerer JDK-Versionen im 64-Bit-System von Win10

Da myeclipse2017 und idea2017 auf dem Computer in...

Über visuelles Design und Interaktionsdesign

<br />Im gesamten Produktdesignprozess liege...

So installieren Sie OpenSSH aus dem Quellcode in CentOS 7

Umgebung: Mindestinstallation von CentOS 7.1.1503...

VMware Workstation 12 installiert Ubuntu 14.04 (64 Bit)

1. Installationsumgebung Computermodell: Lenovo Y...

So verwenden Sie fdisk zum Partitionieren der Festplatte in Linux

Häufig verwendete Befehle für Linux-Partitionen: ...

CSS-Tipps zur Implementierung der Chrome-Tab-Leiste

Dieses Mal schauen wir uns ein Navigationsleisten...

Index-Skip-Scan in MySQL 8.0

Vorwort MySQL 8.0.13 unterstützt nun den Index-Sk...

Automatische Hot-Deployment/Neustart von Jenkins+Tomcat und Lösungen für aufgetretene Probleme (empfohlen)

1. Hintergrund Die Projekte des Unternehmens wurd...

So fügen Sie einen Wert mit einfachen Anführungszeichen oder Backslashes in MySQL-Anweisungen ein

Vorwort Dieser Artikel stellt hauptsächlich den r...