CSS字体属性与文本属性

1. 字体属性

1.1 字体系列font-family

p {

    font-family: "Microsoft Yahei";/*微软雅黑*/

}

/*当然也可以写成中文，建议写成英文*/

p {

    font-family: "Microsoft Yahei","宋体";

}

注：

各种字体之间用英文逗号隔开
如果有空格隔开的多个单词组成的字体，加引号（单引号双引号都行）
尽量使用默认系统自带字体

/*最常见的几个字体*/

body {

    font-family: "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB";

}

1.2 字体大小font-size

p {

    font-size: 18px;

}

注：

chrome默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，尽量给一个明确值大小，不用默认大小
可以给body指定整个页面文字的大小

1.3 字体粗细font-weight

p {

    font-weight: 400;/*不加粗*/

}

属性值	描述
normal	默认值（不加粗）
bold	粗体
100~900	normal=400，bold=700，注意数字后不用带单位

实际开发中更喜欢用数字表示粗细。

1.4 文字样式font-style

p {

    font-style: italic;/*斜体*/

}

属性值	作用
normal	默认值，标准的字体样式
italic	斜体

平时很少给文字加斜体，反而要给斜体标签（em、i）改为不倾斜字体。

1.5 字体复合属性

把上面的各个属性综合来写成一行代码。

body {

    font: font-style font-weight font-size/line-height font-family;

}

注：

上述顺序不能更换，且各个属性之间用空格隔开
必须保留font-size和font-family，剩余属性可以省略

2. 文本属性

2.1 文本颜色color

p {

    color: blue;

}

color的属性值有下列表示形式。

表示形式	属性值
预定义的颜色值	red、yellow、blue等
十六进制	#FFFFFF、#FF6600等
RGB代码	rgb(255,0,255)或rgb(100%,0%,100%)

十六进制形式：

十六进制颜色代码以#号开头，三组16进制数字表示red,green,blue三色，每组数字从0到FF。

RGB代码：

在RGB颜色模式中，颜色由三个值表示，表示组件的强度，红色、绿色和蓝色。

从最小值0到最大值255，当所有颜色都以最小值0显示时，颜色为黑色，当所有颜色都以最大值255显示时，颜色为白色。

开发中最常用的是十六进制形式。

2.2 对齐文本text-align

用于设置元素内文本内容的水平对齐方式。

div {

    text-align: center;

}

属性值	作用
left	左对齐（默认）
right	右对齐
center	居中对齐

2.3 装饰文本text-decoration

用于规定添加到文本的修饰。

div {

    text-decoration: none;

}

属性值	作用
none	没有装饰线，默认值。（最常用）
underline	下划线，链接a自带下划线。（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

通常用在取消链接a默认的下划线，如下。

a {

    text-decoration: none;

}

2.4 文本缩进text-indent

用于指定文本第一行的缩进，通常是将段落的首行缩进。

p {

    text-indent: 10px;/*也可以是负值，效果为第一行向前突出*/

}

通常的段落首行缩进两个字可以写成如下。

p {

    text-indent: 2em;

}

em就是当前元素font-size的一个文字的大小。如果当前元素没有设置大小，则会按照父元素的一个文字大小。

2.5 行间距line-height

用于设置行间的距离（行高）。

p {

    line-height: 26px;

}

所以行间距=上间距+文本高度+下间距。

要想实现文本在一个HTML元素中上下居中对齐，则让行间距=HTML元素的高度即可。

巴特西

CSS字体属性与文本属性

CSS字体属性与文本属性

1. 字体属性

1.1 字体系列font-family

1.2 字体大小font-size

1.3 字体粗细font-weight

1.4 文字样式font-style

1.5 字体复合属性

2. 文本属性

2.1 文本颜色color

2.2 对齐文本text-align

2.3 装饰文本text-decoration

2.4 文本缩进text-indent

2.5 行间距line-height

最新文章

热门文章