HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊3 新聞中心模塊樣式美化_第1頁
HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊3 新聞中心模塊樣式美化_第2頁
HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊3 新聞中心模塊樣式美化_第3頁
HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊3 新聞中心模塊樣式美化_第4頁
HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊3 新聞中心模塊樣式美化_第5頁
已閱讀5頁，還剩92頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

模塊3“新聞中心模塊樣式美化”在網(wǎng)頁開發(fā)中，為了讓用戶更好地瀏覽頁面信息，需要通過CSS樣式對內(nèi)容進(jìn)行布局和美化。之前的內(nèi)容和樣式在頁面上的分布是交錯結(jié)合的，其查看與修改很不方便，而現(xiàn)在把內(nèi)容結(jié)構(gòu)和樣式控制分離，HTML負(fù)責(zé)內(nèi)容構(gòu)成，CSS樣式負(fù)責(zé)實(shí)現(xiàn)所有頁面格式控制。本模塊將使用CSS樣式表對新聞中心模塊的樣式進(jìn)行美化。新聞詳情頁的樣式表配置任務(wù)11.1

CSS使用基礎(chǔ)CSS（CascadingStyleSheets，層疊樣式表）是一種能為網(wǎng)頁設(shè)置樣式的計算機(jī)語言。它能為網(wǎng)頁設(shè)置字體樣式、顏色、背景，甚至是華麗的動畫與3D效果。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。1．CSS規(guī)則CSS規(guī)則由選擇器和聲明塊組成，如圖3-1所示。圖3-1

CSS規(guī)則1.1.1

CSS規(guī)則其中，選擇器指向需要設(shè)置樣式的HTML元素。聲明塊包含一條或多條用分號分隔的聲明，聲明塊由{}包裹。每條聲明都包含一個CSS屬性名和一個值，以冒號分隔。多條CSS聲明用分號分隔。CSS的注釋使用符號“/**/”。例如：h1{/*h1的文字顏色為紅色*/

color:red}1.1

CSS使用基礎(chǔ)2．CSS樣式引用方式（1）行內(nèi)樣式。行內(nèi)樣式就是直接把CSS代碼添加到HTML標(biāo)簽中，即作為HTML標(biāo)簽的屬性標(biāo)簽存在的引用方式。使用這種方式可以很簡單地對某個元素單獨(dú)定義樣式。需要注意的是，行內(nèi)樣式僅作用于該元素本身。例如：<pstyle="font-size:14px;">標(biāo)題一</p><pstyle="font-size:18px;">標(biāo)題二</p>1.1.2

CSS樣式引用方式運(yùn)行以上代碼后，瀏覽器的顯示效果如圖3-2所示。圖3-2行內(nèi)樣式效果1.1.2CSS樣式引用方式（2）內(nèi)部樣式。內(nèi)部樣式就是把樣式寫在<head>標(biāo)簽中，并用<style>標(biāo)簽進(jìn)行聲明的引用方式。內(nèi)部樣式可以被本頁面中的多個標(biāo)簽引用。例如：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>內(nèi)部樣式</title><styletype="text/css">div{font-size:24px;}</style></head><body><div>內(nèi)部樣式</div></body></html>type屬性用于指定<style>標(biāo)簽之間的內(nèi)容值類型。"text/css"表示內(nèi)容是標(biāo)準(zhǔn)的CSS。1.1.2CSS樣式引用方式（3）外部樣式表。如果CSS樣式被放置在網(wǎng)頁文件外部的文件中，則將其稱為外部樣式表。外部樣式表文件的后綴名為.css，可以被多個HTML文件引用。其引入方式如下。①使用<link>標(biāo)簽引入。外部樣式表可以通過<link>標(biāo)簽在頭文件中引入。例如：<linkrel="stylesheet"href="style.css"type="text/css">其中，rel屬性用于規(guī)定當(dāng)前文件與被鏈接文件之間的關(guān)系，rel="stylesheet"表示關(guān)聯(lián)文件為樣式表。href屬性規(guī)定的超鏈接目標(biāo)地址建議使用相對路徑。②使用@import關(guān)鍵字引入。外部樣式表還可以通過在頭文件中的<style>標(biāo)簽內(nèi)使用@import關(guān)鍵字引入。例如：1.1.2CSS樣式引用方式<styletype="text/css">@importurl("style.css");</style>或者簡寫為：<styletype="text/css">@import"style.css";</style>1.1.2CSS樣式引用方式（4）外部樣式表引入方式對比。在實(shí)際開發(fā)過程中，我們一般使用<link>標(biāo)簽引入外部樣式表。因?yàn)檫@種方式可以將CSS和HTML代碼分離，使代碼更易于閱讀。同時，多個HTML文件可以使用同一個外部樣式表文件，且只需下載一次，即可解決樣式復(fù)用的問題。1.1.2CSS樣式引用方式（5）CSS引用方式的優(yōu)先級。如果頁面中存在多種CSS引用方式，那么最終樣式該由誰決定呢？一般而言，當(dāng)頁面中存在多種CSS引用方式時，行內(nèi)樣式的優(yōu)先級最高。如果頁面中僅有內(nèi)部樣式、使用<link>標(biāo)簽引入的外部樣式表和使用@import關(guān)鍵字引入的外部樣式表，則后聲明的優(yōu)先級更高（就近原則）。新聞詳情頁的樣式表配置任務(wù)1任務(wù)實(shí)施（1）在工程項(xiàng)目根目錄的css文件夾中新建news.css文件。（2）在news.html頁面的頭文件中引入該樣式表。<linkrel="stylesheet"href="../css/news.css"type="text/css">

