从零开始学web开发之CSS-3.字体样式

1.字体类型font-family

语法:

font-family:字体1,字体2,字体3;

说明:
font-family可指定多种字体,多个字体将按优先顺序排列,以逗号(英文逗号)隔开。
示例:

<style type-"text/css">
    p{font-family:微软雅黑,Arial,Times New Roman;}
</style>

P元素优先使用微软雅黑字体来显示,如果电脑没有装这个字体,那接着就用Arial字体来显示,如果也没有Arial字体则接着用Times New Roman来显示,以此类推。
如果所有字体都没有,则使用浏览器的默认字体 “宋体”.

  • 中文常用字体:宋体,微软雅黑.
  • 英文常用字体:Times New Roman,Arial

2.字体大小font-size

语法:

font-size:关键字/像素值;

说明:
font-size的属性值可以有两种方式:使用关键字和使用px作为单位的数值。

<1>.关键字为单位

属性值 说明
xx-small 最小
x-small 较小
small
medium 默认值,正常
large
x-large 较大
xx-large 最大

这些属性值都是相对浏览器默认情况下的字体大小而言,实际开发中较少使用这种方式,一般都使用像素作为单位的数值。

<2>.px为单位

何为像素?
px,全称pixel,px就是一张图片中最小的点,或者是计算机屏幕最小的点。
px是一个相对单位,它是相对显示器屏幕分辨率而言的。


3.颜色color

* 语法:*

color:颜色值;

说明:
颜色值是一个关键字或一个16进制的RGB值。

  • 关键字:就是颜色的英文名称,如red,green,blue等。
  • 16进制的RGB值:#RRGGBB,必须带前缀#,用16进制表示一位颜色值,也可简略写成#RGB,只要每两位的数字一致,就可简写。示例:#ff0000,或者#f00,代表红色。

4.字体粗细font-weight

语法:

font-weight:粗细值

说明:
该属性取值有两种:关键字,以及100~900的数值,只能是整百的数值即9个数。

属性值 说明
normal 默认值,正常体-400
lighter 较细-100,200,300
bold 较粗-700
bolder 很粗(效果跟bold差不多)-800,900

5.字体斜体font-style

语法:

font-style:取值;

说明:

属性值 说明
normal 默认值,正常体
italic 斜体,这是一个属性
oblique 将字体倾斜,将没有斜体变量(italic)的特殊字体,要应用oblique

有些字体有斜体属性,但有些特殊字体也许没有斜体属性,oblique是让没有斜体属性的文字倾斜。


6.示例链接,右键可查看源码

示例网页链接

发布了92 篇原创文章 · 获赞 68 · 访问量 25万+

猜你喜欢

转载自blog.csdn.net/pigdreams/article/details/80012224