css样式表

1内部样式

层叠样式表，修饰网页信息的显示样式

a，每个css样式由两部分组成，即选择符和声明，声明又分为属性和属性值

b，属性必须放在花括号中，属性与属性值用；（冒号）链接

c，每条声明结束用分号结束

d，当一个属性有多个属性值的时候，属性值与属性值不分先后顺序用空格隔开。

e，在书写样式过程中，空格，换行等操作不影响属性显示

2外部样式

1.创建html文件，创建对象
例
<h1>1111</h1>
2，新建一个css文件
例 
h1{
    color: blue;
}
3.利用link或@import引入css文件
    link：
<link rel="stylesheet" href="css文件的路径/">
rel定义关联性 
stylesheet 样式表
​
   @import：
<style type="text/css">
       @import url(css文件的路径/);
   </style>
@import：导入，引入

3.行内样式表

行内样式的创建
例<div style="width:200px;height:200px;color:pink">我是div</div>
style作为属性直接写在标签后方
少用 行内样式

4.样式表的优先级

!important>行内样式>内部样式>外部样式

就近原则

h1{
    color: blue!important;
}
​
<style>
    h1{
        color: blue!important;
    }
</style>
​
<h1 style="color: blue!important;">我是h1</h1>
​
在谁后面加!important，important针对一个样式，谁优先级最高

5.标签选择器：元素选择器

1.元素选择器/类型选择符（element选择器）
例：div{width;100px;height:100px;background:red}
语法：元素名称{属性：属性值；}如：div,p,h1,img,a,span,i,em,strong,b,ul,li,ol,li,...等等
说明：
a，元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称为选择符。例如body，div，p，img，        em，,strong,span...等等
b，所有的页面元素都可以作为选择符；
用法：
1）如果想改变某个元素的默认颜色时，可以使用类型选择符；
  （如：改变一个div，p，h1样式 ）
2）当统一文档某个元素的显示效果时，可以使用类型选择符
  （如：改变文档所有p段落样式）

6.标签选择器：class选择器/类选择器

语法：class名{属性:属性值;}
说明：
a）当我们使用class选择符，应先为美国元素定义一个class名称
b）class选择符的语法格式是：
如:<div class="top"></div>
.top{
width:200px;height:100px;bakground:green;
}
用法：class选择符跟适合定义一类样式
​
<style>
      .ezr{
         color: brown;
      }
      .top{
          background-color: blue;
          color: aliceblue;
      }
  </style>
    <div class=" top ezr">1111div</div>
    <div class="ezr">222</div>
    <div>333</div>
    <div>444</div>
优先显示顺序看style的排列顺序，与标签内类别排列顺序无关

7.id选择器

语法：#id名{属性:属性值;}
​
说明：
a)当我们使用id选择符时，应为每一个元素定义一个id属性
如：<div id="box"></div>
b)id选择符的语法格式是"#"加上自定义的id名
如：#box{
width:300px;height:300px;
}
c)起名时只能对应文档中的一个具体元素对象。（唯一性）

8.通配符/通配选择器

语法:*{属性:属性值;}
说明：通配符的写法是"*"，含义就是所有元素。
*{
margin:0;padding:0;
}
margin 外边距    padding 内边距

9.群组和后代选择器

1.群组选择器

语法：选择符1，选择符2，选择符3...{属性:属性值;}例：#top,#nv1,h1{width:960px;}
说明：当有多个选择符应用相同声明时，可以将选择符用","分隔的方式，合并为一组
margin:0 auto;实现盒子的水平居中

2.包含选择器/后代选择器 子代选择器

语法：选择符1 选择符2{
属性:属性值;
}
​
说明：含义就是选择符1中包含的所有选择符2；
​
用法：当我的元素存在父级元素的时候，我要改变直接本身的样式，可以另加选择符，直接用包含选择器的方式解决。
​
如：结构<ul class="ezr">
    <li></li>
    <li></li>
    <li></li>
</ul>
​
.ezr li{
background:red;
}
子代选择器   
例如：ul>li{}

10.伪类选择器

语法：
a:link{属性:属性值;}超链接的初始状态；
a:visited{属性:属性值;}超链接被访问后的状态；
a:hover{属性:属性值;}鼠标悬停，即鼠标滑过超链接时的状态；
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态；
link--visited--hover--active。
说明：
a）当这4个超链接伪类选择器联合使用时，应注意他们的顺序，正常的顺序为
link--visited--hover--active。
B）为了简化代码可以把伪类选择符中相同的声明提出来访者a选择符中；
例如：a{color:red;}a:hover{color:green;}表示超链接的初始和访问过后的状态一样，鼠标滑过的状态和点击时一样

11.选择器的权重

当多个选择器，选中的是同一个元素，且都为大门定义了样式，如果属性方式冲突了，会选择权重高的来执行

！important>行内选择器>id选择器>class>包含选择符（为包含选择符的权重之和）>元素选择器

css选择器解析规则1：当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖地权重选择符的样式

css选择器解析规则2：相同权重的选择符样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式