CSS样式知识点

1. css引入方式

        1.1 行内样式：行内样式（将样式直接写在标签上），需要使用style属性。例：

改变字体的颜色

该方式可用于提高样式的优先级，多次使用会导致代码臃肿，不利于后期维护。

        1.2 内联样式：将页面内容与表现形式进行分离，方便对样式进行统一管理。

        1.3 外联样式：对内联样式进行进一步的抽离，方便多个页面共用同一个样式，创建一个css文件，需要该样式的HTML直接引用样式即可。

注意事项：.css文件本身就代表是样式，所以直接写对应的样式即可，不需要有style标签或属性。

2. 选择器：选择器可以快速、方便的选择所需要使用的页面元素。

        2.1 基本选择器：基本选择器分三种，分别是：标签选择器、类选择器、id选择器。

        2.1.1 标签选择器：标签选择器主要是根据标签的名字进行元素的选择，其语法为：标签名{}。

        2.1.2 类选择器：类选择器是通过class属性进行元素的获取，可用于对多个元素进行相同的样式设置，其语法为：.类名{}。

        2.1.3 id选择器：id选择器是通过id属性给元素一个唯一标识（设置多个id相同不会报错，会影响后期js的学习，建议id值要唯一），其语法为：#id名{}。

        2.2 属性选择器：属性选择器是根据元素上已有的属性标识进行选择，其语法为：[属性名='']{}。

        2.3 后代选择器：后代选择器是根据元素在页面中的相对（嵌套）位置进行按区域选择元素。

        2.4 组合选择器：组合选择器是根据元素在页面中的同级关系进行选择。

        2.5 伪类选择器：伪类选择器是css3中提供的用于快速查找元素的便捷选择器。伪类选择器在超链接上的应用，超链接的字体颜色只有将样式直接作用在超链接上时才会生效。

        3.6 通配符选择器：*通配符，作用在页面中的所有标签上，开发不建议使用，影响网页的渲染性能，其语法为：*{}。

        使用通配符和使用选择器有什么区别？

        开发不建议使用通配符，通配符相当于是作用在了所有的标签上，某些属性并不是所有的标签都能识别，只要加了属性不论是否生效，浏览器都会对属性进行解析然后渲染，这样比较消耗性能。

        3.7 选择器优先级：网页中的选择器多种多样，可以组合使用，当同一个元素有多个样式时，最终生效的样式与优先级有关。选择器的优先级为：！important(不要轻易使用)>行内样式>id选择器>类选择器>标签选择器。