當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS美化网页元素大全

發布時間：2024/10/8 CSS 64 豆豆

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

作用：能讓某幾個文字或者某個詞語凸顯出來

屬性描述

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

屬性描述

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

屬性描述

在CSS設置偽類的順序為：a:link->a:visited->a:hover->a:active

list-style-type設置列表標記類型

屬性描述

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

< div>標簽可以把HTML文檔分割成獨立的不同的部分，因此常用來進行網頁布局

屬性描述

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

設置漸變色屬于背景圖片的范疇

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

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

實例：

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

更多詳細漸變請看

與50位技術專家面對面20年技術見證，附贈技術全景圖

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。