資訊專欄INFORMATION COLUMN
摘要：入門教程六分之三篇沒辦法，我直播教小伙伴入門，屬性講完，準(zhǔn)備說定位的時候，他們就喊停，不住了。。。選擇器表達(dá)式如下相關(guān)效果見表達(dá)式關(guān)鍵詞特性屬性屬性即樣式定制的具體樣式，比如定制寬高，分別為與等。
CSS 入門教程六分之三篇
沒辦法，我直播教小伙伴CSS入門，屬性講完，準(zhǔn)備說定位的時候，他們就喊停，hold不住了。。。所以先寫到六分之三，23333333
| 要點(diǎn) | 解釋 |
|---|---|
| 引用 | 如何使用定義的CSS樣式方式 |
| 選擇器 | 指明被定義樣式的標(biāo)簽 |
| 屬性 | 樣式定義時具體定義的內(nèi)容 |
| 定位 | 如何將標(biāo)簽放置到具體的位置（下篇） |
| 盒模型 | 面試經(jīng)典題（下篇） |
| 顯示 | 如何顯示標(biāo)簽與標(biāo)簽布局（下篇） |
內(nèi)聯(lián)
開標(biāo)簽或自閉合標(biāo)簽的style屬性上寫明對應(yīng)的CSS定義內(nèi)容，即為內(nèi)聯(lián)方式引用，如下：
普通內(nèi)容
相關(guān)效果見：CodePen
內(nèi)部標(biāo)簽
定義在head標(biāo)簽下的style標(biāo)簽內(nèi)容，即為內(nèi)部標(biāo)簽方式引用，如下：
普通內(nèi)容
相關(guān)效果見：CodePen
外部鏈接
定義在head標(biāo)簽下的link標(biāo)簽屬性，即為外部鏈接方式引用，如下：
any.css內(nèi)容如下：
#out-link {
color: blue;
}
對應(yīng)適用標(biāo)簽如下：
普通內(nèi)容
相關(guān)效果見：CodePen
以上為三種引用方法，不包括JS選擇器
id選擇器
唯一性，原則上通篇文件有且僅有一個id名稱，不可重復(fù)
任意標(biāo)簽的id屬性，其屬性值即為其唯一id，此id其他標(biāo)簽不可再用。
如：
xxx
CSS選擇器表達(dá)式如下：
#first-id {
}
表達(dá)式關(guān)鍵詞：#
class選擇器
任意標(biāo)簽的class屬性，其屬性值即為其class，此class與其他標(biāo)簽可共用，定義后所有同class標(biāo)簽一起生效。
如：
xxx
CSS選擇器表達(dá)式如下：
.first-class {
}
表達(dá)式關(guān)鍵詞： .
標(biāo)簽選擇器
任意標(biāo)簽的標(biāo)簽名本身就是其選擇器，由于標(biāo)簽的可復(fù)用性，所以使用標(biāo)簽選擇器即為對所有同標(biāo)簽生效。
CSS選擇器表達(dá)式如下：
div {
}
表達(dá)式關(guān)鍵詞：無
偽類
偽類不算是選擇器，但是因?yàn)楠?dú)特，這里拎出來說一下
在選擇器選中的基礎(chǔ)上，對該標(biāo)簽的某種特性時段定義相關(guān)CSS屬性，如hover（鼠標(biāo)覆蓋過程中），active（激活過程中）等等。
CSS選擇器表達(dá)式如下：
div:hover {
color: yellow;
}
相關(guān)效果見：CodePen
表達(dá)式關(guān)鍵詞：:特性屬性
屬性即CSS樣式定制的具體樣式，比如定制寬高，分別為width與height等。
相同的屬性在不同的定位于顯示中會有不同的表現(xiàn)，這里暫不表述過多，此處將屬性大致分為四類，如下：
可繼承屬性
普通標(biāo)簽可能存在子標(biāo)簽的情況，因此在給一個普通標(biāo)簽定義可繼承屬性時候，若子標(biāo)簽未定義覆蓋父級定義的屬性，則繼承父級屬性的值，如font標(biāo)簽。
如存在如下代碼關(guān)系：
我是父級標(biāo)簽我是子級標(biāo)簽我是孫子標(biāo)簽
定義CSS如下：
.father {
color: purple;
}
相關(guān)效果見：CodePen
不可繼承屬性
不可繼承性則比較好理解，就是只對自己生效。
如存在如下代碼關(guān)系：
我是父級標(biāo)簽我是子級標(biāo)簽我是孫子標(biāo)簽
定義CSS如下：
.father1 {
border: 1px solid red;
}
相關(guān)效果見：CodePen
與定位相關(guān)的屬性
定位下篇會說，這里只提一下主要相關(guān)屬性：
position（定位方式）
top（距離上方距離）
right（距離右邊距離）
bottom（距離下方距離）
left（距離左邊距離）
與顯示相關(guān)的屬性
顯示下篇會說，這里只提一下主要相關(guān)屬性：
display（顯示方式）
width（寬度）
height（高度）
flex（彈性）
其他flex相關(guān)
完整測試代碼CSS快速入門 選擇器(優(yōu)先級排序)
- id(標(biāo)記)
- class(類)
- :特性(偽類)
- 標(biāo)簽
屬性
選擇器 { 屬性A: 值A(chǔ); 屬性B: 值B; }
感謝閱讀，如果對你有任何幫助，深感榮幸。
如有問題，請留言。
如果覺得文章不錯，還請關(guān)注一下，謝謝
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116862.html
摘要：盒模型要點(diǎn)知識務(wù)必注意看，這可是前端面試必定會遇到的問題。盒模型的主要屬性，除繼承外有兩個值這里不再細(xì)說歷史原因，只說其作用。嚴(yán)格來說與標(biāo)簽大小無關(guān)，但是影響視覺上的位置。具象化需調(diào)試指出，如下其中的最外圈的黃色區(qū)域就是了。 盒模型要點(diǎn)知識 務(wù)必注意看，這可是前端面試 必定會遇到 的問題。 box-sizing 盒模型的主要CSS屬性，除繼承外有兩個值： content-box...
摘要：盒模型要點(diǎn)知識務(wù)必注意看，這可是前端面試必定會遇到的問題。盒模型的主要屬性，除繼承外有兩個值這里不再細(xì)說歷史原因，只說其作用。嚴(yán)格來說與標(biāo)簽大小無關(guān)，但是影響視覺上的位置。具象化需調(diào)試指出，如下其中的最外圈的黃色區(qū)域就是了。 盒模型要點(diǎn)知識 務(wù)必注意看，這可是前端面試 必定會遇到 的問題。 box-sizing 盒模型的主要CSS屬性，除繼承外有兩個值： content-box...
摘要：內(nèi)部樣式表內(nèi)部樣式表一般寫在頭部，在標(biāo)簽內(nèi)用標(biāo)簽括起來。外部樣式表外部樣式表是單獨(dú)將樣式寫到一個文件中，并在頭部引用。使用外部樣式表時要注意如果出現(xiàn)多重樣式時樣式覆蓋帶來的問題。CSS 引入共有三種方式：內(nèi)部樣式表，內(nèi)聯(lián)樣式（行內(nèi)樣式）表，外部樣式表，當(dāng)然也可以使用多重樣式 內(nèi)聯(lián)樣式 內(nèi)聯(lián)樣式表 內(nèi)聯(lián)樣式 直接把樣式卸載html代碼行內(nèi)，一般僅僅在此樣式僅僅只在當(dāng)前元素上應(yīng)用時使用，其他...
閱讀 3116·2021-10-12 10:12
閱讀 5607·2021-09-26 10:20
閱讀 1578·2021-07-26 23:38
閱讀 2868·2019-08-30 15:54
閱讀 1703·2019-08-30 13:45
閱讀 2010·2019-08-30 11:23
閱讀 3160·2019-08-29 13:49
閱讀 931·2019-08-26 18:23
