文本

• 文字顏色color
  屬性名color
  顏色的值可以采用3種方式
  1.預(yù)定義的顏色名字
  比如red,gray,white,black,pink
  2.rgb格式
  分別代表紅綠藍(lán)的比例 rgb(250,0,255) 即表示紅色是滿的，沒有綠色，藍(lán)色是滿的，即紅色和藍(lán)色混合在一起：紫色
  3.16進(jìn)制的表示 #00ff00 等同于 rbg(0,255,0)

<style>
div#colorful{
  color:pink
}
</style>
<div id="colorful">
  粉紅色
</div>

• 對齊 text-align
  屬性:text-align
  值：left,right,center
  div是塊級元素，其默認(rèn)寬度是100%，所以文本有對齊的空間前提。
  但是，span卻看不出右對齊效果，為什么呢？
  因?yàn)閟pan是內(nèi)聯(lián)元素其默認(rèn)寬度就是其文本內(nèi)容的寬度
  簡單說就是文本已經(jīng)<b>粑</b>在其邊框上了，對齊是看不出效果來的

<style>
div#left{
  text-align:left;
}
/*讓div和span的邊框顯露出來，便于理解本知識點(diǎn)*/
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>閃爍效果，大部分瀏覽器已經(jīng)取消該效果</h4>
<a >默認(rèn)的超鏈</a>
<a class="a" >去掉了下劃線的超鏈</a>

• 行間距 line-height
  屬性：line-height
  值：數(shù)字或者百分比

<style>
p{
  width:200px; 
}
.p{
  line-height:200%;
}
</style>
<p>
默認(rèn)行間距
默認(rèn)行間距
默認(rèn)行間距
默認(rèn)行間距
</p>
<p class="p">
200%行間距
200%行間距
200%行間距
200%行間距
</p>

• 字符間距
  屬性：letter-spacing
  值： 數(shù)字

<style>
p{
  width:200px; 
} 
.p{
  letter-spacing:2;
}
</style> 
<p>
abcdefg abcdefg 
</p>
<p class="p">
abcdefg abcdefg
</p>

• 單詞間距 word-spacing
  屬性：word-spacing
  值： 數(shù)字

<style>
p{
  width:200px; 
} 
.p{
  word-spacing:10;
}
</style> 
<p>
abcdefg abcdefg 
</p> 
<p class="p">
abcdefg abcdefg 
</p>

• 首行縮進(jìn) text-indent
  屬性：text-indent
  值： 數(shù)字

<style>
p{
  width:200px;
} 
.p{
  text-indent:50;
}
</style>
<p>
沒有縮進(jìn)效果的一段文字沒有縮進(jìn)效果的一段文字
</p>
<p class="p">
有縮進(jìn)效果的一段文字有縮進(jìn)效果的一段文字
</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 默認(rèn)。多個空白格或者換行符會被合并成一個空白格
  pre 有多少空白格，顯示多少空白格，相當(dāng)于pre標(biāo)簽,如果長度超出父容器也不會換行。
  pre-wrap 有多少空白格，顯示多少空白格，相當(dāng)于pre標(biāo)簽,如果長度超出父容器，會換行。
  nowrap 一直不換行，直到使用br

字體

• 尺寸 font-size
  屬性：font-size
  值：數(shù)字或者百分比

<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>

• 風(fēng)格 font-style
  normal 標(biāo)準(zhǔn)字體
  italic 斜體

<style>
p.n{font-style:normal;}
p.i{font-style:italic;}
</style> 
<p >標(biāo)準(zhǔn)字體</p>
<p class="n">標(biāo)準(zhǔn)字體</p>
<p class="i">斜體</p>

• 粗細(xì) font-weight
  normal 標(biāo)準(zhǔn)粗細(xì)
  bold 粗一點(diǎn)

<style>
p.n{font-weight:normal;}
p.b{font-weight:bold;}
</style> 
<p >標(biāo)準(zhǔn)字體</p>
<p class="n">標(biāo)準(zhǔn)字體</p>
<p class="b">粗一點(diǎn)</p>

• 字庫 font-family

<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 >默認(rèn)字庫 font family:default </p>
<p class="f1">設(shè)置字庫 font-family: Times New Roman</p>
<p class="f2">設(shè)置字庫 font-family: Arial</p>
<p class="f3">設(shè)置字庫 font-family: 宋體, 這種字體是IE默認(rèn)字體</p>
<p class="f4">設(shè)置字庫 font-family: 黑體</p>
<p class="f5">設(shè)置字庫 font-family: 楷體</p>
<p class="f6">設(shè)置字庫 font-family: 微軟雅黑, 這個字體是火狐默認(rèn)字體</p>

• font
  把大小，風(fēng)格，粗細(xì)，字庫都寫在一行里面

<style>
p.all{font:italic bold 30px "Times New Roman";} 
</style> 
<p>默認(rèn)字體</p>
<p class="all">斜體的 粗體的 大小是30px的 "Times New Roman" </p>

鼠標(biāo)樣式

鼠標(biāo)樣式

<style>
  span{
    cursor:crosshair;
  }
</style>