网页美化
概述: 网页的美化主要是对网页的字体样式,文本样式以及背景图等等进行美化,能够有效的传递网页信息和提高用户体验
div标签: div标签是一个无属性标签,主要是起到切块作用,把一片区域单独分割开来进行美化
span标签: span 标签主要是对一些重要的字体进行标记,然后就可以在标签里面设置属性,根据属性来美化
1 字体样式
常用属性:
属性名 | 解释 | 常用值 |
---|---|---|
font-family | 字体样式,如:斜体等等 | Arial(楷体),bold(黑体) |
font-size | 字体大小 | XXpx |
font-weight | 字体粗细 | bolder,XXpx |
color | 字体颜色 | red,RGB值 |
例子:
css代码:
body {
font-family: 楷体;
font-size: 20px;
font-weight: bolder;
}
.first{
color: aqua;
}
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<p>
<h1>爱在秋天</h1>
<p class="first"> 最富有诗意的季节莫过于秋季了,
多少文人墨客为秋季写了一曲曲的赞歌,
他们极力渲染秋的美景,毫不吝惜笔墨,
可见,秋是多么的迷人了。
</p>
<p class="second">
秋最会分配自己的感情,
无论走到那里,都会使人感受到它的爱抚。
秋最会挑选礼物,它送给每一个人的礼物都各具特色,
又用最美丽的爱装饰起来。
</p>
<p class="third">
秋是那样可爱,使人无法不为之心动,
我禁不住秋的召唤,去收集那无处不在的爱意。
</p>
</body>
</html>
运行结果:
2 文本样式
常用属性:
属性名 | 解释 | 常用值 |
---|---|---|
text-align | 文本对齐方式 | left,center,right |
text-indent | 首行缩进 | xxem |
line-height | 行高(和块的值相同可以实现居中) | xxpx |
text-decoration | 下划线装饰 | underline,overline |
vertical-align | 文本图片水平对齐 | middle |
例子:
css代码:
body {
font-