背景
属性 | 作用 |
---|---|
background-color | 设置背景颜色 |
background-image | 设置背景图片(默认横向纵向平铺) |
background-repeat | 设置平铺,no-repeat不平铺,repeat-x横向平铺,repeat-y纵向平铺,repeat横向纵向平铺,round图片自动缩放适应填满整个容器,space图片以相同的间距平铺填满整个容器 |
背景位置
如果背景不设置平铺,可能就会有多余的空间,这个时候可以设置背景图片的位置
设置背景图片位置的属性:background-position
值:(默认左上角)
- 利用方位名词
左left、右right、上top、下bottom、中center、左上left top、右上right top、左下left bottom、右下right bottom、左中left center、中中center center、右中right center、上中top center、下中bottom center (如果方位名词只写一个,另外一个默认为center) - 精确单位第一个值为x坐标,第二个值为y坐标,0 0点在左上角,往右为x轴,往下为y轴
- 混搭
例:
center 10px 水平居中,y为10px
10px center垂直居中,x为10px
背景附着
设置背景附着的属性background-attachment
值:
scroll:背景图像随对象内容滚动(默认值)
fixed:背景图像固定
背景简写
官方并没有强制要求,但是按照可读性可以按一下顺序写
background:背景颜色 背景图片地址 背景平铺 背景附着 背景位置
背景透明
背景透明设置:
background: rgba(0,0,0,0.3)
背景图片缩放
设置背景图片的尺寸的属性:background-size
值:
- 宽度 高度(最好只改一个值,防止缩放失真)
- 百分比
- cover:铺满整个容器,溢出部分会被隐藏,好处不会造成图片失真,会造成图片不完整(使用较多)
- contain:自动缩放图片尽量铺满容器,保证图片完整,但是会有部分无法覆盖(当高度或宽度有一个与容器一样大,就不再缩放)
多张背景图片
格式:
background: url(图片1路劲) 图片位置,url(图片2路径) 图片位置,。。。url(图片n路径) 图片位置 背景颜色
- 一个元素可以设置多背景图像
- 每组属性之间使用,分隔
- 如果多个背景图片之间存在交集,那么前面的图片就会覆盖后面的图片
- 为避免背景颜色将图片覆盖,背景颜色通常定义在最后一组
凹凸文字效果
通过文字阴影实现
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: #ccc;
}
div {
color: #ccc;
font: 700 80px "微软雅黑";
}
div:first-child {
/*text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;*/
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
div:last-child {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div>我是凸起文字</div>
<div>我是凹下文字</div>
</body>
王者荣耀官网导航栏案例
补充知识:
链接标签a的修饰text-decoration
值 | 作用 |
---|---|
none | 没有下划线 |
underline | 下划线(默认) |
overline | 上划线 |
line-through | 删除线 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: black;
}
a {
display: inline-block; /*把a行内元素转为行内块元素*/
width: 200px;
height: 50px;
text-align: center; /*文字水平居中*/
color: white;
line-height: 50px; /*技巧,当容器内只有一行文字时,设置文字高度为容器高度就能达到文字垂直居中的效果*/
text-decoration: none; /*删除下划线*/
}
a:hover {/*鼠标经过*/
background: orange;
}
</style>
</head>
<body>
<a href="#">专区说明</a>
<a href="#">申请资格</a>
<a href="#">奖励兑换</a>
<a href="#">下载游戏</a>
</body>
</html>
CSS的三大特性
CSS的层叠性
一般情况下,如果出现样式冲突,则会按照CSS的书写的顺序,以最后的样式为准
例如:
div {
color: red;
}
div {
color: pink;
}
最后显示的颜色为pink
CSS的继承性
书写CSS样式表时,子标签会继承父标签的某些样式,如字体,颜色,字号,行距等
例如:
<head>
<style type="text/css">
div {
color: pink;
font-size: 28px;
}
</style>
</head>
<body>
<div>
<p>花花,你好</p>
</div>
</body>
在没有给p标签指定样式的情况下,p标签里的内容继承了父标签div的样式
CSS的优先级
选择器 | 权重 |
---|---|
标签选择器 | 0001 |
类选择器,伪类选择器 | 0010 |
id选择器 | 0100 |
行内样式表 | 1000 |
!important | ∞无穷大 |
最后一个举例:
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
color: red!important;
}
div {
color: pink;
font-size: 28px;
}
</style>
</head>
<body>
<div>
花花,你好
</div>
</body>
字为红色,大小28px
权重的叠加
例如:
div ul li | 0 0 0 3 |
---|---|
.nav ul li | 0 0 1 2 |
a:hover | 0 0 1 1 |
a:hover | 0 0 1 1 |
.nav a | 0 0 1 1 |
#nav a | 0 1 0 1 |
注意:
- 权重的数位之间是没有进制的,级别之间不可超越,比如0 0 0 5 + 0 0 0 5 = 0 0 0 1 0而不是0 0 1 0,所以不会存在10个标签选择器跟类选择器的权重一样的情况
- 子类标签继承父类标签的样式,继承过来的权重为0 0 0 0
练一练
第一题:
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father #son {
color: blue;
}
#father p.c2 {
color: black;
}
div.c1 p.c2 {
color: red;
}
#father {
color: green!important;
}
</style>
</head>
<body>
<div class="c1" id="father">
<p class="c2" id="son">试问这行字体是什么颜色</p>
</div>
</body>
答案:blue
第二题:
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<div id="father">
<p>试问这行字体是什么颜色?</p>
</div>
</body>
答案:blue
第三题:
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div p {
color: red;
}
#father {
color: red;
}
p.c2 {
color: blue;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p class="c2">试问这行字体是什么颜色?</p>
</div>
</body>
答案:blue
第四题:
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div div {
color: blue;
}
div {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<div>试问这行字体是什么颜色?</div>
</div>
</div>
</body>
答案:blue
第五题:
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div div div div div div div div div div div div {
color: red;
}
.me {
color: blue;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">试问这行字体是什么颜色?</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
答案:blue
第六题:
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.c1 .c2 div {
color: blue;
}
div #box3 {
color: green;
}
#box1 div {
color: yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">文字</div>
</div>
</div>
</body>
答案:yellow