當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

CSS美化网页元素大全

發(fā)布時(shí)間：2024/10/8 CSS 65 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS美化网页元素大全小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

作用：能讓某幾個(gè)文字或者某個(gè)詞語(yǔ)凸顯出來(lái)

屬性描述

font	簡(jiǎn)寫(xiě)屬性。在一條聲明中設(shè)置所有字體屬性，簡(jiǎn)寫(xiě)順序：字體風(fēng)格→字體粗細(xì)→字體大小→字體類型
font-family	規(guī)定文本的字體系列（字體族）。
font-size	規(guī)定文本的字體大小，單位是px(像素)
font-style	規(guī)定文本的字體樣式。 normal（標(biāo)準(zhǔn)）、italic（斜體）和oblique（傾斜）
font-variant	規(guī)定是否以小型大寫(xiě)字母的字體顯示文本。
font-weight	規(guī)定字體的粗細(xì)。 normal:默認(rèn)值，定義標(biāo)準(zhǔn)的字體 bold:粗體字體 bolder:更粗的字體 lighter:更細(xì)的字體 100、200、300:定義由粗到細(xì)的字體 400等同于normal 700等同于 bold

屬性描述

color	設(shè)置文本顏色
text-align	設(shè)置元素水平對(duì)齊方式 left:把文本排列到左邊（默認(rèn)值） right:把文本排列到右邊 center:把文本排列到中間 justify:實(shí)現(xiàn)兩端對(duì)齊文本效果
text-indent	設(shè)置首行文本的縮進(jìn)，單位：em或px
line-height	設(shè)置文本的行高
text-decoration	設(shè)置文本的裝飾 none:默認(rèn)值定義的標(biāo)準(zhǔn)文本 underline:設(shè)置文本的下劃線 overline:設(shè)置文本的上劃線 line-through:設(shè)置文本的刪除線
vertical-align	設(shè)置文本與圖片的對(duì)齊方式，middle、top、bottom（不常用）
text-shadow	文本陰影，屬性順序：陰影顏色 X軸位移 Y軸位移陰影模糊半徑

屬性描述

在CSS設(shè)置偽類的順序?yàn)?#xff1a;a:link->a:visited->a:hover->a:active

list-style-type設(shè)置列表標(biāo)記類型

屬性描述

list-style-image
list-style-position
list-style

< div>標(biāo)簽可以把HTML文檔分割成獨(dú)立的不同的部分，因此常用來(lái)進(jìn)行網(wǎng)頁(yè)布局

屬性描述

background-color	背景顏色，默認(rèn)值transparent，即透明色
background-image：url	背景圖像
background-size	背景圖像尺寸 auto：默認(rèn)值使用背景圖片保持原樣 percentage：當(dāng)使用百分值時(shí)，不是相對(duì)于背景的尺寸大小來(lái)計(jì)算的而是相對(duì)于元素寬度來(lái)計(jì)算的 cover：整個(gè)背景圖片放大填充整個(gè)元素 contain：讓背景圖片保持本身的寬高比例，將背景圖片縮放到寬度或者高度正好適應(yīng)所定義背景的區(qū)域
background-repeat	背景圖像重復(fù)方式 repeat：沿水平和垂直兩個(gè)方向平鋪 no-repeat：不平鋪，即只顯示一次 repeat-x：只沿水平方向平鋪 repeat-y：只沿垂直方向平鋪
background-position	背景圖像定位： Xpos Ypos:單位PX Xpos表示水平位置 Ypos表示垂直位置 X% Y%:使用百分比表示背景的位置水平方向關(guān)鍵詞：left、center、right 垂直方向的關(guān)鍵字：top、center、bottom 示例：background-position：200px 10x;
background	簡(jiǎn)寫(xiě)屬性。在一條聲明中設(shè)置所有背景屬性，簡(jiǎn)寫(xiě)順序：背景顏色→背景圖片URL→背景圖像定位→背景圖像重復(fù)方式

設(shè)置漸變色屬于背景圖片的范疇

顏色沿著一條直線過(guò)渡：從左到右、從右到左、從上到下等

線性漸變語(yǔ)法：
linear-gradient(漸變方向，color1，color2，......);

實(shí)例：

#grad {background-image: linear-gradient(to right, red , yellow); }

更多詳細(xì)漸變請(qǐng)看

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

以上是生活随笔為你收集整理的CSS美化网页元素大全的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。