我的前端学习2

CSS概述：

第一种：内联样式

语法：在开始表示中添加style属性来设置CSS样式

第二种：在head标签中使用style标签

语法：选择器{CSS代码}

第三种：引用外部的CSS文件

通过link标签引入外部css文件

herf：用来指向外部css文件的路径

rel：用来指定为样式表

例如：

<link href="./css/index.css" rel="stylesheet"/>

 

CSS元素：

子元素：直接嵌套在另一个标签中的元素

父元素：该元素中含有其他元素的元素

后代元素：直接或间接被祖先元素所包裹的元素后代元素包含子元素

祖先元素：直接或间接包裹后代元素的元素祖先元素包含后代元素

兄弟元素：拥有共同父元素的元素

 

 

CSS常用选择器：

id选择器：

作用：跟进好元素的id选择相应的元素

语法：#id{ }

 

类选择器：

作用：根据元素的class选择相应的元素

语法：.class{ }

 

全局选择器：

作用：选择页面上所以的元素

语法：*{ }

 

交集选择器：

作用：找到拥有选择1到选择器n共同特征的元素

语法：选择器1 . 选择器2 . 选择器3{ }

注意：如选择器里有元素选择器，必须将元素选择器放在第一位

 

并集选择器：

作用：找到选择器选择的所有的元素

语法：选择器1，选择2，选择器3{ }

 

伪类选择器：

语法：以 : 开头

：first-child:选中一个子元素

：last-child:选中最后一个子元素

：nth-child(n)：选中指定位置的子元素

---n,数字，代表选择子元素的位置

---2n或者odd代表奇数

---2n+1或者even代表偶数

 

 

伪元素选择器：

伪元素：不存在，特殊的元素

特殊的值：段落开头的第一个字母，第一行，选中的内容

语法： 以 :: 开头的选择器，就是伪元素选择器

::first-letter---选中开头的第一个字母

::first-line---选中第一行

::selection---选中的内容

::before---选中元素之中最开头的位置

::after--选中元素之中最后的位置

这两个选择器必须搭配content属性进行使用

 

 

a标签的伪类：

a标签的伪类以 : 开头

:link---没有点击过的超链接

:visited--点击过的超链接

:hover--鼠标移入移出的状态

 

 

 

属性选择器：

语法：

[属性]---选择有该属性的元素

[属性=属性值]--选择拥有特定属性值的元素

[属性^=属性值]--选择以特定字符开头的元素

[属性$=属性值]--选择以特定字符结尾的元素

[属性*=属性值]--选择包含特定字符的元素

 

CSS选择器的冲突

选择器的冲突：当我们给同一个元素设置同一组样式的时候，用不同的选择器进行设置

 

选择器优先级：

内联样式

id选择器 #{ }

类或者伪类选择器 .class{ }

类型选择器 类型名 { }

通配选择器 *{ }

样式的继承 没有优先级

 

 

CSS颜色：

颜色有3中取值方式

第一种：直接颜色的名字，可以直接使用，但是很有局限性

第二种：RGB方式

取值范围：0~255（0%~100%）---表示颜色的浓度

特殊值：如果三者的颜色浓度都为255，那么则呈现白色

如果三者的颜色浓度都为0，那么则呈现黑色

例如：pgb（0，0，255）

 

第三种：16进制的rgb值

取值范围：00~ff

16进制的颜色值必须以#开头

注意：如果颜色的取值是两个相同的值，就可以进行省略其中一个；

例如：#bbffaa---#bfa

 

CSS样式的继承：

样式的继承：当我们给一个元素设置样式的时候，后代元素也会继承这些样式

位置：祖先元素的样式继承给后代元素

注意：但是并不是每一个样式都可以被继承，比如盒子模型就不能被继承。