文本
- 文字颜色color
属性名color
颜色的值可以采用3种方式
1.预定义的颜色名字
比如red,gray,white,black,pink
2.rgb格式
分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色
3.16进制的表示 #00ff00 等同于 rbg(0,255,0)
<style>
div#colorful{
color:pink
}
</style>
<div id="colorful">
粉红色
</div>
- 对齐 text-align
属性:text-align
值：left,right,center
div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。
但是，span却看不出右对齐效果，为什么呢？
因为span是内联元素其默认宽度就是其文本内容的宽度
简单说就是文本已经<b>粑</b>在其边框上了，对齐是看不出效果来的
<style>
div#left{
text-align:left;
}
/*让div和span的边框显露出来，便于理解本知识点*/
div,span{
border: 1px gray solid;
margin:10px;
}
div#right{
text-align:right;
}
div#center{
text-align:center;
}
span#right{
text-align:right;
}
</style>
<div id="left">
左对齐
</div>
<div id="right">
右对齐
</div>
<div id="center">
居中
</div>
<span id="right">
span看不出右对齐效果
</span>
- 文本修饰 text-decoration
属性：text-decoration
值： overline
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
.a {text-decoration: none}
</style>
<h1>上划线</h1>
<h2>删除效果</h2>
<h3>下划线</h3>
<h4>闪烁效果，大部分浏览器已经取消该效果</h4>
<a href="http://how2j.cn/">默认的超链</a>
<a class="a" href="http://how2j.cn/">去掉了下划线的超链</a>
- 行间距 line-height
属性：line-height
值：数字或者百分比
<style>
p{
width:200px;
}
.p{
line-height:200%;
}
</style>
<p>
默认行间距
默认行间距
默认行间距
默认行间距
</p>
<p class="p">
200%行间距
200%行间距
200%行间距
200%行间距
</p>
- 字符间距
属性：letter-spacing
值： 数字
<style>
p{
width:200px;
}
.p{
letter-spacing:2;
}
</style>
<p>
abcdefg abcdefg
</p>
<p class="p">
abcdefg abcdefg
</p>
- 单词间距 word-spacing
属性：word-spacing
值： 数字
<style>
p{
width:200px;
}
.p{
word-spacing:10;
}
</style>
<p>
abcdefg abcdefg
</p>
<p class="p">
abcdefg abcdefg
</p>
- 首行缩进 text-indent
属性：text-indent
值： 数字
<style>
p{
width:200px;
}
.p{
text-indent:50;
}
</style>
<p>
没有缩进效果的一段文字没有缩进效果的一段文字
</p>
<p class="p">
有缩进效果的一段文字有缩进效果的一段文字
</p>
- 大小写 text-transform
属性：text-transform
值： uppercase 全部大写 capitalize 首字母大写 lowercase 全部小写
<style>
p.u {text-transform:uppercase}
p.c {text-transform:capitalize}
p.l {text-transform:lowercase}
</style>
<p class="u">abcD</p>
<p class="c">abcD</p>
<p class="l">abcD</p>
- 空白格white-space
属性：white-space值：
normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,如果长度超出父容器，会换行。
nowrap 一直不换行，直到使用br
字体
- 尺寸 font-size
属性：font-size
值：数字或者百分比
<style>
p.big{font-size:30px;}
p.small{font-size:50%;}
p.small2{font-size:0.5em;}
</style>
<p >正常大小</p>
<p class="big">30px大小的文字</p>
<p class="small">50%比例的文字</p>
<p class="small2">0.5em 等同于 50%比例的文字</p>
- 风格 font-style
normal 标准字体
italic 斜体
<style>
p.n{font-style:normal;}
p.i{font-style:italic;}
</style>
<p >标准字体</p>
<p class="n">标准字体</p>
<p class="i">斜体</p>
- 粗细 font-weight
normal 标准粗细
bold 粗一点
<style>
p.n{font-weight:normal;}
p.b{font-weight:bold;}
</style>
<p >标准字体</p>
<p class="n">标准字体</p>
<p class="b">粗一点</p>
<style>
p.f1{font-family:"Times New Roman";}
p.f2{font-family:Arial;}
p.f3{font-family:宋体;}
p.f4{font-family:黑体;}
p.f5{font-family:楷体;}
p.f6{font-family:微软雅黑;}
</style>
<p >默认字库 font family:default </p>
<p class="f1">设置字库 font-family: Times New Roman</p>
<p class="f2">设置字库 font-family: Arial</p>
<p class="f3">设置字库 font-family: 宋体, 这种字体是IE默认字体</p>
<p class="f4">设置字库 font-family: 黑体</p>
<p class="f5">设置字库 font-family: 楷体</p>
<p class="f6">设置字库 font-family: 微软雅黑, 这个字体是火狐默认字体</p>
<style>
p.all{font:italic bold 30px "Times New Roman";}
</style>
<p>默认字体</p>
<p class="all">斜体的 粗体的 大小是30px的 "Times New Roman" </p>
鼠标样式
鼠标样式
<style>
span{
cursor:crosshair;
}
</style>
