学哥量化交易学习
持续学习,提高认知,磨炼技艺,从零基础学编程并跨过量化程序交易的大门。
 返回首页
 
 
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行文字也做成简介这行文字的效果
学哥量化交易学习团队
   致力于:持续学习,提高认知,磨炼技艺,持续输出高质量的教程和课程,帮助更多的人从零基础学编程并跨过量化程序交易的大门。
零基础学编程Python入门课程
课程包含以下内容:
1.图文教程《零基础学编程入门-从Python到Web网站.pdf》,学哥原创版权,共计1024页高清图文教程。
2.视频课程《零基础学编程Python入门》,学哥原创版权,共计24节课45个高清视频。
3.视频教程《玩转魔方》,学哥原创版权,可以送给孩子,共计16个高清视频。
4.图文教程《如何寻找编程相关的电子书下载资源.pdf》。
5.加入学哥编程学习辅导QQ群在线交流。

客服 10:00-17:00
QQ: 44556287
微信公众号
学哥量化交易学习
 
  微信公众号:学哥量化交易学习     QQ群1:603559164    客服QQ号:44556287
工信部备案/许可证编号:沪ICP备15050545号-4