css文本

缩进文本 
CSS 文本属性可定义文本的外观。 
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本, 
装饰文本,对文本进行缩进,等等。 by_w3school 
<div style="color:red;"> 
<ol class="olStyle"> 
  <li class="liBlack">i am todd.</li> 
  <li class="liBlue">i am todd.</li> 
</ol> 
</div> 

.olStyle 
{
 
  text-indent
: 5em;
 
}
 
.olStyle .liBlack 
{
 
background-color
:black;
 
text-indent
: 10em;
 
}
 
.olStyle .liBlue 
{
 
background-color
:blue;
 
text-indent
:20em;
 
}
 
同时在这里指定的缩进单位,可以为负值。 

不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距: 
{text-indent: -5em; padding-left: 5em;}
by_w3school 

同时缩进单位可以试用百分比,情况同定位position。 
text-indent 属性可以继承。 

水平对齐 
text-align:center /  <center> 
<CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。by_w3school 

text-align:  left(左) center(中间) right(右) justify(水平对齐) 
justify  元素的左右两边都放在父元素的内边界上,调整单词、字母之间的间隔。 


字间隔 
word-spacing 改变字/单词之间的间隔,通常默认为normal 与设置为0效果一样。 
可以输入正负值   正值则间隔增加 负值则间隔减小 (-_-貌似有点废话) 
<html> 
<head> 
<style type="text/css"> 
.spread 
{word-spacing: 100px;}
 
.tight 
{word-spacing: -0.5em;}
 
</style> 
</head> 
<body> 
<p class="spread">i am todd.</p> 
<p class="tight">i am todd.</p> 
</body> 
</html> 

字母间隔 
letter-spacing 改变字符、字母之间的间隔 
<html> 
<head> 
<style type="text/css"> 
.h1Letter 
{letter-spacing: -0.5em}
 
.h4Letter 
{letter-spacing: 20px}
 
</style> 
</head> 
<body> 
<h1 class="h1Letter">i am todd.</h1> 
<h4 class="h4Letter">i am todd.</h4> 
</body> 
</html> 

字符转换 
text-transform 处理文本的大小写 
text-transform: none (对文本不作任何改动) uppercase (大写) lowercase (小写) 
                capitalize (每个单词的首字母大写) 

文本装饰 
text-decoration 
text-decoration: none (关闭一个元素上的所有装饰)  underline (下划线) overline (上划线) 
                     line-through (中间的贯穿线) blink (文本闪烁) 
处理空白符 
white-space 
white-space:normal;(丢掉多余的空白符 回车或者连续的空白符都会被替换为一个空格) 
white-space:pre;(浏览器不会合并空白符,也不会忽略换行符) 
white-space:nowrap;(不能换行) 
white-space:pre-wrap;(保留空白符、 换行符, 还允许自动换行) 
white-space:pre-line;(保留换行符, 允许自动换行,但是合并空白符) 

文本方向 
direction 设置是从左到右的文本还是从右到左的文本 
direction:ltr; (从左到右) 
direction:rtl; (从右到左) 

CSS 文本属性属性 描述 
color 设置文本颜色 
direction 设置文本方向。 
line-height 设置行高。 
letter-spacing 设置字符间距。 
text-align 对齐元素中的文本。 
text-decoration 向文本添加修饰。 
text-indent 缩进元素中文本的首行。 
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。 
text-transform 控制元素中的字母。 
unicode-bidi 设置文本方向。 
white-space 设置元素中空白的处理方式。 
word-spacing 设置字间距。by_w3school 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值