Day 04
Author:ScorpioDong
1. 什么是CSS
- CSS指层叠样式表(Cascading Style Sheets)
- CSS定义了HTML文档中的元素如何在浏览器中显示
- CSS可以定义在
<head>中的<style>标签中(内部样式表) - CSS可以定义在外部
.css文件，通过<link>标签引入(外部样式表) - CCS可以定义在具体元素的style属性中(内联样式)
- 外部样式表可以极大地提高工作效率，首选
- 多个样式定义可以层叠为一个
2. CSS 基本语法
- 选择器 ：通常是需要改变样式的HTML元素
- 属性和值 ：需要改变的样式
- 属性和值构成了一条声明，每条声明由分号结尾
- 声明用大括号包裹起来
- CSS注释以
/*开始，以*/结束
3. CSS 选择器
- tag 选择器
- 改变HTML文档中所有此 tag 的元素的样式
- class 选择器
- 改变HTML文档中所有class属性中带有此字段的元素的样式
- id 选择器
- 改变HTML中所有以此字段作为id的元素的样式
- 可以指定特定的元素使用class，如
p.center选择的就是所有p元素中class带有center字段的元素 - 样式优先级
- 内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式
4. CSS 背景
4.1 background-color
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j5ib0Ce7-1583245081508)(/img/background_color.png)]](https://img-blog.csdnimg.cn/20200303221904625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- 该属性定义了元素的背景颜色
- CSS中的颜色定义一般有三种表示方法
- 十六进制 ： “#FF0000”
- RGB ：“rgb(255,0,0)”
- 颜色和名称 ： “red”
4.2 background-image
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nhj7KB61-1583245081509)(/img/background_image.png)]](https://img-blog.csdnimg.cn/20200303221919835.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- 该属性定义了元素的背景图片
- 属性的值为背景图片的路径，使用url(path)
- 默认情况下，背景图片平铺重复显示，以覆盖整个元素实体
4.3 background-repeat
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L3Px2Opo-1583245081510)(../img/background_repeat.png)]](https://img-blog.csdnimg.cn/20200303221935939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- 该属性定义类背景图片的展示规则
- 常用属性值有
- repeat-x : 水平方向平铺
- repeat-y : 垂直方向平铺
- no-repeat : 不平铺
4.4 background-position
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RWBy0HBQ-1583245081511)(/img/background_position.png)]](https://img-blog.csdnimg.cn/20200303221950220.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- 该属性可以指定背景图片在元素中的位置
- 属性值可以是绝对定位，也可以是相对定位
4.5 background-size
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SLYGGk2Y-1583245081512)(../img/background_size.png)]](https://img-blog.csdnimg.cn/20200303222001390.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- 此属性可以设置背景图片的尺寸
- 此属性是CSS3新添加的属性
- 属性值可以是具体像素值，也可以是百分比
4.6 background-attachment
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CiJIayoq-1583245081514)(../img/background_attachment.png)]](https://img-blog.csdnimg.cn/20200303222012217.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- 该属性定义了背景图片是否固定，还是跟随页面其余部分滚动
- 属性值有：
- scroll : 默认，背景随着页面滚动
- fixed : 背景不随着页面滚动
- local : 背景随着元素滚动
4.7 background 属性简写
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QlNrdL9l-1583245081515)(../img/background_simple.png)]](https://img-blog.csdnimg.cn/20200303222024659.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NzcxMTQy,size_16,color_FFFFFF,t_70)
- 多条关于背景的属性设置可以简写为一条
- 简写属性为
background - 简写时属性值的顺序为
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Tips
CSS中的所有属性都有这两个属性值：
1. initial : 设置属性为默认值
2. inherit : 设置属性从父元素继承
