Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Womit endet eine CSS-Deklarationsanweisung immer?

青灯夜游
Freigeben: 2023-01-07 11:42:12
Original
3233 Leute haben es durchsucht

CSS-Regeln bestehen aus zwei Hauptteilen: dem Selektor und einer oder mehreren Deklarationen. Der Selektor ist das HTML-Element, dessen Stil geändert werden muss; jede Deklaration besteht aus einem Attribut und einem Wert. Die CSS-Deklarationsanweisung endet immer mit einem Semikolon „;“, und die Deklarationsgruppe wird in geschweifte Klammern „{...“ eingeschlossen. }".

Womit endet eine CSS-Deklarationsanweisung immer?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-Regeln bestehen aus zwei Hauptteilen: einem Selektor und einer oder mehreren Deklarationen.

  • Der Selektor ist das HTML-Element, dessen Stil geändert werden muss.

  • Jede Deklaration besteht aus einem Attribut und einem Wert. Das Attribut ist ein festgelegtes Stilattribut. Das Attribut und der Wert werden durch Doppelpunkte getrennt.

CSS-Deklarationen enden immer mit einem Semikolon ; und Gruppen von Deklarationen werden in geschweifte Klammern {…} eingeschlossen. Um CSS besser lesbar zu machen, beschreiben Sie nur eine Eigenschaft pro Zeile. ; 结束,声明组以大括号 {…} 括起来。为了让 CSS 可读性更强,可以每行只描述一个属性。

例:

 p
 /*选择器*/
 {
     color:red;/*属性+值*/
     text-indent:2em;
 }
Nach dem Login kopieren

CSS的id选择器和class 选择器

id 选择器

/* 注意:id选择器前有 # 号。 */
#sky{
  color: blue;
}
Nach dem Login kopieren
<p id="sky">蓝色的天空</p>
<p id="forest">绿色的森林</p>
Nach dem Login kopieren

这条规则表明,找到页面上id为sky的那个元素让它呈现蓝色,如下所示的页面,蓝色的天空这几个字就将会是蓝色的。id选择器适用范围只有一个元素。

class 选择器

/* 注意:class选择器前有 . 号。 */
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}
Nach dem Login kopieren
<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>
Nach dem Login kopieren

元素的class值可以有多个,也可以重复。class选择器应用非常普遍。

css注释

任何语言都需要注释,HTML 使用<!- 注释语句-> 来进行注释,而 CSS 使用/* 注释语句 */

Beispiel:

body {  /*页面基本属性*/
    font-size: 12px;
    color: #CCCCCC;
}
/*段落文本基础属性*/
p {
    background-color: #FF00FF;
}
Nach dem Login kopieren
CSS-ID-Selektor und Klassenselektor

id-Selektor

rrreeerrreee

Diese Regel zeigt, dass das Element mit der ID „Sky“ auf der Seite gefunden und auf der Seite blau angezeigt wird Wie unten gezeigt, werden die Worte „blauer Himmel“ blau sein. Der ID-Selektor gilt nur für ein Element.

Klassenselektorrrreeerrreee

Der Klassenwert eines Elements kann mehrere Werte haben oder wiederholt werden. Klassenselektoren sind sehr verbreitet. 🎜🎜CSS-Kommentare🎜🎜Jede Sprache erfordert Kommentare <!- comment Statement->, während CSS /*-Kommentare verwendet */ zum Kommentieren. 🎜rrreee🎜Die Rolle von Kommentaren: 🎜🎜CSS-Kommentare werden für Anmerkungen verwendet. Wir verwenden CSS-Kommentare häufig, um spezielle Kommentare zu CSS-Code oder Layout-CSS-Stilen abzugeben. Es gibt auch bedingte Kommentare für den funktionalen Gebrauch. 🎜🎜CSS-Anmerkungen (CSS-Anmerkungen) können uns helfen, die von uns geschriebenen CSS-Dateien zu erklären, z. B. den Speicherort, die Funktion, den Stil usw. eines bestimmten CSS-Codes zu erklären, damit wir ihn in Zukunft auf einen Blick leicht verstehen können Wartung Wenn das Team eine Webseite entwickelt, helfen angemessene und geeignete Anmerkungen dem Team zu verstehen, wo der CSS-Stil dem HTML entspricht, sodass die Div-CSS-Webseite reibungslos und schnell entwickelt werden kann. 🎜🎜(Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonWomit endet eine CSS-Deklarationsanweisung immer?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage