一、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>
 

CSS3 新增的文本属性的更多相关文章

  1. css3新增的背景属性

    有时候我们需要往边框文字上添加背景与背景图片的时候就有用处了 background的css3有两个新增属性分别是background-clip与background-origin;背景-修剪与背景起点 ...

  2. css3新增的background属性

    1.background-size 可取值:auto(背景图片正常显示) size size (150px 40%) cover (背景图片覆盖整个背景) contain(背景图片缩小填满整个背景) ...

  3. CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

  4. css文本属性

    CSS1&2中的文本属性 属性 版本 简介 text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  5. css3新增的属性有哪些

    徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...

  6. CSS3新增的属性有哪些：

    CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...

  7. 学习css之文本属性

    css3之文本属性: 1.缩进和水平对齐:text-indent, 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段 ...

  8. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

随机推荐

  1. Spring学习之路-SpringBoot简单入门

    简单讲SpringBoot是对spring和springMVC的二次封装和整合,新添加了一些注解和功能,不算是一个新框架. 学习来源是官方文档,虽然很详细,但是太墨迹了… 地址:https://doc ...

  2. Spring学习之路-从放弃到入门

    AOP:方法拦截器 IOC:类管理容器 主要讲讲这一天看Spring视频学到的东西,以下的叫法全是自创的. 1.类实例管理容器 关于Spring,首先是对类的管理,在常规情况,生成一个类需要调用new ...

  3. [转]sp_OACreate WriteLine Writing nvarchar 中文汉字 非乱码to a text file

    本文转自:https://stackoverflow.com/questions/48135889/writing-nvarchar-to-a-text-file According to the S ...

  4. MFC控件之Combo Box

    下拉链表Combo-box Control 常用属性: Sort:对添加到列表框的字符串进行自动排序.(对指定位置的元素项无效) Type:有三个类型 Simple:没有下拉按钮,可以输入字符串,可以 ...

  5. tomcat 防火墙如何设置

    tomcat 防火墙能够有效的防护我们电脑,那么我们要怎么样去设置呢?下面由学习啦小编给你做出详细的tomcat 防火墙设置方法介绍!希望对你有帮助! tomcat 防火墙设置方法一: 1.为tomc ...

  6. tomcat日志切割和定期删除(转载)

    tomcat日志切割和定期删除 在tomcat的软件环境中,如果我们任由日志文件无限增长,总有一天会将磁盘占满的(废话).特别是在日志文件增长速度很快的一些情况下,按日志切割日志文件并删除,就是一件很 ...

  7. Linux创建用户等操作

    转自: https://www.linuxidc.com/Linux/2017-06/144916.htm 与大家分享下Linux系统中创建用户.设置密码.修改用户.删除用户的命令,希望对你有所帮助. ...

  8. A simple Gaussian elimination problem.（hdu4975）网络流+最大流

    A simple Gaussian elimination problem. Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65 ...

  9. cakephp怎么默认显示index/index文件

    在配置好cakephp之后,我们输入网址后都一般默认显示index/index 文件,那么怎么设置呢? 1.D:\www\cakephp\app\Config\routes.php

  10. IDEA报错：Error starting ApplicationContext. To display the auto-configuration report re-run your application with 'debug' enabled. （'crmWatcherService'错误）

    单表插入项目,插入前正常,插入后运行webapplication报错: run: debug: 于webapplication报错: Injection of autowired dependenci ...