《網(wǎng)頁設(shè)計與制作》課件第3章_第1頁
《網(wǎng)頁設(shè)計與制作》課件第3章_第2頁
《網(wǎng)頁設(shè)計與制作》課件第3章_第3頁
《網(wǎng)頁設(shè)計與制作》課件第3章_第4頁
《網(wǎng)頁設(shè)計與制作》課件第3章_第5頁
已閱讀5頁，還剩82頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第三章層疊樣式表教學(xué)目標(biāo)通過本章的學(xué)習(xí)，掌握編寫CSS的設(shè)置規(guī)則和調(diào)用方法，理解各元素的樣式屬性，制作規(guī)范的文字、恰當(dāng)?shù)靥幚韴D片與背景。【知識目標(biāo)】掌握CSS樣式設(shè)置規(guī)則。掌握CSS樣式的調(diào)用方法。掌握CSS的繼承與層疊性的應(yīng)用。掌握文本屬性。【技能目標(biāo)】能正確應(yīng)用CSS規(guī)則，合理選擇CSS選擇器編寫CSS樣式。能根據(jù)網(wǎng)頁頁面效果要求，編寫CSS樣式效果。第三章層疊樣式表3.0任務(wù)描述及工作單3.1創(chuàng)建并引入樣式表3.2CSS的基礎(chǔ)選擇器類型3.3CSS文本樣式設(shè)置3.4任務(wù)案例——制作學(xué)院網(wǎng)站主頁3.5章節(jié)練習(xí)3.0任務(wù)描述及工作單HTML中創(chuàng)建并引入CSS非常簡單，HTML只是解決了網(wǎng)頁的基本結(jié)構(gòu)和內(nèi)容，當(dāng)你掌握CSS這個技術(shù)后，你可瞬間美化Web頁面，讓網(wǎng)頁變得多姿多彩。增加了CSS后，在互聯(lián)網(wǎng)的大千世界，隨處可見風(fēng)格迥異的網(wǎng)站。如包頭職業(yè)技術(shù)學(xué)機構(gòu)設(shè)置頁面所示。頁面包含導(dǎo)航條、標(biāo)題、文本、圖片、表格、列表等元素，需要進(jìn)行合理的美化設(shè)計，通過CSS美化設(shè)計完成的效果包頭職業(yè)技術(shù)學(xué)機構(gòu)設(shè)置頁面導(dǎo)航條標(biāo)題文本圖片表格列表3.1創(chuàng)建并引入樣式表CSS即層疊樣式表（CascadingStyleSheet），在網(wǎng)頁制作時采用層疊樣式表技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的控制。3.1創(chuàng)建并引入樣式表3.1.1CSS語法規(guī)則3.1.2創(chuàng)建并引入CSS的方式3.1.3CSS樣式繼承性和層疊性PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3.01CSS語法規(guī)則3.1.1CSS語法規(guī)則樣式表中的每條規(guī)則都有兩個主要部分：選擇器（selector）聲明塊（declarationblock）屬性屬性值：選擇器決定哪些元素受到影響：指定應(yīng)該做什么3.1.1CSS語法規(guī)則語法：選擇器{屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；…….}我們把語法規(guī)則中的重點部分標(biāo)記出來： 選擇器（Selector） 聲明體（Declaration） 花括號{}

屬性（Properties） 冒號:

