學習CSS樣式的基礎總結分享

進行css佈局的同時，沒有足夠的基礎知識是不可能的，本文為初學者帶來學習CSS樣式的基礎總結分享，經常使用的css屬性，感興趣的朋友可以參考下，或許有所幫助一．

CSS基本介紹

級聯樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網頁風格設計的。例如，如果想讓連結字未點擊時是藍色的，當滑鼠移上去後字變成紅色的且有底線，這就是一種風格。透過設立樣式表，可以統一控制HTML中各標誌的顯示屬性。級聯樣式表可以使人更能有效控制網頁外觀。使用級聯樣式表，可以擴充精確指定網頁元素位置，外觀以及創建特殊效果的能力。

CSS是英文CascadingStyle Sheets（層疊樣式表單）的縮寫，它是一種用來表現HTML或XML等檔案樣式的電腦語言。 CSS目前最新版本為CSS3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的物件的位置排版進行像素級的精確控制，支援幾乎所有的字體字號樣式，擁有對網頁物件和模型樣式編輯的能力，並能夠進行初步交互設計，是目前基於文字展示最優秀的表現設計語言。 CSS能夠根據不同使用者的理解能力，簡化或優化寫法，針對各類人群，有較強的易讀性。

二． CSS的使用方法

有三種方法可以在網站網頁上使用樣式表：

外部樣式：將網頁連結到外部樣式表。

內頁樣式：在網頁上建立嵌入的樣式表。

行內樣式：套用內嵌樣式到各個網頁元素。

每種方法都有其優缺點：

當要在網站上所有或部分網頁上一致地套用相同樣式時，可使用外部樣式表。在一個或多個外部樣式表中定義樣式，並將它們連結到所有網頁，以便確保所有網頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表中修改一次，而該更改會反映到所有與該樣式表相連結的網頁上。通常外部樣式表以 .css 做為檔案副檔名，例如牛腩新聞發布系統中的公共樣式Common.css。然後在需要此樣式的頁面中將其連結進來，如：



當人們只是要定義目前網頁的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級聯樣式表，「嵌入」在網頁的 標記符內。嵌入的樣式表中的樣式只能在同一網頁上使用。 如：



使用內嵌樣式以套用級聯樣式表屬性到網頁元素上。如：

CSS document

如果網頁連結到外部樣式表，則為網頁所建立的內嵌的或嵌入式樣式將擴充或覆寫外部樣式表中的指定屬性。

要在網頁上使用外部樣式表的樣式，可將該網頁連結到樣式表，方法是使用位於 “格式” 選單上的 “樣式表連接” 指令。可以連結一個或數個樣式表到網頁視圖模式下的目前網頁，或到在資料夾清單中的所選網頁，或到網站上的全部網頁。

該「樣式」 框列出標準HTML 標記符，例如標題

1，還有嵌入的樣式表或連結到網頁的外部樣式表中所含的類別或ID 選擇器。若要套用樣式至網頁元素，請選取該樣式然後按一下 “樣式” 方塊中的樣式或選取器。

在 Microsoft FrontPage 2000中，某些格式設定特性會作為內嵌樣式自動套用。例如∶如果使用「邊框與陰影」 指令（在「格式」 選單上）在普通段落周圍套用框，FrontPage 會寫下格式設定訊息，作為段落標記的內嵌樣式屬性（例如∶ ）。然而某些屬性的應用需要使用 CSS，其他則需要使用 HTML 。如果人們只想使用 CSS 套用內嵌樣式，可使用 “樣式”按鈕（位於網頁元素的 “屬性” 對話方塊中）套用類別或 ID 選擇器或嵌入式樣式。

三、CSS文字屬性：

color: #999999; /*文字顏色*/

font-family: 宋體,sans-serif ; /*文字字體*/

font-size: 9pt; /*文字大小*/

font-style:itelic;/*文字斜體*/

font -variant:small-caps;/*小字體*/

letter-spacing: 1pt; /*字間距離*/

line-height: 200%; /*設定行高*/

font-weight:bold;/*文字粗體*/

vertical-align:sub;/*下標字*/

#vertical-align:super;/*上標字*/

text-decoration:line-through;/*加上刪除線*/

text-decoration:overline;/*加頂線*/

text-decoration:underline;/*加底線*/

text-decoration:none;/*刪除連結底線*/

#text-transform: capitalize; /*首字大寫*/

text-transform: uppercase; /*英文大寫*/

text-transform: lowercase; /*英文小寫*/

text-align:right;/*文字右對齊*/

text-align:left;/*文字左對齊*/

text-align:center;/*文字居中對齊*/

text-align:justify;/*文字分散對齊*/

vertical-align屬性

vertical-align:top;/*垂直向上對齊*/

vertical-align:bottom;/*垂直向下對齊*/

