首頁 > web前端 > css教學 > 主體

常用CSS代碼大全(工作必備)

yulia
發布: 2018-09-20 09:39:25
原創
4907 人瀏覽過

用html 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:##style="cursor:crosshair"   十字形

##style="cursor:# text"      文形

style="cursor:wait"      沙漏形

style="cursor:move"    沙漏形

style="cursor:move"    沙漏形

style="cursor:move"      箭頭箭頭:#v> 箭頭>形狀

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"   左下箭頭形

以上是常用CSS代碼大全(工作必備)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!