注意，正確書寫樣式表的相對路徑。如何快速檢查樣式表是否被正確引入呢？我們可以在瀏覽器中預(yù)覽news.html頁面，并按快捷鍵“F12”打開開發(fā)者工具窗口。檢查“控制臺”窗口中是否有錯誤提示。如果出現(xiàn)ERR_FILE_NOT_FOUND的報錯信息，則說明引用路徑書寫錯誤，如圖3-3所示。圖3-3路徑書寫錯誤提示新聞詳情頁的美化任務(wù)22.1

CSS基本選擇器1．基本選擇器（1）標(biāo)簽選擇器。標(biāo)簽選擇器以網(wǎng)頁標(biāo)簽作為選擇器。例如，選擇所有<p>標(biāo)簽，設(shè)置其文字大小為32px。<style>p{font-size:32px;}</style><p>段落文本一</p><p>段落文本二</p><p>段落文本三</p><p>段落文本四</p>2.1.1基本選擇器（2）類選擇器。類選擇器主要用于選擇一些引用了相同樣式的元素，使用時需要設(shè)置具體的文檔標(biāo)記，以便類選擇器正常工作。其具體使用方法如下。為標(biāo)簽添加class屬性，class屬性值為類名。<pclass="text">文本樣式</p>在外部樣式表或內(nèi)部樣式中通過“.類名”的方式進(jìn)行樣式綁定。.text{font-size:32px;color:pink;}2.1.1基本選擇器（3）id選擇器。id選擇器的使用方法和類選擇器一致，需要注意的是，標(biāo)簽的id屬性值具有唯一性。使用id選擇器時需要先設(shè)置id屬性值，再通過“#id名”的方式進(jìn)行樣式綁定。例如：<style>#text{font-size:32px;color:red;}</style><pid="text">文本樣式</p>2.1.1基本選擇器使用id選擇器需要注意以下幾點(diǎn)。

id名是唯一的，不允許在同一個文件中有相同的id名。

id選擇器不能組合使用，否則該標(biāo)簽上設(shè)置的所有樣式都將失效。例如：<style>#text{font-size:32px;}#red{color:red;}</style><pclass="textred">文本樣式</p>

id選擇器和類選擇器的名稱區(qū)分大小寫。2.1.1基本選擇器（4）群組選擇器(或稱并集選擇器)。群組選擇器也叫并集選擇器，是由多個選擇器通過逗號連接在一起的。群組選擇器的成員可以是標(biāo)簽選擇器、類選擇器或id選擇器等。群組選擇器能夠同時給多個選擇器應(yīng)用同一種樣式。例如，將下列元素的文字統(tǒng)一設(shè)置為斜體：<style>h4,p,.italic,#italic{font-style:italic;}</style><h4>標(biāo)題標(biāo)簽</h4><p>段落標(biāo)簽</p><divclass="italic">塊級元素</div><spanid="italic">行內(nèi)元素</span>2.1.1基本選擇器運(yùn)行以上代碼后，瀏覽器的顯示效果如圖3-4所示。圖3-4群組選擇器使用效果2.1.1基本選擇器（5）全局選擇器。全局選擇器可以用于設(shè)置所有標(biāo)簽使用同一樣式。例如，設(shè)置頁面中所有元素文字顏色為紅色：*{color:red}2.2

