一、文字颜色（color:red;）

<style>

    body {color:red}

    h1 {color:greenyellow}

    p.color {color:blue}

</style>

<body>

    <h1>这是H1标签，定义字体颜色为绿黄色</h1>

    <p class="color">这是P标签，定义文本蓝色颜色</p>

    <p>这是P标签，没有定义文本颜色，所以继承body的字体颜色</p>

</body>

　　代码执行效果如下图：

二、文本缩进首行（text-indent:2em;）

<style>
　　/*允许使用负值。如果使用负值，那么首行会被缩进到左边。*/

    p {text-indent: 2em}

</style>

<body>

    <p>

        这是段落中的一些文本。

        这是段落中的一些文本。

        这是段落中的一些文本。

        这是段落中的一些文本。

        这是段落中的一些文本。

        这是段落中的一些文本。

        这是段落中的一些文本。

        这是段落中的一些文本。

        这是段落中的一些文本。

        这是段落中的一些文本。

        这是段落中的一些文本。

        这是段落中的一些文本。

    </p>

</body>

　　代码执行效果如下图：

三、文本水平对齐（text-align:center）

<style>

    h1,h2,h3{border: 1px solid red;}

    h1 {text-align: center}

    h2 {text-align: left}

    h3 {text-align: right}

</style>

<body>

    <h1>这是标题 1</h1>

    <h2>这是标题 2</h2>

    <h3>这是标题 3</h3>

</body>

　　代码执行效果如下图：

四、字符间距（letter-spacing:4px）

<style type="text/css">

    h1.one {letter-spacing:4px}

    h1.two {letter-spacing:-3px}

</style>

<body>

    <h1>this is H1</h1>

    <h1 class="one">this is one</h1>

    <h1 class="two">this is two</h1>

</body>

　　代码执行效果如下图：

五、字间距（word-spacing: 30px;）

<style>

    p.spread {word-spacing: 30px;}

    p.tight {word-spacing: -0.5em;}

</style>

<body>

    <p class="spread">This is some text. This is some text.</p>

    <p class="tight">This is some text. This is some text.</p>

</body>

　　代码执行效果如下图：

六、文本的大小写转换（text-transform: uppercase）

<style>

  h1.uppercase {text-transform: uppercase}

  h1.lowercase {text-transform: lowercase}

  h1.capitalize {text-transform: capitalize}

</style>

<body>

    <h1>This is some text in a paragraph.(原貌)</h1>

    <h1 class="uppercase">This is some text in a paragraph.（大写）</h1>

    <h1 class="lowercase">This is some text in a paragraph.（小写）</h1>

    <h1 class="capitalize">This is some text in a paragraph.（每个单词以大写字母开头）</h1>

</body>

　　代码执行效果如下图：

七、文本修饰（text-decoration: underline）

　　underline：定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过文本下的一条线。blink定义闪烁的文本。

<style >

    h1 {text-decoration: overline}

    h2 {text-decoration: line-through}

    h3 {text-decoration: underline}
　　 h4 {text-decoration:blink}

    a {text-decoration: none}

</style>

<body>

    <h1>这是标题 1</h1>

    <h2>这是标题 2</h2>

    <h3>这是标题 3</h3>

    <h4>这是标题 4</h4>

    <p><a href="http://www.cnblogs.com/xiangxuemei/">这是一个链接</a></p>

</body>

　　代码执行效果如下图：

八、设置元素中空白的处理方式（white-space: nowrap）

<style>

     /*默认。空白会被浏览器忽略。*/

    .normal{white-space:normal}

    /*空白会被浏览器保留。其行为方式类似 HTML 中的 pre标签。*/

    .pre{white-space:pre}

    /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/

    .nowrap{white-space:nowrap}

    /*保留空白符序列，但是正常地进行换行*/

    .pre-wrap{white-space:pre-wrap}

    /*合并空白符序列，但是保留换行符*/

    .pre-line{white-space:pre-line}

</style>

<body>

    <p class="normal">

        normal。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

    </p>

    <p class="pre">

        normal。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

    </p>

    <p class="nowrap">

        normal。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

    </p>

    <p class="pre-wrap">

        normal。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

    </p>

    <p class="pre-line">

        normal。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

        这是一些文本。

    </p>

</body>

　　代码执行效果如下图：

九、文本方向（direction: rtl）

　　注意：行内元素，需要加unicode-bidi:embed/bidi-override;以后才能用direction

