CSS-基本样式网页三个部分：结构（HTML）; 样式（CSS）; 行为（JavaScript）; 网页可以看作一个多

网页三个部分：

结构（HTML）;
样式（CSS）;
行为（JavaScript）;

网页可以看作一个多层的立体结构，通过 CSS 可以为网页每层设计对应的样式。

CSS 语法

注释

CSS 注释使用/**/进行注释

选择器

通过选择器可以选中页面中的指定元素。

声明块儿

通过声明块为元素设置样式。一个样式名对应一个样式值。名称和值之间以:分割。样式名之间通过;分割。

p {
  cololr: red;
}

p：选中标签为 p 的内容；

{}：声明颜色为红色

常用选择器

元素选择器

直接将元素作为选择器。即 html 的标签。不常用。因为作用域太广了。

id选择器

作用：根据元素的 id 属性值选中一个元素

语法：#id{}。其中id需要转换为对应的属性值

#red {
  color: red;
}

<body>
  <h1 id='red'> 我是一个标题 </h1>
</body>

同样 id 属性是唯一的，因此作用域比较单一。于是使用另一个 html 标签属性 class

［属性名］：选择含有指定属性的元素

［属性名=属性值］：选择含有指定属性和属性值的元素

［属性名^=属性值］：选择属性值以指定值结尾的元素

［属性名$=属性值］：选择属性值以指定值结尾的元素

p[title$=abc] {
  color: red
}


<body>
  <p title='abc'> 我是一个标题 </p>
</body>

类选择器

标签内可以使用多个 class。用空格分割

.red {
  color: red;
}

<body>
  <h1 class='red'> 我是一个标题 </h1>
</body>

伪类选择器

伪类（不存在的类，特殊的类）：伪类用来描述一个元素的特状态：

比如：第一个子元素、被点击的元素、鼠标移入的元素…比如：第一个子元素、被点击的元素、鼠标移入的元素…

伪类一般情况下都是使用：开头：

:first-child 第一个子元素；

:last-child 最后一个子元素

:nth-child()选中第n个子元素

n 第n个 n的范围e到正无穷；
2n 或 reven 表示选中偶数位的元素；
2n+1 或 odd 表示选中奇数位的元素

特殊值：

n 第n个 n的范围e到正无穷

注意：这些伪类都是根据所有的子元素进行排序。

下面这几个伪类的功能和上面几个类似：不同点是他们是在同类型元素中进行排序

:first-of-type

:last-of-type

:nth-of-type()

:not()否定伪类：将符合条件的元素从选择器中去除

通配符

作用：选中页面中的所有元素

语法：*

*{
  color: red
}

交集选择器

作用：选中同时符合多个条件的元素

语法：div.redId.bludId {}；嵌套式的。意思是标签为 div，且选择器为 redId 与 blueId 的会被选中

注意：交集选择器中如果有元素选择器，则必须使用元素选择器开头。

h1.redId {
  color: red
}

.a.b.c {
  color: red
}

<body>
  <h1 class='redId'> 我是一个标题 </h1>

  <h1 class='a b c'> 我是一个标题 </h1>
</body>

并集选择器

作用：同时选中多个选择器对应的元素

语法：选择器 1, 选择器 2, 选择器 3。用,分割。

h1, span {
  color: red
}

元素关系

父元素

直接包含子元素的元素叫做父元素

子元素

直接被父元素包含的元素是子元素

祖先元素

直接或间接包含后代元素的元素叫做祖先元素
一个元素的父元素也是它的祖先元素

后代元素

直接或间接被祖先元素包含的元素叫做后代元素
子元素也是后代元素

兄弟元素

拥有相同父元素的元素是兄弟元素

子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素 > 子元素。

h1 > span {
  
}

后代元素选择器

作用：选中指定元素内的指定后代元素

语法：祖先后代。中间是空格。

 h1 span {
   
 }

选择下一个兄弟

语法：前一个 + 下一个

 h1 + span

样式继承

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上。继承的设计是为了方便开发，可以将统一的样式设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式。注意：并不是所有的样式都会被继承。比如背景相关，布局相关等这些样式都不会被继承。

选择器的权重

样式的冲突

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）诀定

选择器的权重

比较优先级时：

需要将所有的选择器的优先级进行相加计算，最后优先級越高，则越优先显示。
选择器的累加不会超过其最大的数量级。比如类选择器再高也不会超过id选择器。
如果优先级计算后相同，此时则优先使用靠下的样式。

注意：

分组单独计算；
可以在某一个样式的后边添加！important ，则此时该样式会获取到最高的优先级，甚至超过内联样式（一般不用）

内联样式：优先级 1000
id选择器：优先级：100
类和伪类选择器：优先级：10
元素选择器： 1

像素和百分比、颜色

长度单位

像素

屏幕（显示器）实际上是由一个一个的小点点构成的。
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰。

百分比

可以将属性值设置为相对于其父元素属性的百分比；
设置百分比可以使子元素跟随父元素的改变而改变；

em

em是相对于元素的字体大小来计算的
1em = 1font-size
em会根据字体大小的改变而改变

rem

颜色单位：

在CSS中可以直接使用颜色名来设置各种颜色。比如：red、orange、yellow、blue、green ……但是在css中直接使用颜色名是非常的不方便。

RGB值：

RGB通过三种颜色的不同浓度来调配出不同的颜色
R red, G green, B blue
每一种颜色的范围在 ◎ -255（0% - 100%）之间
语法：RGB（红色，绿色，蓝色）

RGBA：

就是在rgb的基础上增加了一个a表示不透明度T
需要四个值，前三个和rgb一样，第四个表示不透明度
1表示完全不透明；0表示完全透明； .5半透明

十六进制的RGB值：

语法：#色绿色蓝色

颜色浓度通过 09-ff
如果颜色两位两位重复可以进行简写

HSL值 HSLA值（工业显示器调试）

H色相（0-360）

5 饱和度，颜色的浓度9%-100%

L 亮度，颜色的亮度 0% -100%