文本属性
属性 | 描述 | 说明 |
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样式介绍完毕,下期介绍布局。