vertical-align:middle;/*垂直居中對齊*/

vertical-align:text -top;/*文字垂直向上對齊*/

vertical-align:text-bottom;/*文字垂直向下對齊*/

四、CSS符號屬性：

list-style-type:none;/*不編號*/

list-style-type:decimal;/*阿拉伯數字*/

list- style-type:lower-roman;/*小寫羅馬數字*/

list-style-type:upper-roman;/*大寫羅馬數字*/

list-style-type: lower-alpha;/*小寫英文字母*/

list-style-type:upper-alpha;/*大寫英文字母*/

list-style-type:disc;/*實心圓形符號*/

list-style-type:circle;/*空心圓形符號*/

list-style-type:square;/*實心方形符號*/

list-style-image:url(/dot.gif);/*圖片式符號*/

list-style-position:outside;/*凸排*/

list-style-position:inside;/*縮排*/

五、CSS背景樣式：

background-color:#F5E2EC;/*背景顏色*/

background:transparent;/*透視背景*/

background-image: url(/image/bg.gif); /*背景圖片*/

background-attachment: fixed; /*浮水印固定背景*/

background-repeat: repeat; /*重複排列-網頁預設*/

background-repeat: no-repeat; /*不重複排列*/

background-repeat: repeat-x; /*在x軸重複排列*/

background-repeat: repeat-y; /*在y軸重複排列*/

指定背景位置

background-position: 90% 90%; /*背景圖片x與y軸的位置*/

background-position: top ; /*向上對齊*/

background-position: buttom; /*向下對齊*/

background-position: left; /*向左對齊*/

#background-position: right; /*向右對齊*/

background-position: center; /*居中對齊*/

六、CSS連接屬性：

a/*所有超連結*/

a:link/*超連結文字格式*/

a:visited/*瀏覽過的連結文字格式*/

a:active/* 按下連結的格式*/

a:hover/*滑鼠前往連結*/

滑鼠遊標樣式：

連結手指CURSOR: hand

十字體cursor:crosshair

箭頭朝下cursor:s-resize

十字箭頭cursor:move

#箭頭朝右cursor:move

加一問號cursor:help

箭頭朝左cursor:w-resize

箭頭朝上cursor:n-resize

#箭頭朝右上cursor:ne-resize

箭頭朝左上cursor:nw-resize

文字I型cursor:text

箭頭斜右下cursor:se-resize

箭頭斜左下cursor:sw-resize

漏斗cursor:wait

遊標圖案(IE6) p {cursor:url("遊標檔案名稱.cur"),text ;}

七、CSS框線一覽表：

border-top: 1px solid #6699cc; /*上框線*/

border -bottom: 1px solid #6699cc; /*下框線*/

border-left: 1px solid #6699cc; /*左框線*/

border-right: 1px solid # 6699cc; /*右框線*/

以上是建議書寫方式,但也可以使用常規的方式如下:

border-top-color: #369 /*設定上框線top顏色*/

border-top-width:1px /*設定上框線top寬度*/

border-top-style: solid/*設定上框線top樣式*/

其他框線樣式

solid/*實線框*/

dotted/*虛線框*/

double/*雙線框* /

groove/*立體內凸框*/

ridge/*立體浮雕框*/

inset/*凹框*/

outset /*凸框*/

八、CSS表單運用：

文字方塊

按鈕

複選框

選擇按鈕

多行文字方塊

#下拉式選單選項1

選項2

九、CSS邊界樣式：

margin-top:10px;/*上邊界*/

margin-right:10px;/*右邊界值*/

margin-bottom:10px;/*下邊界值*/

margin-left:10px;/*左邊界值*/

#十、CSS邊框空白

padding-top:10px;/*上邊框留空白*/

padding-right:10px;/*右邊框留空白*/

padding-bottom:10px;/*下邊框留空白*/

padding-left:10px;/*左邊框留空白*/

#十一、滾動條樣式

Scrollbar-face-color:#f3f3f3;/*滾動條凸出部分的顏色*/

Scrollbar-highlight-color:#f1f1f1/*滾動條陰影部分的顏色*/

Scrollbar-shadow-color:#fcfcfc/*立體滾動條陰影顏色*/

Scrollbar-3dlight-color:#fcfcfc/*滾動條亮邊的顏色*/

Scrollbar-arrow-color:#34837/*上下按鈕上三角箭頭的顏色*/

Scrollbar-track-color:#fcfcfc/*捲軸的背景顏色*/

Scrollbar-darkshadow-color:#66c0f4/*立體滾動條強陰影顏色*/

Scrollbar-base-color:#fcfcfc/*捲軸的基本顏色*/

以上是CSS樣式的基礎學習，如有出入，請見諒。

以上是學習CSS樣式的基礎總結分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！