三大特性
1.继承性
给父元素设置一些属性，子元素也可以使用。
注意
1.并不是所以的属性都可以继承，只有以color/font-/text-/line开头的属性才可以继承
2.并不是儿子可以继承，是所有后代都可以继承。
3.特殊性:
3.1:a标签的文字颜色和下划线是不能继承的父元素的
3.2:h标签的文字大小是不能继承父元素的
应用场景:一般用于设置网页上的一些共性信息，例如文字大小、文字颜色、字体等。在body里直接设置即可。
2.层叠性
层叠性就是CSS处理冲突的一种能力
注意:层叠性只有在多个选择器选中同一个标签，又配置了相同的属性才会发生。一个就会将另一个覆盖掉。
3.优先级
当触发层叠性时，如何层叠就由优先级来确定。
判断:
1.是否直接选中（间接选中就是指继承性）
如果是间接选中，就是哪个父元素离目标标签近，就继承谁的。
2.如果都是直接选中，且都是同类型的选择器，就是谁在CSS里写的后，就听谁的。
3.如果都是直接选中，但却不是相同类型的选择器，就会按照选择器的优先级来层叠。
id>类>标签>通配符>继承>浏览器默认
优先级的important
important:用于提升某个直接选中的标签的选择器中的某个属性的优先级，将这个属性的优先级提到最高。
注意
1.只能用于直接选中。
2.通配符选择器也是直接选中。
3.!important必须写到属性值的分号前面。
#text{
color:blue;
font-size:50px;
}
p{
color:red !important;
font-size:10px;
}
两个都是用来直接选中p标签，因为id选择器的优先级最高，所以本来应该听从id里面的属性，但是因为标签选择器里的color属性有!important，所以将这个p标签里的color属性优先级提到最高，因此color要听从p里的属性。
优先级的权重问题
当多个选择器混合在一起使用时，可以通过计算权重来判断哪个组合的优先级最高。
权重计算规则:
1.首先计算id的个数，id个数多的权重大。
2.若id个数相同，就看类选择器的个数，谁的class个数多谁的权重大。
3.如果id，class都相同，就看标签选择器的个数，同上。
4.如果三个选择器的个数都相同，就是谁写在后面就听谁的。
（没有通配符选择器，是因为通配符选择器的权重是0）
注意：只适合直接选中。只有直接选中需要计算权重。
#text{
color:blue !important;
}
#textp{
color:red;
}
虽然#textp权重更高，但是#text里的color里有 !important，所以听从#text里的color。
div和span
<div></div>
一般用于配合CSS的网页布局
<span></dspan>
用于配合CSS修改网页的一些局部信息
将信息用<span></span>包裹起来
div和span的区别
1.div独占一行，span不会独占一行。
2.div是一个容器级的标签，span是一个文本级别的标签。
容器级标签和文本级标签的区别
容器级标签可以嵌套其他所有标签
文本级标签只能嵌套文字/超链接/图片（有时候放别的标签显示没有问题，但是标准格式不能放）
CSS元素显示模式
HTML将标签分为容器级标签和文本级标签
CSS将标签分为块级元素和行内元素
块级元素和行内元素的区别:
1.块级元素
①独占一行，所有的容器级标签＋p标签
②如果没有设置宽度，就和父元素一样宽;如果设置了，就按照设置的显示。
2.行内元素
①不会独占一行，所有文本级标签-p标签
②不能设置宽度和高度，永远和内容一样宽高。
3.行内块级元素（如 img标签）
不独占一行又可以设置宽高
CSS元素显示模式的转换
div{
display: inline;/*行内*/
}
span{
display: block;/*块级*/
width: 500px;
height: 500px;
}
p{
display: inline-block;/*行内块级*/
}
背景颜色
div{
width: 500px;
height: 500px;
background-color: red;
/*背景颜色也要设置宽高，因为背景颜色也没法撑开div*/
}
背景图片
div{
width: 400px;
height: 400px;
background-image: url("image/000.jpg");
/*背景图片要先给div设置宽高，因为背景图片没法把div撑开*/
}
注意
1.图片的地址可以是本地的，也可以是网络的。
2.如果图片的大小没有标签的大小大，那么就会自动在水平和垂直方向上平铺和填充。
3.如果网页上出现了图片，那么网页会再次发送请求获取图片。
背景平铺
div{
width: 1000px;
height: 1000px;
background-repeat: no-repeat;
background-image: url("image/77_WPS1图片.png");
}
background-repeat: repeat/no-repeat/repeat-x/repeat-y;
应用：选一张小图片，让它平铺，当做背景，可以提升网页的访问速度。
body{
background-image:url();
}
当给同一个标签同时设置了背景颜色和图片，那么图片将会覆盖颜色。
背景图片的定位
div{
background-position:right bottom;
width: 500px;
height: 500px;
background-repeat: no-repeat;
background-image: url("image/77_WPS1图片.png");
background-color: red;
}
background-position:水平方向 垂直方向;
水平取值：center/left/right/数字
垂直取值：center/top/bottom/数字
把图片移到背景外面：background-position: -100px -100px;
数字取值可以取负数。
背景关联和缩写
background:背景颜色 背景图片 平铺方式 关联方式 定位方式;
任何一个属性都可以省略，并且位置可以换。
关联方式
默认情况下背景图片会随着滚动条的滚动而滚动
background-attachment:scroll / fixed ;
scroll:默认，随着滚动条的滚动而滚动。
fixed:不会随着滚动条的滚动而滚动。
背景图片和插入图片的区别
1.背景图片仅仅是一个装饰，不会占用位置；
插入图片会占用位置。
2.背景图片有定位属性，可以方便的控制图片的位置；
插入图片不行。
3.插入图片的语义比背景图片的语义要强，所以在企业开发中如果你的图片相被搜索引擎收录，最好用插入图片。
精灵图
拼合成的图片
因为一张图片就得向服务器发送一次请求，所以精灵图可以减少请求次数，降低服务器的压力。
要配和背景图和背景定位使用。
{
width:要显示的其中一部分图片的宽度;
height :要显示的其中一部分图片的宽度;
background -images:url(整个图片的名称);
background -position :-xpx -ypx;
}
边框属性
格式
1.1连写1（同时设置4条边）
border:宽度 样式 颜色;
快捷键:bd+
1.2连写2（分别设置4条边）
border-top:宽度 样式 颜色;
border-bottom:宽度 样式 颜色;
border-left:宽度 样式 颜色;
border-right:宽度 样式 颜色;
1.3连写（分别设置4条边）
border-width:上 右 下 左;
border-style:上 右 下 左;
border-color:上 右 下 左;
这3个属性的取值省略时的规律:
上 右 下 左>上 右 下 >左边的取值和右边一样
上 右 下 左>上 右 >同上，下边的和上边的一样
上 右 下 左>上 >其他的的取值都和上边一样
注意
1.连写格式中颜色可以省略，省略之后就是黑色。
2.连写格式中宽度可以省略，还是可以看到边框。
3.连写格式中样式不可以省略，省略之后就看不到边框了。
2.分开写
border-top-width: ;
应用：用边框属性画图
画个三角形：
<style type="text/css">
.san{
width: 0px;/*宽度为0，高度无所谓*/
height: 10px;
border-width: 10px;
border-style: solid;
border-color: #666666 white white white;
}
</style>
<div class="san">
</div>
扫一扫
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
