css背景颜色，图片，平铺，图片位置
通过css背景属性，可以给页面元素添加背景颜色
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
（1）背景颜色
语法格式：
background-color: 颜色值；一般情况下元素背景颜色默认值是transparent(透明)
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 500px;
height: 500px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果图：
背景颜色半透明 ：
例：background： rgba(0,0,0,0.3);
最后一个参数是alpha透明度，取值范围在0-1之间
（2）背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置。
语法格式：
background-image：none | url(url);| 参数值 | 作用 |
| none | 无背景图（默认的） |
| url | 使用绝对或相对地址指定背景图像 |
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 500px;
height: 500px;
background-image: url(img/1.png);
}
</style>
</head>
<body>
<div></div>
</body>
</html>结果图：
（3）背景平铺
使用background-repeat属性可以在HTML页面上对背景图像进行平铺
语法格式：
background-repeat： repeat | no-repeat | repeat-x | repeat-y;| 参数值 | 作用 |
| repeat | 背景图像在纵向和横向上平铺 |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向上平铺 |
a.repeat结果图：
b.no-repeat 结果图：
c.repeat-x 结果图：
d.repeat-y结果图：
（4）背景图片位置：
利用background-position属性可以改变图片在背景中的位置
语法格式：
background-position: x y;| 参数值 | 说明 |
| length | 百分数 | 由浮点数字和单位标识符组成的长度 |
| position | top、center,bottom,left,right |
例:将图片放置右边居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 500px;
height: 500px;
background-color: skyblue;
background-image: url(img/1.png);
background-repeat: no-repeat;
background-position: right center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>结果图：
超大背景图片：
a.
background-image: url(url);
background-repeat: no-repeat;
background-position: center top;b.
background-image: url(url);
background-size: cover;精确位置:
例：background-position: 20px 50px;
混合单位：
例：background-position: 20px center;
(5)背景图片固定
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
语法格式：
background-attachment: scroll | fixed;| 参数 | 作用 |
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
（6）背景复合写法：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
字体属性、文本属性和css引入方式
字体属性
1.字体系列
css使用font-family属性定义文本的字体系列
例：p {font-family: '微软雅黑';}
2.字体大小
css使用font-size属性定义字体大小
例: p{font-size: 20px;}
3.字体粗细
css使用font-weight属性设置文字的粗细
normal:正常的字体。相当于number为400。声明此值将取消之前任何设置
bold：粗体。相当于number为700。也相当于b对象的作用
bolder:特粗体
lighter:细体
4.字体样式
css使用font-style属性设置文本的风格
例：p{font-style: normal;}
normal:默认值，浏览器会显示标准的字体样式
italic:浏览器会显示斜体的字体样式
文字属性
1.文本颜色
color属性用于定义文本的颜色
例：div{color: blue;}
| 表示 | 属性值 |
| 预定义的颜色值 | red,green,blue,pink等 |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
2.对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
例：div{text-align: center;}
| 属性值 | 解释 |
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
3.装饰文本
text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等
例：div{text-decoration：underline;}
| 属性值 | 描述 |
| none | 默认。没有装饰线。（最常用） |
| underline | 下划线。链接a自带下划线（常用） |
| overline | 上划线。 |
| line-through | 删除线 |
4.文本缩进
text-indent属性用来指定文本地第一行的缩进，通常是将段落的首行缩进
例：div{text-indent: 10px;}或div{text-indent: 2em;}
5.行间距
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离
例：p{line-height: 26px;}
css引入方式
css样式表可以分为三大类：行内样式表、内部样式表、外部样式表
1.内部样式表:是写到HTML页面内部，是将所有的css代码抽取出来，单独放到一个<style>标签中
例：
<style>
div {
color: red;
font-size: 12px;
}
</style>2.行内样式表：是在元素标签内部的style属性中设定css样式
例：
<div style="color:red; font-size:12px;">文本</div>3.外部样式表：样式单独写到css文件中，之后把css文件引入到HTML页面中使用
<link rel="stylesheet" href="css文件路径"元素显示模式、侧边栏案例
作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素以什么方式显示，比如<div>独占一行，一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型
块元素
常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<ol>,等，其中<div>标签是最典型的块元素。
块级元素的特点：
独占一行；
高度，宽度，外边距以及内边距都可以控制；
宽度默认是容器的100%；
是一个容器及盒子，里面可以放行内或者块元素。
注：
文字类的元素不能使用块级元素；
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>;
<h1>~<h6>等都是文字类块级标签，里面也不能放其他块元素
行内元素
常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中<span>标签是最典型的行内标签，有的地方也将行内元素称为内联元素。
行内元素的特点：
相邻行内元素在一行上，一行可以显示多个；
高，宽直接设置是无效的；
默认宽度就是它本身内容的宽度；
行内元素只能容纳文本或其它行内元素
注：
链接里面不能再放链接；
特殊情况链接<a>里面可以放块元素，但是给<a>转换一下块级模式最安全
行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<td>, 它们同时具有块元素和行内元素的特点。
行内块元素的特点：
和相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个。（行内元素特点）
默认宽度就i是它本身内容的宽度。（行内元素特点）
高度，行高，外边距以及内边距都可以控制。（块元素特点）
元素显示模式的转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display:inline-block;
单行文字居中的原理
方案：让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中
如：div {
width:200px;
height:40px;
background-color:skyblue;
line-height:40px;
}
中的height与line-height的值相同
侧边栏案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
/*将连接转换为块元素*/
display: block;
/*设置宽高*/
width: 200px;
height: 40px;
/*设置背景颜色*/
background-color: skyblue;
/*设置字体大小*/
font-size: 14px;
/*设置字体颜色*/
color: navy;
/*消除超链接样式*/
text-decoration: none;
/*文本缩进*/
text-indent: 2em;
/*实现文字居中值等于height*/
line-height: 40px;
}
/*鼠标经过链接变换背景颜色*/
a:hover{
background-color: #fff;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>结果图：
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
