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;/*内联对象需加*/ ...
随机推荐
- 提供 web前端、H5、html页面 技术服务
如有前端页面的需求请在评论区留言 第一时间进行回复
- Losing session data in ASP.NET
Losing session data in ASP.NET By default Response.Redirect terminates thread execution and there mi ...
- 个人笔记 - Word2013 论文格式调整
1.如何实现每章奇偶页页眉不同 2.参考文献自动编号.交叉引用及在正文中自动更新 <1>在要插入引用上标的地方点击“插入”——>“交叉引用” <2>设置引用类型为“编号项 ...
- Openstack组件部署 — Keystone功能介绍与认证实现流程
目录 目录 前文列表 Keystone认证服务 Keystone认证服务中的概念 Keystone的验证过程 简单来说 前文列表 Openstack组件部署 - Overview和前期环境准备 Ope ...
- 在webpack4 中利用Babel 7取消严格模式方法
报错信息: Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on stri ...
- 从上一个页面跳入新页面时,如何拿URL中的参数
var url = document.URL; //获取当前页面的url var urlA = url.split('?');//以url中的问号进行分割; var goodscode = urlA[ ...
- fedora 25重新安装引导
引导区被其他系统给覆盖了,重新安装引导 grub2-install /dev/sdb GRUB_SAVEDEFAULT=true BIOS grub2-mkconfig -o /boot/grub2/ ...
- Emacs25.1之后UrlHttpError
Emacs25.1之后UrlHttpError */--> pre.src {background-color: #002b36; color: #839496;} pre.src {backg ...
- CF1173X
CF1173C 由于牌堆只能从最后插牌,所以插牌方法非常显然 首先特判一下牌堆有没有一个合法的后缀,如果有的话再判断一下手中的牌和合法后缀之前的牌的排列顺序能不能有效的继续续下去 然后排除了以上情况就 ...
- 那些年踩过的eleUl上传图片的坑?
html : <el-upload :headers="header" // 请求头参数(一般包含token,认证参数authorization) :data="u ...