站長資訊網(wǎng)
減少很多不必要的代碼，html+css可以很方便的進(jìn)行網(wǎng)頁的排版布局。小伙伴們收藏好哦~
一.文本設(shè)置
1、font-size: 字號參數(shù)
2、font-style: 字體格式
3、font-weight: 字體粗細(xì)
4、顏色屬性
color: 參數(shù)
注意使用網(wǎng)頁安全色
二、超鏈接設(shè)置
text-decoration: 參數(shù)
主要用途是改變?yōu)g覽器顯示文字鏈接時的下劃線。
參數(shù)取值范圍：
-
underline：為文字加下劃線
-
overline：為文字加上劃線
-
line-through：為文字加刪除線
-
blink：使文字閃爍
-
none：不顯示上述任何效果
三、背景
1、背景顏色
background-color: 參數(shù)
2、背景圖片
background-image: url(URL)
-
URL就是背景圖片的存放路徑，none表示無。
3、背景圖片重復(fù)
background-repeat: 參數(shù)
參數(shù)取值范圍 ：
-
no-repeat：不重復(fù)平鋪背景圖片
-
repeat-x：使圖片只在水平方向上平鋪
-
repeat-y：使圖片只在垂直方向上平鋪
如果不指定背景圖片重復(fù)屬性，瀏覽器默認(rèn)的是背景圖片向水平、垂直兩個方向上平鋪。
4、背景圖片固定
背景圖片固定控制背景圖片是否隨網(wǎng)頁的滾動而滾動。如果不設(shè)置背景圖片固定屬性，瀏覽器默認(rèn)背景圖片隨網(wǎng)頁的滾動而滾動。為了避免過于花哨的背景圖片在滾動時轉(zhuǎn)移瀏覽者的注意力，一般都設(shè)為固定
background-attachment: 參數(shù)
參數(shù)取值范圍：
-
fixed：網(wǎng)頁滾動時，背景圖片相對于瀏覽器的窗口而言，固定不動
-
scroll：網(wǎng)頁滾動時，背景圖片相對于瀏覽器的窗口而言，一起滾動
四、區(qū)塊
1、單詞間距
word-spacing: 間隔距離
2、字母間距
letter-spacing: 字母間距
3、文本對齊
text-align: 參數(shù)
參數(shù)的取值：
-
left：左對齊
-
right：右對齊
-
center：居中對齊
-
justify：相對左右對齊
4、垂直對齊
-
vertical-align: 參數(shù)
-
top：頂對齊
-
bottom：底對齊
-
text-top：相對文本頂對齊
-
text-bottom：相對文本底對齊
-
baseline：基準(zhǔn)線對齊
-
middle：中心對齊
-
sub：以下標(biāo)的形式顯示
-
super：以上標(biāo)的形式顯示
5、文本縮進(jìn)
text-indent: 縮進(jìn)距離
12px相當(dāng)于一個文字距離
6、空格
white-space: 參數(shù)
-
normal 正常
-
pre 保留
-
nowrap 不換行
7、顯示樣式
display: 參數(shù)
參數(shù)取值范圍：
-
block：塊級元素，在對象前后都換行
-
inline：在對象前后都不換行
-
list-item：在對象前后都換行，增加了項(xiàng)目符號
-
none：無顯示
五、方框
-
height 高度
-
width 寬度
-
padding 內(nèi)邊距
-
margin 外邊距
-
float（浮動）：可以讓塊級元素在一行中排列，例如橫向菜單。
-
clear 清除浮動
六、邊框
1、樣式
border-style 參數(shù)
邊框樣式的參數(shù)：
-
none：無邊框
-
dotted：邊框?yàn)辄c(diǎn)線
-
dashed：邊框?yàn)殚L短線
-
solid：邊框?yàn)閷?shí)線
-
double：邊框?yàn)殡p線
2、寬度
border-width:參數(shù)
3、顏色
border-color:參數(shù)
七、列表
list-style-type:列表樣式
不同瀏覽器的列表符可能不相同，可能會影響到網(wǎng)頁，所以網(wǎng)頁中的列表大多都是由背景圖片顯示。
控制用戶界面的樣式
八、鼠標(biāo)
cursor:鼠標(biāo)形狀參數(shù)
CSS鼠標(biāo)形狀參數(shù)表：
鼠標(biāo)形狀：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" 左下箭頭形
總結(jié)：
用常用HTML+CSS的代碼做一個漂亮簡單的個人網(wǎng)頁，小伙伴來試試。
推薦學(xué)習(xí)：CSS視頻教程
