ch1
樣式的寫法
-
<link rel="stylesheet" href="./style.css" type="text/css">外部鏈接樣式表,放在頭部 -
<style> @import "./style.css"</style>放在style容器內(nèi), 直接加載使用, 放在開頭 -
<style> h1{ color: red; }</style>直接使用
ch2
組合選擇器
-
p.waring{font-weight: bold}只有帶warning的p標(biāo)簽才生效 - ID選擇器是唯一的, 只能使用一次
- ID選擇器不能結(jié)合使用
- 屬性選擇器
h1[class] {color: red}, 所有含有class屬性的標(biāo)簽渲染成紅色
部分選擇器
-
[class^="j-icon"]選擇class屬性值以j-icon開頭的所以元素 -
[class*="j-icon"]選擇class屬性值中包含子串j-icon的所有元素
后代選擇器
-
h1 em{color: grey}選擇h1元素后代的任何em元素 -
h1> strong{color: red}選擇子元素
動(dòng)態(tài)偽類
-
input:foucs{background: silver;font-weight: bold}當(dāng)編輯input激活樣式 -
a:hover{font-size: 20px}鼠標(biāo)停留字體變大 -
<h2 style="color:red">Hello</h2>內(nèi)聯(lián)樣式優(yōu)先級(jí)最高
4 . 重要性聲明p{color: #333 !important}在同級(jí)別時(shí)會(huì)勝出
ch3
繼承
-
*{color: gray}通配選擇器適用于所有元素,而來(lái)有0特殊性,會(huì)優(yōu)先于繼承值(沒(méi)有特殊性)
ch4
要點(diǎn)
-
height和width不能應(yīng)用于行內(nèi)非替換元素 - 背景會(huì)延伸到內(nèi)邊距, 但不會(huì)延伸到外邊距
- 瀏覽器對(duì)許多元素提供預(yù)定的樣式, 外邊距也不例外
- 可以對(duì)元素的外邊距設(shè)置百分?jǐn)?shù),百分?jǐn)?shù)相對(duì)與父元素的
width計(jì)算(包括上下外邊距) -
邊距的簡(jiǎn)略寫法
51.34.png - 外邊距對(duì)
行內(nèi)(非替換)元素的行高沒(méi)有任何影響,改變行高的屬性只有line-height,font-size - 外邊距對(duì)
行內(nèi)(替換)元素的行高會(huì)產(chǎn)生影響 - 元素默認(rèn)沒(méi)有內(nèi)邊距
ch11
要點(diǎn)
- 表格單元的邊框類型
border-collapse, 可以選擇collapse或者separate
