CSS-Implementierung und -Selektor

Inhalt dieser Lektion:

1. Vier Möglichkeiten zur Implementierung von CSS

1, in jedem HTML--Tag Da ist ein Stilattribut 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-DateiImport

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

/css“>@import url(“1 .css“);

4. Verknüpfen Sie eine CSS-Datei über das Link-Tag im HTML-Header-Tag

rel=“stylesheet“ href=“1.css“ media Attribut ist optional, Standardgerätebildschirm/>

Tipp: Um die Wiederverwendbarkeit und Skalierbarkeit von Stilen zu verbessern, definieren Sie mehrere Stile separat und kombinieren Sie sie. Kapseln Sie sie in CSS-Dateien wie p.css, div.css. .. Verwenden Sie in einer allgemeinen CSS-Datei den Import, um diese CSS-Dateien zu importieren, und verwenden Sie dann das Link-Tag auf der HTML-Seite, um die allgemeine CSS-Datei zu importieren.

Priorität: Proximity-Prinzip Das für das Tag festgelegte Stilattribut kann andere Stile überschreiben

Selektor:

1 Name ist ein Selektor

2. Klassenselektor: Geben Sie das Klassenattribut im Tag an. Verwenden Sie className

, wenn Sie auf js verweisen Die Tag-Attribute sollten so eindeutig wie möglich sein, um JavaScript das Abrufen von Elementen zu erleichtern.

4. Erweiterungsselektor:

a. Tag im Tag

Tabelle div darstellt die Tabelle im Tabellen-Div-Bereich

Kombination

Selektor: mehrere durch Kommas getrennte Selektoren

c Status eines Hyperlinks, Klickstatus, Hover-Status usw. a:link a:besucht a:hover a:aktive LVHA-Bestellung

Löschen Sie die Standardunterstreichung des Hyperlinks: Textdekoration : keine :first-letter p:first-line focus: IE6 unterstützt nicht

CSS-Filter: durch einige Codes angereicherte Stile

Beim Entwerfen von Webseiten

DIV+CSS

Sowohl DIV- als auch P-Tags sind Bereiche auf Zeilenebene mit Wagenrücklaufeffekten.

Sie können Attribute hinzufügen B. Rand und Farbe. Betten Sie sie nicht in P-Tags ein

4. Code 1

五、代码二

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><!--link rel="stylesheet" href="1.css?1.1.11" type="text/css" /--><style type="text/css">/*@import url(1.css);

div{
        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,div 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;}div:hover{background-color:#F00;color:#FFF;}input:focus{background-color:#09F;}#qq{float:left;}/*L  V  H  A*/</style></head><body><input type="text" /><input type="text" /><hr /><a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a><hr /><!--css和html相结合的第一种方式。
    1，每一个html标签中都有一个style样式属性。该属性的值就是css代码。 
    2，使用style标签的方式。 一般都定义在head标签中
    
    
    优先级：标签选择器<类选择器<id选择器<style属性    --><div id="qq">这是一个div<b>区域</b>1</div><div class="haha" id="qq">这是一个div区域2</div><span>span<b>区域</b>1</span><span class="haha">span区域2</span><p>这是一个段落1</p><p class="haha">这是一个段落2</p></body></html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonVier Möglichkeiten zur Implementierung von CSS und Einführung in Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!