欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 

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

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

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

div标签

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

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

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

div标签的用法,是在内容块前面增加<div>,内容块后面增加</div>。

先来把【简介】这行代码前后增加<div>和</div>。

<div><b>简介</b></div><br/>

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

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

因此删除这行后面的<br/>,代码修改为<div><b>简介</b></div>。

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

设置div的背景颜色

修改简介这行代码为:

<div style="background-color: #303030;"><b>简介</b></div>

0030 如何使用div和css调整网页文字样式

刷新页面:

0030 如何使用div和css调整网页文字样式

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

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

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

设置div的文字颜色

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

在<div style="background-color:#303030;的后面增加代码如下:color:#ffffff;

0030 如何使用div和css调整网页文字样式

刷新页面:

0030 如何使用div和css调整网页文字样式

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

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

设置div的文字大小

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

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

0030 如何使用div和css调整网页文字样式

刷新页面:

0030 如何使用div和css调整网页文字样式

可以看到文字变大了。

尺寸单位

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

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

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

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

font-size: 30px;

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

font-size: 3.75em;

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

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

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

例如<body style="font-size: 20px;"><div style="font-size: 3em;">简介</div></body>

可以计算出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; 显示文字为正常不倾斜。

修改代码:

0030 如何使用div和css调整网页文字样式

刷新显示:

0030 如何使用div和css调整网页文字样式

设置div的文字的加粗

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

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

0030 如何使用div和css调整网页文字样式

页面刷新:

0030 如何使用div和css调整网页文字样式

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

课后练习

1.将斜体字体效果去除

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

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/wenji/w50642.shtml