CSS層級選擇器1．后代選擇器在HTML中，被包裹的元素是包裹元素的后代元素，包裹元素是被包裹元素的祖先元素。例如：<div><pclass="p"><span>你好</span></p></div>2.2.1后代選擇器div元素是p元素的父元素，p元素是div元素的子元素。p元素是span元素的父元素，span元素是p元素的子元素。div元素是p元素和span元素的祖先元素，p元素和span元素是div元素的后代元素。在使用后代選擇器時，兩個選擇器之間使用空格隔開，例如，以下代碼表示選擇div元素的所有span后代元素，并設(shè)置文字大小為30px、顏色為紫色：<style>divspan{font-size:30px;color:purple;}</style><div><pclass="p"><span>你好</span></p></div>2.2.1后代選擇器后代選擇器有一個容易被忽視的問題，即兩個元素之間的層次間隔可以是無限的。例如，當(dāng)我們使用“divspan”時，這個語法就會從div元素下選擇所有的span元素，而不論span元素的嵌套層次有多深。2.2.2子元素選擇器如果我們不希望選擇任何后代元素，而是縮小范圍，只選擇某個元素的子元素，則可以使用子元素選擇器，且使用子元素選擇器時，兩個選擇器之間需添加“>”符號。例如，將第一行中h1元素下的strong子元素的背景顏色設(shè)置為紅色，可以這樣寫：<style>h1>strong{background:red;}</style><h1>

這是<strong>強(qiáng)調(diào)</strong>標(biāo)簽</h1><h1>

這是

<em><strong>強(qiáng)調(diào)</strong></em>

標(biāo)簽</h1>2.2.2子元素選擇器只有第一行中h1元素下的strong子元素的背景顏色被設(shè)置為紅色，而第二行中h1元素下的后代元素strong并未受影響，如圖3-5所示。圖3-5子元素選擇器使用效果2.2.2子元素選擇器需要注意的是，子元素選擇器符號兩邊可以有空格符，因此以下寫法都沒有問題：<style>h1>strong{}h1>strong{}h1>strong{}h1>strong{}</style>2.2.3偽類選擇器偽類選擇器主要用于定義特殊狀態(tài)下的樣式，只有當(dāng)用戶和網(wǎng)站發(fā)生交互時才能體現(xiàn)出來，如表3-1所示。表3-1偽類選擇器及其描述偽類選擇器描述:link用于選取未被訪問的鏈接:visited用于選取已訪問鏈接:hover用于選取鼠標(biāo)指針浮動在上面的元素:active用于選取激活的鏈接2.2.3偽類選擇器例如：<style>a:link{color:pink;/*文字鏈接默認(rèn)為粉色*/}a:visited{color:red;/*文字鏈接被訪問后變?yōu)榧t色*/}a:hover{color:green;/*鼠標(biāo)指針移動到鏈接文字上變?yōu)榫G色*/}a:active{color:blue;/*鼠標(biāo)單擊時鏈接文字為藍(lán)色*/}</style><ahref="/">跳轉(zhuǎn)百度</a><br><inputtype="text">注意：在CSS定義中，a:hover必須被放置在a:link和a:visited之后才是有效的。a:active必須被放置在a:hover之后才是有效的。偽類選擇器的名稱不區(qū)分大小寫。2.3

CSS三大特性1．繼承性CSS的繼承性是指它允許樣式不僅應(yīng)用于特定的HTML元素，而且應(yīng)用于其后代元素。合理使用繼承性可以有效減少CSS代碼。注意，不是所有屬性都可以繼承，常見的可繼承屬性如下。字體系列屬性，如font、font-family、font-size、font-style、font-weight等。文本系列屬性，如text-align，line-height，color，text-indent等。元素可見性visibility。表格布局屬性，如border-collapse、border-spacing等。列表屬性，如list-style-image、list-style-position、list-style。光標(biāo)屬性cursor。2.3.1繼承性常見的不可繼承屬性如下。

display屬性。部分文本屬性，如vertical-align、text-decoration、text-shadow等。盒模型屬性，如width、height、margin、border、padding等。背景屬性，如background、background-position、background-attachment等。定位屬性，如float、clear、position、overflow、z-index等。生成內(nèi)容屬性，如content、counter-reset、counter-increment等。輪廓樣式屬性，如outline-style、outline-width、outline-color、outline等。2.3.1繼承性例如，當(dāng)我們?yōu)閐iv元素設(shè)置文字大小為40px時，該文字屬性將被其子元素p繼承。<style>div{font-size:40px;color:red}</style><div><p>您好</p></div>2.3

CSS三大特性2．層疊性層疊性是CSS的一個基本特征，是指多個CSS樣式的疊加。CSS的層疊性是如何體現(xiàn)的呢？我們通過以下兩個案例進(jìn)行說明。【案例一】元素層疊樣式無沖突：<style>.weight{font-weight:bolder;}.italic{font-style:italic;}</style><pclass="weightitalic">CSS層疊性</p>2.3.2層疊性在以上代碼中，元素層疊樣式并無沖突，兩個選擇器中的樣式都層疊到了p元素中，最終呈現(xiàn)了加粗、斜體的段落文本效果，如圖3-6所示。圖3-6樣式層疊效果2.3.2層疊性【案例二】元素層疊樣式存在沖突：<style>.weight{font-weight:bolder;}.lighter{font-weight:lighter;}</style>

