So implementieren Sie CSS und teilen Beispielcode von Selektoren

CSS-Implementierung und -Selektor Inhalt dieser Lektion:

1. Vier Möglichkeiten zur Implementierung von CSS 1, in jedem HTML- -Tag Da ist ein style style -Attribut , und der Wert dieses Attributs ist der CSS-Code. (Für ein Tag) 2, verwenden Sie das Style-Tag . Im Allgemeinen im head -Tag definiert. (Für mehrere identische Tags) 3. Wenn mehrere Seiten denselben Stil verwenden, kann der Stil einzeln als CSS-Datei Import 4. Verknüpfen Sie eine CSS-Datei über das Link-Tag im HTML-Header-Tag

2 {} Klassenselektor .haha id-Selektor #qq (Der Wert von id ist in Es ist eindeutig auf der Seite, da dieses Attribut nicht nur von CSS, sondern auch von Javascript verwendet wird) Die Verwendung von Klassenselektor und ID-Selektor ist dieselbe und die Priorität von id Selektor Höher als der Klassenselektor, Je niedriger die Priorität, desto höher ist sie 3. CSS-Hinweise CSS: Separater Webseiteninhalt und Anzeigestil , verbesserte Anzeigefunktion.

CSS-Kaskadierung Stylesheets, kaskadierende Stylesheets Trennen Sie die Stile auf der Webseite und steuern Sie sie vollständig durch CSS, wodurch die Wiederverwendbarkeit und Skalierbarkeit von Stilen verbessert wird.

Format: Selektor {Attributname: Attributwert;...🎜> 4 Möglichkeiten, CSS mit HTML zu kombinieren:

1 HTML-Tag

hat das Stilattribut

2. Wenn auf der Seite mehrere Tags mit demselben Stil vorhanden sind, können Sie den Stil-Tag definieren, um den Stil zur Wiederverwendung zu kapseln

3. Wenn mehrere Seiten denselben Stil verwenden, kann der Stil einzeln als CSS-Datei gepackt und importiert werden

4 Verknüpfen Sie eine CSS-Datei über den Link-Tag HTML-Header-Tag

css代码 Nach dem Login kopieren Tipp: Um die Wiederverwendbarkeit und Skalierbarkeit von Stilen zu verbessern, definieren und kapseln Sie mehrere Stile separat in CSS-Dateien, z. B. p.css, p.css... Verwenden Sie in einer gesamten CSS-Datei den Import, um diese CSS-Dateien zu importieren, und verwenden Sie dann das Link-Tag in der HTML-Seite, um die gesamte CSS-Datei zu importieren.

@import url(“1.css”); Nach dem Login kopieren Priorität: Proximity-Prinzip Das auf dem Tag festgelegte Stilattribut kann andere Stile überschreiben

Nach dem Login kopieren Selektor:

1 Der HTML-Tag-Name ist ein Selektor

2. Klassenselektor: Das Attribut class

im Tag wird angegeben. Fügen Sie beim Definieren des Stils einen Punkt js

hinzu Referenz Verwenden Sie className

wenn 3. ID-Selektor: Das ID-Attribut des Tags sollte so eindeutig wie möglich sein, damit JavaScript das Element erhalten kann 4. Erweiterter Selektor: a, Assoziationsselektor: Das Tag in der

Tag-Tabelle p repräsentiert den p-Bereich in der Tabelle

b Selektor: Mehrfachauswahl Gerät durch Kommas getrennt c. Für Elementselektor : -Status des Elements

, z. B. Standardstatus, Klickstatus, Hover-Status von Hyperlink Warten

ein :link ein :visited ein :hover ein :aktive

LV HA-Bestellung 删除 超链接默认下划线： text-decoration ：none

p :first-letter p :first-line focus:IE6不支持

CSS滤镜：通过一些代码丰富了的样式

网页设计时， p+CSS

p和P标签都属于行级区域，回车效果，SPAN标签为块级区域，无回车效果

可加b ord er、color等属性，P标签中不要嵌套p标签

四、代码一 @import url(“1.css”); 4，通过HTML头标签中的link标签链接一个CSS文件 二、选择器 标签选择器 div{} 类选择器 .haha id选择器 #qq (id的取值在页面中是唯一的，因为该属性除了给CSS使用，还要给javascript使用) 类选择器和id选择器用法一样，id选择器的优先级比类选择器高，优先级越少越高 --> Insert title here /* @IMPORT url(1.css); @IMPORT url(div.css); @IMPORT url(span.css); */ div.haha{ background-color: #000; } @import url(“1.css”); 4，通过HTML头标签中的link标签链接一个CSS文件 --> 这是一个div区域1 这是一个div区域2 span区域1 span区域2 这是一个段落1

这是一个段落2

Nach dem Login kopieren 五、代码二

无标题文档 /*@import url(1.css); p{ background-color:#09F; color:#FFF; } .haha{ background-color:#FF3; color:#0C0; }*//*预定样式，实现动态的加载。.hehe{ background-color:#C93; color:#00F; }*//*#qq{通常ID的取值在页面中是唯一的，因为该属性除了给css使用，还可以被js使用。id通常都是为了去标示页面中一些特定区域使用的。 background-color:#000; color:#FFF; }*//*span b{关联选择器 选择器中的选择器 background-color:#09F; color:#FFF; }*//*组合选择器*//*.haha,p b{对多种选择器进行相同样式定义 background-color:#000; color:#C00; }*//*伪元素 超链接的状态。*//*未访问*/a:link{ background-color:#06F; color:#FFF; text-decoration:none; font-size:18px;}/*鼠标悬停*/a:hover{ background-color:#FFF; color:#F00; font-size:24px;}/*点击效果*/a:active{ background-color:#000; color:#FFF; font-size:36px;}/*访问后效果*/a:visited{ background-color:#FF9; color:#000; text-decoration:line-through;}p:first-letter{ font-size:36px; color:#F00;}p:hover{ background-color:#F00; color:#FFF;}input:focus{ background-color:#09F;}#qq{ float:left;}/*L V H A*/ 伪元素选择器演示 这是一个p 区域 1

这是一个p区域2

span 区域 1 span区域2 这是一个段落1

这是一个段落2

Nach dem Login kopieren