1. 程式人生 > >css常用程式碼大全

css常用程式碼大全

一.文字設定
1、font-size: 字號引數 
2、font-style: 字型格式
3、font-weight: 字型粗細
4、顏色屬性
color: 引數
注意使用網頁安全色

二、超連結設定
text-decoration: 引數
主要用途是改變瀏覽器顯示文字連結時的下劃線。 
引數取值範圍: 
underline:為文字加下劃線 
overline:為文字加上劃線 
line-through:為文字加刪除線 
blink:使文字閃爍 
none:不顯示上述任何效果

三、背景
1、背景顏色
background-color: 引數
2、背景圖片
background-image: url(URL)
URL就是背景圖片的存放路徑,none表示無。
3、背景圖片重複
background-repeat: 引數
引數取值範圍 :
no-repeat:不重複平鋪背景圖片
repeat-x:使圖片只在水平方向上平鋪
repeat-y:使圖片只在垂直方向上平鋪
如果不指定背景圖片重複屬性,瀏覽器預設的是背景圖片向水平、垂直兩個方向上平鋪。
4、背景圖片固定
背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設定背景圖片固定屬性,瀏覽器預設背景圖片隨網頁的滾動而滾動。為了避免過於花哨的背景圖片在滾動時轉移瀏覽者的注意力,一般都設為固定
background-attachment: 引數 
引數取值範圍:
fixed:網頁滾動時,背景圖片相對於瀏覽器的視窗而言,固定不動
scroll:網頁滾動時,背景圖片相對於瀏覽器的視窗而言,一起滾動

四、區塊
1、單詞間距 
word-spacing: 間隔距離 
2、字母間距 
letter-spacing: 字母間距
3、文字對齊
text-align: 引數
引數的取值:
left:左對齊
right:右對齊
center:居中對齊
justify:相對左右對齊
4、垂直對齊
vertical-align: 引數
top:頂對齊
bottom:底對齊
text-top:相對文字頂對齊
text-bottom:相對文字底對齊
baseline:基準線對齊
middle:中心對齊
sub:以下標的形式顯示
super:以上標的形式顯示
5、文字縮排
text-indent: 縮排距離
12px相當於一個文字距離
6、空格
white-space: 引數
normal 正常
pre 保留
nowrap 不換行
7、顯示樣式 
display: 引數 
引數取值範圍: 
block:塊級元素,在物件前後都換行 
inline:在物件前後都不換行 
list-item:在物件前後都換行,增加了專案符號 
none:無顯示

五、方框
1、height 高度
2、width 寬度
3、padding 內邊距
4、margin 外邊距
5、float(浮動):可以讓塊級元素在一行中排列,例如橫向選單。 
6、clear 清除浮動

六、邊框
1、樣式
border style 引數
邊框樣式的引數:
none:無邊框 
dotted:邊框為點線
dashed:邊框為長短線
solid:邊框為實線
double:邊框為雙線
2、寬度
border width 引數
3、顏色
border color 引數

七、列表
list-style-type 列表樣式
不同瀏覽器的列表符可能不相同,可能會影響到網頁,所以網頁中的列表大多都是由背景圖片顯示。
控制使用者介面的樣式

八、滑鼠
cursor:滑鼠形狀引數 
CSS滑鼠形狀引數表: 
滑鼠形狀:CSS程式碼
style="cursor:hand"      手形
style="cursor:crosshair"   十字形
style="cursor:text"      文字形
style="cursor:wait"      沙漏形
style="cursor:move"     十字箭頭形:
style="cursor:help"      問號形
style="cursor:e-resize"    右箭頭形
style="cursor:n-resize"    上箭頭形
style="cursor:nw-resize"   左上箭頭形
style="cursor:w-resize"    左箭頭形
style="cursor:s-resize"    下箭頭形 
style="cursor:se-resize"   右下箭頭形 
style="cursor:sw-resize"   左下箭頭形