欢迎光临
我的个人博客网站

CSS字体属性与文本属性


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; } 

CSS字体属性与文本属性

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

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS字体属性与文本属性
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