初識CSS
1.css的語法
a.位置
<head>
<style type="text/css"> //css代碼
</style>
</head>
b.語法
選擇器{
屬性名1:屬性值1;
屬性名2:屬性值2;
}
例:h1{
font-size:12px; //字體大小
color:red; //字體顏色
}
註意:多個用屬性用分號分隔
2.選擇器
a.標簽選擇器
語法:
標簽名{
------
}
b.類選擇器
語法:
.class屬性值{
-------
}
步驟:
第一步:給指定的html標簽加上class屬性
第二步:在style中寫
.class屬性值{
-------
}
.green{ |
c.id選擇器
語法:
#id屬性值{
......
}
步驟:
第一步:給指定的html標簽加上id屬性
第二步:在style中寫
#id屬性值{
-------
}
<html> |
3.引用樣式的方式
a.行內樣式
使用style屬性引入樣式
列:<h1 style="font-sze:16px;color:red;">xxx</h1>
b.內部樣式
在head中寫style
列:h1{xxxx}
c.外部樣式
把CSS代碼保存在以CSS結尾的文件(層疊樣式文件)
把CSS文件引入html中
引入方式兩種:
第一種:鏈接方式
<link rel="stylesheet" href="文件路徑" type="text/css"/>
第二種:導入方式
<style>
[email protected]
</style>
4.優先級
行內樣式>內部樣式>外部樣式(就近原則)
id選擇器>class選擇器>標簽選擇器
5.高級選擇器
a.後代選擇器
父標簽 子標簽{
......
}
<html> |
b.交集選擇器
選擇器(class選擇器或者id選擇器){
......
}
<html> |
c.並集選擇器
選擇器1,選擇器2,選擇器3,......選擇器n{
......
}
<html> |
初識CSS