CSS样式图文详解：css样式表和选择器_html/css_WEB-ITnose

主要内容

CSS 概述

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

接下来我们要讲一下为什么要使用CSS。

HTML的缺陷：

1. 不能够适应多种设备
   
2. 要求浏览器必须智能化足够庞大
   
3. 数据和显示没有分开
   
4. 功能不够强大

CSS 优点：

1. 使数据和显示分开
   
2. 降低网络流量
   
3. 使整个网站视觉效果一致
   
4. 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

CSS语法

语法格式：

选择器{	属性名: 属性值;	属性名: 属性值;}

解释：
选择器代表页面上的某类元素，选择器后一定是大括号。
属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号）。
属性名和冒号之间最好不要有空格（经验）。
如果一个属性有多个值的话，那么多个值用 空格 隔开

举例：

p{color: red;}

完整版代码举例：

 	
洗白白
	
你懂得
	
我不会就这样轻易的狗带
 

效果：

css代码的注释：

格式：

注意：只有/* */这种注释，没有//这种注释。而且注释要写在

洗白白

你懂得

3、CSS和HTML结合方式三：引入外部样式表css文件

引入样式表文件的方式又分为两种：

（2）动态伪类 :

用于以下几种状态：

注意：上面这三种状态针适用于所有的标签。

举例：

效果：

利用这个hover属性，我们同样对表格做一个样式的设置：
表格举例：

效果：

CSS样式表的冲突解决

1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
3、外部样式表的ID选择器 > 内嵌样式表的标签选择器

总结：就近原则。ID选择器优先级最大。

举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）

另外还有两个冲突的情况：
1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级： 定义的样式表中，谁最近，就用谁。
2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。

例如：

注：本文将持续更新。