屬性值（Value） 分號;3.1.1CSS語法規(guī)則編寫CSS樣式時，應(yīng)該注意以下幾點:1.盡量統(tǒng)一使用英文、英文簡寫或者統(tǒng)一使用拼音。2.盡量不縮寫、不用沒有實際意義的簡單字母。3.為了提高代碼的可讀性，通常加上CSS注釋，使用/*……*/進(jìn)行注釋。4.CSS樣式表中的類和id選擇器嚴(yán)格區(qū)分大小寫，屬性和屬性值不區(qū)分大小寫。5.多個屬性之間必須用英文狀態(tài)下的分號隔開，最后的分號可以省略。6.如果屬性的值由多個單詞組成且中間包含空格，則必須為這個屬性值加上英文狀態(tài)下的引號。3.1.1CSS語法規(guī)則在設(shè)計Web頁面時，為了提高代碼的可讀性，能夠直觀了解代碼的位置及其含義，所以在對元素進(jìn)行標(biāo)識時，要遵循常用CSS命名規(guī)則，名稱含義名稱含義header頁頭footer頁腳main頁面主體container容器wrapper或wrap頁面外圍控制\整體布局寬度aside或sidebar側(cè)邊欄nav導(dǎo)航subnav子導(dǎo)航left左側(cè)right右側(cè)loginbar登錄條logo標(biāo)志column欄目banner廣告hot熱點news新聞center中間content內(nèi)容menu菜單submenu子菜單download下載search搜索copyright版權(quán)scroll滾動list列表friendlink友情鏈接tab標(biāo)簽頁title欄目標(biāo)題guild指南msg提示信息vote投票register注冊PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3.02內(nèi)聯(lián)（行內(nèi)）樣式3.1.2創(chuàng)建并引入CSS的方式 內(nèi)聯(lián)（行內(nèi)）樣式 內(nèi)部（嵌入式）樣式 外部樣式3.1.2創(chuàng)建并引入CSS的方式1.內(nèi)聯(lián)（行內(nèi)）樣式內(nèi)聯(lián)樣式通常利用HTML元素的全局屬性style進(jìn)行樣式定義。語法：<標(biāo)簽名稱style=”樣式屬性1：屬性值1；樣式屬性2：屬性值2；…”>內(nèi)聯(lián)樣式適用于指定網(wǎng)頁內(nèi)的某一個元素的顯示規(guī)則，效果只可控制該標(biāo)簽。3.1.2創(chuàng)建并引入CSS的方式1.內(nèi)聯(lián)（行內(nèi)）樣式【例3-2】內(nèi)聯(lián)（行內(nèi)）樣式的使用，Example3-2.html，代碼如下：<body> <article>

<imgsrc="img/bz3.jpg"width="250"height="163"alt="向日葵圖片"

style="border:4pxsolidred"/> </article></body>代碼中<img>元素內(nèi)的style屬性設(shè)定了CSS邊框樣式，即寬度4px、實線、紅色邊框。PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3.03內(nèi)部（嵌入式）樣式13.1.2創(chuàng)建并引入CSS的方式2.內(nèi)部（嵌入式）樣式指頁面代碼內(nèi)嵌入CSS樣式代碼，它可以完整體現(xiàn)CSS語法規(guī)則的使用<style>標(biāo)簽一般放在<head>元素中。語法：<head><styletype=”text/css”>選擇器{樣式屬性：樣式值；…}</style></head>3.1.2創(chuàng)建并引入CSS的方式2.內(nèi)部（嵌入式）樣式【例3-3】內(nèi)部（嵌入式）樣式的使用，Example3-3.html，代碼如下：<html><head> <title>內(nèi)部（嵌入式）樣式</title>

<style> img{border:4pxsolidyellow;} </style></head><body> <article>

