这是我参与「第四届青训营 」笔记创作活动的的第3天
CSS简介
给页面添加样式的三种方式
- 1.行内样式：在标签内部通过
style属性来设置元素的样式。但不推荐使用，很难进行后期维护 - 2.将样式写到
head中的style标签里，更加方便对样式进行重复使用，但只能在当前页面用 - 3.外部样式：可以将CSS编写到外部的一个CSS文件中，然后通过另一个标签引入外部的CSS文件，意味着只要想使用这些样式的网页都可以对其进行引用，可以提高浏览器的缓存机制，提高用户体验
示例
CSS语法
选择器+声明块
- 选择器：通过选择器可以选中页面中的指定元素
- 声明块：通过声明块来指定要为元素设置的样式（键值对形式 :连接 ;结尾）
选择器分类
常用选择器
元素选择器
- 作用：根据标签名来选中指定的元素
- 语法：
标签名{} - 例子：
p{} h1{} div{}
id选择器
- 作用：根据元素的id属性值选中一个元素
- 语法：
#id属性值{} - 例子：
#red{} #yyds{}
类选择器
class是一个标签的属性，它和id类似，不同的是class可以重复使用
- 作用：根据元素的class属性值选中一组元素
- 语法：
.class属性值
通配选择器
- 作用：选中页面中的所有元素
- 语法：
*{}
复合选择器
交集选择器
- 作用：选中同时符合多个条件的元素
- 语法：
选择器1选择器2选择器n{}，如果含有元素选择器，必须使用元素选择器开头
并集选择器
- 作用：同时选中多个选择器对应的元素
- 语法：每个选择器中间加一个逗号
父子兄弟选择器
- 父元素：直接包含子元素的元素叫做父元素
- 子元素：直接被父元素包含的元素叫做子元素
- 祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是他的祖先元素
- 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
- 兄弟元素：拥有相同父元素的元素是兄弟元素
子元素选择器
- 作用：选中指定父元素的指定子元素
- 语法：
父元素 > 子元素
后代元素选择器
- 作用：选中指定元素内的指定后代元素
- 语法：
祖先 后代
选择兄弟元素
选择下一个兄弟，语法是前一个+下一个
属性选择器
[属性名]选择含有指定属性的元素[属性名=属性值]选择含有指定属性和属性值的元素[属性名^=属性值]选择属性值以指定值开头的元素[属性名$=属性值]选择属性值以指定值结尾的元素[属性名*=属性值]选择属性值中含有某值的元素的元素
今天就先写这么多吧
