CSS
来源:互联网 发布:传智播客java视频下载 编辑:程序博客网 时间:2024/06/05 10:56
文本
CSS文本属性可以定义文本的外端,可以改变文本的颜色、字符间距,对齐文本、装饰文本、对文本进行缩进等。
缩进文本
text-indent属性可以实现文本缩进。
通过使用text-indent属性,所有元素的第一行都可以所见一个给定的长度,甚至可以是负值。最常用的是将段落的首行缩进。
p {text-indent: 5em;}
注意:所有块级元素都可应用text-indent属性,行级元素的第一行缩进可用左内边距或外边框。
- 使用负值
p {text-indent: -5em}
- 使用百分比值
百分数要相对于缩进元素负元素的宽度。
如下缩进值是父元素的20%,即100个像素。
div {width: 500px;}p {text-indent: 20%;}<div><p>this is a paragraph</p></div>
- 继承
div#outer {width: 500px;}div#inner {text-indent: 10%;}p {width: 200px;}<div id="outer"><div id="inner">some text. some text. some text.<p>this is a paragraph.</p></div></div>
以上标记的段落也会缩进50像素,这是因为这个段落继承了id为inner的div元素的缩进值。
水平对齐
text-align属性影响元素中文本对齐方式。
- left 左对齐
- right 右对齐
- center 居中
提示:块级元素或表元素居中,要适当设置左、右边距。 - CENTER 不仅影响文本,还会把整个元素居中。
- justify 两端对齐
字间隔
word-spacing属性可以改变字(单词)之间的标准距离。默认normal值为0.
p.spread {word-spacing: 30px;}p.tight {word-spacing: -0.5em;}<p class="spread">This is a paragraph. The space between words will be increased.</p><p class="tight">This is a paragraph. The space between words will be decreased.</p>
字母间隔
letter-spacing属性修改字符或字母间隔。
h1 {letter-sapcing: -0.5em}h4 {letter-spacing: 20px}<h1>This is header 1</h1><h4>This is header 4</h4>
字符转换
text-transform属性处理文本大小写。
- none 对文本不做任何改动
- uppercase 全大写
- lowercase 全小写
- capitalize 首字母大写
文本装饰
text-decoration属性:
- none 关闭所有装饰
- underline 下划线
- overline 上划线
- line-through 贯穿线
- blink 文本闪烁
如果两个装饰都与同一元素匹配,胜出规则的值会取代另一个值。
h2.stricken {text-decoration: line-through;}h2 {text-decoration: underline overline;}
如上所有class为stricken的h2元素都只有一个贯穿线,而没有上划线与下划线。
处理空白符
white-space属性影响用户代理对源文档的空格、换行和tab字符的处理。
文本方向
direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
- ltr 从左往右
- rtr 从右往左
- CSS
- css
- css
- css
- css
- CSS
- CSS
- css
- css
- CSS
- css
- css
- CSS
- css
- CSS
- css
- CSS
- css
- 关于TortoiseSVN的全局忽略列表
- https原理及tomcat配置https方法
- Android_LoaderManager获取联系人
- 怎样写一个增广矩阵到txt文件中
- wowza 配置自己的VOD-Edge 实现一个vod点播
- CSS
- 基于springjdbc封装的javaee轻量级开发平台jmapper(一)
- C++作业5
- Android WebView 不支持 H5 input type="file" 解决方法
- ubuntu下的hadoop安装
- session 和 cookie
- android Layout技巧汇总
- 修改tomcat默认页面
- Leetcode 9. Palindrome Number