您在divcss.net的位置首页 >> DIV+CSS教程 >> 教程正文

第七课 什么是CSS文本

 skeeter | Div+css教程 | 2010-3-15 | 177点击 | 0评论

通过学习css文本属性，了解如何通过css改变文本的颜色、字符间距，对齐文本，装饰文本，缩进文本等等

通过css文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，缩进文本，等等。


--------------------------------------------------------------------------------


缩进文本


文章的第一行缩进，这是一个实用的效果，CSS 提供了 text-indent属性 可以方便地实现这一效果。


你可以自由调节缩进的长度，甚至可以为负的（建议不使用）。


下面将段落首行缩进5em：

p {text-indent: 5em;}


注意：text-indent属性不适用于行内元素，如果要使行内元素的第一行进行“缩进”，可以用css边距来实现。


--------------------------------------------------------------------------------


使用百分比值


text-indent属性 可以使用百分比值来控制缩进。


百分数值是相对于父元素的宽度。也就是说，如果缩进值为 20%，元素的第一行缩进长度将是其父元素宽度的 20%。


在下例中，缩进值是父元素的 20%，即 60 个像素：

div {width:300px;}

p {text-indent:20%;}


--------------------------------------------------------------------------------


文字对齐


text-algin 属性 用来控制水平对齐，这个属性有 4 个值：


1.  left（左对齐）


2.  right（右对齐）


3.  center（居中）


4.  justify（两端对齐）


--------------------------------------------------------------------------------


字间隔


word-spacing属性 可以改变文字之间的间隔。其默认值为0。


此属性值 为正时增大文字之间间隔，同理，为负时缩小文字之间间隔：

.plus{word-spacing:30px;}

.lose{word-spacing:-5px;}

我的字间距 比较 大

我的字间距 比较 小


--------------------------------------------------------------------------------


字母间隔


letter-spacing 与 word-spacing 的区别在于：


letter-spacing是一个单词之间的间隔


word-spacing是每个字母之间的间隔


其用法以及可选值完全与 word-spacing 相同：

.le_plus {letter-spacing: 10px;}

.le_lose {letter-spacing: -5px;}

我的字母间距比较大

我的字母间距比较小


--------------------------------------------------------------------------------


字符转换


text-transform属性 处理文本的大小写。这个属性有 4 个值：


1. none （无）


2. uppercase （全大写）


3. lowercase （全小写）


4. capitalize （每个单词首字母大写）


如果你突然决定把所有 h1 元素变为大写，这个属性就很有用了。不必单独地修改所有 h1 元素的内容，使用 text-transform 就能简单的完成这个修改：

.un {text-transform: uppercase;}


同时text-transform 也充分突出了CSS的主旨，把内容和样式完全分离开来。如果你想要把所有的 h1 元素再变为小写，只要将值换为lowercase 即可，完全不用修改 h1 元素里本来的内容。
 

--------------------------------------------------------------------------------


文本下划线


接下来，我们讨论 text-decoration 属性，这也是一个常用属性之一。


这个属性有 5 个值：


1.  none （无）


2.  underline （下划线）


3.  overline （上划线）


4.  line-through （中划线）


5.  blink （文本闪烁，不建议使用，某些浏览器不支持此属性）
 

如果你希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：

a {text-decoration: none;}


可以有不止一个值，也可以又有上划线，又有下划线：

.uline{text-decoration: underline overline;}


--------------------------------------------------------------------------------


文本方向


我们知道古汉语就是从右到左来阅读的，CSS引入了Direction属性 来改变其方向，为设计又多了一些乐趣。


这个属性有2个值：


1.  ltr （默认，文本从左到右）


2.  rtl （文本从右到左）
 

将文字改为从右到左排列：

.ll{

direction: rtl;unicode-bidi: bidi-override;

}

我是一颗小小草


注意：假如您想应用direction属性 的元素属于内联元素，您必须设定 unicode-bidi属性 为embed 或 bidi-override。

关键字:什么是CSS文本,文本的颜色,字符间距,对齐文本,装饰文本,缩进文本,div+css入门教程

上一篇:第六课 如何设置CSS背景下一篇:第八课 如何设置CSS字体

添加评论



站长杂谈

最新动态 | SEO | 网站推广 | 网站建设

  • 传腾讯全面购康盛创想 discuz!落户腾讯 传腾讯全面购康盛创想 discuz!落户腾讯 2010-8-23 11:57:15 22次阅读

    今日有媒体爆出腾讯已经全面收购建站平台Discuz！的开发公司——北京康盛创想，进军中小网站市场

  • 侵权盗版网站黑名单即将建立 侵权盗版网站黑名单即将建立 2010-7-22 11:47:41 50次阅读

    此次行动后将建立侵权盗版网站黑名单制度。名单将在国家版权局网站上不定期发布并抄送提交三大电信...

  • 如何应对拍照备案 如何应对拍照备案 2010-7-19 10:37:03 70次阅读

    就目前而言，拍照备案已成定局。 据一名行业网站的站长透露，目前他最担心的就是需要现场拍照，因...

  • 日本称中国网购仿冒品泛滥 日本称中国网购仿冒品泛滥 2010-7-11 12:55:34 57次阅读

    据日本共同社10日报道，为掌握仿冒品的流通情况，日本经产省于2009年度在中国的主要网络商城...

好书推荐

DIV+CSS | SEO | 网络编程 | 网站设计

鄂ICP备06008892号divcss.net