Teilen Sie 18 Grundkonzepte in HTML

Drei CSS-Stile:

Funktion: Wird verwendet, um die Anzeige von HTML-Inhalten im Browser-Stil zu definieren

Der Text hier ist rot

Der CSS-Stil folgt einem wichtigen Prinzip – dem Proximity-Prinzip (aber die Größe des Gewichts muss beurteilt werden)

<link herf="   .css" rel="stylesheet" type="text/css"/>

z. B.:

7 🎜>

<span>胆小如鼠</span>
<span class="stress">胆小如鼠</stress>
.stress{color:red;}

(1) Der ID-Selektor kann nur einmal im Dokument verwendet werden, und der Klassenselektor kann mehrmals verwendet werden

(2) Die Unterlistenmethode des Klassenselektors kann sein Wird für ein Element verwendet. Legen Sie mehrere Stile gleichzeitig fest. ID-Selektoren funktionieren nicht.

Beispiel:

9 .Untergeordneter Selektor

.stress{color:red;}
.size{font-size:25px;}
<p>到了<span class="stress size">三年级</span>下学期。。。</p>

z. B.:

Fügen Sie dem li-Element der Klasse aa einen 1 Pixel großen roten festen Rahmen hinzu

10. Der Nachkommenselektor

.aa > li {border:1px solid red;}

11. Der Unterschied zwischen untergeordneten Selektoren und Nachkommenselektoren:

.first span {color:red;}
<p class="first">.......<span>胆小如鼠</span></p>

(2 ) Nachkommenselektor: alle Nachkommen - Leerzeichen

12. Universeller Selektor (*)

entspricht allen Tag-Elementen von HTML

h1,span{color:red;}

Gilt nicht nur auf ein bestimmtes HTML-Tag-Element, sondern auch auf dessen Nachkommen.

zB:

Als ich ein Kind war, war ich schüchtern wie eine Maus, und die Schriftarten waren alle in Rot, einschließlich der schüchternen Wörter. (Erbverhältnis)

p{color:red;}
<p>我小时候<span>胆小如鼠</span></p>

p , .Zuerst stimmen alle mit dem CSS-Attribut des p-Tags überein, und der Browser bestimmt anhand der Gewichtung, welcher CSS-Stil

p{color:red;}
.first{color:green;}
<p class="first">我小时候<span>胆小如鼠</span></p>

16. Wichtigkeit

代码                                                                                                      权值
p{color:red;}                                                                                             1
p span{ color:green;}                                                                             1+1=2
.warning{ color:white;}                                                                           10
p span .warning { color:purple;}                                                             1+1+10=12
#footer .note p { color:yellow;}                                                               100+10+1=111

Die Schriftart ist rot

p { color:red !important;}
p { color:green;}

Tag-Elemente in HTML werden im Allgemeinen in drei verschiedene Typen unterteilt:

( 1) Elemente auf Blockebene: – werden zum Aufbau des Frameworks verwendet

每个块级元素都从新的一行开始，并且其后的元素另起一行。（独占一行）

元素的高度，宽度，行高以及顶和底边距都可设置。

元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。

eg:

<p>   <p>   <h1>...<h6>   <ol>   <ul>   <dl>   <table>   <address>   <blockquote>   <form>

（2）内联元素：——修饰细节

自左向右排列，直到排不下自动换行。宽高无效，随内容而定。

eg:

<a>   <span>   <br>   <i>   <em>   <strong>   <label>   <q>   <var>   <cite>   <code>

（3）内联块级元素——,

和其他元素都在一行上

元素的高度、宽度、行高及顶和底边距都不可设置

18.

转换成块级元素：   a { display:block;}

转换成内联元素：   a { display:inline;}

转换成内联块级元素：   a { display:inline-block;}

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程

Das obige ist der detaillierte Inhalt vonTeilen Sie 18 Grundkonzepte in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!