CSS文字及文本

导航:
1、文字及文本
2、例子

1、文字及文本
文字: 单个字符
文本: 多个字符的组合体

2、例子
2.1、文字的颜色
颜色属性被用来设置文字的颜色
格式: color:色值
颜色是通过CSS最经常的指定：
    十六进制值 - 如"＃FF0000"
    一个RGB值 - "RGB（255,0,0）"
    颜色的名称 - 如"red"

2.2、文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
格式: text-align:位置

2.3、文本修饰
text-decoration 属性用来设置或删除文本的装饰。
格式: text-decoration:修饰值

2.4、文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
格式:text-transform:转换值

2.5、文本缩进
格式: text-indent:缩进值

2.6、文本行高
格式: line-height:值

2.7、字符间距
格式: letter-spacing:间距值

2.8、单词间距
格式: word-spacing:间距值

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="keyword" content="CSS文字及文本"/>
  6. <meta name="description" content="CSS文字及文本"/>
  7. <meta name="author" content="xiaobei qq:2801616735"/>
  8. <title>CSS文字及文本</title>
  9. </head>
  10.  
  11. <body>
  12.     <ul>
  13.         <li>文字颜色</li>
  14.         <li>文本水平方向的对齐方式</li>
  15.         <li>文本纵向方向的对齐方式</li>
  16.         <li>文本的修饰</li>
  17.         <li>文本转换</li>
  18.         <li>文本缩进</li>
  19.         <li>文本行高</li>
  20.         <li>字符间距</li>
  21.         <li>单词间距</li>
  22.     </ul>
  23.     <h2>1、文字颜色</h2>
  24.     <p style="border:1px red dashed;">
  25.         <span style="color:#999;">十六进制值</span>
  26.         <span style="color:rgb(144,168,250);">RGB</span>
  27.         <span style="color:red;">颜色名称</span>
  28.     </p>
  29.     <hr/>
  30.     <h2>2、文本水平方向的对齐方式</h2>
  31.     <p style="border:1px red dashed; text-align:left;">文本的对齐方式_默认</p>
  32.     <p style="border:1px red dashed; text-align:center;">文本的对齐方式_居中</p>
  33.     <p style="border:1px red dashed; text-align:right;">文本的对齐方式_居右</p>
  34.     <hr/>
  35.     <h2>3、文本纵向方向的对齐方式</h2>
  36.     <p style="border:1px red dashed;">X<span style="vertical-align:sub;">2</span></p>
  37.     <p style="border:1px red dashed;">X<span style="vertical-align: super;">2</span></p>
  38.     <p style="border:1px red dashed;"><img src="a.gif"/><span style="vertical-align:top">dddd</span></p>
  39.     <p style="border:1px red dashed;"><img src="a.gif"/><span style="vertical-align:100px;">dddd</span></p>
  40.     <p style="border:1px red dashed; height:200px;"><img src="a.gif"/><span style="vertical-align:bottom;">dddd</span></p>
  41.     <hr/>
  42.     <h2>4、文本的修饰</h2>
  43.     <p style="border:1px red dashed; text-decoration:line-through;">文本的修饰_line-through</p>
  44.     <p style="border:1px red dashed; text-decoration:underline;">文本的修饰_underline</p>
  45.     <p style="border:1px red dashed; text-decoration:overline;">文本的修饰_overline</p>
  46.     <hr/>
  47.     <h2>5、文本转换</h2>
  48.     <p style="border:1px red dashed; text-transform: uppercase;">xiaobei_uppercase</p>
  49.     <p style="border:1px red dashed; text-transform: lowercase;">xiaobei_lowercase</p>
  50.     <p style="border:1px red dashed; text-transform: capitalize;">xiaobei capitalize</p>
  51.     <hr/>
  52.     <h2>6、文本缩进</h2>
  53.     <p style="border:1px red dashed; text-indent:10px;">文本缩进</p>
  54.     <hr/>
  55.     <h2>7、文本行高</h2>
  56.     <p style="border:1px red dashed; line-height:40px;">文本行高</p>
  57.     <hr/>
  58.     <h2>8、字符间距</h2>
  59.     <p style="border:1px red dashed; letter-spacing:20px;">字符间距</p>
  60.     <hr/>
  61.     <h2>9、单词间距</h2>
  62.     <p style="border:1px red dashed; word-spacing:200px;">this is a world.</p>
  63. </body>
  64. </html>

