11.38 css三大特性
11.381 继承性
1、定义：给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性2、注意： 1、只有以color、font-、text-、line-开头的属性才可以继承 2、a标签的文字颜色和下划线是不能继承别人的 3、h标签的文字大小是不能继承别人的，会改变，但是会在原来字体大小的基础上改变 ps:打开浏览器审查元素可以看到一些inherited from...的属性3、应用场景： 通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式
11.382 层叠性
定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果注意：1、层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，才会发生层叠性
11.383 优先级
1、定义：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定2、优先级 整体优先级从高到底：行内样式>嵌入样式>外部样式1、大前提：直接选中 > 间接选中(即继承而来的)2、如果都是间接选中，那么离目标标签比较近的优先级高，就近原则3、如果都是直接选中，并且都是同类型的选择器，那么写在后面的优先级高4、如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠 #内联>id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性)5、优先级之!important !important方式来强制指定的属性的优先级提升为最高，但是不推荐使用。因为大量使用!important的代码是无法维护的。 注意： 1、!important只能用于直接选中，不能用于间接选中 2、!important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升 3、!important必须写在属性值分号的前面
11.39 字体属性
1、font-weight：文字粗细(字重)
normal 默认值，标准粗细 bord 粗体 border 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值
2、font-style：文字风格
normal 正常，默认就是正常 italic 倾斜
3、font-size：文字大小
一般是12px或13px或14px 注意： 1、通过font-size设置文字大小一定要带单位，即一定要写px 2、如果设置成inherit表示继承父元素的字体大小值。
4、font-family：文字字体
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif #按照顺序依次选取用户可用的字体 常见字体： serif 衬线字体 sans-serif 非衬线字体 中文：宋体，微软雅黑，黑体
注意： 1、设置的字体必须是用户电脑里已经安装的字体，浏览器会使用它可识别的第一个值。 2、如果取值为中文，需要用单或双引号扩起来
5、文字属性简写
font-weight: bolder; font-style: italic; font-size: 50px; font-family: 'serif','微软雅黑'; 简写为: font: bolder italic 50px 'serif','微软雅黑';
6、color：文字颜色
| 格式 | 描述 | |
|---|---|---|
| rgb | color：rgb(255,0,0); | 红色：rgb(255,0,0) 绿色：rgb(0,255,0) 蓝色：rgb(0,0,255) 黑色：rgb(0,0,0) # 所有都不亮 白色：rgb(255,255,255) # 所有都最亮 灰色：只要让红色/绿色/蓝色的值都一样就是灰色而且三个值越小越偏黑色越大越偏白色 |
| rgba | color：rgba(255,0,0,0.1); | rgba到css3中才推出，比起rgb多了一个a，a代表透明度 a取值0-1，取值越小，越透明 |
| 十六进制 | color: #FF0000; | #FF0000 其中FF代表R，00代表G，00代表B |
11.310 文本属性
1、text-align：规定元素中的文本的水平对齐方式
| left | 左边对齐 默认值 |
|---|---|
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
2、text-decoration：文本装饰
| none | 默认，定义标准的文本，通常用来去掉a标签的下划线 |
|---|---|
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
3、text-indent：首行缩进
#将段落的第一行缩进 32像素,16px;=1em;
p {text-indent: 32px;}
p {text-indent: 2em;}
4、line-height：行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
p {
width: 500px;
height: 200px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div>
<p>hello英雄不问出处，流氓不论岁数</p>
</div>
</body>
</html>
11.311 背景属性
注意：没有宽高的标签，即便设置背景也无法显示，即要求标签是块级标签或行内块级标签
| background-color | 设置标签的背景颜色的 | rgb(0,255,0); rgba(0,255,0,0.1); #00ffff; |
|---|---|---|
| background-image | 设置标签的背景图片 | background-image: url("images/2.jpg");注意：如果图片的大小小于标签的大小，那么会自动在水平和垂直方向平铺和填充 |
| background-size | 设置标签的背景图片的宽、高 | background-size: 300px 300px; background-size: 100% 100%; |
| inherit | 设置从父元素继承background属性值 | 以上背景属性的值均可以设置为inherit，代表从父元素继承background属性 |
background-repeat：设置标签的背景图片的平铺方式
background-repeat: repeat; #默认值，在垂直和水平方向都重复 background-repeat: no-repeat; #不重复，背景图片将仅显示一次 background-repeat: repeat-x; #背景图片将在水平方向平铺 background-repeat: repeat-y; #背景图片将在垂直方向平铺
应用：可以在服务端将一个大图片截成小图片，然后在客户端基于平铺属性将小图重复这样用户就以为是一张大图，如此，既节省了流量提升了速度，又不影响用户访问例如很多网站的导航条都是用这种手法制作的
background-attachment：设置标签的背景图片在标签中固定或随着页面滚动而滚动
background-attachment: scroll; #默认值，背景图片会随着滚动条的滚动而滚动 background-attachment: fixed; #不会随着滚动条的滚动而滚动`
background-position：
前端的坐标系：图片默认都是在盒子的左上角，background-position属性，就是专门用于控制背景图片的位置background-position：水平方向的值，垂直方向的值1、具体的方位名词 水平方向：left，center，right 垂直方向：top，center，bottom #如果只设置了一个关键词，那么第二个值就是"center"2、百分比 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 #如果只设置了一个值，另一个值就是50%。3、具体的像素 第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0 单位是像素 (0px 0px) 或任何其他的 CSS 单位。 #如果只设置了一个值，另一个值就是50%。可以混合使用%和position值。
1、背景属性缩写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
div {
width: 500px;
height: 500px;
/*background-color: red;*/
/*background-image: url("https://images.jpg");*/
/*background-repeat: no-repeat;*/
/*background-position: right bottom;*/
/*background-size: 100px 100px;*/
background: red url("https://images.jpg") no-repeat right bottom/100px 100px;
} #背景属性缩写
</style>
</head>
<body>
<div></div>
</body>
</html>
2、背景图片和插入图片的区别
1、背景图片仅仅只是一个装饰，不会占用位置，插入图片会占用位置 2、背景图片有定位属性，可以很方便地控制图片的位置，而插入图片则不可以 3、插入图片语义比背景图片的语义要强，所以在企业开发中如果你的图片想被搜索引擎收录，那么推荐使用插入图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: red;
background-image: url("https://images.jpg");
background-repeat: no-repeat;
background-position: right bottom;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
1111111111111
</div>
<div class="box2">
22222222222222
<img src="https://images.jpg" alt="">
</div>
</body>
</html>
11.3111 rgba与opacity
rgba只能给背景设置透明度,不能给标签、标签的子标签设置透明度，opacity可以给整个标签设置透明度，包括标签的子标签以及标签里的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1 {
width: 200px;
height: 200px;
background-color: rgba(0,0,0,0.65);#只能给背景设置透明度
#
#opacity: 0.65; 改变整个标签的透明度
}
</style>
</head>
<body>
<div class="c1">我是我啊啊啊啊</div>
</body>
</html>
如果想给背景图片设置透明度，则必须使用opacity，因为背景图片不能与背景颜色同时使用，如果同时使用，则背景颜色一直被背景图片覆盖，背景颜色不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1 {
height: 800px;
background-image: url("https://images.jpg");
background-size:300px auto;
opacity: 0.55; #改变整个标签的透明度
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>