一场躯。頁(yè)面引用css的方式
1.內(nèi)聯(lián)樣式
<h1 style="color:red;font-size:20px;"></h1>
2.內(nèi)部樣式
<style type="text/css">
hi{
color:red;
font-size:20px;
}
</style>
3.外部樣式
一種:<head>
<link rel="stylesheet" type="text/css" herf="index.css">
</head>
二種:
<style>
@import url("index.css");
@import "index.css";
</style>
二冯遂。文件路徑
“./”代表當(dāng)前所在文件夾下的
“../”代表上一級(jí)目錄
“/”一般放到服務(wù)下 代表域名下的某路徑 所以一般使用相對(duì)路徑
css: 頁(yè)面
文字相關(guān)
背景相關(guān)
布局相關(guān)
響應(yīng)相關(guān)
動(dòng)畫相關(guān)
變形相關(guān)
css:選擇器
1.基礎(chǔ)選擇器:“*”通用選擇器:匹配頁(yè)面所有元素
“ID”id選擇器 匹配頁(yè)面對(duì)應(yīng)的ID元素
“class”類選擇器匹配頁(yè)面對(duì)應(yīng)的class類下的元素
“element”標(biāo)簽選擇器
2.組合選擇器:‘E,F’并列選擇器
‘E F’后代選擇器 E下的所有F后代(子孫)
‘E>F’子元素選擇器 E下的直接后代(直限兒子)
#b+#c 是 #b 元素之后緊挨著#b的 #c
#b~#c 是 #b 元素之后同級(jí)的 #c
‘ef’e和f之間沒(méi)有空格,沒(méi)有任何符合 代表既有e又有f 例如"class='a active'" 一般用.a.active 中間無(wú)空格
3.屬性選擇器
偽類選擇器:用于向某些選擇器添加特殊的效果。
.child:first-child 匹配.child所對(duì)應(yīng)的父元素下第一個(gè)子元素
.child:first-of-type 匹配.child所對(duì)應(yīng)的父元素下同種類型的第一個(gè)子元素
.child:nfn-of-type(2) 同種類型下的第二個(gè)選擇器 一般2n代表偶數(shù)埠啃,2n+1代表奇數(shù)
偽元素選擇器:用于創(chuàng)建一些不在文檔樹的元素,并為其添加樣式
選擇器的優(yōu)先級(jí):
1.樣式后面加!important的 權(quán)重最高
2.style屬性也在標(biāo)簽里的內(nèi)聯(lián)樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
5.屬性選擇器
7.標(biāo)簽選擇器
8.通配符選擇器
9.瀏覽器自定義
合理的抽出一些通用樣式 ,但具體的某個(gè)區(qū)域加樣式要去針對(duì)某個(gè)選擇器去寫
在CSS中趴荸,如果對(duì)于相同元素有針對(duì)不同條件的定義,宜將最一般的條件放在最上面宦焦,
并依次向下发钝,保證最下面的是最特殊的條件。這樣波闹,瀏覽器在顯示元素時(shí)酝豪,
才會(huì)從特殊到一般、逐級(jí)向上驗(yàn)證條件精堕,才會(huì)使你的每一個(gè)CSS語(yǔ)句都起到效果孵淘。