<pclass="weightlighter">CSS層疊性</p>2.3.2層疊性在以上代碼中，同級別的樣式代碼存在沖突，兩個選擇器均定義了font-weight屬性，則以CSS代碼中最后定義的樣式為準(zhǔn)。p元素最終呈現(xiàn)為細(xì)體樣式，效果如圖3-7所示。圖3-7樣式覆蓋效果2.3.3優(yōu)先級所謂優(yōu)先級，是指CSS樣式在瀏覽器中被解析的先后順序。當(dāng)HTML元素中的多條CSS規(guī)則存在樣式?jīng)_突時，將以優(yōu)先級最高的規(guī)則決定元素樣式。例如：<style>.weight{font-weight:bolder;}p{font-weight:lighter;}</style><pclass="weight">優(yōu)先級</p>2.3.3優(yōu)先級運(yùn)行以上代碼后，瀏覽器的顯示效果如圖3-8所示。圖3-8樣式優(yōu)先級展示效果2.3.3優(yōu)先級在以上代碼中，雖然在CSS的末尾聲明了“font-weight:lighter”，但是文本最終呈現(xiàn)的卻是粗體的樣式，這是什么原因引起的呢？這種現(xiàn)象主要是由CSS的優(yōu)先級引起的。在之前的任務(wù)中，我們學(xué)習(xí)了CSS的引用優(yōu)先級，現(xiàn)在我們一起來認(rèn)識一下在同一個樣式表中，優(yōu)先級規(guī)則是如何被定義的。首先我們需要引入一個概念——權(quán)值（權(quán)重）。在CSS中，每種選擇器都具有相應(yīng)的權(quán)值，具體情況如表3-2所示。表3-2

CSS中的選擇器及其權(quán)值選擇器權(quán)值通配符選擇器（*）0標(biāo)簽選擇器1類選擇器、偽類選擇器10id選擇器100行內(nèi)樣式10002.3.3優(yōu)先級如果各選擇器的權(quán)值相同，則使用就近原則，即離被設(shè)置元素越近優(yōu)先級越高；如果各選擇器的權(quán)值不同，則權(quán)值高的選擇器優(yōu)先級更高。例如，在上一個案例中，類選擇器（.weight{}）的權(quán)值為10，標(biāo)簽選擇器（p{}）的權(quán)值為1，所以最終<p>標(biāo)簽呈現(xiàn)的是類選擇器中定義的樣式規(guī)則?，F(xiàn)在我們來看一些更為復(fù)雜的計算規(guī)則。2.3.3優(yōu)先級<style>.titlep{font-weight:bolder;font-style:italic;}divp{font-weight:lighter;font-style:normal;}</style><divclass="title"><pclass="content">CSS優(yōu)先級</p></div>（1）復(fù)合選擇器權(quán)值計算規(guī)則。在復(fù)合選擇器中，如“div>.red”或“divp”，是如何計算權(quán)值的呢？我們可以使用如下公式：總權(quán)值=A×N+B×M其中，A、B代表不同類型的選擇器，N、M代表各選擇器的數(shù)量。例如：2.3.3優(yōu)先級圖3-9復(fù)合選擇器權(quán)值計算運(yùn)行以上代碼后，瀏覽器的顯示效果如圖3-9所示。根據(jù)公式計算，“.titlep”的權(quán)值為10×1+1×1=11。“divp”的權(quán)值為1×1+1×1=2，所以雖然“.titlep”聲明的位置距離HTML元素較遠(yuǎn)，但其權(quán)值較大，優(yōu)先級較高，最終呈現(xiàn)的樣式規(guī)則依然以它為準(zhǔn)。2.3.3優(yōu)先級<style>p{font-style:italic!important;}</style><divclass="title"><pstyle="font-style:normal;">important優(yōu)先級最高</p></div>（2）!important規(guī)則。!important是CSS的一個規(guī)則，其優(yōu)先級最高，將覆蓋任何其他聲明。例如:2.3.3優(yōu)先級行以上代碼后，瀏覽器的顯示效果如圖3-10所示。圖3-10

!important具有最高優(yōu)先級我們發(fā)現(xiàn)，雖然<p>標(biāo)簽使用了行內(nèi)樣式，但是最終呈現(xiàn)的效果依然由標(biāo)簽選擇器決定，這是因?yàn)?important覆蓋了其他聲明?！咀⒁狻款l繁使用!important是一個不好的習(xí)慣，因?yàn)?important優(yōu)先級最高，將覆蓋任何其他聲明，而這破壞了樣式表中的固有的優(yōu)先級規(guī)則，使得調(diào)試變得更加困難。2.4

CSS命名規(guī)則為了便于團(tuán)隊開發(fā)，在CSS的樣式命名中，建議大家遵循一些約定俗成的規(guī)則。采用英文字母、數(shù)字，以及-和_進(jìn)行命名。以小寫字母開頭，不以數(shù)字或-、_符號開頭。使用具有一定意義的單詞。對于多單詞組合，可使用連字符、下畫線連接或使用駝峰命名法。2.5

