1.CSS选择的样式

#CSS(层叠样式表)

• 用于定义HTML内容在浏览器内的显示样式
• CSS简化HTML相关标签，网页体积小，下载快
• 解决内容与表现分离的问题
• 更好地维护网页，提高工作效率

一、二、CSS基础语法

1. CSS由两部分构成：选择器，声明

1.CSS引用

写在< head >< /head >标签内：

<style type="text/css">
	CSS样式
</style>

h1{font-size: 30px;
   color: red; 
   font-family: "隶书";}

1.如果不同的h1、p…要相同的样式，则用

h1,p{font-size: 30px;
     color: red; 
     font-family: "隶书";}

h1和p之间用，(逗号)隔开

2. css注释样式：
   /* 注释 */

2.CSS使用方法：

1.CSS行内样式：

1. 在开始标签内添加style样式属性
   如：<p style="color:red">内容</p>
2. 和HTML文件同时加载

2.CSS内部样式(嵌入样式)：

1. 在style标签内写入

<style type="text/css">
 	CSS样式
</style>

2. 一定要写在< head >< /head >标签内
3. 和HTML文件同时加载

3.CSS外部样式

1. 外部样式表，把CSS样式代码写在独立的一个文件中
2. 扩展名：CSS扩展文件.css
3. 引入外部文件：<link href="XXx.css" rel="stylesheet" type="text/css">
4. 写在< head >< /head >标签内
5. 和HTML文件同时加载
6. 使用此链入外部样式的好处：
   1. css和html文件分离，便于修改
   2. 多个文件可以使用同一个样式文件
   3. 多个文件引用同一个css文件，css只需下载一次

4.CSS导入式

1. @import “外部CSS样式”
2. 写在style标签内

 <style type="text/css">
 	 @import "css.css"
 </style>

或

 <style type="text/css">
 	 @import url(css.css)
 </style>

3. 页面导入时，link和@import 有什么区别？
   1. link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，rel连接属性等；@import是CSS提供的语法规则，只有导入样式表的作用；
   2. 加载页面时，link引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后加载；
   3. link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，故老版本浏览器（IE5之前）不能识别。
4. 在读取完HTML文件之后加载

5.CSS使用方法优先级

行内样式>内部样式>外部样式

1. 链入外部样式与内部样式表之间的优先级取决于所处位置的先后
2. 最后定义的优先级最高（就近原则）

三、CSS选择器

1.标签选择器

直接以HTML标签作为选择器：

h1{font-size: 30px;
   color: red; 
   font-family: "隶书";}

上面的h1就是HTML标签通过

1. 通过标签选择器设置样式，那使用该标签内容都是用该样式

2.类选择器

为HTML标签添加class属性：

<p class="red">用于定义HTML内容在浏览器中的显示样式</p>

通过类选择器来为具有此class属性的元素设置CSS样式：

 <style type="text/css">
 	 .red{color:red;}
 </style>

只要通过class属性引用类选择器设置的样式，那该标签引用相应的样式。

1. 可对不同类型元素的同一个名称的类选择器设置不同的样式规则

p.red{XXX}
h1.red{XXX}

2. 同一个元素可以设置多个类，之间用空格隔开：

<p class="red one">用于定义HTML内容在浏览器中的显示样式</p>

3.ID选择器

为HTML标签添加ID属性：

<p id="p1">用于定义HTML内容在浏览器中的显示样式</p>

通过ID选择器来为具有此ID的元素设置CSS规则：

#one
  {font-size: 100px}

1. 每个标签对应的id是唯一的，一一对应。

4.群组选择器

集体统一设置样式：

p.red,#special,h1{color:red;}

没有标点隔开的标签就用，(逗号)隔开

1. id和class的值区分大小写

5.全局选择器

对所有标签设置样式
*作开头标签

*{color:red;}

6.后代选择器

根据上下文的关系确定

<p><em>用于定义HTML内容</em></p>

使用后代选择器设置，之间用空格隔开：

