一、背景相关属性
1.背景颜色
属性名:background-color(bgc)
取值:颜色取值。关键字、rgb表示法、rgba表示法、十六进制..
<style>
div{
width:400;
height:400;/*设置盒子的大小*/
background-color:transparent;/*默认值为透明*/
}
</style>
通过设置背景颜色来查看盒子在页面中的布局
2.背景图片
属性名:background-image(bgi)
属性值:background-image:url('图片路径')
<style>
div{
width:400;
height:400;/*设置盒子的大小*/
background-image:url(.图片路径)
}
</style>
网页自动将图片水平垂直平铺,不会拉伸来填充整个盒子,类似铺地砖。
和背景颜色一样,如果在页面中没有设置盒子是无法将图片或颜色填充到网页当中的。
3.背景平铺
属性名:background-repeat(bgr)
属性值:repeat(水平和垂直都平铺,是默认值)
no-repeat(不平铺)
repeat-x (沿水平方向平铺)
repeat-y(沿垂直方向平铺)
<style>
div{
width:400;
height:400;/*设置盒子的大小*/
background-image:url(.图片路径)
background-repeat:no-repeat;
}
</style>
4.背景位置
属性名:background-position(bgp)
属性值:background-position:水平方向位置 垂直方向位置;
1.方位上的取值: 水平方向取值:left、center、right
垂直方向取值:top、center、bottom
2.数字+px(坐标):原点是盒子的左上角,将图片的左上角与坐标点重合。
两种取值方法可以混用,但是要注意先水平后垂直
5.背景相关属性的连写
属性名:background(bg)
属性值:单个属性值的合写,取值之间用空格隔开
书写顺序:background:color image repeat position
可以按照需求省略,省略后是默认值
如果要将连写和单独写在一起,要么把单独的样式写在连写下面,要么把单独的样式写在连写的里面
6.img标签和背景图片的区别
1.使用img标签可以设置长宽高
2.div标签+背景图片,需要设置div的长宽,但是图片只是div的一个装饰,不能够单独撑开div标签
二、元素显示模式
1.块级元素
如果一个元素的属性为block属性就表示他是一个块级元素。即display:block
块元素的显示特点:独占一行、宽度默认为父元素的宽,高度由内容撑开、可以设置宽高。
2.行内元素
如果一个元素的属性为inline就表示他是一个行内元素。即display:inline
显示特点:一行可以显示多个行内元素,宽度和高度默认由内容撑开,但是不可以是设置宽高。
3.行内块元素
如果一个元素的属性为inline-block就表示他是一个行内元素。即display:inline-block
显示特点:一行可以显示多个元素,可以设置宽高
4.元素显示模式转换
属性名称:display:要转换成的元素
属性值:display:block、inline、inline-block
写在style中要转换的标签内
5.HTML的嵌套
块级元素一般可以嵌套文本、块级元素、行内元素、行内块元素等等
但是p标签不能嵌套div、p、h、等块级元素
在a标签内可以嵌套任意元素,但是a标签不能嵌套a标签
三、CSS的三大特性
1.继承性
网页中的子元素会默认继承父元素的特点
常见继承的属性:color、font-style……
使用CSS的继承性可以在一定程度上减少代码,在父标签上进行子标签的属性设置。
继承失效的特殊情况:如果元素身上有浏览器的默认样式,虽然会继承父元素的属性,但是优先显示浏览器的默认样式。
如:a标签的color会继承失效,会被浏览器的默认样式覆盖。h系列的标签的font-size会继承失效。div标签的高度不能继承,但宽度有类似继承的效果,在删除div子元素的的宽度后,会与父元素的宽度一致,这是因为div是一个块元素,会独占一行,这是他本身的特性。
2.层叠性
给同一个标签设置不同的样式 ,此时样式会层叠叠加,会共同作用在标签上
给同一个标签设置相同的样式,此时样式会层叠覆盖 , 最终写在最后的样式会生效
当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果
3.优先级
不同选择器具有不同的优先级,优先级高的会覆盖优先级低选择器样式
优先级公式:继承<通配符选择器 <标签选择器<类选择器<id选择器 <行内样式 <!important
注意点:
1.limportant写在属性传的后面,分号的前面!
2.limportant不能提升继承的优先级,只要是继承优先级最低!
3.实际开发中不建议使用 !important