文本属性
| 属性 | 描述 | 说明 |
| font-size | 字体大小 | 单位是px，浏览器默认为16px |
| font-family | 字体 | 对于中英文设置不同的字体采用“，”隔开，先解析第一个字体，没有则解析第二个（eg：宋体，微软雅黑） |
| color | 颜色 | 可以采用英文，16进制和rgb模式 |
| font-weight | 加粗 | 主要用的就是bold，bolder和normal两个属性，也可以使用数值（100-900）400为默认值 |
| font-style | 倾斜 | 斜字体：italic；倾斜的文字（puls版）：oblique；常规显示：normal。 |
| text-align | 文本水平对齐 | text-align：left；水平靠左/right；水平靠右/center水平居中/justify水平两端对齐，但只对多行起作用。 |
接上表：
| line-height | 行高 | 可以实现单行文本居中 |
| text-indent | 首行缩进 | 可以取负值，且对第一行起作用通常用2em。 |
| letter-spacing | 字间距 | 控制文字之间的距离 |
| text-decoration | 文本修饰 | 赋值为：none没有主要运用在a连接上/underline下划线/overline上划线/line-through删除线 |
| font | 文字简写 | 可以表示font-style，font-weight，font-size，font-weight，line-height，font-family的简写必须按照以上顺序来简写。{ |
简单的将上述属性进行运用。
下附上代码：
HTML
<!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>
@import url(/css/a.css);
</style>
</head>
<body>
<p>11111111111111111111<div class="q" style="font-size: 25px;">22222222222222</div>33333333333<div class="w">44444444444444</div>55555555<div class="e">66666666666</div>77777777
</p>
<p>8888888888<div class="r">99999999999999</div><div class="t">1010101010</div>
111111111111<div class="y">12121212121212</div>，<div class="u">131313131313</div></p>
</body>
</html>css
.q{
font-size: 25px;
}
.w{
font-family: '宋体';
}
.e{
color: rgb(203, 61, 61);
letter-spacing: 5px;
}
.r{
font-weight: 600;
}
.t{
font-style: italic;
text-decoration: underline;
}
.y{
text-align: right;
text-decoration:overline;
}
.u{
line-height: normal;
text-decoration:line-through;
}
p{
text-indent: 2em;
}
列表属性
改变列表内元素的位置
在rgb模式下，透明度可自由设置0-1之间的数值。
图片的格式：
通过设置background-repeat的属性值，
| repeat | 默认平铺 |
| repeat-x | 平铺x轴 |
| repeat-y | 平铺y轴 |
| no-repeat | 不平铺 |
通过设置background-position的属性值设置图片的大小可用px，百分比，以及left，center，right，top，center，bottom来设置，左上角，左中等。类似于九宫格。
通过设置background-size的属性值设置背景的大小，当属性值为cover的时候将图片等比放大到背景的大小。（可能被裁掉一部分）。当属性值为contain时，等比放大图片，可能会有部分背景没有被覆盖。当属性值为100%，100%的时候不会出现裁剪问题。
通过设置background-attachment的属性值设置背景图片的效果在背景盒子大小内进行：scroll（滚动）/fixed（固定）
滚动覆盖的实际案例
HTML部分
<!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>
@import url(/css/a.css);
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>css部分
*{
margin: 0;
padding: 0;
}
div{
height: 750px;
background-position: center;
background-size: 50% 50%;
background-repeat: no-repeat;
background-color: rgb(233, 197, 153,0.6);
}
.box1{
background-image: url(/img/小兔子.png);
}
.box2{
background-image: url(/img/熊.png);
}
.box3{
background-image: url(/img/紫色的.png);
}至此css样式介绍完毕，下期介绍布局。
本文含有隐藏内容，请 开通VIP 后查看