網(wǎng)頁設(shè)計——入門與提高 王維 吳菲 王麗娜 第15章

《網(wǎng)頁設(shè)計——入門與提高 王維 吳菲 王麗娜 第15章》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、第15章CSS屬性15.1CSS屬性15.1.1字體屬性1.字體族font-family屬性描述了在HTML文件中用何種字體來顯示文字，可以為文字指定一種或多種字體，屬性值是一個用逗號分隔的字體名稱列表。p{font-family:”NewCenturySchoolbook”,華文彩云,黑體,楷體;}2.字體風格font-style屬性描述了在HTML文件中的文字是否為斜體效果，屬性的值為normal、italic或oblique。p{font-style:italic;}15.1CSS屬性15.1.1字體屬性3.字體變

2、形font-variant描述了在HTML文件中的小寫英文字母是否為小型大寫字母效果，屬性的值為normal和small-caps。p{font-variant:small-caps;}4.字體加粗font-weight屬性描述了在HTML文件中文字的粗細，屬性的值為100到900之間并且是100的倍數(shù)的數(shù)字、normal、bold、bolder和lighter。p{font-weight:700;}或p{font-weight:bold;}15.1CSS屬性15.1.1字體屬性5.字體大小font-size屬性描述了在

3、HTML文件中文字的大小，CSS共支持用4種方式表示字體大小。分別是絕對大小、相對大小、長度和百分比。絕對大小是由瀏覽器預先定義的一種字體大小，分別為xx-small，x-small，small，medium，large，x-large和xx-large。p{font-size:x-large;}相對大小有smaller和larger兩種值，分別表示比父元素的字體大一號或小一號的字體。p{font-size:smaller;}15.1CSS屬性15.1.1字體屬性5.字體大小長度最常用，也最容易理解，它指字體以固定的數(shù)值

4、搭配長度單位顯示。p{font-size:12px;}或p{font-size:30pt;}百分比，它指定字體以父元素字體大小的百分之幾顯示。p{font-size:150%;}15.1CSS屬性15.1.1字體屬性6.字體學習了前面的幾個字體規(guī)則之后，我們會發(fā)現(xiàn)有時為同一段文字指定多個字體屬性時，書寫起來有些麻煩和不便。p{font-family:宋體;font-weight:bold;font-size:15pt;font-style:italic;}font屬性可以簡化代碼，簡化為：p{font:italicbol

5、d15pt宋體;}15.1CSS屬性15.1.2顏色與背景屬性1.顏色color屬性可以設(shè)置標簽內(nèi)容的前景色。顏色的值可以是顏色名、十六進制RGB組合或十進制RGB組合。例如：設(shè)置文字為紅色。p{color:red;}或p{color:#ffoooo;}2.背景顏色background-color屬性用來設(shè)定元素的背景顏色，它為元素設(shè)置一種純色。顏色的值可以是顏色名、十六進制RGB組合或十進制RGB組合。例如：設(shè)置標題一背景色為紅色。h1{background-color:red;}或h1{background-colo

6、r:#ffoooo;}15.1CSS屬性15.1.2顏色與背景屬性3.背景圖像background-image屬性用來設(shè)定元素的背景圖片，屬性的值為none和圖片的url。其中none為默認值，表示無背景圖片；url為背景圖片的地址，可以是絕對地址也可以是相對地址。例如：設(shè)置body與p標簽的背景圖像。body{background-image：url（/image/bg.gif）;}p{background-image:url(http://www.ccutsoft.com/bg.gif);}15.1CSS屬性15.1

7、.2顏色與背景屬性4.背景重復background-repeat屬性用來設(shè)定背景圖片是否重復平鋪，屬性的值為repeat、no-repeat、repeat-x和repeat-y。其中repeat表示背景圖片橫向和縱向都重復平鋪；no-repeat表示背景圖片不重復平鋪；repeat-x表示背景圖片橫向重復平鋪；repeat-y表示背景圖片縱向重復平鋪。例如：設(shè)置頁面背景圖縱向重復平鋪。body{background-image:url(/image/bg.gif);background-repeat:repeat-y;}

8、15.1CSS屬性15.1.2顏色與背景屬性5.背景滾動background-attachment屬性用來設(shè)定背景圖片是否隨文檔一起滾動，屬性的值為scroll和fixed。其中scroll表示當文檔滾動時，背景圖片隨文檔一起滾動；fixed表示背景圖片固定在文檔的可見區(qū)域里。例如：設(shè)置頁面背景圖固定，不隨文檔滾動。