CSS網(wǎng)頁樣式設(shè)置完整版資料_第1頁
CSS網(wǎng)頁樣式設(shè)置完整版資料_第2頁
CSS網(wǎng)頁樣式設(shè)置完整版資料_第3頁
CSS網(wǎng)頁樣式設(shè)置完整版資料_第4頁
CSS網(wǎng)頁樣式設(shè)置完整版資料_第5頁
已閱讀5頁，還剩93頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第11章

CSS網(wǎng)頁樣式設(shè)置使用CSS控制頁面

11.2CSS設(shè)置文字效果

11.4復(fù)合CSS選擇器11.3CSS的概念

11.1CSS設(shè)置圖片效果

11.5CSS設(shè)置頁面背景

11.6使用CSS設(shè)置超鏈接效果

11.7使用CSS設(shè)置項目列表

11.8實踐與練習(xí)：CSS制作實用菜單11.9小結(jié)

11.8在本書第2章中，簡單介紹了CSS的用法，但是CSS在網(wǎng)頁設(shè)計中的作用遠(yuǎn)遠(yuǎn)不止于此。本章從CSS的概念出發(fā)，介紹CSS語言的特點，以及如何在網(wǎng)頁中引入CSS，然后重點介紹CSS的基本語法。11.1CSS的概念CSS（CascadingStyleSheet），中文譯為層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)簽性語言。CSS是1996年由W3C審核通過并推薦使用的。簡單地說，CSS的引入就是為了使HTML能夠更好地適應(yīng)頁面的美工設(shè)計。它以HTML為基礎(chǔ)，提供了豐富的格式化功能，如字體、顏色、背景、整體排版等，并且網(wǎng)頁設(shè)計者可以針對各種可視化瀏覽器設(shè)置不同的樣式風(fēng)格，包括顯示器、打印機、打字機、投影儀、PDA等。CSS的引入隨即引發(fā)了網(wǎng)頁設(shè)計的一個又一個新高潮，使用CSS設(shè)計的優(yōu)秀頁面層出不窮。11.1.1傳統(tǒng)HTML的缺點在CSS還沒有被引入頁面設(shè)計前，傳統(tǒng)的HTML要實現(xiàn)頁面美工上的設(shè)計是十分麻煩的。其在IE中的顯示效果如圖11-1所示，四個標(biāo)題都變成了藍(lán)色黑體字。這時如果希望將這四個標(biāo)題改成紅色，在這種傳統(tǒng)的HTML中就需要對每個標(biāo)題的“<font>”標(biāo)簽都進(jìn)行修改，倘若是整個網(wǎng)站，這樣的工作量是沒法讓設(shè)計者接受的。其實傳統(tǒng)HTML的缺陷遠(yuǎn)不止例11-1中所反映的這一個方面，相比CSS為基礎(chǔ)的頁面設(shè)計方法，其所體現(xiàn)出的劣勢主要有以下幾點。圖11-1給標(biāo)題添加效果（1）維護(hù)困難。（2）標(biāo)簽不足。（3）網(wǎng)頁過胖。（4）定位困難。11.1.2CSS的引入對于上例，倘若引入CSS對其中的<h2>標(biāo)簽進(jìn)行控制，那么情況將完全不同，如例11-2所示。圖11-2CSS的引入網(wǎng)上的瀏覽器各式各樣，絕大多數(shù)瀏覽器對CSS都有很好的支持，因此設(shè)計者往往不用擔(dān)心其設(shè)計的CSS文件不被用戶所支持。但目前的問題在于，各個瀏覽器之間對CSS很多細(xì)節(jié)的處理上存在差異，設(shè)計者在一種瀏覽器上設(shè)計的CSS效果，在其他瀏覽器上的結(jié)果很可能大相徑庭。就目前主流的兩大瀏覽器IE與Firefox而言，在某些細(xì)節(jié)的處理上就不盡相同。IE本身在IE6與發(fā)布不久的IE7之間，對相同頁面的瀏覽效果都存在一些差異。例如例11-3所示的代碼。【例11-3】瀏覽器的差異<html><head><title>頁面標(biāo)題</title><style><!--ul{

list-style-type:none;display:inline;}--></style></head><body>

