CSS 文本格式

文本格式

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "尝试一下" link.


文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

  • 十六进制值 - 如: #FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red

参阅 CSS 颜色值 查看完整的颜色值。

一个网页的背景颜色是指在主体内的选择:

实例

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

尝试一下 »

 对于W3C标准的CSS:如果你定义了颜色属性,你还必须定义背景色属性。


文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。

实例

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

尝试一下 »


文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线:

实例

a {text-decoration:none;}

尝试一下 »

也可以这样装饰文字:

实例

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

尝试一下 »

 我们不建议强调指出不是链接的文本,因为这常常混淆用户。


文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母,或每个单词的首字母大写。

实例

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

尝试一下 »


文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

实例

p {text-indent:50px;}

尝试一下 »


更多实例

指定字符之间的空间
这个例子演示了如何增加或减少字符之间的空间。直线模组哪家好

指定行与行之间的空间
这个例子演示了如何指定在一个段落中行之间的空间

设置元素的文本方向
这个例子演示了如何改变元素的文本方向。

增加单词之间的空白空间
这个例子演示了如何增加一个段落中的单词之间的空白空间。

在元素内禁用文字环绕
这个例子演示了如何禁用一个元素内的文字环绕。

垂直对齐图像
这个例子演示了如何设置文本的垂直对齐图像。

添加文本阴影
这个例子演示了如何设置文本阴影。

css text文本的更多相关文章

  1. CSS Text文本格式

    Text Color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如"#FF0000" 一个RGB值 - "RGB(255,0,0)& ...

  2. CSS| text文本属性

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

  3. CSS Text(文本)

    CSS Text(文本) 一.文本颜色 color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0 ...

  4. 关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)

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

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

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

  6. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  7. css构造文本

    1. 1. 文本缩进text-indent:值:值为数字,最常用的数值单位是px(像素),也可以直接是百分比!text-indent:100px;text-indent:10%;2. 文本对齐text ...

  8. jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  9. CSS关于文本渲染的属性text-rendering

    CSS关于文本渲染的属性text-rendering告诉渲染引擎工作时如何优化显示文本. 浏览器会在渲染速度.易读性(清晰度)和几何精度方面做一个权衡. 我们知道,SVG-可缩放矢量图形(Scalab ...

随机推荐

  1. 英语单词contributors

    contributors 来源——github网站 翻译 n. 贡献者:参与者:编著者(contributor的复数形式) TOEFL | GMAT                   词根:cont ...

  2. Angular JS - 6 - Angular JS 常用指令

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

  3. Oracle分组函数之ROLLUP

    功能介绍: 首先是进行无字段的聚合,然后在对字段进行从左到右依次组合后聚合 创建表: Create Table score ( classID Int, studentName ), subject ...

  4. 【Dart学习】--Dart之超级父类之Object

    一,概述 -- Object Dart语言和Java一样,都是面向对象语言,所有的类也都有个公共的父类----->Object.该类位于Dart sdk核心库core目录下. 二,构造方法 // ...

  5. XenServer(服务器虚拟化平台)

    Citrix Xenserver,思杰基于Xen的虚拟化服务器.Citrix XenServer是一种全面而易于管理的服务器虚拟化平台,基于强大的 Xen Hypervisor 程序之上.Xen技术被 ...

  6. Linux操作系统(四)_部署MySQL

    一.部署过程 1.当前服务器的内核版本和发行版本 cat /etc/issue uname -a 2.检查系统有没有自带mysql,并卸载自带版本 yum list installed | grep ...

  7. 使用UI Automation实现自动化测试--5-7

    使用UI Automation实现自动化测试--5 (Winfrom和WPF中弹出和关闭对话框的不同处理方式) 在使用UI Automation对Winform和WPF的程序测试中发现有一些不同的地方 ...

  8. 2.Jmeter 如何在jsr223 脚本中停止测试任务

    Jmeter 如何在jsr223 脚本中停止测试任务 在可以直接引用ctx的变量的processor中可以执行如下脚本即可. (例如jsr223 postprocessor中) ctx.getEngi ...

  9. Django 登录验证码

    url.py: url(r'^verifycode/$',views.verifycode), url(r'^verifycodefile/$',views.verifycodefile), url( ...

  10. Java必备主流技术流程图,写得非常好!

    作者:Jay_huaxiao https://juejin.im/post/5d214639e51d4550bf1ae8df 1.spring的生命周期 Spring作为当前Java最流行.最强大的轻 ...