p em{color:red;}

p标签下面的em才会实现

1. p a em{...} p标签中a标签中的em
2. #p1 em{...} id为p1的标签中的em
3. p.red a em{...} class为red的p标签中的a标签中的em

7.伪类（伪选择器）

• 伪类选择器定义特殊状态下的样式
• 这些样式是无法通过标签、id、class及其他属性实现的

1.链接伪类（也可使用普通文字）

• 链接有四种状态：激活状态、已访问状态、未访问状态、鼠标悬停状态。

伪类	说明
:link	未访问状态
:visited	已访问状态
:hover	鼠标悬停状态(访问鼠标经过某个元素时)
:active	激活状态(点击还没松开)

  a:link{color: blue}
  a:visited{color: grey}
  a:hover{color: green}
  a:active{color: orange}

优先级：:link>visited>:hover>:active

1. :hover必须置于:link和visited之后，才有效
2. :active必须置于:hover之后，才有效
3. 伪类名称对大小写不敏感

对于不同的链接，想要不同的样式，则使用class属性来区分

a.one:link{...}
a.one:visited{...}
a.two:link{...}
a.two:visited{...}

<a href="https://www.baidu.com" class="one">csdn</a>
<a href="https://www.baidu.com" class="two">csdn</a>

其子关系下的标签是一样的：

p a:link{...}
div a:link{...}

四、CSS继承、层叠、优先级

1.CSS继承

• CSS继承：
  1. 子元素从父元素处继承部分属性，字体、颜色大小都是可以继承，但border、solid等标签都是不可以继承。
  2. 当上级元素样式和默认元素样式不一致时，将会忽略继承的来的样式。
  3. 常见可继承：
     

2.CSS层叠

1. 可以定义多个样式
2. 不冲突时，可以多个样式层叠为一个
3. 冲突时，按不同样式优先级来应用

3.优先级

行内样式>内部样式>外部样式

1. 链入外部样式与内部样式表之间的优先级取决于所处位置的先后
2. 最后定义的优先级最高（就近原则）

1.CSS选择器优先级

1. id选择器>class选择器>标签选择器
2. 同一个元素引用多个class定义的样式：style后定义的样式会覆盖先定义的样式 即就近原则。

.classblue{color: blue;}
.classyellow{color: yellow;}

 <div class="classblue classyellow">class</div>
 <div class="classyellow classblue">class</div>

则两个class都为黄色，

  .classyellow{color: yellow;}
  .classblue{color: blue;}

 <div class="classblue classyellow">class</div>
 <div class="classyellow classblue">class</div>

则两个class都为蓝色。

2.同一样式表中：

1. 权值相同：就近原则
2. 权值不同：哪种CSS权值样式高，使用哪种
   • 通配符(*)选择器：0
   • 标签选择器：1
   • 类选择器和伪类：10
   • ID选择器：100
   • 行内样式：1000
3. 权值规则：
   • 不同选择器的个数
   • 每类选择器的个数乘以相应权值
   • 把所有值相加得出选择器的权值

#main div.warning h2{…}
id(#main):1100=100
class(div):110=10
标签(warning h2):2*1=2
权重=100+10+2=112

  p b{color: red;} /*2*/
 p{color: yellow;} /*1*/
  
 <p><b>单独</b></p>/*2>1 红色*/
 <p>标签选择器</p> /*1 黄色*/

3. ! important

1. 可调整样式规则的优先级
2. 添加在样式规则之后，中间用空格隔开

div{color:red !important;}

五、CSS样式命名

1.CSS样式命名规则

• 采用英文字母、数字以及“-”和“_”命名
• 以小写字母开头，不能以数字和“-”、“_”开头
• 命名形式：单字，连字符，下划线和驼峰
• 使用有意义命名

.special{...}
.mainTitle{...}
.main-title{...}
.main_title{...}

2.id和class使用

1. id不要滥用，谨慎使用
2. 适当使用 class