背景(background)
1.背景颜色
background-color: 颜色值
一般背景元素默认的值是 transparent(透明)
2.背景图片
background-image: url()
常见于
装饰性图片(logo)
或者
超大图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是一个背景</title>
<style>
body {
background-image: url(../images/王者背景.jpg);
background-position: center 40px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
精灵图(sprities)也是一种应用场景。
精灵图:为了有效减少服务器接收和发送次数,提高页面加载速度,将网页中的小背景图片整合到一张大的图片上,这样服务器只需要请求一次。
如王者荣耀官网将图片放在一张上。
Tips:
针对背景图片使用。
移动背景图片位置(background-position),将图片向上移动y轴坐标为负,向左移动x轴坐 标为负。
3.背景平铺
backgound-repeat: repeat/no-repeat/repeat-x/repeat-y
默认下背景均为平铺。
页面元素可以添加背景颜色和背景图片,但背景图片会压住背景颜色。
4.背景图片位置
background-posotion: x y;
x和y可以为x轴y轴的坐标也可以是方位名词(left right等)
使用方位名词时,两个值前后顺序无关(一个是top,bottom;一个是left,right);
如果只使用一个方位名词,另一个参数方位一定居中;
如果是精确单位(值)x坐标是到左侧的距离,y坐标是到右侧的距离;只指定一个数值的话,这个数值一定是x的坐标,另一个为居中对齐。
背景图片位置也可以使用混合单位
,即方位名词与精确单位一起使用。
background-position: 20px center;
5.背景固定
background-attachment: scroll(默认为滚动) / fixed;
background-attachment属性设置图像是否固定或者随页面其余部分滚动。
后期可以使用做视差滚动效果;
6.背景复合写法
可以将背景属性合并简写在同一个属性background里;
一般书写习惯:
background: 颜色 图片地址 平铺 图像滚动 位置;
但并不强制一定按以上顺序进行书写;
CSS三大特性
1.层叠性(后来居上,直接覆盖)
给相同选择器设置相同的样式,此时样式会进行覆盖。
层叠性遵循就近原则(样式离结构近的先进行)
样式不冲突的话不会层叠;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
div {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.继承性
子标签会继承父元素中某些样式(主要与文字相关样式,如:text- ;font- ;)
可以降低代码复杂度;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>hello</p>
</div>
</body>
</html>
行高的继承性:
body { font:12px/1.5}
如果子元素未设置行高,则为当前文字大小的1.5倍;
未设置文字大小,则继承父元素文字大小与行高;
3.优先级
当一个元素指定多个选择器,选择器相同则执行层叠性;
选择器不同,则按权重;
!important | 权重最高 |
行内样式(style) | 1,0,0,0 |
ID选择器 | 0,1,0,0 |
类/伪类选择器 | 0,0,1,0 |
元素选择器 | 0,0,0,1 |
通配符选择器 | 0,0,0,0 |
Tips:
权重有叠加,不存在进位;
继承的权重为0,如果元素未直接选中,不论父元素权重多高,子元素权重为0;