CSS3 新增的文本属性
一、CSS1&2中的文本属性(W3C标准)
|
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 新增的文本属性
|
属性
|
版本
|
简介
|
|
text-overflow
|
CSS3
|
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
|
|
text-align
|
CSS1/CSS3
|
设置或检索对象中文本的对齐方式
|
|
text-transform
|
CSS1/CSS3
|
检索或设置对象中的文本的大小写
|
|
text-decoration
|
CSS1/CSS3
|
复合属性。检索或设置对象中的文本的装饰，如下划线、闪烁等
|
|
text-decoration-line
|
CSS3
|
检索或设置对象中的文本装饰线条的位置。
|
|
text-decoration-color
|
CSS3
|
检索或设置对象中的文本装饰线条的颜色。
|
|
text-decoration-style
|
CSS3
|
检索或设置对象中的文本装饰线条的形状。
|
|
text-shadow
|
CSS3
|
设置或检索对象中文本的文字是否有阴影及模糊效果
|
|
text-fill-color
|
CSS3
|
设置或检索对象中的文字填充颜色
|
|
text-stroke
|
CSS3
|
复合属性。设置或检索对象中的文字的描边
|
|
text-stroke-width
|
CSS3
|
设置或检索对象中的文字的描边厚度
|
|
text-stroke-color
|
CSS3
|
设置或检索对象中的文字的描边颜色
|
|
tab-size
|
CSS3
|
检索或设置对象中的制表符的长度
|
|
word-wrap
|
CSS3
|
设置或检索当当前行超过指定容器的边界时
是否断开转行
|
1.text-overflow属性
作用：设定内容溢出状态下的文本处理方式。
取值：
clip
：
默认值当对象内文本溢出时不显示省略标记（...），而是将 溢出的部分裁切掉。
ellipsis
：当对象内文本溢出时显示省略标记（...）。
注意:该属性需要和over-flow:hidden属性(超出处理)还有white-space:nowrap(禁止换行)配合使用，否则无法看到效果
<style> p{width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} </style> <body> <p>哇塞，有灰机灰过去了，一会又一架灰机灰来了</p> </body>
2.text-align属性
作用:设定文本对齐方式
取值：
left ：默认值 内容左对齐。
center：内容居中对齐。
right： 内容右对齐。
justify：内容两端对齐。写本文档时仅Firefox能看到正确效果（只有火狐支持）
start： 内容对齐开始边界。（CSS3）
end： 内容对齐结束边界。（CSS3）
<style> p{text-align:start; border:1px solid red; direction:rtl; /*将文档流变成从右向左书写*/ unicode-bidi:bidi-override; } </style> <body> <p>看看我在哪里，左边还是右边还是中间捏？</p> <!-- 在从左向右书写的文字中，左是开始,右是结束(汉语、英语) left=start right=end 在从右向左书写的文字中，右是开始,左是结束(维语) left=end right=start ---> </body>
lDirection 定义文字排列方式(全兼容)
•Rtl 从右向左排列
•Ltr 从右向左排列
•注意要配合unicode-bidi 一块使用
<style> p{width:300px;border:1px solid #000;font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;} </style> </head> <body> <p>妙味课堂</p> </body>
3.text-transform属性
作用：设定文本的大小写等形式的转换
取值：
none
：
默认值无转换
capitalize
：将每个单词的第一个字母转换成大写
uppercase
：转换成大写
lowercase
：转换成小写
full-width
：将左右字符设为全角形式（CSS3）不支持
full-size-kana
：将所有小假名字符转换为普通假名（CSS3）不支持 例如：土耳其语。
4.text-decoration属性
作用：设定文本修饰线。
取值：
[ 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属性
作用：设定文本修饰线的位置。
取值：
none
：
默认值
指定文字无装饰
underline
：
指定文字的装饰是下划线
overline
：
指定文字的装饰是上划线
line-through：
指定文字的装饰是贯穿线
备注:目前大部分浏览器未实现该属性。
6.
text-decoration-style
属性
作用：设定文本修饰线的样式。
取值：
solid
：
默认值 实线
double
：双线
dotted
：点状线条
dashed：虚线
wavy
：波浪线
备注:目前大部分浏览器未实现该属性。
7.text-decoration-color属性
作用：设定文本修饰线的颜色
取值：
指定颜色。
8.text-shadow
属性
作用
:
设定文本的阴影效果
取值：
none
：
默认值 无阴影
<length>
①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>
②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>
③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
0:
不模糊，
10px
：模糊程度
10
像素
<color>
设置对象的阴影的颜色。
可以设置多个，有逗号隔开
<style type="text/css"> p{color:red; font-size:40px; text-shadow: 3px 3px 3px rgba(0,255,0,0.5), 6px 6px rgba(0,0,255,0.5), 9px 9px #f90 ; /* 第一个参数表示 水平移动方向 第二个参数表示 垂直移动方向 第三个参数表示[模糊程度(长度)] 可以省略 第四个参数表示 [阴影颜色] 可以省略 */ } </style> <body> <p>我是一个正直的人，又正又值。</p> </body>
<style> h1{ font:100px/200px "微软雅黑"; text-align:center; color:#fff; text-shadow:4px 4px 4px red;} </style> </head> <body> <h1>妙味课堂</h1> </body>
文字模糊：
鼠标移动上去时
<style> h1{ font:100px/200px "微软雅黑"; text-align:center; color:#000; text-shadow:0 0 0 rgba(0,0,0,0.5); border:1px solid #000; transition:1s;} h1:hover{color:rgba(0,0,0,0.5);text-shadow:0 0 100px rgba(0,0,0,0.1);} </style> </head> <body> <h1>妙味课堂</h1> </body>
火焰文字
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;} </style> </head> <body> <p>妙味课堂</p> </body> </html>
光晕效果：
<style> p{color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;} </style> </head> <body> <p>妙味课堂</p> </body>
10.text-fill-color属性
作用
:
文本填充颜色，指定文字填充部分的颜色
取值
: 颜色
备注:使用该属性需要使用浏览器似有前缀
11.text-stroke属性
作用
:
文本边框颜色，指定文字描边部分的颜色
取值
:
[
text-stroke-width ]：设置或检索对象中的文字的描边厚度
[
text-stroke-color ]：设置或检索对象中的文字的描边颜色
备注:使用该属性需要使用浏览器似有前缀
<style type="text/css"> p{ font-size:100px; /*浏览器私有前缀属性*/ -webkit-text-fill-color:blue; -webkit-text-stroke:2px green; /*W3C标准*/ /*text-fill-color:red;*/ /*text-stroke:2px green;*/ /*私有前缀 IE：-ms- 谷歌、苹果、猎豹、360急速(webkit内核):-webkit- opera:-o- firefox:-moz- 更正:火狐浏览器的内核为Gecko 但是似有前缀是-moz- */ } </style> <body> <p>文艺青年欢乐多。</p> </body>
12.text-stroke-width属性
作用
:
指定文字描边部分的宽度，
text-stroke
的派生属性
取值
:长度
13.text-stroke-color
属性
作用
:
指定文字描边部分的颜色，
text-stroke
的派生属性
取值
:颜色
<style type="text/css"> p{ font-size:100px; /*浏览器私有前缀属性*/ -webkit-text-fill-color:white; -webkit-text-stroke-color:blue; -webkit-text-stroke-width:2px; /*W3C标准 text-fill-color:white; text-stroke-color:blue; text-stroke-width:2px;*/ } </style> <body> <p>文艺青年欢乐多。</p> </body>
14.tab-size属性
作用
:
设定一个
tab
缩进键，在页面中的显示长度。
取值
:
默认值：８ 长度或者整数值
整数值 : z-index:1 此处的1就是整数值，不需要单位，类似倍数。
长度: margin:10px 此处的10px是长度值。
注意:该属性只在<pre>标签之内(预格式化状态)显示才会有效。因为浏览器会自动忽略空白字符。
opera和火狐浏览器需要使用浏览器私有前缀。
<style type="text/css"> p{tab-size:30} /*支持倍数方式*/ /*p{tab-size:800px;}谷歌浏览器暂不支持长度定义*/ </style> <body> <pre> <p> tab键长度测试</p> </pre> <!-- HTML在处理不可见字符的时候，通常忽略或者变成一个英文字符空格 在开头或者结尾:忽略掉所有空白字符 在字符中间：把连续的所有空白变成一个英文的空格 --> </body>
15.word-wrap属性
作用
:
溢出文本
(
特指类英文文字
)
的处理方式。
取值
:
normal
：
默认值
允许内容顶开或溢出指定的容器边界。（一个单词的情况下，即使超出宽度也不会换行，如果是多个单词会自动换行）
break-word
：
内容将在边界内换行。如果需要，单词内部允许断行（一个单词的情况下）。
<style type="text/css"> p{width:90px;border:1px solid red;word-wrap:break-word} </style> <body> <p>howareyouhowoldareyou?</p> </body>
16、自定义文字字体
http://www.fontsquirrel.com/fontface/generator转换字体格式生成兼容代码
会生成一个css文件，将css文件里的代码贴到HTML里即可
<style> /*这段代码在 http://www.fontsquirrel.com/fontface/generator转换字体格式生成兼容代码 导入一个字体后自动生成代码，和字体*/ @font-face { /*该属性的原理就是当用户的电脑没有下面的字体的话，就随着网页将字体带到用户的电脑里去*/ font-family: 'miaov';/*给字体起名字*/ src: url('1-webfont.eot'); src: url('1-webfont.eot?#iefix') format('embedded-opentype'), url('1-webfont.woff') format('woff'), url('1-webfont.ttf') format('truetype'), url('1-webfont.svg#untitledregular') format('svg'); font-weight: normal; font-style:normal; } body{font-family:"miaov"; font-size:200px; color:#000; font-weight:bold; text-align:center; letter-spacing:30px; transition:1s;} body:hover{color:red;} </style> </head> <body> AAA </body>