CSS文本的更多相关文章

  1. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  2. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...

  3. css文本格式详解

    一.css文本主体内容: 二.css文本详解:  1.文本缩进 语法: text-indent:<length>|<percentage> 默认值为0. 属性值详解: < ...

  4. CSS文本与连接

    CSS文本 CSS文本属性可以定义文本外观,通过文本属性,可以改变文本的颜色.字符间距.对齐文本.装饰文本.对文本缩进等等. 常用的文本属性 属性 描述 color 文本颜色 direction 文本 ...

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

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

  6. CSS 文本、字体、链接

    CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化 ...

  7. CSS文本效果

    前面的话 本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...

  8. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  9. css文本超出省略号

    终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...

  10. css文本属性用法总结

    稍稍总结了下css文本的一些属性用法,自己忘记的时候也可以用来查查,不用去查网站那么麻烦. 下面是部分总结,也希望对其他人有用 文本修饰 (1)text-decoration:  文本修饰(横线) 4 ...

随机推荐

  1. java基础之高级应用

    在程序中涉及方法重写的地方使用@override Annotation(只作用于方法)注释可以很好的避免由于重写方法名字过长而造成的程序后期出现的难以调试的错误,特别是程序没有报任何的错误时,而程序的 ...

  2. oc 根据文件路径获取文件大小

    第一种封装: -(NSInteger)getSizeOfFilePath:(NSString *)filePath{ /** 定义记录大小 */ NSInteger totalSize = ; /** ...

  3. SQL Server执行计划那些事儿（1）——哈希、合并、嵌套联接的选择

    接下来的文章是记录自己曾经的盲点,同时也透漏了自己的发展历程(可能发展也算不上,只能说是瞎混).当然,一些盲点也在工作和探究过程中慢慢有些眉目,现在也愿意发扬博客园的奉献精神,拿出来和大家分享一下. ...

  4. mac nodejs&npm 安装

    https://www.baidu.com/link?url=Ekv7EzWuMOXjIqFL_ewddWzdahU7jMAsWY4gOGOjMtC&ie=UTF-8&wd=nodej ...

  5. iOS 任意类型数据转换字符串

    //转换数据类型: NSError *parseError = nil; NSData *jsonData = [NSJSONSerialization dataWithJSONObject:resp ...

  6. 开源一个监控数据采集Agent：OpenFalcon-SuitAgent

    OpenFalcon-SuitAgent 项目地址:github 版本说明 本系统版本划分如下 alpha:内部测试版(不建议使用于生产环境) beta:公开测试版(不建议使用于生产环境) final ...

  7. poj2459 Treasure Exploration （闭包+二分）

    这道题是让求派出机器人的最少数量,乍一看以为是简单的求最小路径覆盖,后来发现错了,因为有的点可以走多次,而二分中每个点只能走一次,所以要先用floyd进行传递闭包,然后用二分 #include< ...

  8. Spring中ref local与ref bean区别

    今天在做SSH框架Demo实例时,在ApplicationResources.properties文件时对<ref bean>与<ref local>感到不解,经查找资料才弄明 ...

  9. ueditor插件 -- 插入填空题

    插入填空题,一个看似小小的需求,但是却是折腾了很9.主要产品那边的要求,空格上面要标有序号,并且再页面当中能够同步空格答案列表. 1.ueditor插件 插件入门,官方的例子还是很简单直接的,对于我们 ...

  10. CPU核心数

    Process.ProcessorAffinity 属性: public IntPtr ProcessorAffinity { get; set; }属性值:位掩码,表示关联进程内的线程可以在其上运行 ...