0030 如何使用div和css调整网页文字样式
作者：学哥
发布时间：2017-3-13
上节课，使用<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>
刷新页面：
可以看到，简介这一行整行的背景颜色被修改成暗黑色了。
为何背景颜色要改成303030，而不是完全的黑色000000呢，这是因为考虑到文字的默认颜色就是纯黑色的，如果背景色也是纯黑色的，那么文字就完全看不见了。
通过设置div的背景颜色，还有一个附带的好处，就是知道div的覆盖范围了。当程序中有很多个div，而且div还有嵌套的时候，通过设置div的背景颜色，可以区分和查看div覆盖的区域范围，从而方便调试和修改。
设置div的文字颜色
可以看到，简介这行看起来一点都不好看，赶紧修改文字的颜色吧。
在<div style="background-color:#303030;的后面增加代码如下：color:#ffffff;
刷新页面：
可以看到文字颜色变成了白色。
style里面的css属性设置，可以允许同时设置多个样式属性，控制内容的不同显示方式。
设置div的文字大小
再来改变文字的大小，让标题字体显示大一些。
在color:#ffffff; 后面增加 font-size:30px;
刷新页面：
可以看到文字变大了。
尺寸单位
这里要学习一个新的概念，就是尺寸单位。用于描述大小的单位就是尺寸单位。
例如，描述文字的大小，描述文字行的高度，描述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; 显示文字为正常不倾斜。
修改代码：
刷新显示：
设置div的文字的加粗
之前用了<b>标签来对文字加粗，也可以使用css属性font-weight: bold; 来对文字进行加粗。也可使用font-weight: normal;取消加粗正常显示。
增加font-weight: bold; 然后去掉<b>标签，修改代码如下：
页面刷新：
可以看到，不同的写法能够实现相同的效果。
课后练习
1.将斜体字体效果去除
2.将工作经历和工作经验(部分)这2行文字也做成简介这行文字的效果
