字体样式(font)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--
font-family 字体
text-align 位置
font-size 大小
font-weight 粗细
color 颜色
px 像素
em 字体
-->
body{
font-family: 楷体;
}
h1{
font-size: 20px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>年有季节，春夏秋冬；日有季节，黑白交替；生命也该有季节，那是生老病死。</h1>
<p class="p1">乔治、赫伯特说过：“一个人如果20岁不英俊，30岁不强壮，40岁不富有，50岁不睿智，那么他这辈子
就别想英俊、强壮、富有和睿智了。”这是西方人眼中的生命的季节。</p>
<p>孔老先生说过：“吾十有五而志于学，三十而立，四十而不惑，五十而知天命，六十而耳顺，七十而从心
所欲，不逾矩。”也属一种对生命的季节的限定，但孔老先生只有勇气限定自己，怯于给别人下论断。</p>
<p>不管怎样，正如中国古话所说：“朝闻道，夕死可矣。”它告诉人们：不论在什么时候，只要你明白了生
命的好处所在，你就开始了生命的春天。</p>
</body>
</html>
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 颜色:
单词
RGB 红绿黑 0~F
RGB A 红绿黑 透明(0~1)
text-align 排版
text-indent 段落首行缩进
height: 300px;
line-height: 300px; 行高和块高一致,就可以上下居中
text-decoration: underline; 下划线
text-decoration: line-through 中划线
text-decoration: overline; 上划线
超链接去掉下划线(因为a标签默认有下划线)
a{
text-decoration:none;
}
*/
h1{
color:rgba(0,255,12,0.9) ;
text-align: center;
}
#p1{
text-indent: 2em;
}
#p2{
background: #4336ff;
height: 300px;
line-height: 300px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/* 中划线*/
.l2{
text-decoration: line-through;
}
/* 上划线*/
.l3{
text-decoration: overline;
}
</style>
</head>
<body>
<p class="l1">231323</p>
<p class="l2">231323</p>
<p class="l3">231323</p>
<h1>年有季节，春夏秋冬；日有季节，黑白交替；生命也该有季节，那是生老病死。</h1>
<p id="p1">乔治、赫伯特说过：“一个人如果20岁不英俊，30岁不强壮，40岁不富有，50岁不睿智，那么他这辈子
就别想英俊、强壮、富有和睿智了。”这是西方人眼中的生命的季节。</p>
<p id="p2">孔老先生说过：“吾十有五而志于学，三十而立，四十而不惑，五十而知天命，六十而耳顺，七十而从心
所欲，不逾矩。”也属一种对生命的季节的限定，但孔老先生只有勇气限定自己，怯于给别人下论断。</p>
<p>不管怎样，正如中国古话所说：“朝闻道，夕死可矣。”它告诉人们：不论在什么时候，只要你明白了生
命的好处所在，你就开始了生命的春天。</p>
</body>
</html>
文本图片水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*文本图片水平对齐*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="../resource/images/a.jpg" alt="">
<span>sdasdasdsa</span>
</p>
</body>
</html>