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