三種嵌套層疊樣式的方法

• 嵌入式層疊樣式表
• 連接式層疊樣式表
  <link href="main.css" rel="stylesheet">
• 引入式層疊樣式表
  @import url (main.css);

類別選擇符

• class一個(gè)類別
  p.blod {font-weight:bold;}
  <p class="blod">這個(gè)段落是粗體字 </p>

id選擇符

• ID選擇符只能用在一個(gè)選擇符
  p#bold {font-weight:blod;}
  <p id="blod">這個(gè)段落是粗體字 </p>

群選擇符

• 你可以同時(shí)為多個(gè)選擇符應(yīng)用同一套規(guī)則
  p,h1,h2 {text-align:left;}
• 群選擇符中摻雜ID類別等
  p.blod,h1#red {font-weight:blod;}

五種定義顏色的方法

• <color keyword> 設(shè)置顏色為給定的值
  常用關(guān)鍵字：aqua(淺綠色),black(黑色),blue(藍(lán)色),fuchisia(粉色),gray(灰色),green(深綠色),lime(淺綠色),maroon(栗色),navy(海軍藍(lán)),olive(橄欖色),purple(紫色),red(紅色),silver(銀色),teal(藍(lán)綠色),white(白色),yellow(黃色)
• "#rrggbb" 用的16位進(jìn)制來表示
• rgb（rrr，ggg，bbb）制定RGB三種色的數(shù)值（0-255）
  h1{color:rgb(255,0,0)}(r為紅，g為綠，b為藍(lán))
• rgb（rrr%，ggg%，bbb%）通過RGB三種顏色的百分比制定
  h1{color:rgb(100%,0%,0%)}
• inherit 繼承父級(jí)

布局四屬性

Margin（邊界距）一個(gè)元素的border和另外一個(gè)元素的boder之間的距離。
Border（邊框）一個(gè)元素的邊框，它一定是存在的，不管你看不看的見。
Padding（填充）邊框和內(nèi)容間的間距。
Content（內(nèi)容）可以是圖片，可以是文本，可以是任何元素。

Border（邊框）

• 邊框?qū)挾龋ㄐ枰诙xborder-style后才能顯現(xiàn)）
  在css中，你可以用關(guān)鍵字來指定邊框的寬度:
  border-width:thin
  border-width:medium (默認(rèn)邊框?qū)挾?
  border-width:thick
  border-width:<length> （用具體數(shù)值來指定）
  border-top-width:<length>（設(shè)置上邊框）
  border-right-width:<length>（設(shè)置右邊框）
  border-bottom-width:<length>（設(shè)置下邊框）
  border-left-width:<length>（設(shè)置左邊框）
  你也可以用具體數(shù)字來指定:
  border-width:10px
  border-with:2em
• 邊框顏色
  邊框顏色屬性的指定方式和其他顏色屬性一樣：
  border-color:color name/hex value/rgb() value
• 邊框的風(fēng)格
  border-style:none
  border-style:hidden
  border-style:dotted
  border-style:dashed
  border-style:solid
  border-style:double
  border-style:groove
  border-style:ridge
  border-style:inset
  border-style:outset

Margin（邊界距）

• 邊界距
  邊界距屬性是用來指定兩個(gè)元素邊框之間的距離：
  margin：<top> <right> <bottom> <left>
  margin-top：<length>
  margin-right：<length>
  margin-left：<length>
  margin-bottom：<length>

Padding（填充）

填充屬性用來控制元素邊框內(nèi)空間的大小，如下所示：
padding：<top> <right> <bottom> <left>
padding-top:<length>
padding-right:<length>
padding-bottom:<length>
padding-left:<length>

背景圖片

在css中，你將可以對(duì)任何元素指定背景圖片，比如：
body{background-image:url("相對(duì)路徑/絕對(duì)路徑");}
background-image: url("<location>")
background-image: none（無背景圖片）
background-image: inherit（繼承父級(jí)）

背景重復(fù)

你可以對(duì)背景顯示的方式進(jìn)行調(diào)整，通過background-repeat屬性(默認(rèn)為重復(fù))。
background-repeat:repeat(重復(fù)背景)
background-repeat:repeat-x(僅平行重復(fù))
background-repeat:repeat-y(僅垂直重復(fù))
background-repeat:no-repeat(不重復(fù))
background-repeat:inherit(繼承父級(jí))

背景附著

這個(gè)background-attachment屬性可以控制背景是否隨網(wǎng)頁(yè)滾動(dòng)。
background-attachment:scroll(背景隨著滾動(dòng))
background-attachment:fixed(背景固定)
background-attachment:inherit(繼承父級(jí))

背景定位

背景定位屬性用來指定背景圖片在網(wǎng)頁(yè)的展示位置
background-position:<x> <y> (用具體數(shù)值或百分比指定)
background-position:bottom right; (用關(guān)鍵字來定位)

字體屬性

字體元素控制元素的字體

font-family:Verdana
font-family:Times
font-family:Georgia
font-family:Arial,Verdana,sans-serif(瀏覽器會(huì)逐個(gè)往下找可使用的)
font-family:Time,New Roman,serif
font-family:I Don't Have This Front,san-serif

字體風(fēng)格屬性

font-style:oblique; (斜體)
font-style:italic; (斜體)
font-style:normal;

字體粗細(xì)屬性

font-weight:normal
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:<100-900>

字體大小屬性

font-size:12pt(Absolite)
font-size:12px(Absolite)
font-size:medium(Absolite)
font-size:smaller(Relative)
font-size:normal(Relative)
font-size:larger(Relative)
font-size:50%(Relative)

行間距屬性

它來制定行與行之間的距離
line-height:16px;

字體變量屬性

font-variant可以用來小寫變大寫
font-variant:normal;(沒有風(fēng)格)
font-variant:small-caps;(全部變大寫，以前為大寫的會(huì)變得比其他大寫更大一些)

文本屬性

文本縮進(jìn)屬性

通過text-indent的屬性你可以在css中對(duì)每個(gè)斷落的首行進(jìn)行縮進(jìn)
text-indent:<lenght> (根據(jù)具體數(shù)值對(duì)段落首行進(jìn)行縮進(jìn))
text-indent:<percentage> (根據(jù)百分比縮進(jìn))

文本對(duì)齊屬性

css支持水平對(duì)齊和適當(dāng)?shù)奈谋?br> text-align:left (文本左對(duì)齊)
text-align:right (文本右對(duì)齊)
text-align:center (文本居中對(duì)齊)
text-align:justify (文本兩端對(duì)齊)

文本裝飾效果

在css中，文本裝飾效果涉及到上劃線，下劃線，刪除線等對(duì)文本的一些裝飾效果
text-decoration:none(無裝飾)
text-decoration:underline(下劃線)
text-decoration:overline(上劃線)
text-decoration:line-through(刪除線)

文本變形

文本變形指大小寫轉(zhuǎn)換字母大寫等屬性
text-transform:none(不變)
text-transform:capitalize(首字母大寫)
text-transform:uppercase(全部變大寫)
text-transform:lowercase(全部變小寫)

連接

連接與化類別

用css的.link化類別用來指定沒有訪問過連接的屬性

• 沒有訪問過的連接是綠色的；訪問過的連接是藍(lán)色的
  :link a:link{...} (設(shè)置未訪問連接屬性)
  :visited a:visited{...} (設(shè)置訪問連接屬性)
  :active a:active{...} (鼠標(biāo)點(diǎn)擊與釋放之間時(shí))
  :hover a:hover{...}(鼠標(biāo)懸停時(shí))
  例子：
  a.visited{color:green;}(訪問過的連接變?yōu)榧t色)