样式继承
像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承,
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承 边框相关的样式 定位相关的
单位
长度单位
像素px
在PC端使用，移动端谨慎使用
百分比%
避免嵌套使用, 基于父元素。
em
em会相对于当前元素的字体大小来计算
1em = 1font-size
em经常用于设置文字相关的一些样式，因为当文字大小发生改变时，em会随之改变
避免嵌套使用，基于自身字体的大小。
rem
基于html元素字体大小。注意Chrome不支持12px以下像素。
颜色单位
颜色单位：
* 在CSS可以直接使用颜色的单词来表示不同的颜色
* 红色：red
* 蓝色：blue
* 绿色：green
* 也可以使用RGB值来表示不同的颜色
* - 所谓的RGB值指的是通过Red Green Blue三元色，
* 通过这三种颜色的不同的浓度，来表示出不同的颜色
* - 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);
* - 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
* - 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字
* 使用百分数最终也会转换为0-255之间的数
* 0%表示0
* 100%表示255
* 也可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，
* 只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
* 每组表示一个颜色 ,第一组表示红色的浓度，范围00-ff
* 第二组表示绿色的浓度，范围是00-ff
* 第三组表示蓝色的浓度，范围00-ff
* 语法：#红色绿色蓝色
* 十六进制：
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示没有，相当于rgb中的0
* ff表示最大，相当于rgb中255
* 红色：
* #ff0000
* 像这种两位两位重复的颜色，可以简写
* 比如：#ff0000 可以写成 #f00
* #abc #aabbcc
*
*/
background-color: rgb(161,187,215);
background-color: rgb(100%,50%,50%);
background-color: #00f;
background-color: #abc;
background-color: #084098;
背景
background-color
background-image
需要url地址作为参数
网页加载完或者和网页一同加载，不影响网页加载速度
不重要的图片使用background-image
background-image: url(img/dahuangmao-04.png);
雪碧图
减少图片请求次数
多个图标在一个图上
background-repeat
设置背景图片重复方式
可选值
- repeat（背景图片沿x轴和y轴重复）
- no-repeat（不重复）
- repeat-x（沿水平方向重复）
- repeat-y
background-position
设置背景图片位置
设置方式一
可以通过两个位置关键词来设置
如果仅仅指定一个值，则第二个值默认是center
body{
background-image: url(img/dahuangmao-04.png);
background-repeat: no-repeat;
background-position: top center;
}
设置方式二
可以直接指定两个值来设置背景图片偏移量
body{
background-image: url(img/dahuangmao-04.png);
background-repeat: no-repeat;
background-position:100px 100px;
}
background-attachment
设置背景是否随页面滚动
可选值
- scroll
- fixed（背景图片不随页面滚动，这种背景一般设置给body）
background-origin
设置背景原点（背景的左上角）边框对齐位置
可选值：
- border-box; （border，padding，content区域都设置背景）
- padding-box;（padding，content区域都设置背景）
- content-box;（content区域设置背景）
background-clip
背景剪裁（背景图片只显示出剪裁范围内的图片）
可选值：
- border-box;（只有边框显示背景）
- padding-box;（只有padding区显示背景）
- content-box;（只有内容区显示背景）
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
注意：只有 webkit /blink内核浏览器实现的使用图片填充文本的效果
该样式在移动端使用较多
background-size
背景大小
如果只设置与一个值，代表背景的宽度，第二个至会按照图片原比例进行缩放
参数：
-
n 指定背景图宽高
background-size: 200px 200px; -
百分比（百分比是相对于背景图所在元素的宽度计算）
background-size: 50% 50%; -
cover（基于元素最大的边计算背景图的大小）
background-size: cover; -
contain（基于元素最小的边计算背景图的大小）
渐变函数
linear-gradient()
线性渐变
参数1：
渐变方向
- to right -- 从左向右
- to top -- 从下到上
- to left -- 从右到左
- to bottom --- 从上到下（默认值）
- to left top --- 从右下到左上
- 角度---正值 顺时针
参数2~n：渐变颜色 渐变起始位置
background-image: linear-gradient(to right, red, yellow, blue, green);
/*基于0度顺时针旋转45deg*/
background-image: linear-gradient(45deg, red, yellow, blue, green);
/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/
background-image: linear-gradient(to right, red 50px, yellow, blue, green);
：repeating-linear-gradient
重复线性渐变（设置好渐变之后会一直重复铺满真个盒子）
background-image: repeating-linear-gradient(
to right
, red 0
, red 50px
, yellow 50px
, yellow 100px
);
radial-gradient()
径向渐变
参数1 ： 渐变形状 X渐变半径 Y渐变半径 at 渐变圆心X坐标 渐变圆心Y坐标
ellipse 50px 100px at 100px 50px,
-
circle - 圆形的渐变形状
-
ellipse - 椭圆的渐变效果（默认值）
参数2~n ： 渐变颜色 渐变起始位置
background-image: radial-gradient(circle, red, blue);
background-image: radial-gradient(ellipse at 50px 50px, red, blue);
background-image: radial-gradient(ellipse at top, red, blue);
background-image: radial-gradient(ellipse at 50% 0, red, blue);
repeating-radial-gradient
重复径向渐变
background-image: repeating-radial-gradient(circle,
red 0, red 10px, yellow 10px, yellow 20px, blue 20px, blue 30px) ;
网友评论