CSS文字樣式合理的文字與文本樣式設(shè)置，可以讓網(wǎng)頁更加美觀。CSS文字與文本屬性可用于設(shè)置文字的大小、顏色、字體、粗細(xì)，以及文本的間距、對齊方式、行高等內(nèi)容。下面我們一起來了解一下CSS的文字與文本樣式屬性。1．font-size該屬性用于指定文字的大小。當(dāng)不設(shè)置該屬性時，文字大小為瀏覽器默認(rèn)值。一般而言，瀏覽器默認(rèn)的文字大小為16px。需要注意的是，不同瀏覽器有不同的最小字號限制，例如，谷歌瀏覽器的最小字號為12px，當(dāng)font-size屬性的值低于12px時，瀏覽器依然按照12px的字號來顯示文字。2.5

CSS文字樣式2．font-family該屬性允許我們?yōu)轫撁嫔系奈淖种付ㄒ粋€由@font-fac規(guī)則定義的字體族。font-family屬性的值可以是單個或多個字體，當(dāng)其值是多個字體時，須用英文逗號隔開這些字體，并對含有空格或中文的字體名用引號括起。如果瀏覽器不支持指定的第一個字體，則嘗試使用下一個字體。2.5.2

font-family<style>p{font-family:'microsoft

yahei',Courier,'宋體';}</style><div><p>您好</p></div>例如，設(shè)置<p>標(biāo)簽字體：2.5

CSS文字樣式3．font-weight該屬性用于指定文字的粗細(xì)，其取值如表3-3所示。表3-3

font-weight屬性的取值需要注意的是，部分字體只能使用normal和bold兩種值。值描述normal默認(rèn)值，定義標(biāo)準(zhǔn)粗細(xì)的字符bold定義粗體字符bolder定義更粗的字符lighter定義更細(xì)的字符100～900定義由細(xì)到粗的字符。其中400等同于normal，700等同于boldinherit從父元素繼承文字的粗細(xì)2.5

CSS文字樣式4．font-style該屬性用于指定文字的字體樣式，其取值如表3-4所示。表3-4

font-style屬性的取值值描述normal默認(rèn)值。瀏覽器會顯示一個標(biāo)準(zhǔn)的字體樣式italic瀏覽器會顯示一個斜體的字體樣式oblique瀏覽器會顯示一個傾斜的字體樣式inherit從父元素繼承字體樣式2.5.4

font-styleitalic和oblique區(qū)別如下。

italic用于設(shè)置字體樣式，如果該字體沒有斜體樣式，則該屬性無效。

oblique用于針對文字本身設(shè)置傾斜效果，即使該字體不具有斜體樣式，也能產(chǎn)生文字傾斜效果。2.5

CSS文字樣式5．font-variant該屬性能夠?qū)⑿懽帜皋D(zhuǎn)換為大寫字母，但與其他未使用該屬性的文字相比，使用該屬性的文字的字體尺寸更小。該屬性的取值如表3-5所示。表3-5

font-variant屬性的取值值描述normal默認(rèn)值。瀏覽器顯示一個標(biāo)準(zhǔn)的字體樣式

small-caps瀏覽器會顯示小型大寫字母的字體inherit從父元素繼承font-variant屬性的值2.5

CSS文字樣式6．fontfont屬性可以用來作為font-style、font-variant、font-weight、font-size和font-family屬性的簡寫，或?qū)⒃氐淖煮w設(shè)置為系統(tǒng)字體。在使用該屬性時，請注意前3個值的順序可以任意調(diào)換，但是font-family必須在font-size后面，且需要同時設(shè)置font-size和font-family，該屬性才能起作用。示例：p{font:bolditalicsmall-caps30px"黑體"}2.6

CSS文本樣式1．text-align該屬性用于定義元素中的文本的水平對齊方式，其取值如表3-6所示。表3-6

text-align屬性的取值值描述left文本居左對齊。默認(rèn)值由瀏覽器決定right文本居右對齊center文本居中對齊justify文本兩端對齊inherit從父元素繼承

text-align

屬性的值需要注意的是，justify值對換行后的末行文本無效（如果僅有一行文本，該值也無效）。2.6

CSS文本樣式2．text-align-last該屬性描述的是一段文本中最后一行在被強(qiáng)制換行之前的對齊規(guī)則，如表3-7所示。表3-7

text-align-last屬性的取值值描述auto默認(rèn)值。最后一行被調(diào)整，并向左對齊left最后一行向左對齊right最后一行向右對齊center最后一行居中對齊justify最后一行兩端對齊start最后一行在行開頭對齊（如果

text-direction

是從左到右的，則向左對齊；如果

text-direction

是從右到左的，則向右對齊）end最后一行在行末尾對齊（如果

