css

CSS (層疊樣式表)

作用：用于對HTML頁面進行系統的樣式外觀修飾

基本文法：

選擇器{屬性1：值；屬性2：值.....}

Css設計在頁面的<Style>标簽中進行，以外接的方式進行樣式的渲染

對指定标簽通過自身的style屬性進行樣式設計

通過引入外部.css檔案的方式，進行樣式設計，通常使用的标記為link

外接樣式的作用範圍：目前頁面的所有标記

内接樣式的作用範圍：特定标簽元素本身

外鍊樣式作用範圍：所有引入此資源的頁面樣式都可以通過外鍊樣式表進行設計。

（1）内接樣式優先于外接和外鍊

（2）外接樣式和外鍊樣式，後編寫（後引入的）資源覆寫先編寫（先引入）的資源

多個頁面統一風格，引入外鍊樣式統一設定，有一個頁面的部分樣式差別于其他頁面，在該頁面引入外鍊樣式的下面編寫外接樣式，批量調整，有個别樣式需要調整，但單獨使用内接樣式進行設定。

本質可以了解為“作用範圍”

常用的第選擇器：

使用#進行選擇

Id與name都可以定位元素，差別在于id屬性全局唯一，name屬性可以重複

使用class屬性進行選擇 ，使用方式為.classname；

Class選擇器可以累加，搭配組合使用

使用标簽名字進行選擇

Hhml5與css3可以使用自定義屬性與預設屬性

#id>.類選擇器（屬性選擇器）>标記選擇器

層疊選擇器：在指定的範圍内進行進一步篩選

（1）父标記（選擇器） 子标記（選擇器）：父标記下的直接或間接子标記都在選擇範圍内

（2）父标記（選擇器）>子标記（選擇器）：父标記下的直接子标記進入選擇範圍

多層嵌套選擇器優先級看最左側（第一層父标記）的優先級

通過超級連結的href的屬性值為目前頁面元件的id值，以#指定id值，進行設定，點選超鍊後，讓指定id的元件擷取焦點進行頁面顯示。

常用樣式及屬性詳見表格：

當元素設定float屬性為left或right時，元素本身将脫離文檔層（預設布局方式），以類似漂浮的效果向左側或右側移動，直到碰到父節點邊框或另外一個浮動的元素為止

高度塌陷

在外部元素未設定height屬性的前提下，外部div的高度是彈性變化的，當内部元素設定為float值非none時，外部元素的height不再随着内部元素彈性變化，稱為外部元素的高度塌陷

可以設定外部元素overflow=auto 來解決

display屬性：設定元素的布局方式

block阻塞，與width視覺效果無關，元素前後帶有換行符

inline：元素現實為内聯元素

元素本身緊貼内部元素之上，width、height無效

當元素内部尺寸很大時，自動溢出，但inline不會彈性變化

常見的inline标簽：lable、span

inline-block：不阻塞、并且width、height有效，彈性高度，有預設間距

常見元素包括button、input等

none：元素隐藏不顯示，注意和visbility的比較

position：定位控制，強調三維層次

元素不加設定，position預設為static，可以了解為處于第0曾

元素設定position為absolute、relative時，元素脫離第0曾

元素在position屬性不為static的前提下，通過z-index可以進行層次設定

元素在position屬性部位static的前提下，通過left、top等屬性設定元素的x軸y軸偏移量

當元素的position值不是static時，它的位置父節點和結構父節點可以不一緻 元素的結構父節點如果也設定position為非static，此時二者一緻，否則元素的位置父節點上移至其父節點直接或間接存在非static的節點