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

 时间:2024-10-17 20:47:57

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

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

工具/原料

一台电脑

dw/TXT等

一.字体属性

1、字体属性fontfont的英文解释就是字体的意思。话说,好羡慕老外,用国语写代码,那个爽,我们要是能用中文写代码, 和写作文似的,那该多好!语法:font:字体取值字体的用法用两种,一种是分开来写,一种是符合写法,下面都会给出例子的。

HTML网页制作:[17]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>

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

3、看网页效果。此刻, 字体已经发生改变了,变成了楷体

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

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

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

5、如图所示,是网页效果图,字体变大了~

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

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

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

7、再来看网页的效果,此刻字体已经变成了斜体!

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

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

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

9、OK,看网页效果。和分开写的效果是一样的,但是更简洁,不是么

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

二.设置颜色和背景属性

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

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

2、看网页效果,字体已经变红了。

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

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

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

4、来看看网页效果。背景颜色已经发生了改变。

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

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

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

6、看网页的效果图。

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

7、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常用样式字体及颜色属性

8、网页效果如图所示,在X轴上平铺

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

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

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

10、可以发现,无论滚动条如何滚动,图片的位置都不会变化

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

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>

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

12、OK,看网页的效果,此刻图片在正中央

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

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

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

14、如图所示,向右定位100%,向下定位50%

HTML网页制作:[17]CSS常用样式字体及颜色属性
  • 随身wifi隐藏ssid,方便办公室使用
  • hbuilder怎样设置字体大小,怎样设置主题
  • 麒麟掌黄叶子怎么办
  • photoshop滤镜库命令效果详解
  • php如何将数组的值累加
  • 热门搜索
    文明的手抄报 人防手抄报 青春期手抄报 一年级手抄报大全简单 地理手抄报图片 七彩童年手抄报图片 对联手抄报 淘气包马小跳手抄报 足球手抄报 语文手抄报五年级