技術文章 » 網頁設計css樣式程式碼大全，快來收藏吧！

網頁設計css樣式程式碼大全，快來收藏吧！

2021-07-09 19:00:27

減少很多不必要的程式碼，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：無顯示

五、方框

  • height 高度

  • width 寬度

  • padding 內邊距

  • margin 外邊距

  • float（浮動）：可以讓塊級元素在一行中排列，例如橫向選單。

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

總結：

用常用HTML+CSS的程式碼做一個漂亮簡單的個人網頁，小夥伴來試試。

推薦學習：CSS視訊教學

以上就是網頁設計css樣式程式碼大全，快來收藏吧！的詳細內容，更多請關注TW511.COM其它相關文章！