常見的樣式

2021-05-21 19:03:07 字數 4435 閱讀 6289

一 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邊框空白

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

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

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

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

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

六、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; /*左邊界值*/

9滾動條樣式

overflow: scroll  超過指定寬高 自動滾動樣式

scrollbar-base-color˜˜˜˜˜˜設定或檢索滾動條基準顏色。

scrollbar-face-color˜˜˜˜˜設定或檢索滾動條3d表面(threedface)的顏色。

scrollbar-track-color˜˜˜˜˜指定滾動條的(基線)線條顏色

scrollbar-arrow-color˜˜˜˜設定或檢索滾動條方向箭頭的顏色。

scrollbar-highlight-color˜˜設定或檢索滾動條3d介面的亮邊(threedhighlight)顏色。

scrollbar-shadow-color˜˜˜設定或檢索滾動條3d介面的暗邊(threedshadow)顏色。

scrollbar-3dlight-color˜˜˜設定或檢索滾動條亮邊框顏色。

scrollbar-darkshadow-color˜˜設定或檢索滾動條暗邊框(threeddarkshadow)顏色。

舉例文字內容

常見的樣式

行間樣式表 內部樣式表 外部樣式表 background height高度 width寬度 background attachment fixed 背景是否滾動 background color gray 背景顏色 background image url bg.jpg 背景圖 background...

常見的CSS樣式

常見的css樣式 color 文字顏色 background color 背景顏色 opacity 設定透明度 顏色 光的三原色 紅 綠 藍 三種顏色表示法 名詞表示法 red green blue 16進製制顏色表示法 000000 十六進製制 0 f ff 紅色 00 綠色 00 藍色 十進位制...

常見的樣式宣告

color 文字顏色 值 預設值 定義好的單詞 三原色 光學 紅綠藍 每種顏色可以使用0 255之間的數字來表達 色值寫法 rgb 0,0,0 hex表示法 十六進製制 紅綠藍 008c8c 當兩位數一樣的時候可以省略一位 幾種可以記住的顏色 紅 f40 黑色 000 白色 fff 紅 f00 綠 ...