css中美化網頁的元素有哪些？css中可以美化網頁的元素總結

最後更新：2018-08-24 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇文章給大家帶來的內容是關於css中美化網頁的元素有哪些？css中可以美化網頁的元素總結，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

1.本章目標

會使用CSS設定字型樣式和文本樣式

會使用CSS設定超連結樣式

會使用CSS設定列表樣式

會使用CSS設定背景樣式

會使用CSS設定漸層效果

2.<span>標籤

<span>標籤的作用

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

樣本：

<p>享受<span class="show">“北大式”</span>教育服務</p><p>在php中文網，有一群人默默支援你成就      <span id="dream">夢想</span></p><p class="bird">選擇<span>php中文網</span>，成就你的夢想</p>

3.字型樣式

4.字型類型

font-family屬性

p{font-family:Verdana,"楷體";}body{font-family: Times,"Times New Roman", "楷體";}

5.字型大小

font-size屬性

單位： px（像素）、em、rem、cm、mm、pt、pc

6.字型風格

font-style屬性

normal、italic(庫裡內建的)和oblique(自動將字型變斜體)

樣本：

7.字型的粗細

font-weight屬性

8.字型屬性

font屬性 family weight size style

字型屬性的順序：字型風格→字型粗細→字型大小→字型類型

p span {font:oblique bold 12px "楷體";}

9.文本樣式

文字屬性

10.文本顏色

color屬性

RGB

十六進位方法表示顏色：前兩位表示紅色分量，中間兩位表示綠色分量，最後兩位表示藍色分量

rgb(r,g,b) : 正整數的取值為0～255

RGBA

在RGB基礎上增加了控制alpha透明度的參數，其中這個透明通道值為0～1

樣本：

color:#A983D8;color:#EEFF66;color:rgb(0,255,255);--------------最深的顏色color:rgba(0,0,255,0.5);-----------透明度

11.排版文本段落

12.文本修飾和垂直對齊

文本裝飾

text-decoration屬性

垂直對齊

vertical-align屬性：middle、top、bottom

13.文本陰影

瀏覽器安全色性

14.超連結偽類

15.使用CSS設定超連結

16.列表樣式2-1

list-style-type

list-style-image

17.列表樣式2-2

   list-style:li {list-style:none;}

1、網頁背景

R紅--G綠--B藍

背景顏色

background-color

背景映像

background-image

19.設定背景映像2-1

背景映像

background-image屬性

background-image:url(圖片路徑);

背景重複方式

background-repeat屬性

repeat：沿水平和垂直兩個方向平鋪

no-repeat：不平鋪，即只顯示一次

repeat-x：只沿水平方向平鋪

repeat-y：只沿垂直方向平鋪

20.設定背景映像2-2

背景定位

background-position屬性

21.設定背景

背景屬性

background屬性

23.背景尺寸

背景尺寸 background-size

24.CSS3漸層

線性漸層

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

放射狀漸層

圓形或橢圓形漸層，顏色不再沿著一條直線變化，而是從一個起點朝所有方向混合

瀏覽器安全色性

25.CSS3漸層相容

IE瀏覽器是Trident核心，加首碼：-ms-

Chrome瀏覽器是Webkit核心，加首碼：-webkit-

Safari瀏覽器是Webkit核心，加首碼：-webkit-

Opera瀏覽器是Blink核心，加首碼：-o-

Firefox瀏覽器是Mozilla核心，加首碼：-moz-

26.線性漸層

左上向右下方向漸層：linear-gradient( left top ,red, blue)

<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鳥教程(runoob.com)</title><style>#grad1 {    height: 200px;    background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */    background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */    background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */    background: linear-gradient(red,yellow,blue); /* 標準文法 (必須在最後) */}</style></head> <body><h3>線性漸層 - 頭部到底部</h3><p>從頭部開始的線性漸層，從紅色開始，轉為黃色，再到藍色:</p> <div id="grad1"></div> <p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 瀏覽器不支援漸層。</p></body></html>

總結

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More