CSS | background属性
一、CSS引入方式
在HTML中引入css方式总共有三种：
- 行内样式
- 内接样式
- 外接样式: 链接式、导入式
1. 行内样式
<body> <div class="box" style="color:red;">日天</div> </body>
2. 内接样式
下面的代码需要写在<title>标签下面的<style>里面
<style type="text/css"> text是主文件类型（html、css、js），css是子文件类型 /*写我们的css代码*/ span{ color: yellow; } </style>
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p { color: green; font-size: 20px; } </style> </head> <body> <div> <p>我是一个段落</p> </div> </body> </html> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p { color: green; font-size: 20px; } </style></head><body><div> <p>我是一个段落</p></div></body></html>
执行输出：
3.外接样式
外接样式-链接式
需要写在<title>标签下面，链接css文件
举例：
index.css
p {
color: red;
font-size: 20px;
}
show.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./index.css"> </head> <body> <div> <p>我是一个段落</p> </div> </body> </html>
外接样式-导入式
需要写在<title>标签下面
举例：
index.css不变，修改html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*导入式*/ @import url('./index.css'); /*第二种写法*/ /*@import "index.css";*/ </style> </head> <body> <div> <p>我是一个段落</p> </div> </body> </html>
在这3种样式中，行内样式优先级最高。内接样式和外接样式，根据代码从上到下执行顺序。针对同一属性，最下面的会生效。这叫样式重叠现象！
二、background属性
1. background-color
背景颜色。一般输入bgc+tab键回车就可以出来了
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; height: 200px; font-weight: bolder; /*单词 十六进制 rgb*/ background-color: rgb(255,0,0); } </style> </head> <body> <div></div> </body> </html>
网页效果：
2. background-img
表示设置该元素的背景图片
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 600px; height: 300px; /*背景图片*/ background-image: url("images/zly.jpg"); } </style> </head> <body> <div></div> </body> </html>
那么发现默认的背景图片，水平方向和垂直方向都平铺
3. background-repeat
设置该元素平铺的方式
属性值：
| 值 | 描述 |
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置。背景图片仅显示一次 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 600px; height: 300px; /*边框*/ border: 1px solid red; /*背景图片*/ background-image: url("images/zly.jpg"); background-repeat: no-repeat; } </style> </head> <body> <div></div> </body> </html>
网页效果：
给元素设置padding之后，发现padding的区域也会平铺背景图片。
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 600px; height: 300px; /*边框*/ border: 1px solid red; /*背景图片*/ background-image: url("images/zly.jpg"); padding: 100px; } </style> </head> <body> <div></div> </body> </html>
网页效果：
repeat应用案例
还是上面那个超链接导航栏的案例，我们给body设置平铺的图片，注意：一定找左右对称的平铺图片，才能实现我们要的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } body{ background-image: url("images/backdrop.jpg"); } ul{ list-style: none; } .nav{ width: 960px; overflow: hidden; margin: 50px auto; background-color: purple; /*设置圆角*/ border-radius: 5px; } .nav ul li{ float: left; width: 160px; height: 40px; line-height: 40px; text-align: center; } .nav ul li a{ width: 160px; height: 40px; display: block; color: white; font-size: 14px; text-decoration: none; } /*a标签除外，不继承父元素的color*/ .nav ul li a:hover{ background: yellow; color: green; /*添加下划线效果*/ text-decoration: underline; } </style></head><body><div class="nav"> <ul> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> </ul> </div> </body></html>
网页效果：
4. background-position
这个属性设置背景原图像（由 background-image 定义）的起始位置
属性值：
| 值 | 描述 |
|
如果仅规定了一个关键词，那么第二个值将是"center"。默认值：0 0；这两个值必须挨在一起。 |
举例：看上面那个不重复的例子，如果需要设置图片居中，需要使用background-position方法。使用x和y坐标来定位图片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 600px; height: 300px; /*边框*/ border: 1px solid red; /*背景图片*/ background-image: url("images/zly.jpg"); background-repeat: no-repeat; /*表示x坐标为100，y坐标为0*/ background-position: 200px 0px; } </style> </head> <body> <div></div> </body> </html>
网页效果：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> .box{ width:186px; height: 38px; border: 3px solid red; /*background-image: url("./timg.jpg");*/ /*background-repeat: no-repeat;*/ /*background-position-x: -323px;*/ 切图 /*background-position-y: -270px*/ /*精灵图技术*/ background: url("./timg.jpg") no-repeat -323px -270px; } </style> </head> <body> <div class="box"> </div> </body> </html>
5. background-attachment
设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动
attachment 附属物; 依恋，依附;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 1000px; height: 1000px; background-image: url("images/taobao_logo.png"); border: 1px solid red; background-repeat: no-repeat; background-position: right left; /*固定背景图片*/ background-attachment: fixed; } </style> </head> <body> <div></div> </body> </html>
网页效果：拖动右边的进度条，logo始终展示。就好像右边烦人的小广告一样。
三、文本属性
介绍几个常用的。
1）文本对齐：text-align
属性值：none | center | left | right | justify
justify 两端对齐,但很少被使用，有的浏览器可能还会不支持该属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
/*设置边框*/
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div>11</div>
</body>
<html>
网页效果：
2）文本首行缩进 ：text-indent
单位建议使用em，1em就是一个字 indent：缩进
indent vt. 切割…使呈锯齿状; 缩进排版;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
/*设置边框*/
border: 1px solid red;
/*文本首行缩进*/
text-indent: 1em;
}
</style>
</head>
<body>
<div>林志玲 林志玲 林志玲</div>
</body>
<html>
网页效果：
3）文本修饰 ：text-decoration
属性值： none(默认) |
underline(下划线) |
overline(定义文本上的一条线) |
line-through (定义穿过文本下的一条线) |
inherit(继承父元素的text-decoration属性的值。)
4）行高：line-height
针对单行文本垂直居中
公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 40px;
border: 1px solid red;
font-size: 18px;
/*行高等于盒子高度，就是垂直居中*/
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div>赵丽颖</div>
</body>
</html>
网页效果：
font-size 一定比行高小。font-size 一般都是偶数，不会用奇数
四、字体属性
1）字体大小：font-size
如果设置成inherit表示继承父元素的字体大小值。默认16px
2）字体粗细：font-weight
属性值： none(默认值，标准粗细) |
bold(粗体) |
bolder(更粗）|
lighter(更细) |
100~900（设置具体粗细，400等同于normal，而700等同于bold）一般用数字|
inherit（继承父元素字体的粗细值）
3）字体样式：font-style
属性值： normal(默认值，正常字体)
italic(斜体)
oblique(倾斜字体）
4）字体系列：font-family
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。
使用font-family注意几点：
1.网页中不是所有字体都能用
因为这个字体要看用户的电脑里面装没装，比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，那么就会变成宋体。页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman
2.为了防止用户电脑里面，没有微软雅黑这个字体。
就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，没有安装微软雅黑字体，那么就是宋体：font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。
3.需要将英语字体，放在最前面
这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体： font-family: "Times New Roman","微软雅黑","宋体";
4.所有的中文字体，都有英语别名
我们也要知道： 微软雅黑的英语别名：font-family: "Microsoft YaHei";宋体的英语别名： font-family: "SimSun"; font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高可以用百分比，表示字号的百分之多少
一般来说，都是大于100%的，因为行高一定要大于字号。 font:12px/200% “宋体” 等价于 font:12px/24px “宋体”; 反过来，比如： font:16px/48px “宋体”;等价于 font:16px/300% “宋体”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 20em;
height: 5em;
border: 1px solid green;
color: red;
/*文本首行缩进*/
text-indent: 1em;
/*字体属性*/
font-size: 20px;
font-weight: bolder;
/*字体要加多个，用逗号隔开。防止别人的电脑上，没有对应的字体。
首先加载的字体为微软雅黑，如果没有，就从后面找。*/
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
}
</style></head><body>
<div>韩雪，赵丽颖，宋茜</div>
</body>
<html>
网页效果：
五、颜色表示法
一共有三种：单词、rgb表示法、十六进制表示法
1) 单词
red、green、blue
2) rgb 三原色
光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
如果此项的值，是255，那么就说明是纯色：
rgb(255,0,0) 表示红色
黑色：光学显示器，每个元件都不发光，黑色的。
颜色可以叠加，比如黄色就是红色和绿色的叠加rgb(255,255,0)；再比如，就是红、绿、蓝三种颜色的不同比例叠加。
3) 16进制表示法
所有用#开头的值，都是16进制的。16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
#ff0000：红色
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);
任何一种十六进制表示法，都能够换算成为rgb表示法。也就是说，两个表示法的颜色数量一样。
十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;
要记住：
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰
浙公网安备 33010602011771号