如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
HTML网页制作：[17]CSS常用样式字体及颜色属性
来源：互联网
2023-03-16 19:19:45 509
上一篇经验介绍了CSS样式的选择器，这一篇介绍CSS的声明，也就是常用的字体属性。
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
工具/原料
- 一台电脑
- dw/TXT等
一.字体属性
字体属性font
font的英文解释就是字体的意思。
话说，好羡慕老外，用国语写代码，那个爽，我们要是能用中文写代码， 和写作文似的，那该多好！
语法：
font:字体取值
字体的用法用两种，一种是分开来写，一种是符合写法，下面都会给出例子的。
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/a151a233ec3834bbbc6e16ec8714c27bd3823dd5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
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">哈喽，我是提莫，女警你做我女朋友吧~~露露太矮了~~//div>/body>
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/a31e1214c27bd2822c0815f53cb1eef97ebd36d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
看网页效果。
此刻， 字体已经发生改变了，变成了楷体
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/7efc527c34b33c41813b67f2887de137c8762ed5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
font-size：用于设置字号
OK，来看代码喽
style>.alsp{ font-family:"楷体"; font-size:36px}/style>
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/32fbcd41037de1377ff7960ff6c5cf672a5f2ad5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
如图所示，是网页效果图，字体变大了~
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/d2001d7de137c976953dc97644672b5fd4462bd5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
font-style:设置字体为斜体
上代码：
style>.alsp{ font-family:"楷体"; font-size:36px; font-style:italic;}/style>
其中，font-style的取值有三种：
1）normal:默认的正常字体
2）italic:斜体显示文字
3）oblique：属于中间状态
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/23fd63c5cf672b5f6ec7b1253314f4d0b40327d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
再来看网页的效果，此刻字体已经变成了斜体！
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/04d7a614f4d0b5030853f24dcc4ec28332bf20d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
最后，再看看符合属性，这个是小编力荐的一种属性。因为这样代码看起来更少，更清晰，而且很适合懒人，
font:字体属性
可以为字体大小、风格等等，各值用空格相连。
style>.alsp{ font:60px bold italic ;}/style>
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/32fe25ef354f50b87cbf1c68dc4afa32929c18d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
OK，看网页效果。和分开写的效果是一样的，但是更简洁，不是么
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/fb738d9c2cf7dfb213987a9fd01b1edef5dc13d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
二.设置颜色和背景属性
和设置字体很类似，也分为分开设置方法和复合设置方法。
color:用来设置指定元素的颜色，颜色值为一个关键字或者一个16禁制的RGB值。
看代码：
style>.alsp{ color:#F00}/style>
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/f59dbe39131fceec0458ddc679c4ec9958430bd5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
看网页效果，字体已经变红了。
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/d2987775f2c4ec9982c2b0b2c3fe1e425c6b07d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
background-color
不但可以设置网页的背景颜色，还可以设置文字的背景颜色。
style>.alsp{ background-color:#F00}/style>
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/58021a0148fe1e4282eab062c2299a88381303d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
来看看网页效果。背景颜色已经发生了改变。
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/e9a4f2eeadbcbe2faff1f2ab54dae43b3a8678d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
background-image
设置元素的背景图像
举例：
style>.alsp{ background-image:url(1.png)}/style>
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/4759c1dae43b3b86efa0fbe4185653bbf92075d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
看网页的效果图。
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/92174dbbf82064fb658a85928e6104a354e96fd5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
background-repeat
用于设置背景图像是否平铺
background-erpeat:值
值有一下几种取值方式：
no-repeat:不平铺
repeat:平铺整个网页
repeat-x:只在水平方向平铺
repeat:只在垂直方向平铺
看代码：
style>.alsp{ background-image:url(1.png); background-repeat:repeat-x}/style>
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/30601b6104a355e97b2f5c64d22ae3efe17868d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
网页效果如图所示，在X轴上平铺
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/82eff6d7592ae3ef1cf9a08254b6326c566664d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
background-attachment
设置背景附件属性。就是说，如果你的页面内容很多，需要滚动条滚动，那么背景图片是随着滚动条滚动而滚动呢？还是无论滚动条如何变动，背景图片的位置始终不变。
看代码：
style>.alsp{ background-image:url(1.png); background-repeat:repeat-x; background-attachment:fixed;}/style>
其中，fixed的意思是图片固定。
scroll的意思是随着浏览器滚动条的变动而变动
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/2e223d85e036e291406a8753b2723d03baea5bd5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
可以发现，无论滚动条如何滚动，图片的位置都不会变化
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/49701aebf6a75f0f96a9c05d97324b18502c4cd5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
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>
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/49c5d3e34b2c56ee5bfd32bdf775e5f4fdf540d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
OK，看网页的效果，此刻图片在正中央
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ef4c24ceaad7726b2560d154bf0f64781523b9d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
background
背景符合属性。
background:取值
例如：
style>.alsp{ background: url(1.png) no-repeat 100% -50%;}/style>
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/bff8683e21c2bbd6d352d95b116186254093aed5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
如图所示，向右定位100%,向下定位50%
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/cfa9ae04541bd10fc9a4b929ba0e1799e82aa7d5.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
总结
OK，现在你已经可以做出一个带有你自己特色的网页了，在网页的路上继续加油吧
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：HTML5创作工具，MAKA 2.0史上最全操作指南 下一篇：返回列表
相关文章
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 360 HTML
-
最简单强大的html5海报制作工具MAKA使用教程详细阅读
最简单强大的html5海报制作工具MAKA使用教程,之前若玲分享的“卡妞微秀”、初页制作html5海报，大家反映都在手机端操作，太不方便了，这回若玲推荐大家一个更好的html5海报制作工具，是在PC端......
2023-03-16 468 HTML