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

Detaillierte Erläuterung der geplanten Ausführungsaufgaben für MySQL-Datenbankereignisse

1. Hintergrund Mit der Weiterentwicklung des Proj...

Mehrere Möglichkeiten, Python-Programme im Linux-Hintergrund auszuführen

1. Die erste Methode besteht darin, den Befehl un...

Beispielanalyse zur Metadatenextraktion von MySQL und Oracle

Inhaltsverzeichnis Vorwort Was sind Metadaten? Ad...

Lassen Sie uns ausführlich über bitweise Operationen im React-Quellcode sprechen

Inhaltsverzeichnis Vorwort Mehrere gängige Bitope...

Detaillierte Erläuterung der CentOS-Konfiguration der offiziellen Nginx-Yum-Quelle

Ich habe das von Alibaba Cloud gekaufte CentOS fü...

So fügen Sie bei der Webseitenerstellung Webfont-Dateien Vektorsymbole hinzu

Wie wir alle wissen, gibt es in Computern zwei Art...

Verwenden Sie eine DIV-Maske, um das Problem zu lösen, dass das direkte Aktivieren des Kontrollkästchens mit der Maus ungültig ist

Während des Front-End-Entwicklungsprozesses trat e...

Detaillierte Schritte zur vollständigen Deinstallation von MySQL 5.7

Dieser Artikel fasst hauptsächlich verschiedene P...

Beispielcode zur Implementierung der Schnittstellensignatur mit Vue+Springboot

1. Umsetzungsideen Der Zweck der Schnittstellensi...

Erklärung des HTML-Codes der Webseite: geordnete Liste und ungeordnete Liste

In diesem Abschnitt lernen wir Listenelemente in ...

Eine detaillierte Erklärung, wie React Fiber funktioniert

Inhaltsverzeichnis Was ist React Fiber? Warum Rea...

Zusammenfassung der Installationsschritte und aufgetretenen Probleme beim Dekomprimieren der Version mysql5.7.24

1. Herunterladen https://dev.mysql.com/downloads/...

Windows-Plattformkonfiguration Version 5.7 + MySQL-Datenbankdienst

Beinhaltet den Prozess der Initialisierung des Ro...

ReactHooks Batch-Update-Status und Abrufen von Routenparametern Beispielanalyse

Inhaltsverzeichnis 1. So führen Sie stapelweise U...

Detaillierte Erklärung der Kernfunktionen und der Ereignisbehandlung von jQuery

Inhaltsverzeichnis Ereignis Seite wird geladen Ve...