一、複習 二、綜合選擇器 三、繼承 四、塊級元素和行內元素 div 塊級元素 span 行內元素 塊級元素和行內元素的區別: 1. 行內元素部不能夠設置寬度和高度。行內元素的寬度和高度是標簽內同的寬度和高度。塊級元素可以設置寬度和高度 2. 塊級元素會單獨占一行。而行內元素卻不能夠獨占一行,只能和其 ...
一、複習
- 什麼是CSS?
層疊樣式表 -層疊樣式只會被覆蓋而不會被替代 - CSS的使用方式
style屬性---> <h1 style="css屬性"></h1>
sytle標簽---> head標簽裡面
link---><link rel="stylesheet" href="style.css"> - 基礎選擇器
html標簽選擇器 通過html標簽名來選擇元素
①所有的html標簽都可以當做選擇器
②無論標簽藏多深都會被選中
③選擇的是所有的標簽而不是具體某個標簽。所以說我們通過html標簽選擇器來設置的都是一些共性問題
id選擇器
①任何的標簽都可以用id屬性和屬性值(因為id是一個全局屬性)。id命名不能隨意的命名。大小寫敏感,id的名字中可以有數字字母下劃線,但是要以字母開頭。
駝峰命名法 小駝峰命名法 大駝峰命名
testHeader小駝峰TestHeader大駝峰 ②但是id名不能夠重覆
class選擇器
①任何的標簽都可以使用class屬性(class屬性也是一個全局屬性)
②class屬性名可以重覆使用
③一個class屬性中,可以有多個class屬性值。
二、綜合選擇器
- 後代選擇器 div p
- 交集選擇器 div.dl
- 並集選擇器 div,p
- 子元素選擇器 div>p
- 序列選擇器 ul li:first-child ul:li:last-child
- 相鄰兄弟選擇器 div + p
- 普通兄弟選擇器 div ~ p
三、繼承
- 繼承:父元素的某些css屬性會被子元素無條件的繼承過去。關於文字的css屬性都可以進行繼承:color text- line-font-
- 層疊
層疊解決的是css衝突的問題
比較權重來解決層疊問題
!important能夠把"單獨屬性"的權重變為無限大。儘量少用。
四、塊級元素和行內元素
div 塊級元素
span 行內元素
塊級元素和行內元素的區別: 1. 行內元素部不能夠設置寬度和高度。行內元素的寬度和高度是標簽內同的寬度和高度。塊級元素可以設置寬度和高度 2. 塊級元素會單獨占一行。而行內元素卻不能夠獨占一行,只能和其他行內元素共用一行。 3. 如果塊級元素不設置寬度,那麼塊級元素會自動的占滿父元素的全部寬度。