版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wangyunzhao007/article/details/86410664
一，文字样式
1.字体
h2{
font-family:黑体, 幼圆;
}
p.kaiti{
font-family:楷体_GB2312, "Times New Roman";/*新罗马字体*/
}2.文字大小
<html>
<head>
<title>文字大小</title>
<style>
p.inch{ font-size: 0.5in; }/*英寸*/
p.cm{ font-size: 0.5cm; }/*厘米*/
p.mm{ font-size: 4mm; }/*毫米*/
p.pt{ font-size: 12pt; }/*磅*/
p.pc{ font-size: 2pc; }/*没查清楚*/
p.px{ font-size: 2px; }/*像素*/
</style>
</head>
<body>
<p class="inch">文字大小，0.5in</p>
<p class="cm">文字大小，0.5cm</p>
<p class="mm">文字大小，4mm</p>
<p class="pt">文字大小，12pt</p>
<p class="pc">文字大小，2pc</p>
<p class="px">文字大小，2px</p>
</body>
</html>3.文字颜色
h2{ color:rgb(0%,0%,80%); }/*三原色占比red,green,blue*/
p{
color:#333333;
}4.文字粗细
span.nine{ font-weight:900; }/*大小*/
span.ten{ font-weight:bold; }/*加粗*/
span.eleven{ font-weight:normal; }/*没有加粗*/5.斜体
<html>
<head>
<title>文字斜体</title>
<style>
h1{ font-style:italic; } /* 设置斜体 */
h1 span{ font-style:normal; } /* 设置为标准风格 */
p{ font-size:18px; }
p.one{ font-style:italic; }
p.two{ font-style:oblique; }
</style>
</head>
<body>
<h1>文字<span>斜</span>体</h1>
<p class="one">文字斜体</p>
<p class="two">文字斜体</p>
</body>
</html>代码效果如图
6.下划线，顶划线，删除线
p.one{ text-decoration:underline; } /* 下划线 */
p.two{ text-decoration:overline; } /* 顶划线 */
p.three{ text-decoration:line-through; } /* 删除线 */
p.four{ text-decoration:blink; } /* 闪烁 */7英文字母大小写
p{ font-size:17px; }
p.one{ text-transform:capitalize; } /* 单词首字大写 */
p.two{ text-transform:uppercase; } /* 全部大写 */
p.three{ text-transform:lowercase; } /* 全部小写 */二，段落文字
1.段落水平对齐
p{ font-size:12px; }
p.left{ text-align:left; } /* 左对齐 */
p.right{ text-align:right; } /* 右对齐 */
p.center{ text-align:center; } /* 居中对齐 */
p.justify{ text-align:justify; } /* 两端对齐 */2.段落垂直对齐
td.top{ vertical-align:top; } /* 顶端对齐 */
td.bottom{ vertical-align:bottom; } /* 底端对齐 */
td.middle{ vertical-align:middle; } /* 中间对齐 */3.行间距，字间距
<html>
<head>
<title>行间距</title>
<style>
<!--
p.one{
font-size:10pt;
line-height:8pt; /* 行间距，绝对数值，行间距小于字体大小 */
}
p.second{ font-size:18px; }
p.third{ font-size:10px; }
p.second, p.third{
line-height: 1.5em; /* 行间距，相对数值 */
}
-->
</style>
</head>
<body>
<p class="one">秋分，我国古籍《春秋繁露、阴阳出入上下篇》中说：“秋分者，阴阳相半也，故昼夜均而寒暑平。”“秋分”的意思有二：一是太阳在这时到达黄径180。一天24小时昼夜均分，各12小时；二是按我国古代以立春、立夏、立秋、立冬为四季开始的季节划分法，秋分日居秋季90天之中，平分了秋季。</p>
<p class="second">秋分时节，我国长江流域及其以北的广大地区，均先后进入了秋季，日平均气温都降到了22℃以下。北方冷气团开始具有一定的势力，大部分地区雨季刚刚结束，凉风习习，碧空万里，风和日丽，秋高气爽，丹桂飘香，蟹肥菊黄，秋分是美好宜人的时节。</p>
<p class="third">秋季降温快的特点，使得秋收、秋耕、秋种的“三秋”大忙显得格外紧张。秋分棉花吐絮，烟叶也由绿变黄，正是收获的大好时机。华北地区已开始播种冬麦，长江流域及南部广大地区正忙着晚稻的收割，抢晴耕翻土地，准备油菜播种。</p>
</body>
</html>4.首字放大
<html>
<head>
<title>首字放大</title>
<style>
p span{
font-size:60px; /* 首字大小 */
float:left; /* 首字下沉 */
padding-right:5px; /* 与右边的间隔 */
font-weight:bold; /* 粗体字 */
font-family:黑体; /* 黑体字 */
color:yellow; /* 字体颜色 */
}
</style>
</head>
<body>
<p><span>中秋节</span>
</body>
</html>