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样式的继承:
样式的继承:当我们给一个元素设置样式的时候,后代元素也会继承这些样式
位置:祖先元素的样式继承给后代元素
注意:但是并不是每一个样式都可以被继承,比如盒子模型就不能被继承。