<style>

    div{border:1px solid red}

    /*默认。文本方向从左到右*/

    div.one{direction: rtl}

    /*文本方向从右到左。*/

    div.two{direction: ltr}

</style>

</head>

<body>

    <div class="one">Some text. Right-to-left direction.从右往左</div><br />

    <div class="two">Some text. Left-to-right direction.从左往右</div>

</body>

　　代码执行效果如下图：

十、兼容

注释：

1、任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

2、IE、Chrome 或 Safari 以及FF不支持 "blink" 属性值，需要使用闪烁效果字体建议用gif图片。

　

text——文本属性大全的更多相关文章

  1. 关于html与css的标签及属性（text文本属性、背景background属性、表格标签table、列表、）

    text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...

  2. HTML+css基础 Text文本属性

    Text文本属性: 1.颜色  color color:red 2.文本缩进 text-indent 属性值 数字+px: text-indent:10px: 3.文本修饰 text-decorati ...

  3. zencart批量插入TEXT文本属性attributes

    有时候上传的产品与多级分类比较多,在后台添加文本属性如Name,Number等需要顾客自定义的内容就比较费神了.现在只需将以下代码保存为insert_attributes.php,变量$options ...

  4. as3.0 动态文本属性大全

    var my_fmt = new TextFormat();//常用样式 my_fmt.align = "center"; my_fmt.blockIndent = 50; //区 ...

  5. CSS| text文本属性

    注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 1)  text-indent 取值: 5px/2 ...

  6. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  7. [CSS]文本属性（Text）

      CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...

  8. (转)TextView属性大全

    TextView属性大全 今天研究了TextView一天了,发现网上有一篇讲TextView属性的,非常全,收藏一下先. 发现TextView有一个比较大的问题,就是文字排版的问题,遇到数字,字母,符 ...

  9. Android（java）学习笔记88：TextView属性大全

    TextView属性大全: android:autoLink       设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/ph ...

随机推荐

  1. 使用PHP实现RSA算法的加密和解密

    本文提供使用RSA算法加密解密数据的PHP程序类(签名和验签的实现方式可以查看使用PHP实现RSA算法的签名和验签 这篇文章),封装了格式化公钥和私钥文件的方法,这样无论使用什么格式的公钥或者私钥都可 ...

  2. 用Python3实现的Mycin专家系统简单实例

    from sys import stderr ######################### TRUE = 1 #定义返回值 FALSE = 0 FACT_LENGTH = 9 #'''前提与结论 ...

  3. vue.js国际化vue-i18n插件的使用问题，在模版文本、组件方法、jsf方法里的使用

    vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...

  4. zigbee 中ZDO的理解

    ---恢复内容开始--- ZigBee     物理层:主要进行无线数据的收发,同时定义了无线传输的信道以及频率.      MAC层:使用CSMA-CA机制接入到无线信道,负责传输信标帧,保持同步和 ...

  5. ROS之坑

    我使用ROS建图的时候,用的是Kinect的深度信息转换成laser scan,Rviz仿真环境调用出laser scan信息的时候显示如下错误: Transform [sender=unknown_ ...

  6. phpstrom 快速定位到当前编辑文件

    方法1(手动定位): 打开所要查找的文件,然后点击上图中红框中的按钮即可快速定位. 方法二(自动定位): Project面板右上角有个准星类的图标,点击后勾选上Autoscorll from Sour ...

  7. 0x13链表与邻接表之邻值查找

    题目链接:https://www.acwing.com/problem/content/138/ 参考链接:https://blog.csdn.net/sdz20172133/article/deta ...

  8. J2EE笔记

    J2EE的优势 J2EE允许公司把一些通用的.很繁琐的服务端任务交给中间件供应商去完成.这样开发人员可以集中精力在如何创建商业逻辑上,相应地缩短了开发时间.高级中间件供应商提供以下这些复杂的中间件服务 ...

  9. LaTex 使用特殊章节符号 (§)

    参考: LaTex 使用特殊章节符号 (§) LaTex 使用特殊章节符号 (§) 在.tex文件开头,加上以下内容: \usepackage[utf8]{inputenc} \usepackage{ ...

  10. MySql中not in的优化

    最近项目上用select查询时使用到了not in来排除用不到的主键id一开始使用的sql如下: select s.SORT_ID, s.SORT_NAME, s.SORT_STATUS, s.SOR ...