[TOC]
一、CSS格式
選擇器{
屬性名:屬性值;
屬性名:屬性值;
}
選擇器負(fù)責(zé)圈定范圍，要修改的元素集合，花括號(hào)內(nèi)的聲明由屬性名和屬性值組成(key:value)的形式，用于設(shè)定具體樣式
二、CSS三種引入方式
1.行間式
<p style="color:red;"</p>
2.內(nèi)聯(lián)式
<style>
p {
color:red
}
</style>
3.外聯(lián)式
p {
width: 100px;
height: 100px;
background-color: red;
}
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
三種引入方式對(duì)比
<!-- 行間式 -->
<!-- 1.在標(biāo)簽頭部的style屬性?xún)?nèi) -->
<!-- 2.屬性值滿(mǎn)足的是css語(yǔ)法 -->
<!-- 3.屬性值用key：value新式賦值，value具有單位 -->
<!-- 4.屬性值之間用；隔開(kāi) -->
<!-- 內(nèi)聯(lián)式 -->
<!-- 1.在style標(biāo)簽內(nèi)（style標(biāo)簽一般作為head的子標(biāo)簽） -->
<!-- 2.屬性值滿(mǎn)足的是css語(yǔ)法 -->
<!-- 3.屬性值用key：value新式賦值，value具有單位 -->
<!-- 4.屬性值之間用；隔開(kāi)（一般獨(dú)行分開(kāi)賦值） -->
<!-- 5.格式：選擇器{樣式塊} -->
<!-- 外聯(lián)式 -->
<!-- 1.在外部css文件中 -->
<!-- 2.屬性值滿(mǎn)足的是css語(yǔ)法 -->
<!-- 3.屬性值用key：value新式賦值，value具有單位 -->
<!-- 4.屬性值之間用；隔開(kāi) -->
<!-- 5.格式：選擇器{樣式塊} -->
<!-- 6.將html與css文件建立聯(lián)系：html通過(guò)link標(biāo)簽鏈接外部css（一般在head里面） -->
三種引入方式的優(yōu)先級(jí)
注：三種方式間沒(méi)有優(yōu)先級(jí)
<!-- 1.三種方式協(xié)同布局： -->
<!-- 2.不重復(fù)的屬性一定為唯一位置的唯一值 -->
<!-- 3.重復(fù)的屬性采用覆蓋賦值，保留最后位置的屬性值 -->
<!-- 4.行間式一定是邏輯上最后被解析的位置（js正常操作的就是行間式） -->
<!-- !important 會(huì)影響優(yōu)先級(jí) -->
補(bǔ)：CSS的注釋?zhuān)?/h3>
/*注釋內(nèi)容*/
三、CSS的長(zhǎng)度單位和顏色單位
1.CSS基本長(zhǎng)度單位
- px像素，屏幕上顯示的最小單位，用于網(wǎng)頁(yè)設(shè)計(jì)
- mm毫米
- cm厘米
- in英寸
- pt點(diǎn) 1pt=72in，用于印刷業(yè)
- em相當(dāng)長(zhǎng)度，一般1em=16px，用于流式布局
- 50vw==>%50 view width 當(dāng)前瀏覽器能顯示界面的一半
2.CSS基本顏色單位
- colorName顏色名方式 red
- rgb十進(jìn)制方式 rgb(255,0,0)或rgb(100%,0,0),每?jī)晌淮硪环N顏色，分別代表Red、Green、Blue，可以簡(jiǎn)寫(xiě)成#abc
- rgba此方式僅僅是為rgb方式加上了Alpha(不透明度)，不透明度范圍為[0-1]
- hsl()工業(yè)界的顏色標(biāo)準(zhǔn),H(色相)S(飽和度)L(明度),第一個(gè)參數(shù)為0-360，后兩個(gè)為百分比.
四、CSS選擇器(基礎(chǔ))
1.通配選擇器
/*注釋內(nèi)容*/
通配選擇器(*)：匹配所有(html,body,body中的所有子標(biāo)簽(具有顯示效果的標(biāo)簽)
*{
border: solid;
}
2.標(biāo)簽選擇器
標(biāo)簽選擇器(標(biāo)簽名)：匹配指定標(biāo)簽名的對(duì)應(yīng)所有標(biāo)簽
div{
width: 100px;
height: 100px;
background-color: red;
}
3.類(lèi)選擇器
類(lèi)選擇器(.)：匹配指定類(lèi)名對(duì)應(yīng)的所有標(biāo)簽
.dd{
font-size: 50px;
}
<div class="dd">d_1</div>
4.id選擇器
id選擇器(#)：匹配指定id名對(duì)應(yīng)的唯一標(biāo)簽
#ele{
color: blue;
}
==總結(jié)==
1.通配選擇器一般用于整體reset操作（清除系統(tǒng)自定義樣式）
*{
margin: 0;
}
2.標(biāo)簽與id選擇器運(yùn)用場(chǎng)景并不多，一般不提倡采用id選擇器進(jìn)行布局
3.類(lèi)選擇器為布局首選(建議基本全用class選擇器進(jìn)行布局)
基本選擇器優(yōu)先級(jí):id>class>標(biāo)簽>通配
五、CSS常用屬性和值
1.字體屬性
- font-family: 字體族科，多值用于備用，以,隔開(kāi)
font-family: "STSong", "Arial";
- font-size: 字體大小
- font-style: 字體風(fēng)格normal(普通，初始值) italic(斜體)oblique(傾斜)
- font-weight:字體重量 normal(普通)bold(加粗)lighter(細(xì))|100最細(xì)，900最粗
- font-height: 行高，行高設(shè)置大于等于字體大小，字體在行高中垂直居中顯示
- font: [weight | style] size family` 為復(fù)合屬性(推薦使用)
font:lighter italic 80mm "Calibri","微軟細(xì)黑"
注：空格隔開(kāi)多個(gè)值賦值，逗號(hào)隔開(kāi)為一個(gè)值多值賦值
2.文本屬性
- color 設(shè)置文字顏色
- text-align 水平居中方式(left center right)
- text-decoration 字劃線(xiàn)(下劃線(xiàn)：underline 中劃線(xiàn):line-through 上劃線(xiàn)：overline)
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
- letter-spacing：字間距
- word-spacing：詞間距
- vertical-align：垂直對(duì)齊方式(一般用于圖片和文字中間對(duì)齊)
baseline： 將支持valign特性的對(duì)象的內(nèi)容與基線(xiàn)對(duì)齊
sub： 垂直對(duì)齊文本的下標(biāo)
super： 垂直對(duì)齊文本的上標(biāo)
top： 將支持valign特性的對(duì)象的內(nèi)容與對(duì)象頂端對(duì)齊
text-top： 將支持valign特性的對(duì)象的文本與對(duì)象頂端對(duì)齊
middle： 將支持valign特性的對(duì)象的內(nèi)容與對(duì)象中部對(duì)齊
bottom： 將支持valign特性的對(duì)象的文本與對(duì)象底端對(duì)齊
text-bottom： 將支持valign特性的對(duì)象的文本與對(duì)象頂端對(duì)齊
<percentage>： 用百分比指定由基線(xiàn)算起的偏移量?？梢詾樨?fù)值?；€(xiàn)對(duì)于百分?jǐn)?shù)來(lái)說(shuō)就是0%。
<length>： 用長(zhǎng)度值指定由基線(xiàn)算起的偏移量?？梢詾樨?fù)值?；€(xiàn)對(duì)于數(shù)值來(lái)說(shuō)為0。（CSS2）
text-indent：首行縮進(jìn)
word-break-break規(guī)定自動(dòng)換行的處理方式
normal 使用瀏覽器默認(rèn)的換行規(guī)則。
break-all 允許在單詞內(nèi)換行。(遇到連體的英文，html將其解析為一個(gè)單詞)
keep-all 只能在半角空格或連字符處換行。
