一，文字样式

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>

CSS样式----文字样式相关推荐

CSS(二)文字样式
CSS之文字样式一.文本颜色:color 二.缩进:text-indent 三.行高:line-height 四.字母间隔:letter-spacing 五.水平对齐:text-align 六.文本 ...
前端学习：用css设置文字样式
转自:微点阅读 http://www.weidianyuedu.com/ 相信大家已经基本了解了前端最基本的一些规则了: html搭建结构,承载内容 css则可以利用选择器,来为相应的html标签设置 ...
前端入门：用css设置文字样式。
转自:微点阅读 https://www.weidianyuedu.com 经过前面的文章,相信大家已经基本了解了前端最基本的一些规则了: html搭建结构,承载内容 css则可以利用选择器,来为相应 ...
【html5+css】文字样式 line-height 和 vertical-align css背景 css边框
**一.文字样式字体可以是列表的形式,一般英语字体放到前面,后面的字体是前面的字体的后备字体字体名称中有空格,必须要用引号来包裹** font-weight:指定字体粗细 -blod normal ...
CSS 边框样式文字样式段落样式
一,边框样式 1,border-color:设置边框颜色 2,border-width:设置边框大小 3,border-style:设置边框样式二,文字样式设置字体类型 font-size:设置字 ...
HTML5网页设计样式-CSS设置文字样式
字体 font-family 文字大小 font-size 文字的加粗 font-weight 文字的倾斜 font-style 以上四个在这篇已经有过大致介绍(见http://t.csdn.cn/I ...
css常用样式（文字样式、边框样式、背景样式）
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
css中文字段落对齐,CSS段落对齐方式
CSS段落对齐有两种方式:水平对齐和垂直对齐. 1.水平对齐: (1).text-align:left; //左对齐 (2).text-align:right; //右对齐 ...
CSS/Compass修改placeholder的文字样式
在HTML5中,<input>与<textarea>标签支持placeholder属性,用来定义无任何输入时的默认文字. 可以通过CSS修改placeholder的文字样式: ...

CSS样式----文字样式

一，文字样式

1.字体

2.文字大小

3.文字颜色

4.文字粗细

5.斜体

6.下划线，顶划线，删除线

7英文字母大小写

二，段落文字

1.段落水平对齐

2.段落垂直对齐

3.行间距，字间距

4.首字放大

CSS样式----文字样式相关推荐

最新文章

热门文章