css基礎知識(一)，css基礎知識(

css基礎知識(一)，css基礎知識(

一.Css規則主要由兩部分組成 1.選取器 2.一條或多條聲明
a.選取器主要作用是為了確定需要改變樣式的HTML元素
b.每一條聲明由一個屬性和一個值組成，使用花括弧來包圍聲明，屬性與值之間使用冒號(:)分開,多條聲明用分號(;)隔開.

例如：form {width: 200px;margin: 20px auto;}

二.選取器有id，類，元素（標籤），屬性，偽類，通用選取器

前幾個大家大概都清楚，寫一下偽類別選取器：

css偽類用於向某些選取器添加特殊效果。

下面我們介紹一下錨偽類。

在支援css的瀏覽器中，連結的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和滑鼠移至上方狀態。

 

a:link {color: #FF0000}/* 未訪問的連結 */

a:visited {color: #00FF00}/* 已訪問的連結 */

a:hover {color: #FF00FF}/* 滑鼠移動到連結上 */

a:active {color: #0000FF}/* 選定的連結 */

注意:

1.在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效。

2.在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效。

 

3.偽類名稱對大小寫不敏感。

優先順序id>偽類 >類 >元素>通用

三.值的單位

%百分比

in英寸

cm厘米

mm毫米

em能自動適應使用者所使用的字型

pt磅 (1 pt 等於 1/72 英寸)

pc12 點活字 (1 pc 等於 12 點)

px像素 (電腦螢幕上的一個點)

(顏色名)顏色名稱 (比如 red)

rgb(x,x,x)RGB 值 (比如 rgb(255,0,0))

rgb(x%, x%, x%)RGB 百分比值 (比如 rgb(100%,0%,0%))

#rrggbb十六進位數 (比如 #ff0000)

 

四.匯入CSS

最常用的就是外部和內部樣式表

1.內部樣式表

在head標籤中加入style標籤，然後在style的標籤體中再對多個標籤的樣式進行修改。

例如:

<style type="text/css">

div{

border:1px dashed #ff00ff;

}

</style>

2.外部樣式表

通過head標籤裡的link標籤,匯入myStyle.css檔案

例如:

<link rel="stylesheet" href="myStyle.css" type="text/css">

除此之外標籤中也可以加入，style屬性來寫樣式

 

五.CSS屬性

1.字型

Css字型屬性定義文本的字型系列，大小，加粗，風格(如斜體)和變形(如小型大寫字母)

常用屬性:

font:簡寫屬性，作用是把所有針對字型的屬性設定在一個聲明中。

格式：{font :風格 異體 粗細 尺寸/行間距 字型系列}

例如：{ font: italic bold 12px/20px arial,sans-serif}

font-family:定義字型系列

•具體字型的名稱，例如：font-family:隸書。 

•通常字型系列名稱：例如 font-family:"serif","sans-serif","cursive","fantasy","monospace"

“,”的意思是指如果本地沒有該字型系列，再使用下一個

font-size:定義字型的尺寸 例如 font-size:40px

font-style:定義字型風格 例如 font-style:italic

2.文本

CSS 文字屬性可定義文本的外觀。通過文字屬性，您可以改變文本的顏色、字元間距，對齊文本，裝飾文本，對文本進行縮排，等等.

常用屬性

color:定義文本顏色  例如 color:#ffff00

text-align:定義文本對齊 例如:text-align:center

      text-decoration 向文本添加修飾。例如text-decoration:underline(底線)

letter-spacing:定義字元間隔 

word-spacing:定義字間隔

3.背景

CSS 允許應用純色作為背景，也允許使用背景映像建立相當複雜的效果。CSS 在這方面的能力遠遠在 HTML 之上。

常用屬性:

background:簡寫屬性，作用是將背景屬性設定在一個聲明中

格式：{background: 顏色 url(圖片路徑) 重複 滾動 位置}

例如:  {background: #00FF00 url(bgimage.gif) no-repeat fixed top}

 

background-color:定義背景顏色

background-image:定義背景圖片  background-image:url(xx.jpg) 

background-position:定義背景圖片的起始位置 background-position:10% 5%;

background-repeat:定義背景圖片是否重複及如何重複 background-repeat:no-repeat

4.尺寸

CSS 尺寸 (Dimension) 屬性允許你控制元素的高度和寬度。

常用屬性:

width:設定元素的寬度

height:設定元素的高度 

5.列表

CSS 列表屬性允許你放置、改變清單項目標誌，或者將映像作為清單項目標誌。

常用屬性:

list-style:簡寫屬性。用於把所有用於列表的屬性設定於一個聲明中。

格式:{list-style : 圖片 類型 位置}

例如:{list-style : url(liebiao.jpg) square inside}

      list-style-type:定義清單項目標誌的類型

  list-style-position:定義清單項目標誌的位置  常用值:inside ,outside

  list-style-image:定義清單項目標誌為圖象

6.表格

CSS 表格屬性可以協助您極大地改善表格的外觀

 常用屬性:

border-collapse:定義是否把表格邊框合并為單一的邊框。常用值:collapse,separate

border-spacing:定義分隔儲存格邊框的距離

caption-side:定義表格標題的位置常用值:top,bottom

7.輪廓

輪廓（outline）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。

CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。

常用屬性:

outline:在一個聲明中設定所有的輪廓屬性

格式:{outline:顏色 樣式 寬度}

例如:{outline:#00FF00 dotted thick;}

      outline-style:定義輪廓的樣式  常用值:solid(實線) ,dashed(虛線) ,double(雙線)...

outline-color:定義輪廓的顏色

outline-width:定義輪廓的寬度 常用值:thin ,thick ,14px...

8.定位

CSS 定位 (Positioning) 屬性允許你對元素進行定位。

定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置

常用屬性:

position:把元素放置到一個靜態,相對的，絕對的，或固定的位置中。

absolute:絕對 相對於父元素

relative:相對  相對於自己應該出現的位置

fixed:相對於瀏覽器

top:定義了定位元素的上外邊距邊界與其包含塊上邊界之間的位移量

right: 定義了定位元素右外邊距邊界與其包含塊右邊界之間的位移

left: 定義了定位元素左外邊距邊界與其包含塊左邊界之間的位移

bottom: 定義了定位元素下外邊距邊界與其包含塊下邊界之間的位移。

9.分類

CSS 分類屬性允許你控制如何顯示元素，設定映像顯示於另一元素中的何處，相對於其正常位置來定位元素，使用絕對值來定位元素，以及元素的可見度。

 常用屬性

 float:定義元素在哪個方向浮動

 clear:設定一個元素的側面是否允許其它的浮動元素

 cursor:當指向某元素之上時顯示的指標類型

 display:定義是否顯示及如何顯示元素  常用值 none和inline   消失

 visibility:定義元素是否可見或不可見。 常用值 hidden和visible佔位隱藏

 

山不拒微土而成擎天之勢，水不擇細流終會洶湧之波！

css偽類用於向某些選取器添加特殊效果。

下面我們介紹一下錨偽類。

在支援css的瀏覽器中，連結的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和滑鼠移至上方狀態。

 

a:link {color: #FF0000}         /* 未訪問的連結 */

a:visited {color: #00FF00}     /* 已訪問的連結 */

a:hover {color: #FF00FF}        /* 滑鼠移動到連結上 */

a:active {color: #0000FF}       /* 選定的連結 */

注意:

u  在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效。

u  在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效。

u  偽類名稱對大小寫不敏感。