杭州藍(lán)景實(shí)訓(xùn)部技術(shù)分享 — CSS常用代碼大全（HTML+CSS）

時(shí)間：2023-09-26 06:18:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-26 06:18:01 來源：網(wǎng)站運(yùn)營(yíng)

杭州藍(lán)景實(shí)訓(xùn)部技術(shù)分享 — CSS常用代碼大全（HTML+CSS）：HTML+CSS 可以很方便的進(jìn)行網(wǎng)頁的排版布局，還能減少很多不必要的代碼。

一、文本設(shè)置

1. font-size: 字號(hào)參數(shù)
2. font-style: 字體格式
3. font-weight: 字體粗細(xì)
4. 顏色屬性

color: 參數(shù)

注意使用網(wǎng)頁安全色

二、超鏈接設(shè)置

text-decoration: 參數(shù)

主要用途是改變?yōu)g覽器顯示文字鏈接時(shí)的下劃線。

參數(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)的是背景圖片向水平、垂直兩個(gè)方向上平鋪。

4、背景圖片固定

背景圖片固定控制背景圖片是否隨網(wǎng)頁的滾動(dòng)而滾動(dòng)。如果不設(shè)置背景圖片固定屬性，瀏覽器默認(rèn)背景圖片隨網(wǎng)頁的滾動(dòng)而滾動(dòng)。為了避免過于花哨的背景圖片在滾動(dòng)時(shí)轉(zhuǎn)移瀏覽者的注意力，一般都設(shè)為固定

background-attachment: 參數(shù)

參數(shù)取值范圍：

fixed：網(wǎng)頁滾動(dòng)時(shí)，背景圖片相對(duì)于瀏覽器的窗口而言，固定不動(dòng)

scroll：網(wǎng)頁滾動(dòng)時(shí)，背景圖片相對(duì)于瀏覽器的窗口而言，一起滾動(dòng)

四、區(qū)塊

1、單詞間距

word-spacing: 間隔距離

2、字母間距

letter-spacing: 字母間距

3、文本對(duì)齊

text-align: 參數(shù)

參數(shù)的取值：

left：左對(duì)齊

right：右對(duì)齊

center：居中對(duì)齊

justify：相對(duì)左右對(duì)齊

4、垂直對(duì)齊

vertical-align: 參數(shù)

top：頂對(duì)齊

bottom：底對(duì)齊

text-top：相對(duì)文本頂對(duì)齊

text-bottom：相對(duì)文本底對(duì)齊

baseline：基準(zhǔn)線對(duì)齊

middle：中心對(duì)齊

sub：以下標(biāo)的形式顯示

super：以上標(biāo)的形式顯示

5、文本縮進(jìn)

text-indent: 縮進(jìn)距離

12px相當(dāng)于一個(gè)文字距離

6、空格

white-space: 參數(shù)

normal 正常

pre 保留

nowrap 不換行

7、顯示樣式

display: 參數(shù)

參數(shù)取值范圍：

block：塊級(jí)元素，在對(duì)象前后都換行

inline：在對(duì)象前后都不換行

list-item：在對(duì)象前后都換行，增加了項(xiàng)目符號(hào)

none：無顯示

五、方框

• height 高度
• width 寬度
• padding 內(nèi)邊距
• margin 外邊距
• float（浮動(dòng)）：可以讓塊級(jí)元素在一行中排列，例如橫向菜單。
• clear 清除浮動(dòng)

六、邊框

1、樣式

border style 參數(shù)

邊框樣式的參數(shù)：

none：無邊框

dotted：邊框?yàn)辄c(diǎn)線

dashed：邊框?yàn)殚L(zhǎng)短線

solid：邊框?yàn)閷?shí)線

double：邊框?yàn)殡p線

2、寬度

border width 參數(shù)

3、顏色

border color 參數(shù)

七、列表

list-style-type 列表樣式

不同瀏覽器的列表符可能不相同，可能會(huì)影響到網(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" 　　　　　問號(hào)形

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

想要了解更多前端方面的技術(shù)或前端學(xué)習(xí)資料，歡迎添加我們微信“bluej333” 電話：15013001692 。