![Attribute Selectors
[Attribute] 套用所有擁有attribute的element
a[Attribute] 只套用所有擁有attribute的a
[Attribute=value] 套用所有擁有attribute的值為value
[title~=value] :
~= 使用空格分隔比對，區分大小寫
Title = “Value”
Title=“value 123”
Title=“value123”
X
O
X
[lang|=value]
|= 使用-連接值，區分大小寫
Lang = “value”
Lang = “value-us”
Lang = “-value”
O
O
X](https://image.slidesharecdn.com/css-advance-131021010529-phpapp01/85/Css-advance-10-320.jpg)
Css advance
- 1. CSS-Advance
- 2. 大綱 Box Model Grouping and Nesting Selectors Display and Visibility Positioning Horizontal Align Pseudo - Classes/Elements Navigation Bar Attribute Selectors
- 3. Box Model Margin Border Padding Content : width 、 Height
- 4. Grouping and Nesting Selectors Grouping Selectors: 使用,將多個selectors 合在一起，用於表達相同 的樣式 p , a { color: blue;} Nesting Selectors: 使用空白將階層性的selectors合在一起，用於表 達HTML Element巢狀結構的樣式 .marked class p a {color: green;} 為 marked ，且內容包含 p element，且p element 中包含 element a 的樣式字型顏色為綠 色
- 5. Display Display : none Inline block Visibility : hidden visible Different : Visibility: 即使隱藏了但是仍占版面空間 Display: 隱藏了之後不佔版面空間 Display Note: Changing the display type of an element changes only how the element is displayed, NOT what kind of element it is. For example: An inline element set to display:block is not allowed to have a block element nested inside of it.
- 6. Positioning Position: Static : default ， normal flow Fixed : 固定於設定的位置即使捲動視窗也不改變， remove normal flow Relative : 相對於正常位置的定位，normal flow Absolute : 絕對定位參考的基準點為其上一個not static父元素， remove normal flow z-index: 1 Cursor: move 、 pointer … 用來表示當element重疊時，所需要的優先順序 定義鼠標的樣式 Overflow: visible 、 hidden 、scroll 定義當content超過element 設定box ，顯示的樣式
- 7. Horizontal Align Block elements <h1> <p> <div> 透過設定margin: auto 將element置中 透過設定margin-left: auto 將element設定 緊貼右方邊界 透過設定margin-right: auto 將element設定 緊貼左方邊界 以上在width為100%的情況下，沒有效果
- 8. Pseudo - Classes/Elements :link – a:link :visited – a:visited :hover – a:hover :active - a:active :focus – input:focus - 選到被focus的input :first-letter – p:first-letter - 選到所有p的第一字 :first-line – p:first-line – 選到所有p的第一行 :first-child – p:first-child – 選到所有，父親中的第一個p :before – p:before - 在所有p之前插入內容 :after - p:after – 在所有p之後插入內容 :lang(it) – p:lang(it) – 選到所有擁有lang屬性為it的p
- 9. Navigation Bar Navigation Bar = List of Links 使用無序列表在li中加入a的element 使用 list-style-type : none; 將圖示移除 將margin、padding設為0 垂直 Navigation Bar 設定Block 讓區塊都可以click 設定a { display : block; width: 60px } 設定width 可點及的範圍 水平Navigation Bar 設定li{ float :left;} a{ display: block; width: 60px; } 設定float讓每一個li比鄰排列
- 10. Attribute Selectors [Attribute] 套用所有擁有attribute的element a[Attribute] 只套用所有擁有attribute的a [Attribute=value] 套用所有擁有attribute的值為value [title~=value] : ~= 使用空格分隔比對，區分大小寫 Title = “Value” Title=“value 123” Title=“value123” X O X [lang|=value] |= 使用-連接值，區分大小寫 Lang = “value” Lang = “value-us” Lang = “-value” O O X