建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > CSS布局实例 >

CSS文本布局实例

更新时间:2015-12-15整理编辑:建站学习网阅读:0
  1.文本缩进 text-indent

  text-indent 用来缩进一段文本。它的值是一个长度值,也可以是一个百分数,基于元素的宽度计算.仅能用于块级元素,比较简单,例如
  <div style="text-indent:3em">

  This is Georgia. Hi,everyone! I'm learning css now and I found it interesting.

  This is a line with a text-ident of 3em.<br />

  Here is a line after a br.

  </div>
   
    
 
  2. 文本对齐 text-align

  文本对齐是一个很常用的属性。它有以下几个值: left|right|center|justify|inherit,分别是左对齐,右对齐,居中,两端对齐,继承父节点的设置。设置text- align:center会使元素内部的文本居中,但是并不会让元素内部的其他元素居中。
 

 
  3. 行高 line-height

  一般情况下,行高是字体的1.2倍,可以设置长度值。要注意,行高是可以继承的,在继承的时候,通常情况下继承的是计算值,而不是字面值。例如:
  <div style="font-size:12px;line-height:1em">

  <p style="font-size:20px;">

  I am a line inside a p with font-size 20px and inherited line-height 1em.

  However,this 1em is first turn into the font-size of the div,which is 12px.

  </p>

  </div>

  <div style="font-size:12px;line-height:1">

  <p style="font-size:20px;">

  I am a line inside a p with font-size 20px and inherited line-height 1.

  This time, it inherit the value 1 from div and then turn into the font-size of p.

  Now, it looks much better.

  </p>

  </div>

  注意第二个例子中,设置值是一个倍率,而没有em,这样的话继承的就是字面值,然后再计算时间高度。
 

 
  4 vertical-align 垂直对齐

  当一行中的字体大小不一致,或者有图片等的时候,垂直对齐就显得重要了。vertical-align只能用于行内元素和替换元素,且不能继承。它的常用值可以是baseline|top|text-top|middle|bottom|text-bottom,也可以是长度和百分数。它们大体上的含义比较好理解,但是要深究里面牵涉很多细节概念,而且实际上差很和微小,所以不多作解释了。先看一个例子,用bottom,text-bottom和 baseline做比较。
 

 
  事实上,text-bottom和bottom的差别十分微小,我都看不出有什么差别。bottom对齐的含义是元素框的下端对齐,前面提到,行高默认是字体大小的1.2倍,所以字母的上下各有0.1em的空隙,由于字体变大(或者变小),所以这0.1em也有所区别,因此仔细看,在底端对齐的情况下,可以看到小字体的字略微往下掉了一些,而大字体的字向上提了一点。基线对齐是文字的基线(不带勾的英文字母的下侧,例如m的下侧,对于替换元素如 img就是下边框了)对齐。最后再看有一个数值设置垂直对齐的例子,一个优美的公式:
  <head>

  <title>Untitled Page</title>

  <style type="text/css">

  .header

  {

  vertical-align:1em;

  font-size:0.5em;

  }

  </style>

  </head>

  <body>

  <p style="font-family:Times New Roman;font-style:italic;font-size:30px;">

  x<span class="header">n</span>+y<span class="header">n</span>=z<span class="header">n</span>

  </p>

  </body>


本文网址:https://www.dedexuexi.com/divcss/bj/530.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:前端
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
用ul、li标签创建css横向导航菜单示例
« 上一篇2015年11月09日
自适应高度
2015年11月09日下一篇 »
  • CSS Wave滤镜用法示例
    0阅读
    CSS Wave滤镜可能很多朋友并不喜欢用,其实用的好了,可以有不少奇异效果。CSS Wave滤镜可把对象按垂直方向叠加波形样式,使对象年上去像波浪一样。语法示例:filter:wave(add=add,freq=freq,lightst
  • CSS写的简单表格示例
    0阅读
    使用CSS写表格,不要有所怀疑,主要是对html结构进行css样式重定义,大家可以看看效果图,个人感觉还不错,感兴趣的朋友可以参考下 复制代码 代码如下: !DOCTYPE HTML html head meta http-equiv=Conte
  • 纯CSS代码实现翻页
    0阅读
    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd html xmlns=http://www.w3.org/1999/xhtml xml:la...
  • 表格列表偶数列、奇数列的CSS样式示例
    0阅读
    表格列表CSS样式包括:偶数列、奇数列、鼠标经过时样式、标题列等等,在接下来的示例中将为大家完美呈现,感兴趣的朋友不要错过 HTML示例源代码: 复制代码 代码如下: table class=list_table
  • 用CSS3创建一个旋转可变色按钮
    0阅读
    先从HTML: div a class=button旋转按钮/a /div 和现在的CSS: .button { background:#aaa; color:#555; font-weight:bold; font-size:15px; padding:10px 15px; border:none...
 
QQ在线咨询