【CSS】【13】文字的排版

本例讲解如何设置如下的文字样式，通过这个设置来了解文字的排版，效果图：

一、HTML内容：

<h1>《桃姐》简介</h1>
<div>
<p>主演：刘德华叶德娴秦海璐秦沛</p>
<p>导演：许鞍华</p>
<p>年代：2012</p>
</div>
<div>
桃姐（叶德娴饰）是侍候了李家数十年的老佣人，把第二代的少爷罗杰（刘德华饰）抚养成人。罗杰从事电影制片人，五十多岁了仍然独身，而桃姐也继续照顾罗杰，成为习惯……一日，桃姐如常到街市买菜，回寓所煲汤、做好满桌的饭菜，在等待从内地出差回家的罗杰，桃姐看着窗外的街景打发时间，不知不觉间却竟昏迷在地上……桃姐醒来时发现自己身在医院，桃姐是中风了！一边手臂不能活动自如，必须利用物理治疗尽量恢复活动能力。罗杰在百忙工作中为桃姐找合适老人院，期间巧遇昔日电影拍摄认识的草蜢哥（黄秋生饰），桃姐出院来到老人院，环境陌生，院友怪异，桃姐强装镇定。罗杰工余常到老人院探桃姐，主仆闲话家常一如母子，仍保持互相揶揄调侃习惯，桃姐嘴硬心甜，院友羡慕。罗杰特意带桃姐参加电影首映礼，桃姐首次刻意打扮准备，取收藏已久的名贵衣服出发赴会；首映礼上桃姐大开眼界，更终有机会见到电影明星，桃姐感叹自己有生之年已然无憾。

</div>

这是一个纯的HTML文本，它的效果图如下：

二、给第二个<div>的第一个字“桃”增加<span class="firstletter">标记，然后定义firstletter类选择器，使其大小为三个字母大小，并且向左浮动。

.firstletter
{
font-size:3em;
float:left;
}

效果如下：

观察到第二个<div>中的内容行高过于紧密，为了视觉看得舒服所以调整一下行高。

三、给第二个<div>定义info类选择器，使其字体为“宋体”，字的大小为12px，行高为18px

.info
{
font-family:"Arial";
font-size:12px;
line-height:18px;
}

效果如下：

但会发现虽然行的高度有变化，但第一个字“桃”却不是原字体的三倍大小了，这是因为<span>是<div class="info">的孩子，由于div class="info"的行高设置为了18px，所以<span>所属的盒子的行高也就变为了18px。如何保证首字下沉三倍但其他它的行高为18px呢？其实很简单，把line-hieght设置为1.5即可（注意：这里1.5后面没有单位，这是一个百分比，即为父盒子的1.5倍）。

.info
{
font-family:"Arial";
font-size:12px;
line-height:1.5;
}

四、设置标题

h1
{
background:#678;
color:#FFFFFF;
text-align:center;
}

即标题的背景色为#678，字体颜色为白色（#FFFFFF），文本居中对齐，效果如下：

五、设置第一个div的字体样式

.actors
{
float:left;
margin:10px;
padding:10px
margin-left:0px;
background-color:#678;
}

文本设置为向左浮动，除左外边距的距离为0像素之外，内边距和外边距的距离均为10像素，背景色设置为#678，所以最终效果如下：

六、说明：

的backgroud-color属性和backgroud属性一样，都是设置字体的背景颜色；font-family:"Arial","宋体";表示浏览器在解析时先按Arial字体解析，若不存在Arial字体，则按宋体解析，若也不存在宋体，则按浏览器的默认字体显示。

七、关于字体的一些问题可参见如下链接：

http://www.w3school.com.cn/css/css_text.asp

本文转自qingkechina 51CTO博客，原文链接http://blog.51cto.com/qingkechina/1261761：，如需转载请自行联系原作者

【CSS】【13】文字的排版相关推荐

网页css实现文字竖向排版的几种方法
下面介绍几种使用Css实现文字竖向排版的方法: 1.一个句子的竖向排列如图: <!DOCTYPE html> <html> <head> <title> ...
css实现文字纵向排版并且水平垂直居中
第一种方法:CSS属性write-mode实现文字竖排 .wordWrapClass{word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/ /*自测了这句话没啥用*/w ...
css实现文字竖向排版
1.一个句子的竖向排列 <!DOCTYPE html> <html> <head> <title>test</title> <meta ...
css的排版连起来跟全部竖着的区别,CSS实现文字竖排排版
使用bat/vbs/ahk对Windows下进行自动化操作回想90年代,我们在DOS下使用各种命令链对操作进行简化和自动化,如DOS 5.0添加的DosKey,利用管道和重定向对多组命令进行链式操作 ...
css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
css表格文字超数量就竖排_CSS文字竖排 DIV CSS文字垂直竖列排版显示如何实现？...
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
在div中使用css让文字底部对齐的方法
2019独角兽企业重金招聘Python工程师标准>>> css对文字的布局上没有靠容器底部对齐的参数,不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对 ...
css 多行文字左对齐,纯CSS实现文字一行居中，多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
金山打字专业文章计算机,文字录入(排版完成)_计算机软件及应用_IT计算机_专业资料...
文字录入(排版完成)_计算机软件及应用_IT计算机_专业资料 (8页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.9 积分目录第一部分:熟练使用键盘 ...

【CSS】【13】文字的排版

【CSS】【13】文字的排版相关推荐

最新文章

热门文章