HTML文本样式

文本样式

给元素添加行间样式，使用style属性
设置文本的颜色 color属性
颜色的值可以是英文，也可以是16进制，还可以是rgb16进制，也叫web安全色 由 00 11 22 aa等等组成
也可以设置成
#00ff00 绿色
#ff0000 红色
#0000ff 蓝色
#ffffff 白色
#000000 黑色
如果颜色值形如 #aabbcc 可以简写为#abc
例如 #ff0000 可以简写为 #f00
形如 #abccdd 不可以简写
使用rgb（）设置颜色，rgb方法是css3新方法，设置方式是 rgb（0，0，0） rgb和括号内的数值一一对应

		<div style="color: red;">绿色</div>
		<span style="color: red;">绿色</span>
		<span style="color: rgb(43,107,140);">绿色</span>

文本的排布

text-align
值 ：
center 居中
left 居左
right 居右
作用文本居中，行元素居中，行内块元素居中
height 设置元素的的高度 单位px
width 设置元素的宽度 单位px
在元素的style属性上设置的样式叫行间样式

		<div style="border: 1px #f00 solid;text-align: right; width: 200px; height: 200px;">
			<span>李白</span>
		</div>

文本修饰

text-decoration
值：
underline 下划线
line-through 贯穿线（删除线）
overline 上划线
none 没有线

		<div style="border: 1px #f00 solid;">
			<span style="text-decoration: line-through;">孙悟空</span>
			<a href="###" style="text-decoration: none;">百度</a>
		</div>

文本转化

text-transform
值：
uppercase 全部大写
lowercase 全部小写
capitalize 首字母大写

		<p style="text-transform: uppercase;">safeag</p>
		<p style="text-transform: lowercase;">HELLOWORLD</p>
		<p style="text-transform: capitalize;">hekk owordl</p>

行高

line-height
值：
值是数字 单位px
如果要设置单行文本垂直居中，只需要line-height的值和height的值一致即可

		<p style="border: 1px #f00 solid; height: 50px ; line-height: 50px;">枯藤老树昏鸦</p>

文本方向

（可以仅作了解，因为浏览器不兼容）
direction
值：
rtl 指的是 right to left

<p style="border: 1px #F00 solid; direction: rtl;">枯藤老树昏鸦</p>

首航缩进

text-indent 值是数字 单位px

<p style="border: 1px #F00 solid; text-indent:30px">枯藤老树昏鸦</p>

文本字符间距和单词间距

word-spacing 两个单词之间的距离
letter-spacing 两个字符之间的距离

		<p style="border: 1px #F00 solid; word-spacing: 20px">hello world</p>
		<p style="border: 1px #F00 solid; letter-spacing: 20px">枯藤老树昏鸦</p>

overflow

处理子级元素超出父级元素的部分，设置在父级元素上
hidden 超出部分隐藏
scroll 滚动查看超出的部分
auto 滚动查看超出的部分
overflow-x，overflow-y 他们等等值和overflow是一致的，只不过是单方向处理超出元素的部分
例子中的内容多复制一些，让内容部分超出，才能够看得出效果

		<p style="border: 1px #f00 solid; height: 200px; width: 200px; overflow-x: hidden;">蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙蒙蒙兀慢慢云蒙蒙兀慢慢</p>

white-space

normal 强制换行
nowrap 强制不换行
text-overflow 设置文字超出样式
clip 直接把超出的文字裁剪掉
ellipsis 设置超出的部分变成省略号

<p style="border: 1px #f00 solid; height: 300px ; width: 200px; line-height:30px;white-space:nowrap; text-overflow: ellipsis;overflow: hidden;">云蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙兀慢慢云蒙蒙兀慢</p>

书写当行文本 超出部分 变为省略号的条件

1.元素必须有固定宽高
2.overflow：hidden
3.文字强制不换行 white-space:nowrap
4.文字超出部分变为省略号 text-overflow: ellipsis
以后遇到此需求，只需要
white-space:nowrap;
text-overflow: ellipsis;
overflow: hidden;