HTML网页制作：[17]CSS常用样式字体及颜色属性

字体属性font1y0办公区 - 实用经验教程分享！

font的英文解释就是字体的意思。1y0办公区 - 实用经验教程分享！

话说，好羡慕老外，用国语写代码，那个爽，我们要是能用中文写代码， 和写作文似的，那该多好！1y0办公区 - 实用经验教程分享！

语法：1y0办公区 - 实用经验教程分享！

font:字体取值1y0办公区 - 实用经验教程分享！

字体的用法用两种，一种是分开来写，一种是符合写法，下面都会给出例子的。1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

font-family：设置字体属性1y0办公区 - 实用经验教程分享！

family有家族的意思，估计指的是字体家族的意思吧。1y0办公区 - 实用经验教程分享！

语法：font-family：“字体”1y0办公区 - 实用经验教程分享！

看例子：1y0办公区 - 实用经验教程分享！

head>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />title>无标题文档/title>style>.alsp{ font-family:"楷体";}/style>/head>body>div class="alsp">哈喽，我是提莫，女警你做我女朋友吧~~露露太矮了~~//div>/body>1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

看网页效果。1y0办公区 - 实用经验教程分享！

此刻， 字体已经发生改变了，变成了楷体1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

font-size：用于设置字号1y0办公区 - 实用经验教程分享！

OK，来看代码喽1y0办公区 - 实用经验教程分享！

style>.alsp{ font-family:"楷体"; font-size:36px}/style>1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

如图所示，是网页效果图，字体变大了~1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

font-style:设置字体为斜体1y0办公区 - 实用经验教程分享！

上代码：1y0办公区 - 实用经验教程分享！

style>.alsp{ font-family:"楷体"; font-size:36px; font-style:italic;}/style>1y0办公区 - 实用经验教程分享！

其中，font-style的取值有三种：1y0办公区 - 实用经验教程分享！

1）normal:默认的正常字体1y0办公区 - 实用经验教程分享！

2）italic:斜体显示文字1y0办公区 - 实用经验教程分享！

3）oblique：属于中间状态1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

再来看网页的效果，此刻字体已经变成了斜体！1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

最后，再看看符合属性，这个是小编力荐的一种属性。因为这样代码看起来更少，更清晰，而且很适合懒人，1y0办公区 - 实用经验教程分享！

font:字体属性1y0办公区 - 实用经验教程分享！

可以为字体大小、风格等等，各值用空格相连。1y0办公区 - 实用经验教程分享！

style>.alsp{ font:60px bold italic ;}/style>1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

OK，看网页效果。和分开写的效果是一样的，但是更简洁，不是么1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

和设置字体很类似，也分为分开设置方法和复合设置方法。1y0办公区 - 实用经验教程分享！

color:用来设置指定元素的颜色，颜色值为一个关键字或者一个16禁制的RGB值。1y0办公区 - 实用经验教程分享！

看代码：1y0办公区 - 实用经验教程分享！

style>.alsp{ color:#F00}/style>1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

看网页效果，字体已经变红了。1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

background-color1y0办公区 - 实用经验教程分享！

不但可以设置网页的背景颜色，还可以设置文字的背景颜色。1y0办公区 - 实用经验教程分享！

style>.alsp{ background-color:#F00}/style>1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

来看看网页效果。背景颜色已经发生了改变。1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

background-image1y0办公区 - 实用经验教程分享！

设置元素的背景图像1y0办公区 - 实用经验教程分享！

举例：1y0办公区 - 实用经验教程分享！

style>.alsp{ background-image:url(1.png)}/style>1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

看网页的效果图。1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

background-repeat1y0办公区 - 实用经验教程分享！

用于设置背景图像是否平铺1y0办公区 - 实用经验教程分享！

background-erpeat:值1y0办公区 - 实用经验教程分享！

值有一下几种取值方式：1y0办公区 - 实用经验教程分享！

no-repeat:不平铺1y0办公区 - 实用经验教程分享！

repeat:平铺整个网页1y0办公区 - 实用经验教程分享！

repeat-x:只在水平方向平铺1y0办公区 - 实用经验教程分享！

repeat:只在垂直方向平铺1y0办公区 - 实用经验教程分享！

看代码：1y0办公区 - 实用经验教程分享！

style>.alsp{ background-image:url(1.png); background-repeat:repeat-x}/style>1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

网页效果如图所示，在X轴上平铺1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

background-attachment1y0办公区 - 实用经验教程分享！

设置背景附件属性。就是说，如果你的页面内容很多，需要滚动条滚动，那么背景图片是随着滚动条滚动而滚动呢？还是无论滚动条如何变动，背景图片的位置始终不变。1y0办公区 - 实用经验教程分享！

看代码：1y0办公区 - 实用经验教程分享！

style>.alsp{ background-image:url(1.png); background-repeat:repeat-x; background-attachment:fixed;}/style>1y0办公区 - 实用经验教程分享！

其中，fixed的意思是图片固定。1y0办公区 - 实用经验教程分享！

scroll的意思是随着浏览器滚动条的变动而变动1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

可以发现，无论滚动条如何滚动，图片的位置都不会变化1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

background-position1y0办公区 - 实用经验教程分享！

背景位置。1y0办公区 - 实用经验教程分享！

background-position:值1y0办公区 - 实用经验教程分享！

值有3中表示方法：1y0办公区 - 实用经验教程分享！

1）采用数字1y0办公区 - 实用经验教程分享！

x:网页横向位置1y0办公区 - 实用经验教程分享！

y:网页纵向位置1y0办公区 - 实用经验教程分享！

2）百分比1y0办公区 - 实用经验教程分享！

0% 0% ；坐上位置1y0办公区 - 实用经验教程分享！

100% 100%：右下位置1y0办公区 - 实用经验教程分享！

50% 50%：中间位置1y0办公区 - 实用经验教程分享！

等，还有许多，你可以自己尝试一下1y0办公区 - 实用经验教程分享！

3）关键字设置1y0办公区 - 实用经验教程分享！

top left:左上位置1y0办公区 - 实用经验教程分享！

top center:靠上局中位置1y0办公区 - 实用经验教程分享！

top right:右上位置1y0办公区 - 实用经验教程分享！

等，还有许多，你可以自己试试1y0办公区 - 实用经验教程分享！

看代码：1y0办公区 - 实用经验教程分享！

style>.alsp{ background-image:url(1.png);background-attachment:fixed; background-position:center center; background-repeat:no-repeat}/style>1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

OK，看网页的效果，此刻图片在正中央1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

background1y0办公区 - 实用经验教程分享！

背景符合属性。1y0办公区 - 实用经验教程分享！

background:取值1y0办公区 - 实用经验教程分享！

例如：1y0办公区 - 实用经验教程分享！

style>.alsp{ background: url(1.png) no-repeat 100% -50%;}/style>1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

如图所示，向右定位100%,向下定位50%1y0办公区 - 实用经验教程分享！

1y0办公区 - 实用经验教程分享！

OK，现在你已经可以做出一个带有你自己特色的网页了，在网页的路上继续加油吧1y0办公区 - 实用经验教程分享！