一,文字样式
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>