CSS层叠样式表学习笔记1--css入门background常规参数

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

主要有三种样式表：外部样式表 < 内部样式表 < 内嵌样式表，其中，内嵌样式表拥有最高的优先权

1、内嵌样式
　　内嵌样式是把css的代码嵌入到html标签中
　　<div style="color:red;font-size: 100px;">你好啊 小朋友</div>
　　语法：
　　(1)使用style属性将样式嵌入到html标签中
　　(2)属性的写法：属性：属性值
　　(3)多个属性之间使用分号;隔开

2、内部样式
　　在head标签中使用style标签进行css的引入
　　<style type="text/css">
　　div{color:red;font-size: 100px;}
　　</style>
　　语法：
　　(1)使用style标签进行css的引入
　　<style type="text/css">
　　属性：type：告知浏览器使用css解析器去解析
　　(2)属性的写法：属性：属性值
　　(3)多个属性之间使用分号;隔开

3、外部样式
　　将css样式抽取成一个单独css文件 谁去使用谁就引用
　　<link rel="stylesheet" type="text/css" href="demo1.css"/>
　　语法：
　　(1)创建css文件 将css属性写在css文件中
　　(2)在head中使用link标签进行引入
　　<link rel="stylesheet" type="text/css" href="css文件地址"/>
　　rel:代表要引入的文件与html的关系
　　type：告知浏览器使用css解析器去解析
　　href：css文件地址
　　(3)属性的写法：属性：属性值

背景相关属性值:
1、背景颜色（background-color）
　　background-color属性定义了元素的背景颜色
　　background-color: color;
　　一般情况下，元素背景颜色默认值是transparent，是透明的。
2、背景图片颜色（background-image）
　　background-image属性描述了元素的背景图片，实际开发常见于 logo 、一些装饰性的小图片或是超大的背景图片，优点是非常便于控制位置。
　　background-image: url(./img/小图.webp);
　　可以同时设置背景色，和背景图片，如果同时设置，背景色是在背景图片下面
　　图片在元素中位置：
　　如果背景图片大于元素，默认是显示图片左上角
　　如果一样大，则正常全部显示
　　如果图片小于元素，则默认情况下，背景图片会平铺充满元素

3、背景图片重复方式（background-repeat）
　　background-repeat可以实现对背景图片平铺的控制。
　　background-repeat: repeat | no-repeat | repeat-x | repeat-y ;
　　参数值 作用
　　repeat 背景图片在纵向和横向上平铺（默认值）
　　no-repeat 不平铺
　　repeat-x 在横向上平铺（水平方向）
　　epeat-y 在纵向上平铺（垂直方向）
4、背景图片位置（background-position）
　　设置background-position属性可以改变图片在背景中的位置。
　　background-position: x y;
　　x 、y代表的是 x 坐标和 y 坐标，可以使用方位名词或者精确单位。

　　参数值 说明
　　length 百分数 | 由浮点数字和单位标识符组成的长度值
　　position top | center | bottom | left | right 方位名词
　　如果参数是方位名词：

　　如果指定的两个值都是方位名词，则两个值的位置顺序可以互换，不影响显示效果。
　　比如，right top 和 top right 效果是一样的
　　如果只指定了一个值，那么省略的另一个值默认为居中 center

　　如果参数是精确单位：
　　那么第一个值肯定是 x 坐标，第二个值肯定是 y 坐标，有严格的顺序
　　如果只指定了一个数值，那么该数值一定是 x 坐标，另一个默认垂直居中(50%)

　　左上角0% 0%，右下角100% 100%

　　如果参数是混合单位：
　　则第一个值是 x 坐标，第二个值是 y 坐标 (xps像素单位或css其他单位)
　　第一个值，是水平的偏移量 可正（向右） 可负（向左）
　　第二个值，是垂直的偏移量 可正（向下） 可负（向上）

5、背景范围（background-clip）
　　background-clip: ; 设置背景的范围

　　参数值 作用
　　border-box 默认值，背景色会出现在边框下面

　　padding-box 背景就不会出现在边框下，出现在内容区和内边距区

　　content-box 背景图出现在内容区下面

6、背景图片偏移原点（background-origin）
　　background-origin: ; 设置背景图片偏移量原点

　　border-box 从边框开始计算偏移量

　　padding-box 默认值，从内边距开始计算

　　content-box 从内容区开始计算偏移量

7、背景图片大小（background-size）
　　background-size: (宽度,高度); 设置背景图片的大小,如果只写一个，第二个值，为auto
　　参数值 作用

　　cover 图片的比例不变，将元素铺满

　　contain 图片比例不变，将元素完整显示

8、 补充--背景颜色渐变：
　　渐变：一种复杂的背景颜色，一种颜色向另一种颜色的过渡
　　渐变更像一种图片，通过background-image设置

　　/* background-color: red; */
　　/* background-image: linear-gradient(80deg,red,yellow,green); */
　　/* background-image: repeating-linear-gradient(red 50px ,yellow 150px); */
　　background-image: radial-gradient(red,yellow);
　　可选值：
　　1.linear-gradient(方位，颜色1，颜色2···)

　　　　参数: 方位（不写，默认从上到下to bottom）
　　　　(1)to left , to right ,to bottom ,to top
　　　　(2)turn 表示圈
　　　　(3)xxxdeg 表示角度 度数

　　2. repeating-linear-gradient() 平铺线性渐变

　　3.radial-gradient() 放射渐变
　　　　参数：圆心的形状(默认是根据元素的形状来计算的)
　　　　（1）circle 圆形
　　　　（2）ellipse 椭圆
　　　　（3）设置圆心的大小 宽度 高度

CSS简写方式:

在使用简写属性时，属性值的顺序为：

　　background: 背景颜色 背景图片地址 背景重复方式（平铺）背景图片位置/背景图片大小;
　　eg：background:red url(./img/小图.webp) no-repeat center/cover;
　　注意：background-size必须要写在 background-position的后面

    

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

 参考文章链接:CSS简介 - 轻羽飞扬 - 博客园 (cnblogs.com)，css背景样式_fine1998_的博客-CSDN博客