網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)（HTML5+CSS3）課件 第3章 CSS樣式設(shè)置_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)（HTML5+CSS3）課件 第3章 CSS樣式設(shè)置_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)（HTML5+CSS3）課件 第3章 CSS樣式設(shè)置_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)（HTML5+CSS3）課件 第3章 CSS樣式設(shè)置_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)（HTML5+CSS3）課件 第3章 CSS樣式設(shè)置_第5頁(yè)
已閱讀5頁(yè)，還剩17頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第3章

CSS樣式設(shè)置單擊此處添加副標(biāo)題目錄CSS概述01CSS樣式的定義和使用02CSS常見屬性及取值033.1CSS概述3.1.1CSS基本概念在網(wǎng)頁(yè)制作中，經(jīng)常需要設(shè)置統(tǒng)一的格式，例如為網(wǎng)站所有頁(yè)面設(shè)置整體的風(fēng)格、外觀，網(wǎng)頁(yè)內(nèi)部段落、圖片格式保持一致等等。這些格式可以使用統(tǒng)一的規(guī)范定義，即使用樣式表CSS來(lái)實(shí)現(xiàn)。CSS的全稱是層疊樣式表CSS(CascadingStyleSheets)，用來(lái)控制一個(gè)網(wǎng)頁(yè)文檔中的某文本區(qū)域外觀的一組格式屬性。3.1CSS概述CSS樣式一般存放于外部樣式表中或文檔的head區(qū)。使用CSS樣式不僅可以控制單個(gè)文檔中多個(gè)范圍文本的格式，而且可以控制多個(gè)文檔中文本的格式。定義好的一個(gè)樣式可以被反復(fù)使用；同樣的，修改了某個(gè)CSS樣式，在網(wǎng)頁(yè)中使用該樣式的內(nèi)容將全部都被修改。3.1.2CSS樣式基本組成CSS樣式由兩部分組成：選擇器和聲明。選擇器用于定義樣式的類別，聲明塊包含一條或多條用分號(hào)分隔的語(yǔ)句，用于定義具體的樣式。在下面的例子中，h1是選擇器，表示定義html的標(biāo)簽h1的樣式，后面用{}包含的是聲明，用于設(shè)置具體的樣式，在本例中，具體的樣式包括設(shè)置字體大?。╢ont-size）、字體類型(font-family)、顏色(color)和對(duì)齊方式(text-align)。3.1.2CSS樣式基本組成<head><styletype="text/css"><!--h1{font-size:30px;font-family:"楷體";color:#F66F0F;text-align:center;}--></style></head>h1樣式重新定義后，在文檔中所有使用h1(標(biāo)題1)定義的內(nèi)容將根據(jù)新的樣式顯示。<body><h1>姍姍的個(gè)人主頁(yè)</h1></body>3.2CSS樣式的定義和使用3.2.1CSS設(shè)計(jì)器“CSS設(shè)計(jì)器”是DreamweaverCC提供的可視化創(chuàng)建、編輯CSS樣式并進(jìn)行查錯(cuò)的工具。“CSS設(shè)計(jì)器”面板包含4個(gè)窗格：“源”、“@媒體”、“選擇器”和“屬性”（如圖所示）。

CSS設(shè)計(jì)器窗口“源”：允許創(chuàng)建、附加、定義和刪除內(nèi)部和外部樣式表。“@媒體”：用于定義媒體查詢，以支持多種類型的媒體和設(shè)備?！斑x擇器”：用于創(chuàng)建和編輯CSS規(guī)則、格式化頁(yè)面上的組件和內(nèi)容。選擇器主要有類選擇器、ID選擇器和html標(biāo)簽這三種基本類型，一旦創(chuàng)建了選擇器或規(guī)則，就定義了希望在“屬性”窗格中應(yīng)用的格式化效果。屬性：顯示所有可用的CSS屬性，在屬性窗口中設(shè)置具體的樣式。3.2.2樣式定義的基本選擇器樣式定義的基本選擇器包括類、id、標(biāo)簽和通配符，其他選擇器都是在這些選擇器的基礎(chǔ)上組合而成的。樣式設(shè)置在網(wǎng)頁(yè)制作中起著非常重要的作用，通過靈活應(yīng)用選擇器可以達(dá)到CSS控制頁(yè)面效果。1.類選擇器類選擇器以圓點(diǎn)（.）開頭，后面是用戶自定義的類名。在定義類的名字時(shí)，需要遵循一定的命名規(guī)范：以字母開頭，可包含字母、數(shù)字、下劃線。<!--定義類選擇器-->.biaoti{ font-family:"楷體"; font-size:36px; text-align:center;color：#ff0000;font-style：bold；/*設(shè)置字體為加粗*/}3.2.2樣式定義的基本選擇器2.ID選擇器ID選擇器僅應(yīng)用于一個(gè)HTML元素。ID選擇器和類選擇器的作用范圍不同，ID選擇器一般只應(yīng)用于一個(gè)元素的樣式定義，而類選擇器可以應(yīng)用于多個(gè)元素的樣式定義。ID選擇器以#開頭，后面是自定義的名字。例如下面的定義中，設(shè)置了名為“段落”的ID選擇器，#duanluo，樣式為楷體，字號(hào)為20px，對(duì)齊方式為居中。<!--定義ID選擇器-->#duanluo{font-family:“楷體";font-size:20px;text-align:center;}3.2.2樣式定義的基本選擇器3.HTML標(biāo)簽選擇器<!--定義HTML標(biāo)簽選擇器-->h1{font-size:30px;color:#0c3000;text-align:center;}3.2.3通配符選擇器如果要定義HTML頁(yè)面所有元素的樣式，可以使用通配符選擇器，通配符用（*）來(lái)表示。例如要設(shè)置所有元素的外邊距margin和內(nèi)邊距padding為0,使用方法如下：*{margin:0px;padding:0px;}需要注意的是，*會(huì)匹配所有元素，因此會(huì)影響網(wǎng)頁(yè)渲染的時(shí)間。3.2.4選擇器分組如果要對(duì)多個(gè)選擇器定義相同的樣式，可以將這多個(gè)選擇器用逗號(hào)隔開，然后定義樣式。例如下面的樣式定義中,.biaoti,h1,p{color:red;font-size:30px)為.biaoti、h1和p設(shè)置相同的樣式為字體大小30px,顏色為紅色。選擇器分組的寫法可以簡(jiǎn)化代碼，提高代碼可讀性。3.2.5復(fù)合選擇器的使用1.層次選擇器層次選擇器也稱為關(guān)系選擇器，它是通過HTML的文檔中各個(gè)元素之間的層次關(guān)系來(lái)定義樣式。常用的層次選擇器是包含（后代）選擇器，用于定義包含在某個(gè)元素內(nèi)的后代元素的樣式。其定義方法為將兩個(gè)或兩個(gè)以上的選擇器用空格分開，位置排在前面的是祖先元素，位置靠后的是后代元素。例如下面的代碼設(shè)置了包含在p里面的strong的樣式，為傾斜字體，顏色為紅色。pstrong{font-style:italic;color:#F00;}3.2.5復(fù)合選擇器的使用2.偽類選擇器偽類選擇器是一類特殊的選擇器，它定義了一些特殊區(qū)域或特殊狀態(tài)下的樣式。在網(wǎng)頁(yè)中最常見的是超鏈接的狀態(tài)定義。在網(wǎng)頁(yè)中，可以設(shè)置超鏈接文本的4種不同顯示狀態(tài)，包括正常鏈接、被訪問過的鏈接、鼠標(biāo)經(jīng)過時(shí)的狀態(tài)、超鏈接被激活時(shí)的狀態(tài)。這些設(shè)置，可以用偽類來(lái)實(shí)現(xiàn)。例如設(shè)置正常超鏈接顏色為紅色，a:link{color:#ff0000}。<styletype="text/css">a:link{color:#ff0000}

/*正常超鏈接狀態(tài)*/a:visited{color:#00ff00}

/*已訪問超鏈接狀態(tài)*/a:hover{color:#0000ff}/*鼠標(biāo)經(jīng)過狀態(tài)*/a:active{ff00ff}/*超鏈接啟動(dòng)時(shí)狀態(tài)*/

</style>3.2.6外部樣式表的定義和使用如果要定義統(tǒng)一的樣式，提供多個(gè)頁(yè)面使用，可以把共同需要的一些樣式，保存在一個(gè)單獨(dú)的樣式表文件中，例如style1.css任何一個(gè)頁(yè)面需要用到這些樣式，只需要在<head></head>區(qū)，添加<linkrel="stylesheet"href="style2.css">，即可導(dǎo)入樣式。3.2.7CSS優(yōu)先級(jí)1.行內(nèi)樣式優(yōu)先于內(nèi)部樣式表，內(nèi)部樣式表優(yōu)先于外部樣式表。2.就近原則靠近元素的樣式具有最大優(yōu)先權(quán)。當(dāng)多種不同的樣式規(guī)則應(yīng)用在同一元素上時(shí)，則靠近元素的樣式具有最大的優(yōu)先級(jí)。3.3CSS常見屬性及取值CSS屬性主要包括文本屬性、邊框?qū)傩院筒季謱傩?。本?jié)重點(diǎn)介紹常見的各個(gè)屬性。3.3.1文本屬性邊框?qū)傩灾饕ㄟ吙蝾愋蚥order-style、粗細(xì)border-width和顏色border-color，這些屬性又可以按照上下左右四個(gè)方位包含很多屬性。3.3.2邊框?qū)傩圆季謱傩灾饕糜趯?duì)元素的定位

溫馨提示

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

評(píng)論

0/150

提交評(píng)論