你的位置:首页 > 网页设计

[网页设计]CSS文本


首行缩进

text-indent:0(默认值)text-indent:具体值(可以为负值)text-indent:x%(相对于包含块的宽度)text-indent:2em(2个汉字的字体大小)

  [注意]text-indent只可用于块级元素,且可继承

【实例1】悬挂缩进

<style>div{  width: 200px;  border: 1px solid black;  text-indent: -1em;  padding-left: 1em;}</style></head><body><div>亚冠联赛是亚洲最高等级的俱乐部赛事,相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯,高于亚足联杯和亚足联主席杯,获得冠军的球队将代表亚洲参加当年12月举行的国际足联世界俱乐部杯。期待恒大在世俱杯中为中国足球争光添彩。</div> 

 【实例2】首字下沉

<style>div{  width: 200px;  border: 1px solid black;  text-indent: 0.5em;}div:first-letter{  font-size: 30px;  float: left;}</style></head><body><div>亚冠联赛是亚洲最高等级的俱乐部赛事,相当于欧洲的欧洲冠军联赛及南美洲的南美解放者杯,高于亚足联杯和亚足联主席杯,获得冠军的球队将代表亚洲参加当年12月举行的国际足联世界俱乐部杯。期待恒大在世俱杯中为中国足球争光添彩。</div>  

 水平对齐

text-align: left(左对齐)text-align: right(右对齐)text-align: center(居中对齐)text-align: justify(两端对齐)(IE浏览器无效)

  [注意]text-align只应用于块级元素,且可继承

<style>div{  width: 180px;  border: 1px solid black;}div:nth-child(1){text-align: left;}div:nth-child(2){text-align: right;}div:nth-child(3){text-align: center;}div:nth-child(4){text-align: justify;}</style></head><body><div>亚冠联赛是亚洲最高等级的俱乐部赛事,亚冠联赛是亚洲最高等级的</div><div>亚冠联赛是亚洲最高等级的俱乐部赛事,亚冠联赛是亚洲最高等级的</div><div>亚冠联赛是亚洲最高等级的俱乐部赛事,亚冠联赛是亚洲最高等级的</div><div>亚冠联赛是亚洲最高等级的俱乐部赛事,亚冠联赛是亚洲最高等级的</div>  </body>

 垂直对齐

【1】行高
  line-height属性是指文本行基线之间的距离
  行间距 = line-height - fon-size

line-height: normal;(默认) line-height: 100%/1em/16px;(%相对于元素的字体大小)line-height: 1;(1表示缩放因子,相对于当前元素的字体大小)

  [注意]行高适用于任何元素,且可继承

 

【2】垂直对齐文本

vertical-align:baseline(基线对齐)vertical-align:sub(下标)vertical-align:super(上标)vertical-align:bottom(底端)vertical-align:text-bottom(文本底端)vertical-align:top(顶端)vertical-align:text-top(文本顶端)vertical-align:middle(居中)vertical-align:(+-n)px(元素相对于基线上下偏移npx)vertical-align:x%(相对于元素的line-height值)

  [注意]vertical-align只用于行内元素和替换元素,且不可继承

 

字间隔(单词间距)

word-spacing:normal(默认normal=0)word-spacing:具体值(可为负值)

  [注意]单词之间用空格分开,单词之间的间距 = word-spacing + 空格大小 

 

字母间隔(字符间距)

letter-spacing: normal(默认normal=0)letter-spacing: 具体值(可为负值)

  [注意]word-spacing和letter-spacing都可用于所有元素,且可继承

 

文本转换

text-transform:none(默认)text-transform:uppercase(全大写)text-transform:lowercase(全小写)text-transform:capitalize(首字母大写)

  [注意]text-transform可用于所有元素,且可继承

 文本修饰

text-decoration: none(默认,无修饰)text-decoration: overline(上划线)text-decoration: line-through(中划线或删除线)text-decoration: underline(下划线)

  [注意]text-decoration可用于所有元素,但不可继承

 

空白符(IE7-不支持pre-wrap和pre-line)

  空白符是指空格、制表符和回车;HTML默认会把所有空白符合并成一个空格

white-space:normal;(默认)white-space:pre;(保留空白符,且防止文本换行)white-space:nowrap;(防止文本换行)white-space:pre-wrap;(保留空白符,文本正常换行)white-space:pre-line;(合并空白符,但保留换行符)

  [注意]white-space可用于所有元素,但不可继承

<div>They can stay 72-hours   within the Shandong   province after they have entered China via the Qingdao International Airport.</div>

 文本方向(IE8-不支持)

direction:ltr(normal,left to right)direction:rtl(right to left)unicode-bidi:normalunicode-bidi:embedunicode-bidi:bidi-override

 




九寨沟旅游团购优惠深圳去九寨沟旅游报价跟团去九寨沟旅游多少钱几月去九寨沟旅游最好去九寨沟的旅游团价格集美鳌园在哪里?怎么去? 六一儿童节给孩子送什么礼物好? 武陵源在哪里?武陵源好玩吗? 野外探险需要什么装备?有什么注意事项? 流溪河音乐节有哪些明星?2015从化流溪河公园活动介绍? 从化音乐节在哪里举办?2015从化音乐节地点? 从化流溪河公园2015花海音乐节举办几天?流溪河花海音乐节到几号? 从化流溪河公园2015花海音乐节几号开始?流溪河花海音乐节开始时间? 从广东茂名去湖南凤凰城旅游要花多少钱? 北京海洋馆门票是多少? 北京西站离哪个地铁站近?坐什么公交车方便? 从深圳怎么去湖南凤凰古城最便宜? 一山一湖一古镇 梦回窑湾两千年 舌尖上的包子:盘点中国九大名包(全文) 深圳东部华侨城附近有住的地方吗?东部华侨城住一晚多少钱? 哪些地方出境游不需要签证,有护照就能去? CY14E256L-SZ35XI Datasheet CY14E256L-SZ35XI Datasheet CY14E256L-SZ45XI Datasheet CY14E256L-SZ45XI Datasheet CY22801FXCT Datasheet CY22801FXCT Datasheet 深圳世界之窗地址 深圳世界之窗地址 深圳世界之窗地址 九月份适合去哪里旅游 九月份适合去哪里旅游 九月份适合去哪里旅游 饶平绿岛山庄 饶平绿岛山庄 饶平绿岛山庄