text-direction

是從左到右的，則向右對齊；如果

text-direction

是從右到左的，則向左對齊）2.6

CSS文本樣式3．line-height該屬性用于設(shè)置行間距（行高），其取值如表3-8所示。表3-7

text-align-last屬性的取值值描述normal默認(rèn)值。設(shè)置合理的行間距數(shù)字無單位數(shù)字。將該數(shù)字與當(dāng)前的字體尺寸相乘的結(jié)果作為行間距，這是設(shè)置line-height的推薦方法長度設(shè)置固定的行間距，如50px百分比基于當(dāng)前字體尺寸的百分比行間距。如果當(dāng)前元素沒有設(shè)置字體尺寸，將基于父元素的字體尺寸來計算inherit從父元素繼承

line-height

屬性的值2.6

CSS文本樣式4．vertical-align該屬性用于指定行內(nèi)元素或表格中單元格元素的垂直對齊方式，其取值如表3-9所示。表3-9

vertical-align屬性的取值值描述baseline默認(rèn)值。將元素放置在父元素的基線上sub使元素的基線與父元素的下標(biāo)基線對齊super使元素的基線與父元素的上標(biāo)基線對齊top使元素及其后代元素的頂部與整行的頂部對齊text-top使元素的頂部與父元素的字體頂部對齊middle使元素的中部與父元素的基線加上父元素x-height（x字母高度）的一半對齊bottom使元素及其后代元素的底部與整行的底部對齊text-bottom使元素的底部與父元素的字體底部對齊長度值使元素的基線對齊到父元素的基線之上的給定長度值?？梢允秦?fù)數(shù)百分比使元素的基線對齊到父元素的基線之上的給定百分比，該百分比是line-height屬性的百分比?？梢允秦?fù)數(shù)inherit從父元素繼承vertical-align屬性的值2.6

CSS文本樣式5．word-spacing該屬性用于增加或減少單詞間的空白，其取值如表3-10所示。值描述normal默認(rèn)值。定義單詞間的標(biāo)準(zhǔn)空間length定義單詞間的固定空間inherit從父元素繼承

word-spacing

屬性的值表3-10

word-spacing屬性的取值2.6.5

word-spacing<pstyle="word-spacing:30px;">Thisissometext</p><pstyle="word-spacing:-2px;">Thisissometext</p>將word-spacing屬性的值設(shè)置為normal等同于將單詞間的空白設(shè)置為0。該屬性允許指定負(fù)長度值，這會讓單詞之間更緊湊，如圖3-11所示。圖3-11

word-spacing屬性設(shè)置效果需要注意的是，當(dāng)兩個中文字符間沒有空白符時，該屬性不起作用。2.6

CSS文本樣式6．letter-spacing該屬性用于增加或減少字符間距，其取值如表3-11所示。表3-11

letter-spacing屬性的取值值描述normal默認(rèn)值。定義字符間的標(biāo)準(zhǔn)空間length定義字符間的固定空間inherit從父元素繼承l(wèi)etter-spacing屬性的值2.6.6

letter-spacing<pstyle="letter-spacing:10px;">Thisissometext</p>該屬性允許指定負(fù)長度值，這會讓字符之間更緊湊，如圖3-12所示。圖3-12

letter-spacing屬性設(shè)置效果由此可見，letter-spacing屬性用于增加或減少字符間的空白，而word-spacing屬性用于增加或減少單詞間的空白。letter-spacing屬性對不帶空白符的中文字符有效，而word-spacing屬性對不帶空格的中文字符無效。2.6

CSS文本樣式7．text-decoration該屬性用于設(shè)置文本的修飾線外觀（如下畫線、上畫線、刪除線或閃爍）。它是text-decoration-line屬性、text-decoration-color屬性、text-decoration-style屬性和text-decoration-thickness屬性的縮寫，其取值如表3-12所示。表3-12

text-decoration屬性的取值值描述none默認(rèn)。定義標(biāo)準(zhǔn)的文本underline定義文本下的一條線overline定義文本上的一條線line-through定義穿過文本的一條線blink定義閃爍的文本inherit從父元素繼承

text-decoration

屬性的值2.6

CSS文本樣式8．text-shadow該屬性用于向文本設(shè)置陰影。其屬性值是由逗號分隔的陰影列表，每個陰影由兩個或三個長度值和一個可選的顏色值規(guī)定，陰影的默認(rèn)長度值為0。該屬性的取值如表3-13所示。表3-13

text-shadow屬性的取值值描述h-shadow必需。水平陰影的位置。允許指定負(fù)值v-shadow必需。垂直陰影的位置。允許指定負(fù)值blur可選。模糊的距離color可選。陰影的顏色2.6.8

