CSS字体样式属性(字体属性)
font-size:字号大小
font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少,具体如下:
相对长度单位 | 说明 |
px | 像素单位以像素点个数为基础最常用的单位 |
em | 相对于当前对象内文本的字体尺寸 |
font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:
p {font-family : “微软雅黑”;}
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
PS:
1.现在网页中普遍使用14px+。
2.尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3.各种字体之间须使用英文状态下的逗号隔开。
4.中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
5.如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family:“TimesNew Roman";。
6.尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
CSS Unicode字体
在CSS中设置字体名称,直接写中文是可以的,但是在文件编码(GB2312、UTF-8等)不匹配时会产生乱码的错误,xp系统不支持类似微软雅黑的中文。
方案一:你可以使用英文来替代,比如font-family:Microsoft Yahei",
方案二:在CSS直接使用Unicode编码来写字体名称可以避免这些错误,使用Unicode写中文字体名称,浏览器是可以正确的解析的。
font-family :" \5FAE\8F6F\96C5\9ED1", 表示设置字体为“微软雅黑”,
body{ font-family : "\5B8B\4F53" , "Arial"}
可以通过escape()来测试属于什么字体。
字体名称 | 英文名称 | Unicode 编码 |
宋体 | SimSun | \5B8B\4F53 |
新宋体 | NSimSun | \65B0\5B8B\4F53 |
黑体 | SimHei | \9ED1\4F53 |
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
隶书 | LiSu | \96B64E66 |
幼园 | YouYuan | \5E7C\5706 |
华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
细明体 | MingLiU | \7EC6\660E\4F53 |
新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
为了照顾不同电脑的字体安装问题,尽量只使用宋体和微软雅黑中文字体
font-weight:字体粗细
字体加相除了用b和strong标签之外,可以使用CSS来实现,但是CSS是没有语义的。
font-welght属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)
PS:
数字400等价于normal,而700等价于bold,但是我们更喜欢用数字来表示
font-style:字体风格
字体倾斜除了用!和em标签之外,可以使用CSS来实现,但是CSS是没有语义的。
font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
normal:默认值,浏览器会显示标准的字体样式,
ltalic:浏览器会显示斜体的字体样式。
oblique: 浏览服会显示倾斜的字体样式。
font:综合设置字体样式(重点)
font属性用于对字体样式进行综合设置,其基本语法格式如下:
选择器 { font:font-style font-weight font-size/line-height font-family;}
使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开
注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
CSS外观属性(文本属性)
color:文本颜色
color属性用于定义文本的颜色,其取值方式有如下3种
1、预定义的颜色值,如red、gieen、blue等。
2.十六进制,如#FF0000、#FF8600、#290794等。实际工作中,十六进制是最常用的定义颜色的方式。
3.RGB代码,如红色可以表示为 rgb(255.,0,0) 或 rgb(100%,0%,0%)。
需要注意的是:如果使用RGB代码的百分比颜色值,取值为的也不能省路百分号,必须写为0。、
line-height:行间距
line-height属性用于设置行间距,就是行与行之间的距离,那字符的垂直间距,一般称为行高,line-heiht常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px
一般情况下,行距比字号大7 8像素左右就可以了。
text-align:水平对齐方式
text-align属性用于设量文本内容的水平对齐、相当于html中的aliga对齐属性、其可用属性值如下:
left:左对齐(默认值)
right:右对齐
center:居中对齐
text-indent:首行缩进
text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值,建议使用em作为设置单位。
1em就是一个字的宽度如果是汉字的段落,1em就是一个汉字的宽度
text-decoration 文本的装饰
text-decoration 通常我们用于给链接修改装饰效果
值 | 描述 |
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线,下划线也是我们链接自带的 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
元素分类
块级元素(block-level)
每个块元素通常都会独前占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<o1>、<li>等,其中<div>标签是最典型的块元素。
DIV是最常用的块元素规现距距、方方正正、很好营理,被人们称为”可靠的同志”但是体格庞大独占一行块级元素的特点:
(1)总是从新行开始
(2)高度、行高、外边距以及内边都可以控制。
(3)宽度默认屋容器的100%
(4)可以容纳内联元素和其他块元素
行内元素(inline-level)
行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一股不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
常见的行内元素<a>,<strong>,<b>、<em>,<>,<del>、<s>、<ins>,<u>、<spa>等,其中<span>标签是典型的行内元素
行内元素是通用集体出没,能够排成行伍因练有素、整齐划一。
行内元素的特点:
(1)和相邻行内元素在一行上。
(2)高,宽无效,但水平方向的paddingi和miargin可以设置,重直方向的无效。
(3)默认宽度就是它本身内容的度。(4)行内元素只能容纳文本或则其他行内元素。
行内块元素(inline-block)
行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
(2)默认宽度就是它本身内容的宽度。
(3)高度,行高、外边距以及内边距都可以控制。
注童:在行内元素中有几个特殊的标签 -- <img/>、<input/>、<td>这些标签虽然可以设置宽度高度
但是在现代浏览器内特性默认展示模式为行内(inline)元素
标签显示模式转换 display
块转行内:display: inline;
行内转块:display: block;
块、行内元素转换为行内块:display:inline-block;