• 懒鸟飞:帝国cms模板专业分享平台,新域名:lanniaofei.com

Html5第七课CSS3文本属性1-文本属性

一、CSS1&2中的文本属性

属性        版本       简介
text-indent    CSS1      检索或设置对象中的文本的缩进
letter-spacing    CSS1         检索或设置对象中的文字之间的间隔
word-spacing    CSS1         检索或设置对象中的单词之间插入的空格数。
vertical-align    CSS1/CSS2 设置或检索对象内容的垂直对其方式
white-space    CSS1         设置或检索对象内空格的处理方式
direction        CSS2         检索或设置文本流的方向(缺点是只能控制文字左右,不能控制上下显示)
unicode-bidi    CSS2        用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用(设置文本流方向)

line-height    CSS1         检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离
 

二、CSS3 新增的文本属性

属性             版本      简介
1、text-overflow         CSS3      设置或检索是否使用一个省略标记(...)标示对象内文本的溢出
备注:text-overflow属性有两个值,clip默认值,文本内容溢出时直接剪切掉溢出部分;ellipsis当文本溢出时显示省略标记(...)。
注意:text-overflow在使用时,要和over-flow:hidden属性(超出处理)还有white-space:nowrap(禁止换行)配合使用,否则无法看到效果
实例如下:
<style>
P{
 width:100px;
Overflow:hidden;
White-space:nowrap;
Text-overflow:ellipsis
}
</style>
<p>测试一下文本溢出效果</p>

 
 
2、text-align             CSS1/CSS3  设置或检索对象中文本的对齐方式
作用:设定文本对齐方式
取值:
left :默认值 内容左对齐。
center:内容居中对齐。
right: 内容右对齐。
justify: 内容两端对齐。写本文档时仅Firefox能看到正确效果
start: 内容对齐开始边界。(CSS3) 
end: 内容对齐结束边界。(CSS3) 
 
实例如下:
<style>
 P{border:1px solid red;
Text-align:left;
Direction:rtl;
Unicode-bidi:bidi-override;
}
</style>
<p>测试一下文字流显示方向</p>

 
 
3、text-transform         CSS1/CSS3  检索或设置对象中的文本的大小写
作用:设定文本的大小写等形式的转换
取值:
none: 默认值 无转换 
capitalize:  将每个单词的第一个字母转换成大写 
uppercase: 转换成大写 
lowercase: 转换成小写
 full-width: 将左右字符设为全角形式(CSS3)不支持
 full-size-kana:将所有小假名字符转换为普通假名(CSS3)不支持
    例如:土耳其语。

 
 
4、text-decoration     CSS1/CSS3  复合属性。检索或设置对象中的文本的装饰,如下划线、闪烁等
作用:设定文本修饰线。
取值:
[ text-decoration-line ]:不支持
  指定文本装饰的种类。相当于CSS1时的text-decoration属性
[ text-decoration-style ]:不支持
指定文本装饰的样式。
[ text-decoration-color]:不支持
指定文本装饰的颜色。
 blink: 指定文字的装饰是闪烁。  仅opera和firefox
例如:
text-decoration : overline   CSS1实例
text-decoration : #F00 double overline   CSS3实例
备注:目前主要浏览器都没有实现上述属性,但是依然可以使用CSS1的实例方式
 
5、text-decoration-line     CSS3      检索或设置对象中的文本装饰线条的位置。
作用:设定文本修饰线的位置。
取值:
none:默认值 
指定文字无装饰 
underline: 
指定文字的装饰是下划线 
overline: 
指定文字的装饰是上划线 
line-through: 
指定文字的装饰是贯穿线
备注:目前大部分浏览器未实现该属性。 
 
6、text-decoration-color CSS3      检索或设置对象中的文本装饰线条的颜色。
作用:设定文本修饰线的颜色
取值:
指定颜色。
 
7、text-decoration-style CSS3      检索或设置对象中的文本装饰线条的形状。
作用:设定文本修饰线的样式。
取值:
solid:默认值
 实线 
double: 
双线 
dotted: 
点状线条 
dashed: 
虚线 
wavy: 
波浪线
备注:目前大部分浏览器未实现该属性。
 
8、text-shadow    CSS3      设置或检索对象中文本的文字是否有阴影及模糊效果
作用:设定文本的阴影效果
取值:
none:默认值
无阴影 
<length>
①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
<length>
②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
<length>
③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 0:不模糊,10px:模糊程度10像素
<color>
设置对象的阴影的颜色。
备注:可以给字体添加多个阴影,只需要给每个阴影样式用逗号隔开就可以了。 
 
9、text-fill-color         CSS3      设置或检索对象中的文字填充颜色
text-stroke         CSS3      复合属性。设置或检索对象中的文字的描边
text-stroke-width     CSS3      设置或检索对象中的文字的描边厚度
text-stroke-color     CSS3      设置或检索对象中的文字的描边颜色
 
备注:本属性因为暂时还未在W3C标准中确定,所以在使用时需要添加浏览器私有前缀。
 
实例如下:
<style>
P{
/*浏览器私有前缀显示*/
-webkit-text-fill-color:red;
-webkit-text-stroke:3px green;
/*标准W3C显示*/
text-fill-color:red;
text-stroke:3px green;
 
/*浏览器私有前缀的种类
IE:-ms-
谷歌、苹果、猎豹、360急速(webkit内核):-webkit-
Opera:-o-
Firefox:-Gecko-
*/
 
}
</style>
<p>测试文本的填充色和描边色的效果</p>

 
 
 
10、tab-size             CSS3      检索或设置对象中的制表符的长度
作用:设定一个tab缩进键,在页面中的显示长度。
取值: 默认值:8
 
长度或者整数值
 
整数值 : z-index:1  此处的1就是整数值,不需要单位,类似倍数。
长度: margin:10px 此处的10px是长度值。
 
 

注意:该属性只在<pre>标签之内(预格式化状态)显示才会有效。因为浏览器会自动忽略空白字符。
     opera和火狐浏览器需要使用浏览器私有前缀。
 
 
11、word-wrap         CSS3      设置或检索当当前行超过指定容器的边界时是否断开转行
 
作用:溢出文本(特指类英文文字)的处理方式。
取值:
 
normal: 默认值
允许内容顶开或溢出指定的容器边界。 
break-word:
 内容将在边界内换行。如果需要,单词内部允许断行。 
 
 

 
QQ在线咨询
QQ客服
淘宝官网