CSS样式应用与选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42121307/article/details/86767307

4种使用样式单的方式

链接外部样式文件: 这种方式将样式文件与HTML文档分离，样式文件需要额外引入。在这种方式下，一批样式可控制多份文档。
导入外部样式文件: 这种方式与上一种方式类似，只是使用@import来引入外部样式单。
使用内部样式定义: 这种方式是通过HTML文档头定义样式单部分来实现的。在这种方式下，每批CSS样式只控制一份文档。
使用内联样式: 这种方式将样式内联定义到具体的HTML元素，通常用于精确控制一个HTML元素的表现。在这种方式下，每份CSS样式只控制单个HTML元素。

CSS选择器

元素选择器: E { . . . } /* 其中E代表有效的HTML元素*/
属性选择器: - E { … }: 指定该CSS样式对所有E元素起作用
                    - E[attr] { … }: 指定该CSS样式对所有包含attr属性的E元素起作用。
                    - E[attr=value] { … }: 指定该CSS样式对所有包含attr属性，且attr属性为value的E元素起作用。
                    - E[attr~=value] { … }: 指定该CSS样式对所有包含attr属性，且attr属性的值为以空格隔开的系列值，其中某个值为value的E元素起作用。
                    - E[att|=value] { … }: 指定该CSS样式对所有包含attr属性，且attr属性的值为以连字符隔开的系列值，其中第一个值为value的Tag元素起作用。
                    - E[att^=“value”] { … }: 指定该CSS样式对所有包含attr属性，且attr属性的值为以value开头的字符串的E元素起作用。
                    - E[att$=“value”] { … }: 指定该CSS样式对所有包含attr属性，且attr属性的值为以value结尾的字符串的E元素起作用。
                    - E[att*=“value”] { … }: 指定该CSS样式对所有包含attr属性，且attr属性的值为包含value字符串的E元素起作用。
ID选择器: ID选择器指定CSS样式将会对具有指定id属性值的HTML元素起作用。ID选择器的语法格式: #idValue { . . . }；仅对指定元素起作用的ID选择器: E#idValue { . . . } /* 其中E是有效HTML元素 */
class选择器: class选择器指定CSS样式对具有指定class属性的元素起作用。[E].classValue { . . . } /* 其中E是有效HTML元素 */
包含选择器: 包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部。Selector1 Selector2 { . . . } /* 其中Selector1、Selector2都是有效的选择器 */
子选择器 : 子选择器用于指定目标选择器必须是某个选择器对应的子元素。Selector1>Selector2 { . . . } /* 其中Selector1、Selector2都是有效的选择器 */ 注: 包含选择器与子选择器有点相似，他们之间存在如下区别: 对于包含选择器，只要目标选择器位于外部选择器对应的元素内部，即使是其"孙子元素"也可；对于子选择器，要求目标选择器必须作为外部选择器对应元素的直接子元素才行。
兄弟选择器: 兄弟选择器是CSS3.0新增的一个选择器。Selector1 ~ Selector2 { . . . } /* 其中Selector1、Selector2都是有效的选择器 */ 例如: #android ~ .long{ . . . } /*匹配 id为android的元素后面、class属性为long的兄弟节点 */
选择器组合: 有些时候，我们需要让一份CSS样式对多个选择器起作用，那就可以利用选择器组合来实现。Selector1,Selector2,Selector3,… { . . . } /* 其中Selector1、Selector2、Selector3都是有效的选择器 */

伪元素选择器

first-letter: 该选择器对应的CSS样式对指定对象内的第一个字符起作用。
first-line: 该选择器对应的CSS样式对指定对象内的第一行内容起作用。
before: 该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容
after: 该选择器与内容相关的属性结合使用，用于在指定对象内部的尾端插入内容

**在脚本中修改显示样式**

(1)	获取到需要设置CSS样式的目标元素，例如可以使用getElementById()方法。
(2)	修改目标元素的CSS样式。常用的方式有两种
	- 修改内联CSS属性值: 使用如"obj.style.属性名=属性值" 的Javascript代码即可。
	- 修改HTML元素的class属性值: 使用如"obj.className=class选择器"的JavaScript脚本即可。

CSS3支持的颜色表示方法

用颜色名表示，例如white(白色)，red(红色)，greenyellow(绿黄色)，gold(金色)等。这种方法简单易用，但它能表示的颜色数量有限，不可能为所有颜色都指定一个名称。
用十六进制的颜色表示，这就是典型的三原色混合原理，例如#FF0000，其中前两位FF表示红光的值，也就是把红光分成0~255个色阶，其中00表示没有红光，FF(就是255)表示红光值最大；中间两位表示绿光的值，为0；后面两位表示蓝光的值，为0；三种光混合成红色。实际上也可以把红，绿，蓝只分为0到15个色阶，这样使用3为十六进制数即可表示。例如#0F0，其中地位表示红光的值为0，第二位表示绿光的值为F(就是15)，表示绿光的值最大，最后一位表示蓝光的值为0，三种光混合成绿色。
用rgb(r,g,b)函数表示，这也是三原色混合原理。例如rgb(255,255,0)，红光的值为255(最大值)，绿光的值为255(最大值)，蓝光的值为0，混合出来的颜色就是黄色。
用hsl(Huge,Saturation,Lightness)函数表示，这是用色调，饱和度，亮度控制的颜色。例如hsl(120,100%,100%),其中色调为120，也就是绿色(色调0表示红色，120代表绿色，240代表蓝色)，饱和度，亮度都是100%，因此就是绿色。
用rgba(r,g,b,a)函数表示，这还是三原色混合原理。与rgb(r,g,b)函数相似，只是多了一个a参数，用于指定改颜色的透明度，a参数可以是0~1之间的任意数，其中0代表完全透明。
用hsla(Huge,Saturation,Lightness,alpha)函数表示，这也是用色调，饱和度，亮度控制的颜色。与hsl(Huge,Saturation,Lightness)相比就是多了一个alpha参数，用于指定该颜色的透明度，alpha参数可以是0~1之间的任意数，其中0代表完全透明。

CSS基本