-
內(nèi)部與內(nèi)聯(lián)樣式
內(nèi)部樣式：style屬性 <div style="background-color: aquamarine;">adfjk</div> 內(nèi)聯(lián)樣式：style標(biāo)簽 <style> #div2{ background-color: #000000; } </style> 外部樣式： <link rel="stylesheet" href="./common.css"> <style> @import url('./common.css'); //不推薦 </style> 內(nèi)部樣式和外部樣式優(yōu)先級相同，如果設(shè)置了相同樣式，那么后寫的引入方式優(yōu)先級高 單一樣式優(yōu)先級： style內(nèi)聯(lián)樣式 > id > class > tag > * > 繼承 權(quán)重：1000 100 10 1 標(biāo)簽類型劃分：布局一般用塊標(biāo)簽，修飾文本一般用內(nèi)聯(lián)標(biāo)簽 block:塊 獨占一行 支持所有樣式 不寫寬的時候，跟父元素的寬相同 所占區(qū)域是一個矩形 inline:內(nèi)聯(lián) a span img(是替換元素，支持寬高設(shè)置) 挨在一起 有些樣式不支持：width height margin padding 不寫寬的時候，寬度由內(nèi)容決定 所占區(qū)域不一定是矩形 內(nèi)聯(lián)標(biāo)簽之間會有空隙，產(chǎn)生原因：換行產(chǎn)生的 inline-block:內(nèi)聯(lián)塊 input 標(biāo)簽內(nèi)容劃分： !important: 提升樣式優(yōu)先級，不建議使用 標(biāo)簽+類 > 單一 div .box{ color:blue; } div{color:red;} 盒模型： content -> padding -> border -> margin 物品 填充物 包裝盒 盒子與盒子之間的間距 （width，height） 內(nèi)填充 背景顏色會填充到margin以內(nèi)的區(qū)域 文字會在content區(qū)域 padding不會出現(xiàn)負(fù)值，margin是可以出現(xiàn)負(fù)值 問題解決： 1） margin重疊 上下兩個元素這是margin會出現(xiàn)疊加的問題（只存在上下，不存在左右）,會取上下中值較大的作為疊加的值 解決方案： 1. bfc規(guī)范 2. 只給一個元素添加間距 2）margin傳遞 嵌套的結(jié)構(gòu)中，margin-top會有傳遞的問題 <div class="box1"> <div class="box2">段落</p> </div> .box2{margin-top: 100px;} box1和box2一塊往下移動 解決方案： 1）BFC規(guī)范 2）給父容器加邊框 3）margin換成padding 3）居中 margin-left:auto;//盒子會靠右顯示 margin-right:auto;//盒子會靠左顯示 margin:auto; //居中顯示 width height 不設(shè)置的時候，會自動計算容器的大小，節(jié)省代碼 4）span標(biāo)簽之間有空隙 解決方案： 父級元素加:font-size:0 span標(biāo)簽加：font-size:16px <style> div{font-size: 0;} span{font-size: 16px;} #content1{background-color: red;} #content2{background-color: blue;} </style> <div> <span id="content1">內(nèi)聯(lián)1內(nèi)聯(lián)1內(nèi)聯(lián)1內(nèi)聯(lián)1內(nèi)聯(lián)1內(nèi)聯(lián)1內(nèi)聯(lián)1內(nèi)聯(lián)1內(nèi)聯(lián)1內(nèi)聯(lián)1</span> <span id="content1">內(nèi)聯(lián)1</span> </div> -
顏色
單詞： red blue 十六進(jìn)制：#ffffff rgb： rgb(255,255,255) 拾色工具：fehelper ps -
背景樣式
background-color: #000000; background-image: url('./'); background-repeat: repeat-x; //平鋪方式 background-position: top bottom; //圖片位置 background-attachment: fixed; //背景圖隨滾動條的移動方式 fix容器滾動，背景圖不動 scroll:背景位置是按照當(dāng)前元素進(jìn)行偏移 fixed:背景位置是按照瀏覽器進(jìn)行偏移 background-image: url(./icon.png); width: 300px; height: 300px; background-repeat: no-repeat; background-position: -90px 10px; background-position: center center; background-position: 50% 50%; background-color: #000000; background-attachment: fixed; background: red url(./1.png) no-repeat center center; 復(fù)合會把單一覆蓋 先復(fù)合再單一 -
邊框樣式
border-style:solid dashed dotted boder-width boder-color: transparent border-left-style: -
字體
font-family: 華文彩云，'Times New Roman', Simsun, 微軟雅黑; //字體含有空格需要用引號
font-size: 16px; //不建議用奇數(shù) 數(shù)字|字母（medium等）
font-weight: normal|bold|number(100-500:nomal 600-900 bold);
font-style:italic|normal;
color:red;
復(fù)合寫法：
font:30px 宋體
至少要有 size family （有順序要求）
weight style size family
style weight size family
weight style size/line-height family
6. 文本修飾
text-transform:lowercase|uppercase|capitalize;
text-decoration: underline|overline|line-through|none;
7. 段落樣式
首行縮進(jìn)兩個漢字：
text-indent:36px; font-size:18px;
1em始終等于字體大小，此處1em=18px
text-indent:2em;
text-align:left|justify
8. 行高
line-height: 上邊距+字體+下邊距 （上邊距=下邊距）
line-height:32px|2; font-size:16px;
2此處指2倍行高
9. 文本間距
letter-spacing: 10px; 字之間的間距
worder-spacing:10px (英文才有效); 詞之間的間距
英文和數(shù)字不自動折行
word-break:break-all （強烈的折）
word-wrap:break-word （不強烈的折行，會出現(xiàn)空白問題, 長字符單詞會整個在下一行顯示）
9. 層次選擇器
M N: 后代（包括所有子孫后代）
M>N:父子（只是父子）
M~N：當(dāng)前標(biāo)簽下面的所有兄弟
div~h2{
color: red;
}
<div>div</div>
<p>p</p>
<h2>h2</h2>
<h2>h2</h2>
<h2>h2</h2>
M+N：相鄰(只會找當(dāng)前標(biāo)簽下面相鄰的兄弟)
10. 屬性選擇器
```
1) M[attr]: 選擇所有帶有attr屬性元素
a[target]
{
background-color:yellow;
}
<a >w3cschool.cc</a>
<a target="_blank">disney.com</a>
<a target="_top">wikipedia.org</a>
2) M[attr=value]: 選擇所有使用target="-blank"的元素
a[target=_blank]
{
background-color:yellow;
}
3) M[attr*=value]: 選擇每一個src屬性的值包含子字符串"runoob"的元素a[src*="runoob"]
div[class*="test"]
{
background:#ffff00;
}
<div class="first_test">這是第一個 div 元素。</div>
<div class="test">這是第三個 div 元素。</div>
4)M[attr^=value]: a[src^="https"]選擇每一個src屬性的值以"https"開頭的元素
div[class^="test"]
{
background:#ffff00;
}
5) M[attr$=value]: 結(jié)尾
div[class$="test"]
{
background:#ffff00;
}
6) M[attr1][attr2]:
div[class][id]:div標(biāo)簽中含有這兩個屬性的標(biāo)簽
```
11. 偽類選擇器
```
M:偽類{}
a:link 訪問前
a:visited 訪問后
:hover 鼠標(biāo)移入
:active 鼠標(biāo)按下
如果四個偽類都生效，需要注意添加順序： L V H A
a{color:gray}
a:hover{color:red}
a:active
{
background-color:yellow;
}
div:hover{
background-color:yellow;
}
div:active{
background-color:yellow;
}
div:hover{
background-color:yellow;
}
```
12. :after :before
```
通過偽類的方式給元素添加文本內(nèi)容
清浮動 精靈圖標(biāo) 部分文字改變顏色 列表圖標(biāo)
用法：
https://www.cnblogs.com/liAnran/p/9714040.html
```
13. [:checked]
[:disabled]
[:focus]
```
input:checked
{
width:100px;
height:200px;
}
:checked
{
width:100px;
height:200px;
}
:focus{background:red;}
<form action="">
<input type="radio" checked="checked" value="male" name="gender" /> Male<br>
<input type="radio" value="female" name="gender" /> Female<br>
<input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
<input type="checkbox" value="Car" /> I have a car
</form>
```
14. 結(jié)構(gòu)類選擇器
```
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n) ： 從1開始
li:nth-of-type(n+2){ //n: 從0到無窮大
background-color: red;
}
li:last-of-type{
color:blue;
}
li:first-of-type{
color:rosybrown;
}
<ul>
<li>fdfjkj</li>
<li>fdfjkj</li>
<li>fdfjkj</li>
<li>fdfjkj</li>
<li>fdfjkj</li>
</ul>
li:only-of-type{
color:blue;
}
<ul>
<li>fdfjkj</li>
</ul>
:nth-child(n)
:first-child
:last-child
:only-child
li:first-child{
background-color: red;
}
```
15. 樣式繼承
```
文字相關(guān)的樣式可以被繼承
布局相關(guān)的樣式：默認(rèn)不會被繼承，但可以設(shè)置inherit屬性
div{border:1px solid red;}
p{border:inherit;}
<div>
<p>段落</p>
</div>
```
