css与样式

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>