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

Vue.js implementiert Erläuterungen zum Tab-Umschalten und Farbwechseln

Bei der Implementierung dieser Funktion konnte di...

Skript zum schnellen Auflisten aller Hostnamen (Computernamen) im LAN unter Linux

Vor kurzem musste ich alle Hostnamen im LAN aufli...

Docker-Bereitstellung – Springboot-Projektbeispielanalyse

Dieser Artikel stellt hauptsächlich die Beispiela...

Installation und Konfiguration der kostenlosen Installationsversion von MySQL 5.7.17

MySQL-Version: MySQL Community Server 5.7.17, ins...

Erläuterung des Vue.js $refs-Anwendungsfalls

Trotz Props und Events müssen Sie manchmal immer ...

Zusammenfassung der Wissenspunkte zur Verwendung berechneter Eigenschaften in Vue

Berechnete Eigenschaften Manchmal packen wir zu v...

Implementieren Sie den Vollbildmodus und verlassen Sie den Vollbildmodus des Monitors in Vue

Inhaltsverzeichnis Vorwort: Implementierungsschri...

Detaillierte Erklärung der JavaScript-Funktion dieses Zeigeproblems

Inhaltsverzeichnis 1. Die Richtung davon in der F...

Node.js+Postman zur Simulation der HTTP-Server- und Client-Interaktion

Inhaltsverzeichnis 1. Node erstellt HTTP-Server 2...

Bringen Sie Ihnen bei, ein einfaches Versprechen Schritt für Schritt umzusetzen

Inhaltsverzeichnis Schritt 1: Erstellen Sie das F...

So speichern Sie Text und Bilder in MySQL

Große Textdatentypen in Oracle Clob-Langtexttyp (...

Detaillierte Erklärung der Slots in Vue

Die Wiederverwendung von Code in Vue liefert uns ...

Lösen Sie das Problem, dass Docker-Container sofort nach dem Start beendet werden

Kürzlich habe ich mir angesehen, wie Docker es Co...

MySQL-Abfrage redundanter Indizes und ungenutzter Indexoperationen

MySQL 5.7 und höhere Versionen ermöglichen die di...

Detaillierte Erklärung der API in Vue.js, die leicht zu übersehen ist

Inhaltsverzeichnis nächstesTick Syntaxvereinfachu...