改变html字体样式表,如何使用div和css调整网页文字样式

上节课,使用
标签,可以对网页进行换行,达到一定的排版效果。

但是
功能有限,比如无法控制某行文字的高度,也不好控制行与行之间的间距。

这节课来学习一个新的标签div。

div标签

div标签是块级元素标签,是用于组合其他HTML元素的容器。

div元素没有特定的含义,一般和CSS一同使用。用于对内容块设置样式属性。浏览器会在其前后显示折行。

div元素常见的用途是文档布局。

div标签的用法,是在内容块前面增加

,内容块后面增加

先来把【简介】这行代码前后增加

简介

刷新页面,发现简介这行下面多了一个空行,其他没什么变化。

div只是标记一个内容块,至于内容块的样式,要添加style来修改。

因此删除这行后面的
,代码修改为

简介

刷新页面,可以看到效果和之前的一样了。

设置div的背景颜色

修改简介这行代码为:

简介

556989036deac529912b00ed3b1502ae.png

刷新页面:

3af5ce9f1c43fa382d229ea3d420475d.png

可以看到,简介这一行整行的背景颜色被修改成暗黑色了。

为何背景颜色要改成303030,而不是完全的黑色000000呢,这是因为考虑到文字的默认颜色就是纯黑色的,如果背景色也是纯黑色的,那么文字就完全看不见了。

通过设置div的背景颜色,还有一个附带的好处,就是知道div的覆盖范围了。当程序中有很多个div,而且div还有嵌套的时候,通过设置div的背景颜色,可以区分和查看div覆盖的区域范围,从而方便调试和修改。

设置div的文字颜色

可以看到,简介这行看起来一点都不好看,赶紧修改文字的颜色吧。

5f62245e5d791b2288a75ed581477a7d.png

刷新页面:

02ee3dbc8f9f4ed2fc038aba411e6753.png

可以看到文字颜色变成了白色。

style里面的css属性设置,可以允许同时设置多个样式属性,控制内容的不同显示方式。

设置div的文字大小

再来改变文字的大小,让标题字体显示大一些。

在color:#ffffff; 后面增加 font-size:30px;

62dccff4715113349b26dea2327ba1dc.png

刷新页面:

fe3f75df848f2abb3385728423f3ae85.png

可以看到文字变大了。

尺寸单位

这里要学习一个新的概念,就是尺寸单位。用于描述大小的单位就是尺寸单位。

例如,描述文字的大小,描述文字行的高度,描述div的宽度,描述行与行之间的间距,等等。

不同元素的尺寸单位可能不同,例如对字体大小的单位有:像素/em/百分比等方式;对div宽度的单位有:像素/百分比等等。

使用像素设置文本大小,如下:

font-size: 30px;

使用em来设置字体大小,如下:

font-size: 3.75em;

em单位相当于倍数关系,1em等于当前的字体尺寸,浏览器默认的文本大小是16像素,因此1em的默认尺寸就是16像素,3.75em相当于60像素。

注意:所谓当前的字体尺寸,就是指当前元素的字体尺寸,如果当前元素未定义字体尺寸,则等于当前元素的父元素的字体尺寸。

所谓父元素,是指当前元素的嵌套关系的上一级元素。

例如

简介

可以计算出div这个元素的字体大小为60px。

由此,可以总结出像素是绝对的,不受上下级关系的影响,而em是受上下级关系的影响的,要根据具体情况来使用。

练习:

在body的 style里面增加font-size属性,然后将div的font-size属性修改为em单位,调整数值熟悉两种方式。

设置div的文字字体

使用font-family属性来设置文字字体。

例如,将文字字体设置为微软雅黑。

在font-size:30px;后面增加 font-family: 'Microsoft Yahei';

刷新页面后可以看到字体的变化。当然也可能没看到有什么变化。这取决于浏览器所在的操作系统。

大家知道,浏览器能显示的字体受到操作系统字体的限制,无法显示操作系统不存在的字体,因为,一般不要设置文字字体,让浏览器使用系统的默认字体,用户就能看到自己喜欢的默认字体。

如果一定要强制使用某个字体,就需要调查了解各种操作系统默认具备的常用字体的名称,使用逗号分隔的方式同时设置好文字字体的优先顺序。

例如 font-family: 'Times', 'TimesNR', 'NSimsun','serif';

设置div的文字的斜体

使用font-style: italic; 显示文字为斜体。也可以用font-style: normal; 显示文字为正常不倾斜。

修改代码:

e425ae70860852cfd36041e51684014c.png

刷新显示:

3047d8baf8acb433e3dadd86f83b1f6b.png

设置div的文字的加粗

之前用了标签来对文字加粗,也可以使用css属性font-weight: bold; 来对文字进行加粗。也可使用font-weight: normal;取消加粗正常显示。

增加font-weight: bold; 然后去掉标签,修改代码如下:

1b1038807d9ad8785dec319dc79e7362.png

页面刷新:

cb4a56300a514ce52cd7cbe2dfca5b3c.png

可以看到,不同的写法能够实现相同的效果。

课后练习

1.将斜体字体效果去除

2.将工作经历和工作经验(部分)这2行文字也做成简介这行文字的效果

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值