仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 842|回复: 8
打印 上一主题 下一主题

[DIV+CSS] CSS教程之CSS教程:行高line-height属性(2)

[复制链接]
简单生活 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:12:04 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称,中文译作“层叠样式表单”。
相干文章:CSS教程:行高line-height属性(1)
7.3.3行高的盘算与承继以em、ex和百分比为单元的行高,其基数是元素自己的字体尺寸。比方有代码以下:
<pstyle="font-size:20px;line-height:2em;">字高20px,行高2em。</p><pstyle="font-size:30px;line-height:2em;">字高30px,行高2em。</p>2个段落的行高都为2em,可是字体巨细分歧,因而显现如-23所示。

-23行高的盘算行高能够设定得比字体高度小,此时多行的笔墨将叠加到一同,比方有以下代码,其显现如-24所示。p{font-size:20px;line-height:10px;}<p>字高20px,行高10px。此时多行的笔墨将叠加到一同。</p>

-24比字体高度小的行高行高是可承继的,可是承继的是盘算值,比方有以下代码:p{font-size:20px;line-height:2em;}pspan{font-size:30px;}<p>字高20px。<span>字高30px。</span></p><p>元素的行高2em,字体尺寸为20px,因而盘算值为40px,固然<span>元素自己的字体尺寸为30px,不外其承继的行高仍为40px。可是在分歧的扫瞄器内显现的效果却不尽不异,如-25所示。

-25行高的分歧体现因为承继的是盘算值,因而当元素内的笔墨字体尺寸纷歧样的时分,假如设定流动的行高极可能形成字体的堆叠,比方有以下代码,其显现如-26所示。p{font-size:20px;line-height:1em;}pspan{font-size:30px;}<p>字高20px,行高1em,当文本为多行时大概会产生笔墨堆叠的设想。<span>字高30px。</span></p>

-26行高承继形成笔墨叠加为了不这类情形,能够为每一个元素独自界说行高,可是如许很啰嗦,因而能够界说一个没有单元的实数值作为缩放因子来一致把持行高,缩放因子是间接承继的,而不是承继盘算值。比方修正上例中的行高为:p{line-height:1;}则上例中的XHTML代码显现如-27所示。

-27缩放因子对行高的影响当内容中含有图片的时分,假如图片的高度年夜于行高,则含有图片行的行框将被撑开到图片的高度,如-28所示。

-28含有图片的行注重:图片固然撑开了行框,可是不会影响行高,因而也不会影响到基于行高来盘算的其他属性。提醒:当行内含有图片的时分,图片和笔墨的垂直对齐体例默许是基线对齐,关于垂直对齐将在本章[7.4垂直对齐:vertical-align属性]一节中会商。
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
山那边是海 该用户已被删除
沙发
发表于 2015-1-18 05:31:36 来自手机 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
精灵巫婆 该用户已被删除
板凳
发表于 2015-1-24 15:57:08 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
透明 该用户已被删除
地板
发表于 2015-2-2 10:46:12 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
再现理想 该用户已被删除
5#
发表于 2015-2-7 18:37:51 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
莫相离 该用户已被删除
6#
发表于 2015-2-23 01:12:54 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
愤怒的大鸟 该用户已被删除
7#
发表于 2015-3-7 06:47:05 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
第二个灵魂 该用户已被删除
8#
发表于 2015-3-14 17:17:06 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
金色的骷髅 该用户已被删除
9#
发表于 2015-3-21 14:14:46 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 11:42

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表