什么是CSS？CSS怎么用？

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。所有的主流浏览器均支持层叠样式表（Cascading Style Sheets）。

引入CSS样式表的方式

行内样式表

如果有十段，难道每段都要有style？不需要，我们可以少写，提到父级

上一层有了，下一层都有。下一层有了，上一层被覆盖。这就是层叠样式

代码多了，html的部分和css的部分是搅在一起的，那可以既能实现CSS的样式又能把两块分开吗？这就引入了内部样式表

内部样式表

style标记，要在head中，此时就引入选择器的概念，选择器的精髓就是要用较少的代码描述较多的标记怎么去渲染

通过引入CSS文件

选择器

概念

一种规则，用于将一类标记选择出来，然后对这些标记使用样式（style）

格式

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

CSS基本选择器

看一段代码，我们会发现有重复代码（color： red被用了两次）。我们当初用层叠样式表而不是放在各个标记上，就是为了避免重复代码。

那我们能不能就写一个red呢，一个标签使用多个类。这样可以提高开发的效率，并且使得代码更加容易维护。当一个样式被反复拷贝了两三遍后，一个标签使用多个类，那么我们代码的可维护性就会变的很好。

注意冲突：同一个样式（如：color）在不同的类里定义成不同的样式，定义在后面的样式可以覆盖定义在先的样式在先在后指的是类的定义，而不是标签中类的使用

CSS复合选择器

CSS链接伪类选择器

CSS选择器的梳理-CSS选择器的使用哲学

• 标签选择器：范围太大，用于定义全局的缺省样式
• ID选择器：排他的，只用于设定body的子元素，用于布局；组件不可以使用ID选择器
• 类选择器：有比较好的灵活性和适应性的；不要在过多的元素上添加类
• 爬DOM树的方法是经常的使用方法
• 伪类选择器：hover；从集合中选择其中的一部分
• 伪对象选择器：消除浮动；响应式布局
• 分组选择器：用于合并相同的样式