CSS

CSS的基本简介

友情提醒：其中只是简单介绍以一些标签或者格式语法，详情参考w3c文档

CSS的编写位置：

1.元素样式表，将样式写在修饰标签内，譬如p，div，span内部，利用style属性修饰各种样式。
2.内部样式表：将样式写在head中的style中，缺点：只能在一个页面中生效 。
3.外部样式表，直接将字体等样式写在CSS文件中，然后再head中利用link标签设置herf路径引入CSS样式 。

ID选择器：

如果我们想定向修饰某一个标签，例如一个p标签，在p标签中设置id属性，可以定向确认到具体的p标签，我们要注意id是不可重复的！通过#id名{设置样式}格式进行设置。

类选择器：

由于id选择器只能选择某一个确认的标签，当我们想选择某一类标签时，我们可以设置class属性，这样可以设定一类标签，通过.class名{设置样式}格式进行设置。

复合选择器：

1.交集选择器：选中同时满足多个条件的元素

//eg：
div.red{}首先是div，其次class属性为red

2.并集选择器：同时选择多个选择器对应的元素

//eg
h1,span{};//共同设置h1，span，的样式

关系选择器：

我们要想使用关系选择器我们先要确定元素关系
1.子选择器：选中指定父元素的子元素，再根据id或class等具体选中某一个或某一类子元素，否则默认为所有此类型的子元素。

div>span.first{}//div中class等于first的子元素

2.后代选择器:选中指定元素内的指定后代元素（子元素属于后代元素），同样我们可以再根据id或class等具体选某一个或某一类子元素，否则默认为所有此类型的子元素。

div span.first{}//选中div后代中中所有class为first的span

3.兄弟选择器：
3.1 选中下一个兄弟元素，注意要是兄弟元素的关系：p+span{}选中p紧挨的兄弟span
3.2 选中下面的所有的兄弟元素：p~span{}选中p下面的所有兄弟span

属性选择器：

语法：标签[属性名]选中含有指定属性的标签元素
标签[属性名=属性值]选中含有对应属性值的属性的元素
标签[属性名^=属性值]选中属性值以指定值开头的元素
标签[属性名$=属性值]选中属性值以指定值结尾的元素
标签[属性名*=属性值]选中属性值含有指定值的元素

伪类：特殊类，表示一种位置，不指向指定的标签

1.根据所有的子元素进行排序：语法父元素空格： 表达式
：first-child 第一个子元素
：last-child最后一个子元素
：nth-child()填具体数值表示选中第n个元素（从一开始）。2n表示所有偶数，2n+1表示所有计数。
2.根据同类型元素进行排序：语法元素无空格：表达式
：first-of-type表示同类型的第一个元素
：last-of-type表示同类型的最后一个元素
：nth-of-type同上用法

超链接的伪类

：link表示没有访问过，：visit表示访问过

a：link{}//设置未访问链接的样式
a：visited{}//由于隐私设置，只能设置颜色

伪元素的选择器：找到对应位置的元素，而不是具体的元素以 ：：开头

p::first-letter//选中段落p中的第一个字母
p::first-line//选中段落p中的第一行
P::selection//设置鼠标选中时的样式
p::before//表示p开头的第一个字母的前一个空白位置
p::after//表示p结尾的最后一个字母的后一个空白位置
//其中before，after设置的样式用户是无法选中的

样式的继承：

我们为一个元素设置的样式同时也会应用到它的后代元素上，但并不是所有的样式都会被继承，后续我们在详细讲这里

选择器的权重：

当我们通过不同选择器选中相同元素，并设置了不同样式，会造成样式冲突，此时会根据选择器的权重来确定样式。
选择器的权重：（由大到小）内联样式（设置在标签内的）>id选择器>类和伪类选择>元素选择器
当我们遇到交集选择器时，将多个选择器的权重相加，并集要单独计算
当优先级相同时，优先采用靠下的样式

单位：

百分号：可以使子元素根据父元素的变化而变换;
em:是指相对于字体大小元素来计算的em=1font-size,em会根据字体大小改变而改变
rem:会根据根元素html中设置的字体大小来计算
rgb(红，黄，蓝):每一种范围0-255，(255,0,0)表示红色，(0,0,0)表示黑色，(255,255,255)表示白色
rgba(红，黄，蓝，0-1):0-1表示透明度，0表示透明，1表示不透明