網頁設計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、背景圖片

r​​rreee

URL就是背景圖片的存放路徑，none表示無。

• 3、背景圖片重複

background-image: url(URL)

• 參數取值範圍：

no-repeat：不重複平鋪背景圖片

repeat-x：讓圖片只在水平方向平鋪

repeat-y：讓圖片只在垂直方向上平鋪

如果不指定背景圖片重複屬性，瀏覽器預設的是背景圖片向水平、垂直兩個方向上平鋪。

4、背景圖片固定

背景圖片固定控制背景圖片是否隨網頁的捲動而捲動。如果不設定背景圖片固定屬性，瀏覽器預設背景圖片會隨網頁的滾動而滾動。為了避免過於花俏的背景圖片在滾動時轉移瀏覽者的注意力，一般都設為固定

background-repeat: 参数

• 參數取值範圍：

• fixed：網頁滾動時，背景圖片相對於瀏覽器的視窗而言，固定不動

• scroll：網頁捲動時，背景圖片相對於瀏覽器的視窗而言，一起捲動

• 四、區塊

   

1、單字間距 

• background-attachment: 参数

  2、字母間距 

word-spacing: 间隔距离

• 3、文字對齊

  letter-spacing: 字母间距

  參數的取值：

• left：左對準

• ##right：右對齊

• center：居中對齊

• #justify：相對左右對齊

• 4、垂直對齊

• vertical-align:參數

• top：頂對齊

bottom：底對齊

text-top：相對文字頂對齊

• text-bottom：相對文字底對齊

• baseline：基準線對齊

• middle：中心對齊

sub：以下標的形式顯示

super：以上標的形式顯示

• 5、文字縮排

  text-align: 参数

12px相當於一個文字距離

• # 6.空格

  text-indent: 缩进距离

• normal 正常

#pre 保留

• ##nowrap 不換行

7、顯示樣式 

white-space: 参数

參數取值範圍： 

######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樣式程式碼大全，快來收藏吧！的詳細內容。更多資訊請關注PHP中文網其他相關文章！