1.css三大特性
1.继承性
给父元素设置一些属性,子元素也可以使用,即为继承性
注意:不是所有的属性都可以继承,只有以color/font-/text-/line开头
的属性才可以继承
继承性的特殊性:
a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的
应用场景:
一般用于设置网页上的一些共性信息,例如网页的文字颜色、文字
大小、字体等内容
2.层叠性
层叠性就是css处理冲突的一种能力
注意点:
层叠性只有在多个选择器选中了同一个标签,然后又设置了相同的属性,
才会发生层叠性
3.优先级
在多个选择器选中了同一个标签,然后又设置了相同的属性,如何层叠就
由优先级来决定
优先级判断的三种方式
01:是否是直接选中(间接选中就是继承):
如果是间接选中,那么就是离谁近跟谁姓。
02:是否是相同的选择器:
如果都是直接选中,并且都是同类型选择器,那么就是谁在
后面听谁的
03:不同选择器:
如果都是直接选中,并且不是同类型选择器,那么就会按照
优先级来层叠
id>类>标签>通配符>继承>浏览器默认
2.优先级之!important
用于提升某个直接选中标签的选择器中的某个属性的优先级的,可以将被指定的属性的优先级提升为最高。
注意点:!important只能用于直接选中,不能用于间接选中。
!important只能提升被指定的属性的优先级。
!important必须写在;之前。
!不可省略。
3.优先级之权重问题
权重:当多个选择器混合在一起使用时,我们可以通过计算权重来判断谁的优先级最高
权重的计算规则:
首先先计算选择器中有多少个 id,id多的选择器优先级最高
如果id个数一样,那么就看类名,类名多的选择器优先级高
如果类名相同,就看标签名称的个数,标签名称的个数越多优先级越高
如果以上三个都一样,那么就是谁写在下面听谁的
注意点:
只有选择器是直接选中标签的,才需要计算权重
4.div和span标签
什么是div?
作用:一般用于配合css完成网页的基本布局
什么是span?
作用:一般用于配合css修改网页中的一些局部信息
div和span的区别:
1.div回大单独成行,span不会。
2.div是容器级别的标签,而span是文本级别的标签。
容器级标签和文本级标签的区别:
容器级的标签可以嵌套其他所有级的标签
文本级的标签只能嵌套文字/超链接/图片
容器级的标签:div h ul ol dl li...
文本级的标签:span p strong em ins del buis
5.css元素的显示模式
什么是块级元素?什么是行内元素?
块级元素会独占一行,行内元素不会
块级元素:p div h ul ol dl li
行内元素:文本级标签中除了p
块级元素和行内元素的区别:
1.块级元素会独占一行,行内元素不会
2.块级元素如果没有设置宽度,默认和父元素一样宽。
行内元素如果没有设置宽度,默认和内容一样宽。
行内元素是不可以设置宽度和高度的
行内块级元素:即不读占一行,又可以设置宽度和高度
6.css显示模式的转换
如何转换?
设置display属性
display取值:
inline 行内
block 块级
inline-block 块级行内
7.背景颜色
在css中有一个backgrand-color属性专门用来设置标签的背景颜色
取值:
具体单词
rgb
rgba
十六进制
8.背景图片
在css中有一个backgrand-image属性专门用来设置背景图片的。
注意点:
1.图片的地址必须放在url()中,图片的地址可以是本地的地址,也可以
是网络的地址。
2.如果图片的大小没有标签的大小大,会自动填充
9.背景平铺
在css中有一个backgrand-repeat属性专门用来设置背景平铺的。
取值:
repeat:水平垂直均平铺
no-repeat:不平铺
repeat-x:只在水平方向平铺
repeat-y:只在垂直方向平铺
10.背景定位
在css中有一个backgrand-position属性专门用来设置背景定位的。
格式:
backgrand-position:水平 垂直
取值:
水平:left right center
垂直:top center bottom
具体像素也可,可以取负值
注意:
同一个标签可以同时设置背景颜色和背景图片,如果同时设置,则是图片
覆盖颜色
11.背景缩写与关联
背景属性的缩写格式:
backgrand:背景颜色 背景图片 平铺方式 关联方式 定位方式
背景关联:不想让背景图片跟着滚动条的滚动而滚动。
属性background-attachment
取值:
scoll(默认):会随着滚动条的滚动而滚动
fixed:不会随着滚动条的滚动而滚动
12。背景图片和插入图片的区别
1.背景图片不会占用位置,插入图片会
2.背景图片有定位属性,而插入图片没有