<imgsrc="img/bz3.jpg"width="250"height="163"alt="向日葵圖片"/> </article></body></html>3.1.2創(chuàng)建并引入CSS的方式2.內(nèi)部（嵌入式）樣式注意看示例代碼中的<style>元素，其內(nèi)部的樣式語句與我們之前講到的語句規(guī)則相同，img為選擇器，選擇的是<body>內(nèi)部的<img>元素。而花括號內(nèi)包含的語句，就是與內(nèi)聯(lián)樣式中style全局屬性相同的樣式。CSS的樣式語句可以包含若干個選擇器及其樣式聲明體，而且每個樣式間無需任何符號進(jìn)行間隔，一個回車換行就夠了。PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3.04內(nèi)部（嵌入式）樣式23.1.2創(chuàng)建并引入CSS的方式【例3-4】內(nèi)部（嵌入式）樣式的使用2，Example3-4.html，主要代碼如下：<style>body{font-size:16px;color:lightseagreen;}h1{color:goldenred;font:2rem;}img{border:4pxsolidred; }p{font-size:1.25em;}span{color:white;font-size:1.5rem;font-weight:bold;border-radius:10px;background-color:orangered;}</style><body><article><h1>內(nèi)部（嵌入式）樣式的使用2</h1><imgsrc="img/bz1.jpg"width="250"height="163"alt="綠色"/><imgsrc="img/bz2.jpg"width="250"height="100"alt="河山"/><p>內(nèi)部（嵌入式）樣式意指頁面代碼內(nèi)嵌入<span>CSS樣式代碼</span>，它可以完整體現(xiàn)<span>CSS語法規(guī)則</span>的使用。<p></article></body>PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3.05外部樣式3.1.2創(chuàng)建并引入CSS的方式3.外部樣式利用<link>標(biāo)簽可以引入外部CSS文件的樣式的步驟：（1）首先，在項目文件夾下新建一個名為css的文件夾；（2）然后在該文件夾下新建一個名為style.css的文件（文件名隨意，注意文件后綴.css）；（3）在項目的根目錄下新建一個HTML頁面文件（文件名隨意，注意文件后綴.html）；（4）開始編輯HTML頁面，并添加主體內(nèi)容；在頁面代碼的<head>元素內(nèi)增加<link>標(biāo)簽，代碼如下：<linktype="text/css"rel="stylesheet"href="css/style.css"><link>標(biāo)簽的href屬性值即引用外部CSS文件的位置。（5）開始編輯css文件夾下的style.css文件，添加樣式語句并保存；（6）點擊HTML頁面預(yù)覽結(jié)果。3.1.2創(chuàng)建并引入CSS的方式3.外部樣式我們需要將HTML代碼和CSS代碼分離，將CSS代碼單獨保存到某個或某幾個文件中，如果需要樣式修改時，只需要修改對應(yīng)的CSS文件即可，如果想增加新的樣式也簡單。HTML、CSS代碼分離的優(yōu)勢就是方便我們增加、修改和維護(hù)頁面代碼。3.1.2創(chuàng)建并引入CSS的方式3.外部樣式【例3-5】<link>標(biāo)簽引入外部CSS樣式文件，Example3-5.html，代碼如下：CSS代碼：*{font-family:sans-serif;line-height:1.15;}body{color:lightseagreen}h1{color:goldenrod;font-size:2rem;}img{border:4pxsolidred;}p{font-size:1.25em;}span{color:white;font-size:1.5rem;font-weight:bold;border-radius:10px;

background-color:orangered;}

3.1.2創(chuàng)建并引入CSS的方式3.外部樣式<head><title>link標(biāo)簽引入外部CSS樣式文件</title><linkrel="stylesheet"href="css/style.css"/></head><body><article><h1>link標(biāo)簽引入外部CSS樣式文件</h1><imgsrc="img/bz7.jpg"width="250"height="163"alt="圖片夜景"/><imgsrc="img/bz8.jpg"width="250"height="163"alt="圖片冬景"/><p>HTML外部樣式的核心——<span>代碼分離</span></p><p><br>我們需要<span>將HTML代碼和CSS代碼分離</span><br>將CSS代碼單獨保存到某個或某幾個文件中如果需要樣式修改時<br>只需要修改對應(yīng)的CSS文件即可</p></article></body>3.1.2創(chuàng)建并引入CSS的方式3.外部樣式通過修改外部樣式文件和代碼結(jié)構(gòu)，我們可以達(dá)到與內(nèi)部樣式相同的效果，該實例中只有一個HTML頁面，如果你有更多的HTML頁面也想使用相同的樣式，你只需要在<head>內(nèi)加一行<link>標(biāo)簽，而修改維護(hù)時僅需要修改你的style.css文件，就可以使所有的頁面樣式都產(chǎn)生變化。PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3-06CSS的繼承性3.1.3CSS樣式繼承性和層疊性CSS除了語法規(guī)則外，其核心內(nèi)容是樣式的層疊和繼承順序。Web頁面的美化是通過CSS樣式的層疊來實現(xiàn)的，從底層<html>開始，到<body>基本樣式定義，再到框架元素的布局，最終深化到某個具體子元素的樣式定義，這樣多重層疊之后呈現(xiàn)最終效果。3.1.3CSS樣式繼承性和層疊性1.CSS的繼承性2.CSS的層疊性3.1.3CSS樣式繼承性和層疊性1.CSS的繼承性CSS的繼承性是指被包含的子元素將擁有外層元素的某些樣式?！纠?-6】CSS繼承性，Example3-6.html，代碼如下：<html><head><title>CSS的繼承性</title>