text-shadow<style>.box{text-shadow:3px3px10pxred;}</style><divclass="box">text-shadow屬性向文本設(shè)置陰影。</div>示例：運(yùn)行以上代碼后，瀏覽器的顯示效果如圖3-13所示。圖3-13

text-shadow屬性設(shè)置效果新聞詳情頁的美化任務(wù)2任務(wù)實(shí)施body{color:#333;font-family:'Microsoftyahei','宋體',Arial;line-height:1.5}在本任務(wù)中，我們學(xué)習(xí)了文字、文本的CSS樣式，下面將通過所學(xué)內(nèi)容對新聞詳情頁進(jìn)行樣式美化。（1）在news.css文件中，通過標(biāo)簽選擇器為網(wǎng)頁內(nèi)容指定字體、文字顏色和行間距。任務(wù)實(shí)施<h2class="title"><img

src="../img/article_icon.png"width="25">

巨巨網(wǎng)絡(luò)，資源特色</h2>......<h4class="title">引言</h4>（2）在HTML5中，建議使用樣式取代標(biāo)題及段落元素中的align屬性，為新聞標(biāo)題和各段落標(biāo)題指定樣式名，并設(shè)置文本居中對齊，字符間距為3px,添加文字陰影效果。news.html文件：任務(wù)實(shí)施.title{text-align:center;letter-spacing:3px;text-shadow:1px1px0px#ececec;}

news.css文件：任務(wù)實(shí)施<divclass="navLink"><ahref="#section1">教學(xué)大綱、教學(xué)計劃</a><br><ahref="#section2">實(shí)訓(xùn)題目</a><br><ahref="#section3">項(xiàng)目化案例</a><br><ahref="#section4">企業(yè)項(xiàng)目案例</a><br><ahref="#section5">指導(dǎo)視頻</a><br><ahref="#section6">作業(yè)題目</a><br><ahref="#section7">教學(xué)PPT</a><br><ahref="#section8">配套工具包</a><br></div>（3）由于段落新聞的錨鏈接存在默認(rèn)樣式，因此段落新聞的呈現(xiàn)效果較為不美觀，我們可以通過CSS文本屬性對其進(jìn)行美化修改。為段落新聞添加一個父容器，方便元素的管理，并通過標(biāo)簽選擇器重置頁面上所有超鏈接標(biāo)簽的默認(rèn)樣式，通過子元素選擇器指定導(dǎo)航鏈接的偽類樣式。news.html文件：任務(wù)實(shí)施a{color:#333;text-decoration:none;}.navLink>a:hover{color:#38b774;font-weight:bold;}news.css文件：任務(wù)實(shí)施<h2class="title"><img

src="../img/article_icon.png"width="25">

巨巨網(wǎng)絡(luò)，資源特色</h2><divclass="navLink"><ahref="#section1"><img

src="../img/link_icon.png"width="12">教學(xué)大綱、教學(xué)計劃</a><br><ahref="#section2"><img

src="../img/link_icon.png"width="12">實(shí)訓(xùn)題目</a><br><ahref="#section3"><img

src="../img/link_icon.png"width="12">項(xiàng)目化案例</a><br><ahref="#section4"><img

src="../img/link_icon.png"width="12">企業(yè)項(xiàng)目案例</a><br><ahref="#section5"><img

src="../img/link_icon.png"width="12">指導(dǎo)視頻</a><br><ahref="#section6"><img

src="../img/link_icon.png"width="12">作業(yè)題目</a><br><ahref="#section7"><img

src="../img/link_icon.png"width="12">教學(xué)PPT</a><br><ahref="#section8"><img

src="../img/link_icon.png"width="12">配套工具包</a><br></div>（4）為標(biāo)題和段落新聞鏈接添加圖標(biāo)。在img文件夾內(nèi)放置圖標(biāo)的圖片，使用<img>標(biāo)簽加載圖標(biāo)，注意引用圖標(biāo)的相對路徑。任務(wù)實(shí)施圖3-14新聞列表樣式美化效果運(yùn)行以上代碼后，瀏覽器的顯示效果如圖3-14所示。此時，圖標(biāo)和文字在豎直方向上并未對齊，可以通過vertical-align屬性設(shè)置圖標(biāo)和文字在豎直方向上對齊。對多個元素指定同一樣式，可以使用并集選擇器。.navLink>img,.title>img{vertical-align:middle;}新聞詳情頁的美化任務(wù)2任務(wù)拓展在statement.html頁面中完成如下內(nèi)容。引入樣式文件。使用樣式為新聞標(biāo)題添加圖標(biāo)，設(shè)置居中對齊。設(shè)置表格頭文字的顏色為白色。設(shè)置表格單元格在鼠標(biāo)指針懸停時呈現(xiàn)綠色背景，白色文字。具體效果如圖3-15所示。圖3-15表格效果任務(wù)3新聞列表頁的美化知識準(zhǔn)備CSS列表樣式如下。1．list-style-type該屬性可用于設(shè)置無序列表及有序列表的標(biāo)記點(diǎn)，其無序列表屬性的取值和有序列表屬性的取值分別如表3-14和表3-15所示。表3-14

list-style-type無序列表屬性的取值值描述none無標(biāo)記disc默認(rèn)值。標(biāo)記為實(shí)心圓circle標(biāo)記為空心圓square標(biāo)記為實(shí)心方塊decimal標(biāo)記為數(shù)字表3-15

list-style-type有序列表屬性的取值值描述none無標(biāo)記decimal-leading-zero0開頭的數(shù)字標(biāo)記（如01、02、03等）lower-roman小寫羅馬數(shù)字（如i、ii、iii等）upper-roman大寫羅馬數(shù)字（如I、II、III等）lower-alpha小寫英文字母（如a、b、c等）upper-alpha大寫英文字母（如A、B、C等）lower-greek小寫希臘字母（如α、β、γ等）lower-latin小寫拉丁字母（如a、b、c等）upper-latin大寫拉丁字母（如A、B、C等）知識準(zhǔn)備【注意】在設(shè)置list-style-type屬性時，建議將該屬性設(shè)置于列表元素（ul元素或ol元素）上。雖然將該屬性設(shè)置于列表元素或列表項(xiàng)(li元素)上，能實(shí)現(xiàn)同樣的效果，但是將該屬性設(shè)置于列表項(xiàng)上的方式，不符合W3C標(biāo)準(zhǔn)規(guī)范。我們可以通過Chrome瀏覽器的調(diào)試面板（按快捷鍵F12可調(diào)出調(diào)試面板）進(jìn)行分析，使用選擇工具選中l(wèi)i元素，查看其樣式可知，瀏覽器先將ul元素的list-style-type屬性值修改為“square”，li元素繼承該屬性值，如圖3-16所示。如果將list-style-type屬性的設(shè)置放在li元素上，并使用選擇工具選中ul元素，可以發(fā)現(xiàn)其list-style-type屬性的值仍為“disc”，li元素繼承了父元素的屬性值“disc”后，再重新修改該屬性值為“squar”，這顯然不符合W3C標(biāo)準(zhǔn)規(guī)范。所以，建議將該系列屬性（list-style-type屬性、list-style-image屬性、list-style-position屬性、list-style屬性）的設(shè)置放在列表元素中，如圖3-17所示。知識準(zhǔn)備圖3-16使用瀏覽器調(diào)試工具進(jìn)行元素分析（1）圖3-17使用瀏覽器調(diào)試工具進(jìn)行元素分析（2）知識準(zhǔn)備2．list-style-image該屬性可以使用圖像來替換列表項(xiàng)的標(biāo)記，list-style-image屬性的優(yōu)先級要高于list-style-type屬性。如果設(shè)置了該屬性，則list-style-type屬性將不起作用。知識準(zhǔn)備3．list-style-position該屬性可用于指定列表標(biāo)記在主體塊中的位置，其取值如表3-16所示。表3-16

list-style-position屬性的取值值描述inside列表標(biāo)記放置在主體塊內(nèi)部，且環(huán)繞文本根據(jù)標(biāo)記對齊outside默認(rèn)值。列表標(biāo)記在主體塊的外面inherit從父元素繼承l(wèi)ist-style-position屬性的值知識準(zhǔn)備<style>

ul{width:80px;list-style:squareinside;}</style><ul><li>list-style是一個屬性集合的縮寫</li><li>list-style是一個屬性集合的縮寫</li><li>list-style是一個屬性集合的縮寫</li></ul>

4．list-stylelist-style是一個屬性集合的縮寫，其中包括list-style-type屬性、list-style-image屬性和list-style-position屬性。值與值用空格分隔，順序不固定。需要注意的是，List-style-image屬性會覆蓋list-style-type屬性的設(shè)置。示例代碼如下：知識準(zhǔn)備運(yùn)行以上代碼后，瀏覽器的顯示效果如圖3-18所示。圖3-18

list-style屬性設(shè)置效果任務(wù)3新聞列表頁的美化任務(wù)實(shí)施在本任務(wù)中，我們將使用CSS樣式對新聞列表頁進(jìn)行樣式美化。（1）在newsList.html頁面的<linkhead>標(biāo)簽中引入news.css文件。<linkrel="stylesheet"href="../css/news.css">（2）為錨鏈接標(biāo)簽添加一個外層容器，便于內(nèi)容管理，同時將其類名設(shè)定為“navLink”。<divclass="navLink"><ahref="#juju_news">【巨巨新聞】</a><ahref="#home_news">【國內(nèi)要聞】</a><ahref="#tec_news">【科技要聞】</a><ahref="#sports_news">【體育要聞】</a></div>>任務(wù)實(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

提交評論