CSS語法大全

2021-08-29 22:16:17 字數 3911 閱讀 1567

1.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; /*文字垂直向下對齊*/

2.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; /*縮排*/

3.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; /*居中對齊*/

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

5.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 /*凸框*/

6.css表單運用:

文字方塊

按鈕 核取方塊

選擇鈕

多行文字方塊

下拉式選單 選項1選項2

7.css邊界樣式:

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

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

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

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

8.css邊框空白

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

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

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

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

HTML語法大全

0 注釋 批註 1 跑馬燈 普通捲動 滑動 預設捲動 來回捲動 向下捲動 向上捲動 向右捲動 向左捲動 捲動次數 設定寬度 設定高度 設定背景顏色 設定捲動距離 設定捲動時間 2 字型效果 標題字 最大 標題字 最小 粗體字 粗體字 強調 斜體字 斜體字 強調 斜體字 表示定義 底線 底線 表示插入...

HTML語法大全

卷標 屬性名稱 簡介 批註 跑馬燈 普通捲動 滑動 預設捲動 來回捲動 向下捲動 向上捲動 向右捲動 向左捲動 捲動次數 設定寬度 設定高度 設定背景顏色 設定捲動距離 設定捲動時間 字型效果 標題字 最大 標題字 最小 粗體字 粗體字 強調 斜體字 斜體字 強調 斜體字 表示定義 底線 底線 表示...

HTML語法大全

註解 跑馬燈 普通捲動 滑動 預設捲動 來回捲動 向下捲動 向上捲動 向右捲動 向左捲動 捲動次數 設定寬度 設定高度 設定背景顏色 設定捲動距離 設定捲動時間 字型效果 標題字 最大 標題字 最小 粗體字 粗體字 強調 斜體字 斜體字 強調 斜體字 表示定義 底線 底線 表示插入文字 橫線 刪除線...