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

2024-10-17 20:47:57

上一篇经验介绍了CSS样式的选择器，这一篇介绍CSS的声明，也就是常用的字体属性。

2、font-family：设置字体属性family有家族的意思，估计指的是字体家族的意思吧。语法：font-family：“字体”看例子：<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>.alsp{ font-family:"楷体";}</style></head><body><div class="alsp"><p>哈喽，我是提莫，女警你做我女朋友吧~~露露太矮了~~</p></div></body>

4、font-size：用于设置字号OK，来看代码喽<style>.alsp{ font-family:"楷体"; font-size:36px}</style>

6、font-style:设置字体为斜体上代码：<style>.alsp{ font-family:"楷体"; font-size:36px; font-style:italic;}</style>其中，font-style的取值有三种：1）normal:默认的正常字体2）italic:斜体显示文字3）oblique：属于中间状态

8、最后，再看看符合属性，这个是小编力荐的一种属性。因为这样代码看起来更少，更清晰，而且很适合懒人，font:字体属性可以为字体大小、风格等等，各值用空格相连。<style>.alsp{ font:60px bold italic ;}</style>

二.设置颜色和背景属性

1、和设置字体很类似，也分为分开设置方法和复合设置方法。color:用来设置指定元素的颜色，颜色值为一个关键字或者一个16禁制的RGB值。看代码：<style>.alsp{ color:#F00}</style>

3、background-color不但可以设置网页的背景颜色，还可以设置文字的背景颜色。<style>.alsp{ background-color:#F00}</style>

5、background-image设置元素的背景图像举例：<style>.alsp{ background-image:url(1.png)}</style>

7、background-repeat用于设置背景图像是否平铺background-erpeat:值值有一下几种取值方式：no-repeat:不平铺repeat:平铺整个网页repeat-x:只在水平方向平铺repeat:只在垂直方向平铺看代码：<style>.alsp{ background-image:url(1.png); background-repeat:repeat-x}</style>

9、background-attachment设置背景附件属性。就是说，如果你的页面内容很多，需要滚动条滚动，那么背景图片是随着滚动条滚动而滚动呢？还是无论滚动条如何变动，背景图片的位置始终不变。看代码：<style>.alsp{ background-image:url(1.png); background-repeat:repeat-x; background-attachment:fixed;}</style>其中，fixed的意思是图片固定。scroll的意思是随着浏览器滚动条的变动而变动

11、background-position背景位置。background-position:值值有3中表示方法：1）采用数字x:网页横向位置y:网页纵向位置2）百分比0% 0% ；坐上位置100% 100%：右下位置50% 50%：中间位置等，还有许多，你可以自己尝试一下3）关键字设置top left:左上位置top center:靠上局中位置top right:右上位置等，还有许多，你可以自己试试看代码：<style>.alsp{ background-image:url(1.png);background-attachment:fixed; background-position:center center; background-repeat:no-repeat}</style>

13、background背景符合属性。background:取值例如：<style>.alsp{ background: url(1.png) no-repeat 100% -50%;}</style>