css:层叠样式表
1、写法分类:
(1)内联(行内)
写在标签里面,以属性的形式表现,属性名是style
例:<div style=""></div>
(2)内嵌
写在head标签里面,以标签的形式表现,标签名style
例:<style type="text/css"></style>
(3)外部引用
写在head标签里面,以标签的形式表现,标签名link
例:<link rel="stylesheet" href="aa.css">
2、样式格式:
样式名:样式值;
样式名1:样式值;
...
3、选择器:找元素,找标签
(1)格式:
选择器{
样式名:样式值;
样式名1:样式值;
...
}
(2)分类:
①标签选择器
格式:标签名{}
②id选择器
格式:#id属性值{}
③class选择器
格式:.class属性值{}
④并列选择器
格式:选择器1,选择器2{}(关键符号:逗号 , )
例:#div4,#div5{text-decoration: underline;}
⑤后代选择器
格式:选择器1 选择器2(关键符号:空格 )
例:#div11 div{font-weight: bolder;}
⑥属性选择器
格式:选择器【属性名="属性值"】{} (注意中括号【】)
4、优先级: 权值越高优先级越高,行内的是最高优先级
行内 1000
id 100
class 10
标签 1
*(通用选择器,代表所有) 0
*{
一般只设置以下几个属性
margin:0px;
pasdding:0px;
font-size:12px;
font-family:
}
例:
<style>
sapn{
color: blue;
}
#span1{
color: red;
}
.span2{
background-color: yellow;
}
#div3,#div4{
font-size: 30px;
}
#div5 span{
color: #2AFF00;
font-size: 30px;
}
span[name="123"]{
background-color: #474545;
}
</style>
<div style="color: red">内联写法</div> <br>
<sapn>内嵌写法:标签选择器</sapn> <br><br>
<span id="span1">内嵌写法:id选择器</span> <br><br>
<span class="span2">内嵌写法:class选择器</span> <br><br>
<span class="span2">内嵌写法:class选择器</span> <br><br>
<span class="span2">内嵌写法:class选择器</span> <br><br>
<span class="span2">内嵌写法:class选择器</span> <br><br>
<span id="div3">内嵌写法:并列选择器</span> <br><br>
<span id="div4">内嵌写法:并列选择器</span> <br><br>
<span id="div5">
123456
<br>
<span>内嵌写法:后代选择器</span>
</span>
<br>
<br>
<span name="123"> 内嵌写法:属性选择器</span>
<div id="abc" class="abc">abc</div>
<div id="aaa" class="abc">def</div>