一、文本属性
1.字体大小
font-size:单位是px,浏览器默认是16px,设计图常用字号是12px。
2.字体
font-family:当字体是中文字体、英文字体中有空格时,需加双引号;多个字体中间用逗号链接,先解析第1个字体,如果没有解析第2个字体,以此类推。
3.字体颜色
color:color:red; color:#ff0; color:rgb(255,0,0);0-255。
4.加粗
font-weight:bolder(更粗的)/bold(加粗)/normal (常规)
font-weight:100-900;100-500不加粗600-900加粗
5.倾斜
font-style: italic(斜体字)/oblique(倾斜的文字)/normal (常规显示);
6.文本水平对齐
text-align:left;水平靠左text-align: right;水平靠右
text-align: center;水平居中text-align:justify;水平2端对齐,但是只对多行起作用。
7.行高
line-height的数据=height的数据,可以实现单行文本垂直居中。
8.首行缩进
text-indent可以取负值;text-indent属性只对第一行起作用。
9.字间距
letter-spacing控制文字与文字之前的距离。如果是英文,用word-spacin。
10.文本修饰
text-decoration:none没有/underline下划线/overline上划线/line-through删除线。
11.文字简写
font是font-style font-weight font-size / line-height font-family的简写。
font:italic 800 30px/80px"宋体";顺序不能改变,必须同时指定font-size和font-family属性时才起作用 。
前面的字体加粗跟倾斜属性可以删除,但是后边的字体设置和大小不行。
12.检索大小写(英文的大小写)
全部大写uppercase 全部小写lowercase 首字母大写capitalize 不设置none
text-transform:uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-transform: none;
二、代码举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#ptext{
/* 字体大小 */
font-size: 20px;
/* 字体:当字体是中文字体、英文字体中有空格时,需加双引号;
多个字体中间用逗号链接,先解析第1个字体,如果没有解析第2个字体,以此类推 */
font-family:黑体;
/* 字体颜色 */
color: turquoise;
/* 加粗
font-weight:bolder(更粗的)/bold(加粗)/normal (常规)
font-weight:100-900;100-500不加粗600-900加粗*/
font-weight: 900;
/* 倾斜
font-style: italic(斜体字)/oblique(倾斜的文字)/normal (常规显示);*/
font-style: normal;
/* 文本水平对齐:text-align:left;水平靠左text-align: right;水平靠右
text-align: center;水平居中text-align:justify;水平2端对齐,但是只对多行起作用。 */
text-align:left;
/* 行高 :line-height的数据=height的数据,可以实现单行文本垂直居中*/
line-height: 50px;
/* 首行缩进:text-indent可以取负值;text-indent属性只对第一行起作用 */
/* 一个字体的大小就是一个字的缩进,两个字缩进就要乘以2,但是改变字体大小这个字体缩进也要改变。 */
/* text-indent: 20px; */
/* 不管字体大小如何改变,都会缩进2个字。 */
text-indent:2em;
/* 字间距:控制文字与文字之前的距离。如果是英文,用word-spacin。*/
/* letter-spacing: 0cm; */
word-spacing: 1px;
/* 文本修饰:text-decoration:none没有/underline下划线/overline上划线/line-through删除线 */
text-decoration: underline;
/* 文字简写:font是font-style font-weight font-size / line-height font-family的简写。
font:italic 800 30px/80px"宋体";顺序不能改变,必须同时指定font-size和font-family属性时才起作用 */
font:italic 800 30px/80px"宋体" ;
#p2{
/* 英文的大小写:全部大写uppercase 全部小写lowercase 首字母大写capitalize 不设置none*/
/* text-transform:uppercase; */
/* text-transform: lowercase; */
/* text-transform: capitalize; */
/* text-transform: none; */
}
}
</style>
</head>
<body>
<p>文本属性测试对比对象,初始状态是字体:微软雅黑,初始大小,16px,最小字体大小为12px</p>
<p id="ptext">文本属性测试对象:沐浴着新年的第一缕阳光,在街头巷尾、在商场集市、在工厂车间、在科研实验室……是热气腾腾、是车水马龙、是争分夺秒、是全力坚守;
全国各地、各行各业,都铆足了劲儿,要把经济发展的节奏拉上来……美好,就在这人人向往的人间烟火里;
希望,就在这生机勃勃的中华大地上。这,就是咱中国人朝气蓬勃的精气神儿!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo odit magnam quis ratione eius.
Exercitationem magni molestiae laudantium expedita enim, id, iusto debitis repellendus explicabo placeat ratione, quos perspiciatis doloribus.
</p>
<p id="p2">大家好!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Assumenda aspernatur tempore, accusantium repellat quidem facilis unde porro iste nihil quaerat saepe expedita similique error animi debitis eos tenetur provident reiciendis!</p>
</body>
</html>