2021css常用程式碼大全

css常用程式碼大全

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

感謝大家的閱讀，希望大家收益多。

本文轉自：https://blog.csdn.net/xujiuba/article/details/78926554

推薦教學：《CSS教學》

以上是2021css常用程式碼大全的詳細內容。更多資訊請關注PHP中文網其他相關文章！