這是一段很簡單的HTML代碼，并用CSS對<ul>標(biāo)簽進(jìn)行了樣式上的控制。而這段代碼在IE7中的效果與Firefox中的顯示效果就存在差別，如圖11-3所示。圖11-3IE與Firefox的效果區(qū)別11.2使用CSS控制頁面在對CSS有了大致的了解后，便希望使用CSS對頁面進(jìn)行全方位的控制。本節(jié)主要介紹如何使用CSS控制頁面，以及其控制頁面的各種方法，包括行內(nèi)樣式、內(nèi)嵌式、鏈接式、導(dǎo)入式等。11.2.1行內(nèi)樣式行內(nèi)樣式是所有樣式方法中最為直接的一種，它直接對HTML的標(biāo)簽使用style屬性，然后將CSS代碼直接寫在其中，如例11-4所示。<pstyle="color:#0000FF;font-size:18px;font-weight:bold;">CSS內(nèi)容1</p><pstyle="color:#000000;text-decoration:underline;font-style:italic;">正文CSS2</p><pstyle="color:#FF33CC;font-size:28px;font-weight:bold;">CSS正文內(nèi)容3</p></body></html>圖11-4行內(nèi)樣式11.2.2內(nèi)嵌式 內(nèi)嵌式樣式表就是將CSS寫在<head>與</head>之間，并且用<style>和</style>標(biāo)簽進(jìn)行聲明，如例11-5所示。【例11-5】內(nèi)嵌樣式<html><head><title>頁面標(biāo)題</title><styletype="text/css"><!--p{

color:#FF00FF;text-decoration:underline;font-weight:bold;font-size:25px;}--></style></head><body><p>紫色、粗體、下劃線、25px的效果1</p><p>紫色、粗體、下劃線、25px的效果2</p><p>紫色、粗體、下劃線、25px的效果3</p></body></html>其顯示效果如圖11-5所示，從上例中可以看到，所有CSS的代碼部分被集中在了同一個區(qū)域，方便了后期的維護(hù)，頁面本身也大大瘦身。但如果是一個網(wǎng)站，擁有很多的頁面，對于不同頁面上的“<p>”標(biāo)簽都希望采用同樣的風(fēng)格時，內(nèi)嵌式的方法就顯得略微麻煩，維護(hù)成本也不低。因此內(nèi)嵌式僅適用于對特殊的頁面設(shè)置單獨的樣式風(fēng)格。圖11-5內(nèi)嵌式11.2.3鏈接式鏈接式樣式表是使用頻率最高，也是最為實用的方法。它將HTML頁面本身與CSS樣式風(fēng)格分離為兩個或者多個文件，實現(xiàn)了頁面框架HTML代碼與美工CSS代碼的完全分離，使得前期制作和后期維護(hù)都十分方便，網(wǎng)站后臺的技術(shù)人員與美工設(shè)計者也可以很好地分工合作。而且對于同一個CSS文件，可以鏈接到多個HTML文件中，乃至整個網(wǎng)站的所有頁面中，使得網(wǎng)站整體風(fēng)格統(tǒng)一、協(xié)調(diào)，并且后期維護(hù)的工作量也大大減少。鏈接式CSS樣式表的使用如例11-6所示?！纠?1-6】鏈接式樣式首先創(chuàng)建HTML文件，如下所示：<html><head><title>標(biāo)題在這里</title><linkhref="1.css"type="text/css"rel="stylesheet"></head><body>

<h2>第一行標(biāo)題1</h2><p>紫紅色、斜體、下劃線、28px的效果1</p><h2>第二行標(biāo)題2</h2><p>紫紅色、斜體、下劃線、28px的效果2</p></body></html>然后創(chuàng)建文件1.css，如下所示：h2{color:#0000FF;}p{color:#FF33CC;text-decoration:underline;font-style:italic;font-size:28px;}從上例中可以看到，文件1.css將所有的CSS代碼從HTML文件中分離出來，然后在“<head>”和“</head>”標(biāo)簽之間加上“<linkhref="1.css"type="text/css"rel="stylesheet">”語句，將CSS文件鏈接到頁面中，對其中的標(biāo)簽進(jìn)行樣式控制。其顯示效果如圖11-6所示。圖11-6鏈接式11.2.4導(dǎo)入式導(dǎo)入式樣式表與上節(jié)提到的鏈接式樣式表功能上基本相同，只是語法和運作方式上略有區(qū)別。采用import方式導(dǎo)入的樣式表，在HTML文件初始化時，會被導(dǎo)入到HTML文件內(nèi)，作為其一部分，類似內(nèi)嵌式的效果。而鏈接式樣式表則是在HTML的標(biāo)簽需要格式時才以鏈接的方式引入。在HTML文件中導(dǎo)入樣式表，常用的有如下幾種“@import”語法，可以任意選擇一種放在“<style>”與“</style>”標(biāo)簽之間：（1）@importurl(sheet1.css);（2）@importurl("sheet1.css");（3）@importurl('sheet1.css');（4）@importsheet1.css;（5）@import"sheet1.css";（6）@import'sheet1.css';例如例11-7所示的代碼?！纠?1-7】導(dǎo)入式樣式<html><head><title>標(biāo)題在這里</title><styletype="text/css"><!--@importurl(1.css);--></style></head><body><h2>第一行標(biāo)題1</h2><p>紫紅色、斜體、下劃線、28px的效果1</p>

<h2>第二行標(biāo)題2</h2><p>紫紅色、斜體、下劃線、28px的效果2</p><h3>第三行標(biāo)題3</h3><p>紫紅色、斜體、下劃線、28px的效果3</p></body></html>例11-7在例11-6的基礎(chǔ)上進(jìn)行了修改，加入了“<h3>”的標(biāo)題，前兩行的效果與例11-6中顯示完全相同，如圖11-7所示。可以看到新引入的“<h3>”標(biāo)簽由于沒有設(shè)置樣式，因此保持著默認(rèn)的風(fēng)格。圖11-7導(dǎo)入樣式11.3復(fù)合CSS選擇器選擇器（Selector）是CSS中的一個很重要的概念，所有HTML語言中的標(biāo)簽都是通過不同的CSS選擇器進(jìn)行控制的。用戶只需要通過選擇器對不同的HTML標(biāo)簽進(jìn)行控制，并賦予各種樣式聲明，即可實現(xiàn)各種效果。在本書的前面章節(jié)中，介紹了3種基本的選擇器——標(biāo)簽選擇器、類別選擇器和ID選擇器。這里在介紹兩種更為深入的選擇器使用方法。11.3.1選擇器集體聲明在聲明各種CSS選擇器時，如果某些選擇器的樣式風(fēng)格是完全相同的，或者部分相同，這時便可以利用集體聲明的方法，將風(fēng)格相同的CSS選擇器同時聲明，如例11-8所示。圖11-8集體聲明11.3.2選擇器的嵌套在CSS選擇器中，還可以通過嵌套的方式，對特殊位置的HTML標(biāo)簽進(jìn)行聲明，例如當(dāng)“<p>”與“</p>”之間包含“<b></b>”標(biāo)簽時，就可以使用嵌套選擇器進(jìn)行相應(yīng)的控制。具體如例11-9所示。圖11-9嵌套選擇器11.4CSS設(shè)置文字效果文字是網(wǎng)頁設(shè)計中永遠(yuǎn)不可缺少的元素，各種各樣的文字效果遍布在整個Internet中。本節(jié)從基礎(chǔ)的文字設(shè)置出發(fā)，講解CSS設(shè)置各種文字效果的方法，然后再進(jìn)一步講解段落排版的相關(guān)內(nèi)容。11.4.1CSS文字樣式使用過Word編輯文檔的用戶一定對會注意到，Word可以對文字的字體、大小、顏色等各種屬性進(jìn)行設(shè)置。CSS同樣可以對HTML頁面中的文字進(jìn)行全方位的設(shè)置。本節(jié)主要介紹CSS設(shè)置文字各種屬性的基本方法。在CSS中文字都是通過“font”的相關(guān)屬性進(jìn)行設(shè)置的，例如通過“font-family”屬性來控制文字的字體，通過“font-size”屬性來控制文字的大小，通過“color”屬性設(shè)置文字的顏色，通過“font-weight”屬性來設(shè)置文字的粗細(xì)，通過設(shè)置“font-style”屬性來控制文字是否為斜體，通過設(shè)置文字的text-decoration屬性來實現(xiàn)文字的下劃線、頂劃線、刪除線等圖11-10CSS設(shè)置文字效果11.4.2CSS文字段落段落是由一個個文字組合而成的，同樣是網(wǎng)頁中最重要的組成部分之一，因此前面提到的文字屬性，對于段落同樣適用。但CSS針對段落也提供了很多樣式屬性，本節(jié)將通過實例進(jìn)行詳細(xì)介紹。在使用Word編輯文檔時，可以很輕松的設(shè)置行間距，在CSS中通過“l(fā)ine-height”屬性同樣可以輕松地實現(xiàn)行距的設(shè)置。在CSS中“l(fā)ine-height”的值表示的是兩行文字之間基線的距離。如果給文字加上下劃線，那么下劃線的位置就是文字的基線?！發(fā)ine-height”的值跟CSS中所有設(shè)定具體數(shù)值的屬性一樣，可以設(shè)定為相對數(shù)值，也可以設(shè)定為絕對數(shù)值。在靜態(tài)頁面中，文字大小固定時常常使用絕對數(shù)值，達(dá)到統(tǒng)一的效果。而對于論壇、博客這些可以由用戶自定義字體大小的頁面，通常設(shè)定為相對數(shù)值，可以隨著用戶自定義的字體大小而改變相應(yīng)的行距。CSS對于文字段落的設(shè)置示例如例11-11所示。圖11-11行間距示例11.4.3課堂練習(xí)：制作首字下沉效果許多報刊、雜志的文章第一個字都很大，并且向下浮動，這種首字放大的效果，同樣可以方便地應(yīng)用在網(wǎng)頁中。在CSS中首字下沉的效果是通過對第一個字進(jìn)行單獨設(shè)置樣式風(fēng)格來實現(xiàn)的，具體方法如例11-12所示。圖11-12首字放大11.5CSS設(shè)置圖片效果在五彩繽紛的網(wǎng)絡(luò)世界中，各種各樣的圖片組成了豐富多彩的頁面，能夠讓人們更直觀地感受網(wǎng)頁所要傳達(dá)給用戶的信息。本節(jié)介紹CSS設(shè)置圖片風(fēng)格樣式的方法，包括圖片的邊框、圖文混排等，并通過實例綜合文字、圖片的各種運用。11.5.1圖片的邊框圖11-13HTML控制邊框圖11-14語法提示圖11-15設(shè)置各種圖片邊框11.5.2課堂練習(xí)：制作圖文混排網(wǎng)頁Word中文字與圖片有很多排版方式，在網(wǎng)頁中同樣可以實現(xiàn)各種圖文混排的效果。圖11-16文字環(huán)繞11.6CSS設(shè)置頁面背景11.6.1背景顏色 在CSS中頁面的背景顏色就是簡單的通過設(shè)置“body”標(biāo)簽的“background-color”屬性來實現(xiàn)的，這在前些章節(jié)的例子中也反復(fù)用到。“background-color”屬性不僅僅可以設(shè)置頁面的背景顏色，幾乎所有HTML元素的背景色都可以通過它來設(shè)定。因此很多網(wǎng)頁都通過設(shè)定不同HTML元素的各種背景色來實現(xiàn)分塊的目的，如例11-15所示。圖11-17背景色給頁面分塊11.6.2背景圖片圖11-18背景圖案圖11-19背景圖片11.6.3背景圖的重復(fù) 在例11-14和例11-15中，背景圖案都是直接重復(fù)地鋪滿整個頁面，這種方式并不適用于大多數(shù)頁面。在CSS中可以通過“background-repeat”屬性設(shè)置圖片的重復(fù)方式，包括水平重復(fù)、豎直重復(fù)以及不重復(fù)等。以豎直方向重復(fù)為例，如例11-17所示。圖11-20豎直方向上重復(fù)11.6.4背景樣式綜合設(shè)置background也可以將各種關(guān)于背景的設(shè)置集成到一個語句上，這樣不僅可以節(jié)省大量代碼，而且加快了網(wǎng)絡(luò)下載頁面的速度。例如：background-color:red; /*背景顏色*/background-image:url(bg3.jpg); /*背景圖片*/background-repeat:no-repeat; /*背景不重復(fù)*/background-attachment:fixed; /*固定背景圖片*/background-position:8px7px; /*背景圖片起始位置*/以上代碼可以統(tǒng)一用一句background屬性代替，如下：background:redurl(bg3.jpg)no-repeatfixed8px7px;兩種屬性聲明的方法在顯示效果上是完全一樣的。第一種雖然冗長，但可讀性強于第二種方法，讀者可以根據(jù)自己的喜好選擇使用。11.7使用CSS設(shè)置超鏈接效果超鏈接是網(wǎng)頁上最普通不過的元素，通過超鏈接能夠?qū)崿F(xiàn)頁面的跳轉(zhuǎn)、功能的激活等，因此超鏈接也是與用戶打交道最多的元素之一。本節(jié)主要介紹超鏈接的各種效果，包括超鏈接的各種狀態(tài)、偽屬性、按鈕特效等。在HTML語言中，超鏈接是通過標(biāo)簽<a>來實現(xiàn)的，鏈接的具體地址則是利用<a>標(biāo)簽的href屬性，如下所示：圖11-21普通的超鏈接圖11-27無需表格的菜單例如例11-3所示的代碼。4CSS設(shè)置文字效果圖11-30區(qū)塊設(shè)置導(dǎo)航菜單的樣式風(fēng)格往往也決定了整個網(wǎng)站的樣式風(fēng)格，因此很多設(shè)計者都會投入很多時間和精力來制作各式各樣的導(dǎo)航條，從而體現(xiàn)網(wǎng)站的整體構(gòu)架。<h2>第一行標(biāo)題1</h2>在使用Word編輯文檔時，可以很輕松的設(shè)置行間距，在CSS中通過“l(fā)ine-height”屬性同樣可以輕松地實現(xiàn)行距的設(shè)置。8使用CSS設(shè)置項目列表網(wǎng)上的瀏覽器各式各樣，絕大多數(shù)瀏覽器對CSS都有很好的支持，因此設(shè)計者往往不用擔(dān)心其設(shè)計的CSS文件不被用戶所支持。然后創(chuàng)建文件1.圖11-11行間距示例8使用CSS設(shè)置項目列表圖11-30區(qū)塊設(shè)置它以HTML為基礎(chǔ)，提供了豐富的格式化功能，如字體、顏色、背景、整體排版等，并且網(wǎng)頁設(shè)計者可以針對各種可視化瀏覽器設(shè)置不同的樣式風(fēng)格，包括顯示器、打印機、打字機、投影儀、PDA等。【例11-7】導(dǎo)入式樣式顯然這種傳統(tǒng)的超鏈接樣式完全沒法滿足廣大用戶的需求。通過CSS可以設(shè)置超鏈接的各種屬性，包括前面章節(jié)提到的字體、顏色、背景等，而且通過偽類別還可以制作很多動態(tài)效果，首先用最簡單的方法去掉超鏈接的下劃線，如下所示：a{ /*超鏈接的樣式*/text-decoration:none; /*去掉下劃線*/}圖11-22沒有下劃線的超鏈接屬性說明a:link超鏈接的普通樣式風(fēng)格，即正常瀏覽狀態(tài)的樣式風(fēng)格a:visited被點擊過的超鏈接的樣式風(fēng)格a:hover鼠標(biāo)經(jīng)過超鏈接上時的樣式風(fēng)格a:active在超鏈接上單擊時，即“當(dāng)前激活”時，超鏈接的樣式風(fēng)格表11-1 CSS的類別這是一段很簡單的HTML代碼，并用CSS對<ul>標(biāo)簽進(jìn)行了樣式上的控制。圖11-30區(qū)塊設(shè)置<p>紫色、粗體、下劃線、25px的效果1</p>圖11-12首字放大<h2>第一行標(biāo)題1</h2>它將HTML頁面本身與CSS樣式風(fēng)格分離為兩個或者多個文件，實現(xiàn)了頁面框架HTML代碼與美工CSS代碼的完全分離，使得前期制作和后期維護(hù)都十分方便，網(wǎng)站后臺的技術(shù)人員與美工設(shè)計者也可以

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論