CSS:CSS 文本格式
| ylbtech-CSS:CSS 文本格式 |
| 1.返回顶部 |
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 颜色值 查看完整的颜色值。
一个网页的背景颜色是指在主体内的选择:
对于W3C标准的CSS:如果你定义了颜色属性,你还必须定义背景色属性。
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。
文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线:
也可以这样装饰文字:
实例
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;}
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
更多实例
指定字符之间的空间
这个例子演示了如何增加或减少字符之间的空间。
指定行与行之间的空间
这个例子演示了如何指定在一个段落中行之间的空间
设置元素的文本方向
这个例子演示了如何改变元素的文本方向。
增加单词之间的空白空间
这个例子演示了如何增加一个段落中的单词之间的空白空间。
在元素内禁用文字环绕
这个例子演示了如何禁用一个元素内的文字环绕。
垂直对齐图像
这个例子演示了如何设置文本的垂直对齐图像。
添加文本阴影
这个例子演示了如何设置文本阴影。
所有CSS文本属性。
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 6.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
CSS:CSS 文本格式的更多相关文章
- css字体文本格式 鼠标样式
缩进 text-indent 属性规定文本块中首行文本的缩进.(允许使用负值.如果使用负值,那么首行会被缩进到左边.) length 定义固定的缩进.默认值:0.% 定义基于父元素宽度的百分比的缩进. ...
- CSS Text文本格式
Text Color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如"#FF0000" 一个RGB值 - "RGB(255,0,0)& ...
- PHP全栈开发(八):CSS Ⅳ 文本格式及字体
文本系列属性主要是设置文本格式的,例如.... 颜色 body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255); 可以设置文本的居中 ...
- CSS关于文本渲染的属性text-rendering
CSS关于文本渲染的属性text-rendering告诉渲染引擎工作时如何优化显示文本. 浏览器会在渲染速度.易读性(清晰度)和几何精度方面做一个权衡. 我们知道,SVG-可缩放矢量图形(Scalab ...
- css text文本
CSS 文本格式 文本格式 This text is styled with some of the text formatting properties. The heading uses the ...
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- css构造文本
1. 1. 文本缩进text-indent:值:值为数字,最常用的数值单位是px(像素),也可以直接是百分比!text-indent:100px;text-indent:10%;2. 文本对齐text ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
随机推荐
- nodejs在Windows 7上的搭建
一.安装nodejs 去官网下载https://nodejs.org/download/,我选择下载node-v9.3.0-x64.msi ,最新版本, 安装路径放在了D盘,因为C盘的空间不够了,直接 ...
- React的contextType的使用方法简介
上一篇介绍了Context的使用方法.但是Context会让组件变得不纯粹,因为依赖了全局变量.所以这决定了Context一般不会大规模的使用.所以一般在一个组件中使用一个Context就好. 由于C ...
- Sqli labs系列-less-5&6 报错注入法(上)
在我一系列常规的测试后发现,第五关和第六关,是属于报错注入的关卡,两关的区别是一个是单引号一个是双引号...当然我是看了源码的.... 基于报错注入的方法,我早就忘的差不多了,,,我记的我最后一次基于 ...
- idea使用 xml文件
如图 搜索template(模板) 点击加号后
- git的使用(本地版本库)
1. 创建版本库 1.1 创建一个版本库非常简单,首先,选择一个合适的地方,创建一个空目录: 1.2通过git init命令把这个目录变成Git可以管理的仓库(git进入空目录的路径) $ git i ...
- python-函数-动态传参,作用域的问题,函数嵌套,global nonlocal
⼀. 函数参数--动态传参 之前我们说过了传参, 如果我们需要给⼀个函数传参, ⽽参数⼜是不确定的. 或者我给⼀个 函数传很多参数, 我的形参就要写很多, 很⿇烦, 怎么办呢. 我们可以考虑使⽤动态参 ...
- Python之删除字符串中不需要的字符
简单的 str="---你好=====" print(str.strip("-=")) # 你好 从文件中读取多行数据,可以用生成器表达式 with open( ...
- vue--先决篇
一.vue介绍: vue是一个渐进式Javascript框架. 渐进式:即有一个核心库,在需要的时候,在逐渐添加插件的一种概念. (1)MVVM和MVC模式: MVVM是Model-View-View ...
- MySQL索引与事务
MySQL索引与事务 链接:https://pan.baidu.com/s/1ANGg3Kd_28BzQrA5ya17fQ 提取码:ekpy 复制这段内容后打开百度网盘手机App,操作更方便哦 1.索 ...
- linux系统物理cpu信息查询
1.查看CPU型号 cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c 2.查看物理CPU的个数 ca ...
