一、背景属性
1.背景颜色
background-color: red;
2.背景图片相关
1）设置背景图片:background-image : url("路径");
设置背景图片，指定图片路径，如果路径中出现中文或空格，需要加引号
2）设置背景图片的重复方式
默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：
1. 如果元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素
2. 如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见
取值 ：
repeat 默认值，沿水平和垂直方向重复平铺
repeat-x 沿X轴重复平铺
repeat-y 沿Y轴重复平铺
no-repeat 不重复平铺
background-repeat:repeat/repeat-x/repeat-y/no-repeat
3）设置背景图片的显示位置:默认显示在元素左上角 background-position:x y;
取值方式：
1. 像素值：设置背景图片的在元素坐标系中的起点坐标
2. 方位值
-
- 水平 ：left/center/right
- 垂直 ：top/center/bottom
注：如果只设置某一个方向的方位值，另外一个方向默认为center
3. 百分比：类似于方位值，根据百分比计算背景图片的显示坐标。
计算方式：
横坐标 = (元素宽度 - 背景图片宽度）* x%
纵坐标 = (元素高度 - 背景图片高度) * y %
特殊值：
0% 0% 左上角
100% 100% 右下
50% 50% 居中显示
精灵图技术 ：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于background-position进行背景图片位置的调整，实现显示不同的图标
4）设置背景图片的尺寸：background-size:width height;
取值方式 ：
1. 像素值
- 500px 500px; 同时指定宽高
- 500px; 指定宽度，高度自适应
2. 百分比：百分比参照元素的尺寸进行计算
- 50% 50%; 根据元素宽高,分别计算图片的宽高
- 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放
3.背景属性简写:background:color url("") repeat position;
注意 ：
1. 如果需要同时设置以上属性值，遵照相应顺序书写
2. background-size 单独设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div, h1 { width: 100px; height: 100px; margin: 200px auto; background-color: pink; background-image: url(northStar.jpg); /*y轴重复*/ background-repeat: repeat-y; /*x轴重复*/ background-repeat: repeat-x; /*不重复*/ background-repeat: no-repeat; /*background-position:-100px -100px;*/ background-position: 100% 100%; } div:hover { background-position: -160px -40px; } h1 { width: 500px; height: 500px; margin: 0 auto; /* background-size特殊取值： cover：覆盖 将图片等比拉伸至足够大，完全覆盖元素，超出部分不可见(最小的边距和元素块一样大) contain:包含 将图片等比拉伸至刚好被元素容纳（最大的边距不超过元素块） */ background-size: cover; } h2 { width: 500px; height: 500px; background: cyan url(照片.jpg) no-repeat center; font: 400 36px "宋体"; } </style> </head> <body> <h2>字体样式展示</h2> <h1></h1> <div></div> </body> </html>
二、文本属性
1.字体相关
1）设置字体大小：font-size:20px;
2）设置字体粗细程度
取值 ：
- normal（默认值）等价于400
- bold (加粗) 等价于700
3）设置斜体：font-style:italic;
4）设置字体名称：font-family:Arial,"黑体";
取值 :
- 可以指定多个字体名称作为备选字体,使用逗号隔开
- 如果字体名称为中文,或者名称中出现了空格,必须使用引号
例 : font-family:Arial;
font-family:"黑体","Microsoft YaHei",Arial;
5）字体属性简写：font : style weight size family;
注意 :
1. 如果四个属性值都必须设置,严格按照顺序书写
2. size family 是必填项
2.文本样式
1）文本颜色：color:red;
2）文本装饰线：text-decoration:none;
取值 :
- underline 下划线
- overline 上划线
- line-through 删除线
- none 取消装饰线
3）文本内容的水平对齐方式：text-align:center;
取值 :
- left(默认值) 左对齐
- center 居中对齐
- right 右对齐
- justify 两端对齐
4）行高：line-height:30px;
使用 :文本在当前行中永远垂直居中,可以借助行高调整文本在元素中的垂直显示位置
- line-height = height 设置一行文本在元素中垂直居中
- line-height > height 文本下移显示
- line-height < height 文本靠上显示
特殊 :line-height可以采用无单位的数值,代表当前字体大小的倍数,以此计算行高
5）font属性简写2：font : size/line-height family;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p{ 8 font-size:32px; 9 font-weight:bold; 10 /*font-style:italic;*/ 11 font-family:"宋体","黑体"; 12 color:blue; 13 text-decoration:none; 14 width:200px; 15 background:orange; 16 height:200px; 17 /*居中*/ 18 text-align:justify; 19 /*和文本高度一样（居中效果）*/ 20 /*根据字体大小计算行高*/ 21 line-height:2; 22 } 23 span{ 24 /*行高*/ 25 font:italic 700 32px/2 "黑体"; 26 background:red; 27 28 } 29 </style> 30 </head> 31 <body> 32 <h1>python</h1> 33 <p>hello python hello python hello python hello python hello python hello python</p> 34 <span>人生苦短</span> 35 </body> 36 </html>