<style>body{color:red；font-size：20px；background：#00FF00；}</style> </head> <body>

<p>CSS的繼承性,繼承body的樣式</p> </body></html><body>標(biāo)簽定義文本的顏色為紅色，文字大小為20px，背景顏色是綠色，段落<P>標(biāo)簽雖然沒有定義樣式，但是里面的文字會繼承body的樣式，最終顯示為紅色，大小為20px，背景顏色是綠色。這就是CSS的繼承性。3.1.3CSS樣式繼承性和層疊性1.CSS的繼承性在頁面顯示時，<body>標(biāo)簽定義文本的顏色為紅色，文字大小為20px，背景顏色是綠色，段落<P>標(biāo)簽雖然沒有定義樣式，但是里面的文字會繼承body的樣式，最終顯示為紅色，大小為20px，背景顏色是綠色。這就是CSS的繼承性。PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3-07CSS的層疊性3.1.3CSS樣式繼承性和層疊性2.CSS的層疊性CSS的層疊性是指多種CSS樣式的疊加?！緦嵗?-7】CSS的層疊性，Example3-7.html，代碼如下：<html><head><title>CSS的層疊性</title><style>body{color:black;font-size:40px；}p{text-decoration:underline;}span{color:red;}</style></head> <body> <p>CSS的<span>層疊性</span></p> </body></html>由于body標(biāo)簽定義文本的顏色為黑色，文字大小為40px,根據(jù)繼承性,段落＜p＞標(biāo)簽內(nèi)的文本會顯示為黑色，大小為40px。由于＜p＞標(biāo)簽選擇器定義文字修飾為下畫線，所以＜p＞標(biāo)簽內(nèi)的文本都會顯示下畫線。而＜span＞標(biāo)簽中的文字“CSS的”由于繼承＜body＞和＜p＞標(biāo)簽的樣式，也會顯示它們的樣式，但＜span＞標(biāo)簽也定義了文本顏色為紅色，這與body中的顏色沖突，這是根據(jù)優(yōu)先級來判斷?；镜呐袛嘣瓌t是：在同等條件下，距離元素越近優(yōu)先級越高3.1.3CSS樣式繼承性和層疊性2.CSS的層疊性由于body標(biāo)簽定義文本的顏色為黑色，文字大小為40px,根據(jù)繼承性,背景顏色是綠色，段落＜p＞標(biāo)簽內(nèi)的文本會顯示為黑色，大小為40px。由于＜p＞標(biāo)簽選擇器定義文字修飾為下畫線，所以＜p＞標(biāo)簽內(nèi)的文本都會顯示下畫線。而＜span＞標(biāo)簽中的文字“CSS的”由于繼承＜body＞和＜p＞標(biāo)簽的樣式，也會顯示它們的樣式，但＜span＞標(biāo)簽也定義了文本顏色為紅色，這與body中的顏色沖突，這是根據(jù)優(yōu)先級來判斷?；镜呐袛嘣瓌t是：在同等條件下，距離元素越近優(yōu)先級越高3.2CSS的基礎(chǔ)選擇器類型3.2.1什么是選擇器3.2.2選擇器的基礎(chǔ)類型PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3-08標(biāo)簽選擇器3.2.1什么是選擇器CSS的選擇器類似于連接器當(dāng)CSS樣式代碼與HTML代碼分離后，我們需要連接器將設(shè)定好的樣式應(yīng)用到對應(yīng)的元素上，以便使這些元素得以樣式體現(xiàn)。3.2.2選擇器的基礎(chǔ)類型1.標(biāo)簽選擇器2.

ID選擇器3.類選擇器4.標(biāo)簽指定式選擇器5.群組選擇器6.包含選擇器7.通配符選擇器3.2.2選擇器的基礎(chǔ)類型標(biāo)簽選擇器標(biāo)簽選擇器即我們之前使用過的一種基礎(chǔ)選擇器類型，它通常也作為文檔整體基礎(chǔ)樣式定義，它直接將樣式匹配到HTML各個標(biāo)簽，因此一般用于定義具有某種共性的樣式，例如字號、行高、字體族、字體顏色等等。語法：標(biāo)簽名{屬性1：屬性值1；屬性2；屬性值2；屬性3：屬性值3；…｝【例3-8】標(biāo)簽選擇器，Example3-8.html，代碼如下：<style>body{font:100%/1.3;background:#00FF00;}

h2{color:red;}</style><body><h1>3.2CSS的基礎(chǔ)選擇器類型</h1>

<h2>3.2.1什么是選擇器</h2>

<p>CSS的選擇器類似于連接器（Hook），當(dāng)CSS樣式代碼與HTML代碼分離后，我們需要連接器將設(shè)定好的樣式應(yīng)用到對應(yīng)的元素上，以便使這些元素得以樣式體現(xiàn)。</p>

<h2>3.2.2選擇器的基礎(chǔ)類型</h2>

<p>常用的基礎(chǔ)選擇器有標(biāo)簽選擇器、id選擇器、類選擇器、和通配符選擇器。</p></body>1.標(biāo)簽選擇器通過元素選擇器，將body內(nèi)所有元素的字體定義為100%字體大小，1.3倍行高的無襯線字體，并將h2元素字體顏色定義為紅色。PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3-09

ID選擇器3.2.2選擇器的基礎(chǔ)類型2.

ID選擇器id選擇器用于對某個單一元素定義單獨的樣式。id選擇器使用“#”進(jìn)行標(biāo)識，后面緊跟id名。語法：#id名｛屬性1：屬性值1;屬性2：屬性值2；屬性3：屬性值3；…｝。id主要用途是用來標(biāo)識元素的身份，它在頁面中具有唯一性。因此CSS就可以利用這一屬性，進(jìn)行不同元素的選擇。根據(jù)id屬性的特性來說，HTML頁面的元素不宜過多使用該屬性，一般會在頁面較大的塊級元素上定義該屬性。2.

ID選擇器【例3-9】id選擇器，Example3-9.html，代碼如下：<style>body{font-size:30px;}#colblue{color:blue;}#colred{color:red;}</style><body><h2id="colblue">3.2CSS的基礎(chǔ)選擇器類型</h2><h3id="colred">3.2.1什么是選擇器</h3><p>CSS的選擇器類似于連接器，當(dāng)CSS樣式代碼與HTML代碼分離后，<br>我們需要連接器將設(shè)定好的樣式應(yīng)用到對應(yīng)的元素上，以便使這些元素得以樣式體現(xiàn)。</p><h3>3.2.2選擇器的基礎(chǔ)類型</h3><p>常用的基礎(chǔ)選擇器有標(biāo)簽選擇器、id選擇器、類選擇器、和通配符選擇器。</p></body>通過元素選擇器，將body內(nèi)所有元素的字號設(shè)為30px，并將id值為colblue內(nèi)所有字體顏色設(shè)為藍(lán)色；將id值為colred內(nèi)所有字體顏色設(shè)定為紅色。PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3-10類選擇器3.2.2選擇器的基礎(chǔ)類型3.類選擇器類選擇器能夠把相同的元素分類定義成不同的樣式。定義類選擇器時，在自定義類的前面需要加一個英文點號“.”。語法：.類名｛屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；｝。與id屬性類似，HTML的元素具有另外一個全局屬性class，直譯為類。但它與id屬性不同點是，類不具有唯一性，其靈活性非常強，任何具有相同或相似特性元素都可歸為一類。3.類選擇器【例3-10】類選擇器，Example3-10.html，代碼如下：<head>

<title>類選擇器</title><style>

.font40{font-size:40px;}

.title{font-family:"微軟雅黑";}

.colblue{color:blue;}</style></head><body>

<pclass="font40colblue">3.2CSS的基礎(chǔ)選擇器類型</p>

<pclass="title">3.2.1什么是選擇器</span>

<pclass="colblue">3.2.2選擇器的基礎(chǔ)類型</p> </body>class屬性下的類名間以空格間隔開，而且如果多類名的樣式間沒有沖突，類名放置的先后順序沒有要求。本知識點內(nèi)容結(jié)束PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3-11

標(biāo)簽指定式選擇器3.2.2選擇器的基礎(chǔ)類型4.標(biāo)簽指定式選擇器標(biāo)簽指定式選擇器又稱交集選擇器，由兩個選擇器構(gòu)成，其中第1個為標(biāo)簽選擇器，第2個為class選擇器或id選擇器，兩個選擇器之間不能有空格。語法：標(biāo)簽名.類名｛屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；…｝標(biāo)簽名#id名｛屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；…｝4.標(biāo)簽指定式選擇器【實例3-11】標(biāo)簽指定式選擇器的使用，Example3-11.html，代碼如下：<style>

p{font-size:20px;}

.title{font-size:30px;}

p.title{font-size:40px;}</style><body>

<p>3.2CSS的基礎(chǔ)選擇器類型</p>

<spanclass="title">標(biāo)簽指定式選擇器</span>

<pclass="title">標(biāo)簽指定式選擇器</p></body><p>標(biāo)簽中的文本文字最小為20px<span>中的文本文字大小為30px。PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3-12

群組選擇器3.2.2選擇器的基礎(chǔ)類型5.群組選擇器群組選擇器是各個選擇器通過逗號連接而成的，標(biāo)簽選擇器、類選擇器、id選擇器都可以作為群組選擇器的一部分。如果在頁面中經(jīng)常某些元素需要使用相同的樣式規(guī)則，為了盡量減少代碼量，我們將這些選擇器組合起來共同設(shè)定某一特定樣式。5.群組選擇器【實例3-12】群組選擇器的使用，Example3-12.html，代碼如下：<title>群組選擇器</title><style>

div,.title,#content{text-decoration:line-through;}</style><body>

<p>CSS的基礎(chǔ)選擇器類型</p>

<spanclass="title">群組選擇器</span> <br>

<spanid="content">群組選擇器</p> </body>PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3-13

包含選擇器3.2.2選擇器的基礎(chǔ)類型6.包含選擇器包含選擇器用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。6.包含選擇器【實例3-13】包含選擇器的使用，Example3-13.html，代碼如下：

<style>

p{font-size:12px;}

.title{font-size:24px;}

p.title{font-size:36px;}</style><body><p>包含選擇器1</p><spanclass="title">包含選擇器2</span><pclass="title">包含選擇器3<br><spanclass=“title”>包含選擇器4</span></p></body>包含選擇器4PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3-14

通配符選擇器3.2.2選擇器的基礎(chǔ)類型7.通配符選擇器CSS的通配符選擇器是最為簡單的一種選擇器，不指代任何特定元素，僅用一個星號*就可以選擇全部文檔元素，一般用于文檔整體的基礎(chǔ)樣式定義。語法：*{屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；…}。7.通配選擇器【例3-14】通配符選擇器，Example3-14.html，CSS樣式如下：*{font-family:sans-serif;line-height:1.15;}設(shè)置所有元素的的字體族（font-family）定義為無襯線字體（sans-serif），行高（line-height）為1.15倍3.3CSS文本樣式設(shè)置為了方便控制網(wǎng)頁中文本的字體，針對HTML文本，CSS提供了一系列的字體樣式屬性，即font（字體）屬性和text（文本）屬性，這兩項屬性下有若干子屬性可供選擇。#屬性說明屬性值0line-height行高固定倍數(shù)值、百分比1font-family字體族詳見瀏覽器或系統(tǒng)內(nèi)置字體族2margin元素外邊距包括：margin-top/margin-left/margin-right/margin-bottom等樣式，以px、em、%等為單位的固定數(shù)值3text-align文本對齊方式固定值：left/right/center/justify等4height元素高度以px、em、%等為單位的固定數(shù)值5font-style字體樣式固定值：normal/italic/oblique等6font字體樣式總體特性包括：font-style/font-variant/font-weight/font-size/line-height/font-family/caption/icon/menu等等樣式，作為上述的所有樣式的集合簡寫PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3-15

font屬性系列3.3CSS文本樣式設(shè)置3.3.1font屬性系列3.3.2text屬性系列3.3CSS文本樣式設(shè)置3.3.1font屬性系列1.字號2.字體設(shè)置3.字體樣式4.小號大寫字母5.字重3.3.1font屬性系列font屬性系列是一個包含多個子樣式規(guī)則的集合，它可以通過樣式規(guī)則簡寫單獨使用，也可以分拆開利用子樣式規(guī)則設(shè)置樣式。#屬性說明屬性值0font-size字號xx-small\x-small\small等固定字號、px\em\rem\%等單位的自定義值1font-family字體族詳見瀏覽器或系統(tǒng)內(nèi)置字體族2font-style字體樣式固定值：normal/italic/oblique等3font-variant小號大寫字母包括：font-variant-caps,font-variant-numeric,font-variant-alternates,font-variant-ligatures,font-variant-east-asian等屬性，其值為固定值：normal,small-caps等4font-weight字重normal\bold\等固定字重、100-900自定義值5line-height行高固定倍數(shù)值、百分比3.3.1font屬性系列1.字號字號的大小屬性用作修改字體顯示的大小。每個瀏覽器針對各個HTML標(biāo)簽都有默認(rèn)的內(nèi)置字號大小，我們可以通過CSS的font-size屬性修改該項樣式規(guī)則。語法：font-size：大小取值。取值范圍： 常用的值px-像素|em-依賴父級元素|rem-依賴根元素|%-百分比，相對于父級元素；最常用的單位是像素（px）。 默認(rèn)的固定值選項xx-small|x-small|small|medium|large|x-large|xx-large。3.3.1font屬性系列2.字體設(shè)置font-family屬性用來設(shè)置字體，用于改變HTML標(biāo)簽或元素的字體;字體族屬性是通過一系列字體名稱定義網(wǎng)頁中的字體樣式;不同的操作系統(tǒng)、不同的瀏覽器存在一定差異;font-family屬性指定的是一個優(yōu)先級從高到低的可選字體列表，因此應(yīng)當(dāng)至少在font-family列表中添加一個通用的字體族名。語法：font-family：”字體1””字體2””字體3”；3.3.1font屬性系列3.字體樣式font-style屬性一般用來指定字體的特殊樣式，主要用于設(shè)置字體是否為斜體，它自身有固定的屬性值：語法：font-style：樣式的取值；取值范圍：normal|italic|oblique。normal-默認(rèn)值，標(biāo)準(zhǔn)字體樣式。italic-斜體字oblique-傾斜體。3.3.1font屬性系列4.小號大寫字母font-variant屬性用來設(shè)置英文字體是否顯示為小型的大寫字母。該樣式會將你原來文本中所有的小寫字母全部轉(zhuǎn)為大寫。語法：font-variant：取值；取值范圍：normal|small-caps. normal-默認(rèn)值，標(biāo)準(zhǔn)大寫字體樣式

small-caps-小號大寫字母3.3.1font屬性系列5.字重font-weight屬性設(shè)置字體粗細(xì)樣式。語法：font-weight:字體粗度值；取值范圍：normal|bold|bolder|lighter|number。

normal-（缺省值）表示正常粗細(xì)；

bold-表示粗體；

bolder表示特粗體；

lighter-表示特細(xì)體；

number-表示取數(shù)值,其范圍是100?900字體設(shè)置【實例3-15】字體設(shè)置，Example3-15.html，代碼如下：<style>

p{font-size:20px;font-family:"楷體";font-style:italic;font-weight:bolder;}

title{font-size:30px;}</style><body>

<h1class="title">font屬性系列是一個包含多個子樣式規(guī)則的集合，</h1>

<p>它可以通過樣式規(guī)則簡寫單獨使用，也可以分拆開利用子樣式規(guī)則設(shè)置樣式。<br>一般為了精確定義字體樣式，直接使用font屬性的情況相對較少。</p></body>3.3CSS文本樣式設(shè)置3.3.2text屬性系列font系列屬性一般針對HTML全篇文檔的字體樣式規(guī)則，而text屬性系列主要面向具體文本段落的樣式設(shè)置。#屬性說明屬性值0text-align文本對齊方向left/right/center等固定值1text-decoration文本修飾none/underline/overline/line-through/blink等固定值2text-indent文本縮進(jìn)自定義值或%3text-transform文本字母大小寫capitalize/uppercase/lowercase等固定值4letter-spacing字符間距自定義值5word-spacing字間距自定義值6white-space設(shè)置文本空字符屬性pre/nowrap/pre-wrap/pre-line等固定值7color文本字體顏色顏色名、十六進(jìn)制顏色值、rgb或rgbaPPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3-16

text屬性系列3.3CSS文本樣式設(shè)置3.3.2text屬性系列1.文本對齊方向2.文本修飾3.文本縮進(jìn)4.文本字母大小寫5.字符間距與字間距6.設(shè)置文本空字符屬性7.文本字體顏色8.行高3.3.2text屬性系列1.文本對齊方向文本對齊方向?qū)傩詔ext-align用來設(shè)置文本水平對齊方式。語法：text-align：排列值。取值范圍：left|right|center|justify|justify-all。text-align屬性有以下幾個固定屬性值：left-行內(nèi)內(nèi)容向左側(cè)邊對齊right-行內(nèi)內(nèi)容向右側(cè)邊對齊center-行內(nèi)內(nèi)容居中justify-文字向兩側(cè)對齊，對最后一行無效justify-all-和justify一致，但是強制使最后一行兩端對齊3.3.2text屬性系列2.文本修飾文字修飾屬性text-decoration主要用于對文本進(jìn)行修飾，如設(shè)置下劃線、上劃線、刪除線等。語法：text-decoration:修飾值；取值范圍：none|underline|overline|line-through。none-無修飾樣式，這是默認(rèn)屬性值；underline-下劃線；overline-文本之上的一條線；line-through-穿過文本的線，類似刪除線；3.3.2text屬性系列3.文本縮進(jìn)文本縮進(jìn)屬性text-indent主要用于設(shè)置文本行首的文字縮進(jìn)，用于定義HTML中塊級元素(如p、hl等)。語法：text-indent:縮進(jìn)值；取值范圍：文本的縮進(jìn)值必須是一個長度或一個百分比。若設(shè)定為百分比，則以上級元素的寬度而定，通常使用em為單位。3.3.2text屬性系列4.文本字母大小寫文本字母大小寫屬性text-transform主要針對英文等西文進(jìn)行樣式設(shè)定，除了文本中自有的大小寫文本外，可以通過該屬性控制全體或部分字母的大小寫規(guī)則。語法:text-transform:轉(zhuǎn)換值；取值范圍：none|capitalize|uppercase|lowercase。none-默認(rèn)值，不做規(guī)則定義capitalize-每個單詞首字母大寫uppercase-所有字母大寫lowercase-所有字母小寫3.3.2text屬性系列5.字符間距與字間距字符間距屬性letter-spacing與字間距屬性word-spacing是兩種截然不同而又相似的屬性，一個是用來控制每個字母的間距，另一個是用來控制每個詞的間距。語法：letter-spacing:取值；取值范圍：normal|<長度>。normal指正常間隔，是默認(rèn)選項；長度是設(shè)定單詞間隔的數(shù)值及單位，允許使用負(fù)值。3.3.2text屬性系列6.設(shè)置文本空字符屬性設(shè)置文本空字符屬性white-space用于設(shè)置頁面對象內(nèi)空白(包括空格和換行等)的處理方式。語法:white-space:值；取值范圍：normal|pre|nowrap|pre-wrap|pre-line。normal-默認(rèn)值。忽略多余的空字符pre-保留空字符，其結(jié)果類似HTML的pre元素nowrap-取消文本換行pre-wrap-保留連續(xù)的空字符pre-line-合并連續(xù)的空字符3.3.2text屬性系列7.文本字體顏色文本字體顏色屬性color用來表示文本的顏色。語法：color：顏色代碼；CSS中有自己內(nèi)置的顏色機制，目前常見的顏色機制包含以下幾種：顏色的關(guān)鍵字（英文名），例如：aqua、rebeccapurple、tomato等十六進(jìn)制，例如：#058a60等使用RGB代碼來表示。使用rgb（x,x,x）表示3.3.2text屬性系列8.行高line-height屬性，行高一般用于設(shè)置多行文本的行間高度，與Word中的行高工具類似。而對于塊級元素，一般指代盒內(nèi)元素行高。語法：line-height：屬性值；行高屬性值具體有：normal-默認(rèn)值，正常文本行高em-受父級元素影響%-收父級元素影響px-像素PPT模板下載：/moban/

網(wǎng)頁設(shè)計與制作知識點3-17

text屬性系列例題文本設(shè)置【實例3-16】文本設(shè)置，Example3-16.html，代碼如下：<style>

h1{color:red;text-align:center;font-family:"微軟雅黑";text-shadow:5px5px5px#CCC;}.enletter{letter-spacing:30px;}.enword{word-spacing:20px;}p{text-indent:2em;line-height:160%;}.p1{text-decoration:underline;}.p2{text-transform:lowercase;}.p3{width:500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}</style><body>

<h1><spanclass="enletter">TEXT屬性系列</span></h1>

<pclass="p1enword">CSS(CascadingStyleSheets)FONT系列屬性一般針對HTML全篇文檔的字體樣式規(guī)則</p>

<pclass="p2">而TEXT屬性系列主要面向具體文本段落的樣式設(shè)置。</p>

<pclass="p3">文本對齊方向?qū)傩訲ext-Align用來設(shè)置文本水平對齊方式。文字修飾屬性text-decoration主要用于對文本進(jìn)行修飾，如設(shè)置下畫線、上畫線、刪除線等。</p></body

溫馨提示

  • 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

提交評論