CSS 層疊樣式表（表示層）
一、CSS引入方式
1.CSS行內(nèi)樣式
直接使用style屬性
style=”width:100px;height:100px;background-color:#f00;”
2.內(nèi)嵌樣式
<style></style>
3.外鏈?zhǔn)?/p>
將CSS寫入單獨(dú)的一個(gè)文件，文件擴(kuò)展名為“.css”
eg:<link type="text/css" rel="stylesheet" href=“sy.css" />
4.導(dǎo)入樣式
使用@import指令將CSS文件中的CSS樣式導(dǎo)入不同地方
?。?！必須寫在<style></style>里的第一行。
?。?！優(yōu)先級高低：誰離標(biāo)簽近，誰的優(yōu)先級最高。
二、CSS語法規(guī)則
1.類型選擇器
語法：標(biāo)簽{規(guī)則}? eg：td{color：#f00;}
2.通配選擇器
*規(guī)則? eg：*{font-family:”宋體”}
3.ID選擇器
語法：#id{規(guī)則}
4.類選擇器
.classname{規(guī)則}? eg：ul.con //類名叫con的ul
5.包含選擇器
父元素? 子元素{? }? 此時(shí)的子元素可能是父元素的直接子元素 也可能是子元素的子元素
eg：div? .box{ }? div下方 所有類名叫box的元素
選擇直接子元素? 父元素>子元素{? }
三、CSS中單位
px像素
em字大小的倍數(shù)
四、CSS顏色表達(dá)方式
1.直接使用顏色的英文單詞
使用三色數(shù)值? rgb（120,222,100）//數(shù)值在0-255之間
r：red? g：green b：blue
2.使用三色百分比
rgb（10%，20%，100%）
rgba(數(shù)值1，數(shù)值2，數(shù)值3，透明度)? 透明度取值范圍0-1?
3.使用三色數(shù)值的十六進(jìn)制
eg：#0000ff
五、字體樣式
1.font-family：可以指定多個(gè)字體，不同字體間用“，”隔開
2.font-size：字體大小
單位 px 、 em? ? ? ? eg：font-size:30px;
3.font-style：字體傾斜效果
normal? ? 正常（默認(rèn)）
oblique? 傾斜體
italic? ? 斜體
4.font-weight? 字體加粗
值：
normal? ? 正常（默認(rèn)）
bold? ? ? 粗體
bolder? ? 加粗體
lighter? 細(xì)體
100-900? 數(shù)字越大 字體越粗?
5.text-transform? 字體英文大小寫轉(zhuǎn)換
值：
uppercase? 全大寫
lowercase? 全小寫
capitalize? 首字母大寫
6.text-decoration? ? 字體的修飾
值：
none? ? ? ? 去除下劃線
underline? 增加下劃線
line-through? 中劃線（刪除線）
overline? ? ? 上劃線
7.text-align? 文本水平對齊方式
值：
left? ? ? 左對齊
center? ? 居中對齊
right? ? 右對齊
justify? 兩端對齊（一般常用與英文）
8.line-height? ? 行高
文字在一行內(nèi)垂直居中? line-height:height的值
9.vertical-align? ? 垂直居中
行內(nèi)塊級元素與行內(nèi)元素或文本的垂直對齊
值：
baseline
top
middle
bottom
10.overflow? 內(nèi)容溢出處理
值：
visible? ? ? 超出部分 可見
hidden? ? ? ? 超出部分 隱藏
scroll? ? ? ? 出現(xiàn)滾動(dòng)條
auto? ? ? ? ? 瀏覽器自動(dòng)處理
11.text-overflow? 文本溢出處理
值：
clip? ? ? ? ? 超出部分? 剪切
ellipsis? ? ? 超出部分 顯示省略號
12.white-space? 空白處理
值：
normal?
pre? ? ? ? ? 保留空格
nowrap? ? ? ? 不換行? =====》<nobr>強(qiáng)制不換行</nobr>
13.text-indent? 文本縮進(jìn)
值：正負(fù)都可以
14.letter-spacing? ? 字母與字母之間的間距/中文的字與字之間的間距
值：正負(fù)都可以
15.word-spacing? ? 單詞與單詞之間的間距（英文）
六、權(quán)重
通配符選擇器? 權(quán)重 0.5
標(biāo)簽選擇器? ? 權(quán)重 1
類選擇器? ? ? 權(quán)重 10
id選擇器? ? ? 權(quán)重 100
行內(nèi)樣式? ? ? 權(quán)重 1000
樣式里的值后面? !important? 權(quán)重最大
包含選擇? 權(quán)重相加
誰的權(quán)重大? 誰的樣式起作用
七、盒子模型
1.padding? 內(nèi)邊距（內(nèi)補(bǔ)丁）
padding-top/padding-right/padding-bottom/padding-left
padding:100px;代表上下左右都為100px;
padding:100px 50px;代表上下100px，左右500px；
padding:100px 50px 20px;代表上100 左右50 下20；
padding:100px 30px 20px 50px;代表上 100 右30 下20 左50（順時(shí)針方向）
2.border? 邊框
border-width 寬度
border-color 顏色
border-style 樣式（1.Solid 實(shí)心 2.dotted 圓點(diǎn) 3.dashed 虛線 4.double雙實(shí)線）
eg:border:2px solid red;
邊框的小應(yīng)用：
小三角：
width:0;
border:10px solid transparent;
border-top-color:red;
3.a元素的偽類
? a:link{}? 未訪問狀態(tài)
? a:visited{}? 訪問過后的狀態(tài)
? a:hover{}? ? ? 鼠標(biāo)懸停時(shí)的狀態(tài)
? a:active{}? ? 激活時(shí)的狀態(tài)
4.元素之間的轉(zhuǎn)換
<1>任何元素轉(zhuǎn)換為塊級元素 display:block;
<2>任何元素轉(zhuǎn)換為行內(nèi)塊級元素 display:inline-block;
<3>任何元素轉(zhuǎn)換為行內(nèi)元素 dispaly:inline;
<4>任何元素消失不見 display:none;
5.盒子模型外邊距
上下兩個(gè)盒子距離
? ? ? ? ? margin-bottom=50px
? ? ? ? ? Margin-bottom=100px
則兩個(gè)盒子之間距離是100px（以大的為準(zhǔn)）
兩個(gè)盒子都有margin-top，以數(shù)值大的為準(zhǔn)。
margin:0 auto;? 可以實(shí)現(xiàn)塊居中
6.背景
<1>背景顏色 background-color:4種顏色表達(dá)方式
<2>背景圖片 background:url(“image”)
<3>背景平鋪
repeat 圖片平鋪 重復(fù)(默認(rèn))
repeat-x 水平平鋪
repeat-y 垂直平鋪
no-repeat 不平鋪
<4>background-position 定義背景圖片位置
值：
表示位置的英文單詞? left right center top bottom
百分比
具體有單位的數(shù)值
left top? ====> 0 0? 左上角
center top =====>50% 0? 頂部中間
right top =====>100% 0? 右上角
left center ====>0? 50%? 左中
center center=====>50% 50%? 正中間
right center====>100%? 50%? 右中
left bottom=====>0? 100%? 左下角
center bottom====>50% 100%? 下中
right bottom===>100% 100%? ? 右下角
<5> background-size背景圖片的大小
值:
百分比
數(shù)值+單位
cover? 等比例擴(kuò)展圖片至足夠大 （圖片可能被裁減）
contain? 等比例擴(kuò)展圖片至足夠大（圖片可以完整顯示，可能會(huì)引起區(qū)域內(nèi)空白）
<6>? background-attachment 背景圖片是否固定
值:
scroll? 背景圖片會(huì)隨著正常的文檔流滾動(dòng)（默認(rèn)）
fixed? 背景圖片固定不動(dòng) 不會(huì)隨正常的文檔滾動(dòng)
簡寫：background:background-color background-image? background-repeat? background-position;
background:背景顏色? url(圖片路徑) 是否重鋪? 背景圖片的位置;
eg:background:#fff? url(img/1.jpg) no-repeat? center? center;
八、浮動(dòng)
float:
值:
left? ? 左浮動(dòng)
right? ? 右浮動(dòng)
none? ? 不浮動(dòng)
任何元素加了浮動(dòng)后（left,right）,變成了塊級元素
清除浮動(dòng)的方法：
1.給父元素加height
2.給父元素加overflow:hidden
3.在浮動(dòng)元素后面加一個(gè)空的塊級元素 給它加樣式 clear:both? clear(left清除左浮動(dòng) right清除右浮動(dòng)? both清除左右浮動(dòng)）
? a.給父元素加偽類 :after?
父元素:after{
content:"";
display:block;
clear:left;
}
九、定位
position定位：
值：
static? ? 不定位（默認(rèn)? 正常文檔流）
relative? 相對定位? （相對于自身）
absolute? 絕對定位?
1.有定位的元素的外面包著它的元素（可能是直接元素，也可能是間接元素）有定位，相對于有定位的那個(gè)元素定位
2.有定位的元素的外面包著它的元素沒有定位，相對于瀏覽器定位
fixed? 固定定位 （相對于瀏覽器定位）
多個(gè)定位元素的覆蓋次序 通過z-index來判斷? z-index的值是一個(gè)沒有單位的數(shù)值
誰的z-index的值越大，誰就在最上層
補(bǔ)充：定位時(shí)使居中的方法
<1>left:0;? right:0;? top:0;? bottom:0;? margin:0 auto;
<2>width:100px;
? height:100px;
? position:absolute;
? left:50%;
? top:50%;
? transform:translate:(-50%,-50%);
<3>width:100px;
? height:100px;
? position:absolute;
? left:50%;
? top:50%;
margin-left:-50px;
margin-top:-50px;
十、列表樣式
1.list-style-type? 列表樣式類型
值：
disc? 實(shí)心原點(diǎn)
none? 去掉樣式
circle? 空心圓
square? 實(shí)心方形
2.list-style-image? 列表樣式圖片
值：
url(圖片路徑)
3.list-style-position? 列表樣式的位置
值：
outside? 列表樣式在內(nèi)容的外面
inside? ? 使列表樣式在內(nèi)容再里面
十一、幾類隱藏
1.display ：none? 元素在頁面不顯示? 位置也不見了
2.visibility:hidden? 元素在頁面不顯示? 位置還在
3.opacity:0? ? ? ? 元素在頁面看不見? ? 位置還在
4.z-index ： -999999? 元素在頁面也看不見
十二、鼠標(biāo)的幾種樣式
cursor 光標(biāo)
值：
pointer? 小手樣式
wait? ? 等待
help? ? 幫助
url(圖片路徑),auto? 光標(biāo)變成所需要的小圖片
