CSS美化網(wǎng)頁(yè)元素
[圖片上傳失敗...(image-d90d17-1554343106280)] 學(xué)習(xí)目標(biāo)
(1) . 會(huì)使用CSS設(shè)置字體樣式
(2) . 會(huì)使用CSS設(shè)置文本樣式
(3) . 會(huì)使用CSS設(shè)置圖片對(duì)齊方式
(4) . 會(huì)使用CSS設(shè)置超鏈接樣式
(5) . 會(huì)使用CSS設(shè)置鼠標(biāo)外觀
(6) . 會(huì)使用CSS設(shè)置背景樣式
(7) . 會(huì)使用CSS設(shè)置列表樣式
[圖片上傳失敗...(image-fb7013-1554343106280)] 知識(shí)點(diǎn)講授
一、 使用CSS編輯網(wǎng)頁(yè)文本
(一) 描述
本節(jié)將學(xué)習(xí)使用CSS設(shè)置字體大小、字體類(lèi)型、文字顏色、字體風(fēng)格等字體樣式；通過(guò)CSS設(shè)置文本段落的對(duì)齊方式、行高、文本與圖片的對(duì)齊方式，以及文字縮進(jìn)方式徠排版網(wǎng)頁(yè)。
(二) <span>標(biāo)簽
1. 描述
在HTML中，<span>標(biāo)簽是被用來(lái)組合HTML文檔中的行內(nèi)元素，它沒(méi)有固定的格式表示，只有對(duì)它應(yīng)用CSS樣式，它才會(huì)產(chǎn)生視覺(jué)變化。
2. 案例演示
需求說(shuō)明
文字“教師夢(mèng)想”、“寧教”突出顯示
實(shí)現(xiàn)效果
[圖片上傳失敗...(image-3ac313-1554343106285)]
核心代碼
<p>在寧波教育學(xué)院，有一群人默默支持你的<span class="dream">教師夢(mèng)想<span></p>
<p>選擇<span class="school">寧教</span>，成就你的夢(mèng)想</p>
p{
font-size: 14px;
}
.dream{
font-size: 24px;
color: red;
}
.school{
font-size: 36px;
color: green;
}
(三) 字體樣式
1. 描述
CSS字體屬性定義字體類(lèi)型、字體大小、字體是否加粗、字體風(fēng)格等。
|
屬性名
|
含義
|
舉例
|
|
font-family
|
設(shè)置字體類(lèi)型
|
font-family:"隸書(shū)";
|
|
font-size
|
設(shè)置字體大小
|
font-size:12px;
|
|
font-style
|
設(shè)置字體風(fēng)格
|
font-style:italic;
|
|
font-weight
|
設(shè)置字體的粗細(xì)
|
font-weight:bold;
|
|
font
|
在一個(gè)聲明中設(shè)置所有字體屬性
|
font:italic bold 36px "宋體";
|
(四) 字體類(lèi)型 font-family
1. 語(yǔ)法格式
p{font-family:Verdana,"楷體";}
這句代碼聲明了HTML頁(yè)面中<p>標(biāo)簽的字體樣式，并同時(shí)聲明了兩種字體：Verdana,"楷體"。這樣瀏覽器會(huì)優(yōu)先用英文字體顯示文字，如果英文字體沒(méi)有包含的字符（通常英文字體不支持中文），則從后面的中文字體里找，這樣就達(dá)到英文使用Verdana，中文使用楷體的不同字體效果。
多種字體之間用逗號(hào)隔開(kāi)。
一些字體的名稱(chēng)中間會(huì)出現(xiàn)空格，如Times New Roman字體，或中文，如楷體，這里需要用號(hào)將其引起來(lái)，命名瀏覽器知道這是一種字體名稱(chēng)。
2. 案例演示
需求說(shuō)明
設(shè)置中英文字體不一樣
實(shí)現(xiàn)效果
[圖片上傳失敗...(image-21c4ac-1554343106284)]
核心代碼
body{font-family: Times,"Times New Roman", "楷體";}
3. 經(jīng)驗(yàn)說(shuō)明
(1) . 當(dāng)需要同時(shí)設(shè)置英文字體和中文字體時(shí)，一定要將英文字體設(shè)置在中文字體之前，如果中文字體設(shè)置于英文字體之前，英文字體設(shè)置將不起作用。
(2) . 在實(shí)際網(wǎng)頁(yè)開(kāi)發(fā)中，網(wǎng)頁(yè)的文本如果沒(méi)有特殊的要求，通常設(shè)置為“宋體”，宋體是計(jì)算機(jī)的默認(rèn)字體，如果需要其他比較炫的字體，則使用圖片代替。
(五) 字體大小
1. 描述
CSS通過(guò)font-size屬性來(lái)控制文字的大小 ，常用單位是px(像素)。其他單位還有in、cm、mm、pt、pc
這里不再展示頁(yè)面效果圖
(六) 字體風(fēng)格
1. 描述
CSS通過(guò)font-style屬性設(shè)置字體的風(fēng)格，font-style有三個(gè)值：
normal:標(biāo)準(zhǔn)字體樣式
italic:斜體字體樣式
oblique:傾斜字體
font-style的默認(rèn)值是normal，italic和oblique在頁(yè)面中顯示效果非常相似。
2. 案例演示
需求說(shuō)明
標(biāo)題題使用二種斜體，二級(jí)標(biāo)題使用標(biāo)準(zhǔn)字體樣式
實(shí)現(xiàn)效果
[圖片上傳失敗...(image-6437f3-1554343106284)]
核心代碼
h1{font-size:24px; font-style:italic;}
.title{font-style:oblique;}
h2{font-size:16px; font-style:normal;}
(七) 字體粗細(xì)
1. 描述
CSS中使用font-weight屬性控制文字的粗細(xì)。
2. font-weight屬性的值
|
值
|
說(shuō)明
|
|
normal
|
默認(rèn)值，定義標(biāo)準(zhǔn)的字體。
|
|
bold
|
粗體字體。
|
|
bolder
|
更粗的字體。
|
|
lighter
|
更細(xì)的字體。
|
|
100、200、300、400、500、600、700、800、900
|
定義由細(xì)到粗的字體。
400等同于normal，700等同于bold。
|
3. 案例演示
實(shí)現(xiàn)效果
[圖片上傳失敗...(image-9b5022-1554343106284)]
核心代碼
.title {font-style:oblique; font-weight:normal;}
h2{font-size:16px; font-style:normal;}
p{font-size:12px;}
.pretitle{font-weight:bold;}
(八) 字體屬性
1. 描述
在前講解的幾個(gè)字體屬性是單獨(dú)使用的，實(shí)際上CSS中如果對(duì)同一部分的字體設(shè)置多種字體屬性時(shí)，需要使用font屬性來(lái)進(jìn)行聲明，即利用font屬性一次設(shè)置字體的所有屬性。
各個(gè)屬性之間用英文空格分開(kāi)，順序依次是字體風(fēng)格、字體粗細(xì)、字體大小、字體類(lèi)型
2. 案例演示
p{
font:oblique bold 12px “楷體”;
}
(九) 使用CSS排版網(wǎng)頁(yè)文本
在網(wǎng)頁(yè)中，用于排版網(wǎng)頁(yè)文本的樣式有文本顏色、水平對(duì)齊方式，首行縮進(jìn)、行高、文本裝飾、垂直對(duì)齊方式。常用的文本屬性、及用法如下表：
|
屬性
|
含義
|
舉例
|
|
color
|
設(shè)置文本顏色
|
color:#00C;
|
|
text-align
|
設(shè)置元素水平對(duì)齊方式
|
text-align:right;
|
|
text-indent
|
設(shè)置首行文本的縮進(jìn)
|
text-indent:20px;
|
|
line-height
|
設(shè)置文本的行高
|
line-height:25px;
|
|
text-decoration
|
設(shè)置文本的裝飾
|
text-decoration:underline;
|
(十) 文本顏色
1. 描述
在HTML頁(yè)面中，顏色統(tǒng)一采用RGB格式，按十六進(jìn)制的方法表示，前兩位表示紅色，中間兩位表示綠色，最后兩位表示藍(lán)色。比如“#FFFFFF”; 如果看到3位的時(shí)，比如”#396”，是這個(gè)簡(jiǎn)寫(xiě)“#339966”。
當(dāng)然也可以用英文單詞直接表示顏色
2. 案例演示
前面的例子都演示過(guò)，不再演示
(十一) 水平對(duì)齊方式
1. 描述
在CSS中，文本的的水平對(duì)齊是通過(guò)text-align屬性來(lái)控制的。
2. text-align屬性常用值
|
值
|
說(shuō)明
|
|
left
|
把文本排列到左邊。默認(rèn)值：由瀏覽器決定
|
|
right
|
把文本排列到右邊
|
|
center
|
把文本排列到中間
|
|
justify
|
實(shí)現(xiàn)兩端對(duì)齊文本效果
|
3. 案例演示：新聞
需求：
標(biāo)題居中，來(lái)源居右，內(nèi)容居左
實(shí)現(xiàn)效果
[圖片上傳失敗...(image-9aec7b-1554343106284)]
核心代碼
h1{
color: #091cc4;
font-size: 24px;
text-align: center;
}
h3{
text-align: right;
}
p{
font-size: 12px;
text-align: left;
}
(十二) 首行縮進(jìn)和行高
1. 描述
在使用word編輯文檔時(shí)，通常會(huì)設(shè)置段落的行距，并且段落的首行縮進(jìn)兩個(gè)字符，CSS，通過(guò)line-height屬性民來(lái)設(shè)置行高，通過(guò)text-indent屬性設(shè)置首行縮進(jìn)。
在CSS中，text-indent常使用的單元是em,text-indent:2m表示縮進(jìn)2個(gè)字符
2. 案例演示
需求
首行縮進(jìn)2個(gè)字符，行高20px；
實(shí)現(xiàn)效果
[圖片上傳失敗...(image-eb1f28-1554343106283)]
核心代碼
h1{
color: #091cc4;
font-size: 24px;
text-align: center;
}
h3{
text-align: right;
}
p{
font-size: 12px;
text-align: left;
line-height: 20px;
text-indent: 2em;
}
(十三) 文本修飾和垂直對(duì)齊
1. 描述
文本裝飾
text-decoration屬性
|
值
|
說(shuō)明
|
|
none
|
默認(rèn)值，定義的標(biāo)準(zhǔn)文本。
|
|
underline
|
設(shè)置文本的下劃線(xiàn)。
|
|
overline
|
設(shè)置文本的上劃線(xiàn)。
|
|
line-through
|
設(shè)置文本的刪除線(xiàn)。
|
|
blink
|
設(shè)置文本閃爍。此值只在firefox瀏覽器中有效，在IE中無(wú)效。
|
其中none和underline是常用的，在后面的課程中會(huì)經(jīng)常使用。
垂直對(duì)齊方式
vertical-align屬性：middle、top、bottom
2. 案例演示
實(shí)現(xiàn)效果
[圖片上傳失敗...(image-ff18c0-1554343106283)]
(十四) 課堂練習(xí)
1. 制作百度音樂(lè)標(biāo)簽頁(yè)面
訓(xùn)練要點(diǎn)
(1) . 使用Dreamweaver制作網(wǎng)頁(yè)
(2) . 使用字體屬性設(shè)置字體風(fēng)格、大小
(3) . 使用文本屬性設(shè)置字體顏色、行距
(4) . 使用<span>標(biāo)簽
需求說(shuō)明
[圖片上傳失敗...(image-ce8a82-1554343106283)]
實(shí)現(xiàn)思路
(1) . 使用color屬性設(shè)置字體顏色
(2) . 使用font設(shè)置字體類(lèi)型和字體大小，但是順序?yàn)樽煮w大小→字體類(lèi)型，字體類(lèi)型要先設(shè)置英文字體，再設(shè)置中文字體；或者使用font-size設(shè)置字體大小，使用font-family設(shè)置字體類(lèi)型。
(3) . 歌手分類(lèi)字母序號(hào)放在標(biāo)簽<span>，使用font-weight設(shè)置字體加粗。
(4) . CSS文件單獨(dú)放在CSS文件夾下，使用鏈接式引用CSS文件。
參考代碼
@charset "gb2312";
/* CSS Document */
h2{ font-size:18px; font-family:"楷體";}
p{font:12px "Times New Roman", Times "宋體"; line-height:20px;}
p span{font-weight:bold; color:#F00;}
(十五) 課后練習(xí)
1. 新聞信息展示頁(yè)面
需求說(shuō)明
制作北大青鳥(niǎo)網(wǎng)站新聞信息展示頁(yè)面
使用外部樣式表創(chuàng)建頁(yè)面樣式
[圖片上傳失敗...(image-e648b2-1554343106283)]
二、 CSS的復(fù)合選擇器和CSS的繼承性
(一) CSS的復(fù)合選擇器
1. 描述
CSS復(fù)合選擇器是以標(biāo)簽選擇器、類(lèi)選擇器、ID選擇器這3種基本選擇器為基礎(chǔ)，通過(guò)不同方式將兩個(gè)或多個(gè)選擇器組合在一起而形成的選擇器。復(fù)合選擇器分為后代選擇器、交集選擇器和并集選擇器。
2. 后代選擇器
描述
在HTML中經(jīng)常有標(biāo)簽的嵌套使用，那么在CSS選擇器， 就可以通過(guò)嵌套的方式，對(duì)特殊位置的HTML標(biāo)簽進(jìn)行聲明。
比如，當(dāng)<H3>……</H3>標(biāo)簽之間包含<strong>……</strong>標(biāo)簽時(shí)，就可以使用后代選擇器。
語(yǔ)法
后代選擇器的寫(xiě)法就是把外層標(biāo)簽寫(xiě)在前面，內(nèi)層標(biāo)簽寫(xiě)在后面，之間用空格分隔。
案例演示
【需求說(shuō)明】：
第一行<strong>標(biāo)簽中的文本字體顏色為紅色，字體大小為16px
第二行<strong>標(biāo)簽的文本字體顏色為藍(lán)色，字體大小為36px
【案例演示效果】
[圖片上傳失敗...(image-b8ecef-1554343106282)]
【參考代碼】
<strong>問(wèn)君能有幾多愁，</strong>
<h3>恰似一江<strong>春水</strong>向東流。</h3>
strong {color: red; font-size: 16px; }
h3 strong {color: blue; font-size: 36px; }
后代選擇器常用情況
后代選擇是CSS應(yīng)用中非常常用的，通常在HTML標(biāo)簽嵌套時(shí)，常用情況如下：
(1) . 按標(biāo)簽的嵌套關(guān)系，如上例中<h3>標(biāo)簽嵌套<strong>，直接按標(biāo)簽嵌套關(guān)系編寫(xiě)樣式；
(2) . 按選擇器的嵌套關(guān)系，當(dāng)最外層的類(lèi)選擇器名稱(chēng)為head，它里面嵌套類(lèi)選擇器、ID選擇器，這時(shí)直接按樣式的嵌套關(guān)系編寫(xiě)，如.head .menu 或.head #menu
(3) . 3種選擇互相嵌套關(guān)系，當(dāng)最外層的ID選擇器名稱(chēng)為nav，它里面嵌套類(lèi)選擇器和標(biāo)簽選擇，如#nav .title 或#nav li
3. 交集選擇器【理解】
描述
交集選擇器是由兩個(gè)選擇器直接連接構(gòu)成，其結(jié)果是選中二者各自元素范圍的交集。即選中同時(shí)滿(mǎn)足前后兩者定義的元素
語(yǔ)法格式
第一個(gè)必須是標(biāo)簽選擇器，第二個(gè)必須是類(lèi)選擇器或ID選擇器；
這兩個(gè)選擇器之間不能有空格，必須連續(xù)書(shū)寫(xiě)。
案例演示
【需要說(shuō)明】
以歐陽(yáng)修的詞《蝶戀花·庭院深深幾許》為例，詞的所有內(nèi)容寫(xiě)在<p>標(biāo)簽內(nèi)，其中一句詞寫(xiě)<p>標(biāo)簽的嵌套標(biāo)簽<strong>中，兩個(gè)標(biāo)簽均加上類(lèi)樣式txt; 兩個(gè)類(lèi)樣式的txt分別是后代選擇器和交集選擇器。
【實(shí)現(xiàn)效果】
[圖片上傳失敗...(image-113c5c-1554343106282)]
【參考代碼】
<body>
<h2>蝶戀花?庭院深深深幾許</h2>
<p class="txt">
庭院深深深幾許，楊柳堆煙，簾幕無(wú)重?cái)?shù)。
玉勒雕鞍游冶處， 樓高不見(jiàn)章臺(tái)路。
<strong class="txt">雨橫風(fēng)狂三月幕，門(mén)掩黃昏，無(wú)計(jì)留春住。</strong>
淚眼問(wèn)花花不語(yǔ)，亂紅飛過(guò)秋千去。
</p>
</body>
<style type="text/css">
p .txt {color: red; }/后代選擇器/
p.txt { color: blue;line-height: 28px;}/交集選擇器/
</style>
【總結(jié)說(shuō)明】
(1) . 由兩個(gè)選擇器直接連接構(gòu)成，選中二者各自元素范圍的交集
(2) . 第一個(gè)必須是標(biāo)簽選擇器，第二個(gè)必須是類(lèi)選擇器或者ID選擇器
(3) . 選擇器之間不能有空格，必須連續(xù)書(shū)寫(xiě)
4. 并集選擇器
描述
與次選擇器相對(duì)應(yīng)，還有一種并集選擇器，它的結(jié)果是同時(shí)選中各個(gè)基本選擇器所選擇的范圍。
語(yǔ)法說(shuō)明
任何形式的選擇器（包括標(biāo)簽選擇器、類(lèi)選擇器、ID選擇器等）都可以作為并集選擇器的的一部分。
并集選擇器是多個(gè)選擇器通過(guò)逗號(hào)連接而成。
案例演示
【需求說(shuō)明】
以歐陽(yáng)修的詞《蝶戀花·庭院深深幾許》為例，把詩(shī)詞的每句都放在不同的標(biāo)簽中，然后這些標(biāo)簽設(shè)置相同的樣式。
【實(shí)現(xiàn)效果】
[圖片上傳失敗...(image-f202cb-1554343106281)]
【參考代碼】
<body>
<h2>蝶戀花?庭院深深深幾許</h2>
<h3>庭院深深深幾許，楊柳堆煙，簾幕無(wú)重?cái)?shù)。</h3>
<p class="first">玉勒雕鞍游冶處，樓高不見(jiàn)章臺(tái)路。</p>
<p class="second">雨橫風(fēng)狂三月幕，門(mén)掩黃昏，無(wú)計(jì)留春住。</p>
<p id="end">淚眼問(wèn)花花不語(yǔ)，亂紅飛過(guò)秋千去。</p>
</body>
<style type="text/css">
h3,
.first,
.second,
end {
font-size: 16px;
color: green;
font-weight: normal;
}
</style>
經(jīng)驗(yàn)說(shuō)明
在實(shí)際開(kāi)發(fā)中，并集選擇器經(jīng)常會(huì)用在對(duì)頁(yè)面中所有標(biāo)簽進(jìn)行全局設(shè)置樣式。
(二) CSS繼承特性【理解】
1. 什么是繼承
案例演示
【實(shí)現(xiàn)效果】
[圖片上傳失敗...(image-604091-1554343106281)]
【分析】
[圖片上傳失敗...(image-59dd0a-1554343106281)]
【參考代碼】
<html>
<head>
<meta charset="utf-8">
<title>繼承的應(yīng)用</title>
</head>
<body>
<h1>網(wǎng)絡(luò)傳播學(xué)院學(xué)習(xí)平臺(tái)</h1>
<p>歡迎來(lái)到網(wǎng)傳學(xué)習(xí)平臺(tái)，這里將為您提供豐富的學(xué)習(xí)內(nèi)容。</p>
<ul>
<li>網(wǎng)頁(yè)制作</li>
<ul>
<li>使用Dreamweaver制作網(wǎng)頁(yè)</li>
<li>使用CSS布局和美化網(wǎng)頁(yè)
<ul>
<li>CSS初級(jí)</li>
<li>CSS中級(jí)</li>
<li>CSS高級(jí)</li>
</ul>
</li>
<li>使用JavaScript制作網(wǎng)頁(yè)特效</li>
</ul>
</li>
<li>平面設(shè)計(jì)</li>
<ol>
<li>美術(shù)基礎(chǔ)</li>
<li>使用Photoshop處理圖形圖像</li>
<li>使用Illustrator設(shè)計(jì)圖形</li>
<li>制作Flash動(dòng)畫(huà)</li>
</ol>
</ul>
<p>如果您有任何問(wèn)題，歡迎給我們留言。</p>
</body>
</html>
2. 繼承的CSS應(yīng)用
描述
(1) . 子標(biāo)簽可以繼承父標(biāo)簽的樣式風(fēng)格
(2) . 子標(biāo)簽的樣式不會(huì)影響父標(biāo)簽的樣式風(fēng)格
案例演示
【實(shí)現(xiàn)效果】
[圖片上傳失敗...(image-ed7d95-1554343106281)]
【核心代碼】
<style type="text/css">
li {
color: blue;
font-size: 12px;
}
ul li ul li ul li {
color: red;
}
ul li ol li {
color: green;
}
</style>
三、 使用CSS設(shè)置超鏈接
在任何一個(gè)網(wǎng)頁(yè)上，超鏈接都是最基本的元素，通過(guò)超鏈接能夠?qū)崿F(xiàn)頁(yè)面的跳轉(zhuǎn)、功能的激活。下面介紹如何使用CSS設(shè)置超鏈接的樣式。
(一) 超鏈接偽類(lèi)
1. 超鏈接的默認(rèn)樣式
描述
文本有下劃線(xiàn)，圖片有邊框
單擊鏈接前后的文本顏色不一樣
案例展示
[圖片上傳失敗...(image-f9a9ed-1554343106281)]
<body>
<p><a href="#"><img src="image/hetao.jpg" alt="無(wú)漂白薄皮核桃" /></a></p>
<p><a href="#">樓蘭蜜語(yǔ)新疆野生</a>??<a href="#">無(wú)漂白薄皮核桃</a></p>
<p><span>500gx2包 ￥48.8</span></p>
</body>
2. 超鏈接接偽類(lèi)
語(yǔ)法
標(biāo)簽名:偽類(lèi)名{聲明;}
常用的超鏈接偽類(lèi)
|
偽類(lèi)名稱(chēng)
|
含義
|
示例
|
|
a:link
|
未單擊訪(fǎng)問(wèn)時(shí)超鏈接樣式
|
a:link{color:#9ef5f9;}
|
|
a:visited
|
單擊訪(fǎng)問(wèn)后超鏈接樣式
|
a:visited {color:#333;}
|
|
a:hover
|
鼠標(biāo)懸浮其上的超鏈接樣式
|
a:hover{color:#ff7300;
|
|
a:active
|
鼠標(biāo)單擊未釋放的超鏈接樣式
|
a:active {color:#999;}
|
設(shè)置偽類(lèi)的順序：a:link->a:visited->a:hover->a:active
案例演示
[圖片上傳失敗...(image-42cab9-1554343106281)]
[圖片上傳失敗...(image-5c5c6c-1554343106281)]
參考代碼
img {
border:0px;
}
p {
font-size:12px;
}
a {
color:#000;
text-decoration:none;
}
a:hover {
color:#B46210;
text-decoration:underline;
}
3. CSS設(shè)置鼠標(biāo)形狀
語(yǔ)法說(shuō)明
CSS通過(guò)cursor來(lái)設(shè)置鼠標(biāo)指針的樣式
cursor屬性的常用值
|
值
|
說(shuō)明
|
圖例
|
|
default
|
默認(rèn)光標(biāo)
|
[圖片上傳失敗...(image-83361a-1554343106274)]
|
|
pointer
|
超鏈接的指針
|
[圖片上傳失敗...(image-1c82e8-1554343106274)]
|
|
wait
|
指示程序正在忙
|
[圖片上傳失敗...(image-f8d9db-1554343106274)]
|
|
help
|
指示可用的幫助
|
[圖片上傳失敗...(image-86c4b7-1554343106274)]
|
|
text
|
指示文本
|
[圖片上傳失敗...(image-3be81-1554343106274)]
|
|
crosshair
|
鼠標(biāo)呈現(xiàn)十字狀
|
[圖片上傳失敗...(image-ac99b4-1554343106274)]
|
案例演示
在上例的基礎(chǔ)上，加下如下樣式
span{cursor:pointer;}
四、 背景樣式
background
可以設(shè)置背景顏色和背景圖像
(一) 認(rèn)識(shí)<div>標(biāo)簽
1. <div>標(biāo)簽的用法
網(wǎng)頁(yè)布局
排版網(wǎng)頁(yè)內(nèi)容
2. 語(yǔ)法
<div>網(wǎng)頁(yè)內(nèi)容…</div>
3. 案例演示
<style type="text/css">
header{
width:200px;
height:280px;
background-color: red;
}
</style>
<div id="header">網(wǎng)頁(yè)內(nèi)容…</div>
(二) 背景顏色
1. 描述
在CSS中，使用background-color屬性設(shè)置字體、div、列表等網(wǎng)頁(yè)元素的背景顏色，它的值的表示方法與color表示方法一樣，也是用十六進(jìn)制的方法表示背景顏色值。
但是它有一個(gè)特殊的值-transparent值，即透明的意思。
2. 案例演示
實(shí)現(xiàn)效果
[圖片上傳失敗...(image-554ace-1554343106281)]
參考代碼
【HTML】
<div id="nav">
<div class="title">全部商品分類(lèi)</div>
<ul>
<li><a href="#">圖書(shū)</a>??<a href="#">音像</a>??<a href="#">數(shù)字商品</a></li>
<li><a href="#">家用電器</a>??<a href="#">手機(jī)</a>??<a href="#">數(shù)碼</a></li>
<li><a href="#">電腦</a>??<a href="#">辦公</a></li>
<li><a href="#">家居</a>??<a href="#">家裝</a>??<a href="#">廚具</a></li>
<li><a href="#">服飾鞋帽</a>??<a href="#">個(gè)護(hù)化妝</a></li>
<li><a href="#">禮品箱包</a>??<a href="#">鐘表</a>??<a href="#">珠寶</a></li>
<li><a href="#">食品飲料</a>??<a href="#">保健食品</a></li>
<li><a href="#">彩票</a>??<a href="#">旅行</a>??<a href="#">充值</a>??<a href="#">票務(wù)</a></li>
</ul>
</div>
【CSS】
nav {
width:230px;
background-color:#D7D7D7;
}
.title {
background-color:#C00;
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
}
nav ul li {
height:25px;
line-height:25px;
}
a {
font-size:14px;
text-decoration:none;
color:#000;
}
a:hover {
color:#F60;
text-decoration:underline;
}
(三) 背景圖像
1. 描述
在CSS中，使用background-image屬性來(lái)設(shè)置背景圖像
2. 語(yǔ)法說(shuō)明
背景圖像
background-image屬性
background-image:url(圖片路徑);
背景重復(fù)方式
background-repeat屬性
默認(rèn)值是水平和垂直方向重復(fù)
repeat：沿水平和垂直兩個(gè)方向平鋪
no-repeat：不平鋪，即只顯示一次
repeat-x：只沿水平方向平鋪
repeat-y：只沿垂直方向平鋪
背景定位
background-position屬性
|
值
|
含義
|
|
Xpos Ypos
|
單位：px，Xpos表示水平位置，Ypos表示垂直位置
|
|
X% Y%
|
使用百分比表示背景的位置
|
|
X、Y方向關(guān)鍵詞
|
水平方向的關(guān)鍵詞：left、center、right
垂直方向的關(guān)鍵詞：top、center、bottom
|
3. 案例演示
需求說(shuō)明
給導(dǎo)航標(biāo)題右側(cè)添加向下指示的三角箭頭
給每行的導(dǎo)航菜單添加向右指示的三角箭頭
實(shí)現(xiàn)效果
[圖片上傳失敗...(image-799ac9-1554343106281)]
參考代碼
.title {
……
background-image: url(../image/arrow-down.gif);
background-repeat: no-repeat;
background-position: 205px 10px;
}
nav ul li {
……
background-image: url(../image/arrow-right.gif);
background-repeat: no-repeat;
background-position: 170px 2px;
}
(四) 背景屬性
[圖片上傳失敗...(image-cdfc7-1554343106281)]
(五) 課堂作業(yè)
1. 家用電器商品分類(lèi)頁(yè)面
需求說(shuō)明
(1) . 電器分類(lèi)無(wú)下劃線(xiàn)，鼠標(biāo)懸浮超鏈接時(shí)顯示下劃線(xiàn)。
(2) . 分類(lèi)內(nèi)容超鏈無(wú)下劃線(xiàn)，鼠標(biāo)懸浮至超鏈接時(shí)字體顏色為棕紅色（#F60），顯示下劃線(xiàn)。
實(shí)現(xiàn)效果
[圖片上傳失敗...(image-f45da7-1554343106281)]
五、 列表樣式
CSS列表有4個(gè)屬性來(lái)設(shè)置列表樣式，分別是list-style-type、list-style-image、list-style-position和list-style。下面分別介紹這4個(gè)屬性。
(一) list-style-type
1. 描述
list-style-type屬性設(shè)置列表項(xiàng)標(biāo)記的類(lèi)型。
2. 常用屬性值
|
值
|
說(shuō)明
|
語(yǔ)法示例
|
|
none
|
無(wú)標(biāo)記符號(hào)
|
list-style-type:none;
|
|
disc
|
實(shí)心圓，默認(rèn)類(lèi)型
|
list-style-type:disc;
|
|
circle
|
空心圓
|
list-style-type:circle;
|
|
square
|
實(shí)心正方形
|
list-style-type:square;
|
|
decimal
|
數(shù)字
|
list-style-type:decimal
|
(二) list-style-image
1. 描述
list-style-image屬性是使用圖像來(lái)替換列表項(xiàng)的標(biāo)記
當(dāng)設(shè)置了list-style-image，list-style-type就不會(huì)起作用。
2. 案例演示
需求說(shuō)明
把三角形設(shè)置為列表項(xiàng)的標(biāo)記
實(shí)現(xiàn)效果
[圖片上傳失敗...(image-bf9c2a-1554343106280)]
參考代碼
nav ul li {
height:25px;
line-height:25px;
/* background-image: url(../image/arrow-right.gif);
background-repeat: no-repeat;
background-position: 170px 2px; */
list-style-image: url(../image/arrow-right.gif);
list-style-type: circle;
}
(三) list-style-position
1. 描述
此屬性設(shè)置在何處放置列表項(xiàng)標(biāo)記。
2. 屬性值
inside：放置在文本以風(fēng)，且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊
outside：默認(rèn)值，它保持標(biāo)記位于文本的左側(cè)，列表項(xiàng)標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊
(四) 列表樣式簡(jiǎn)寫(xiě)
list-style簡(jiǎn)寫(xiě)順序
style-type、style-position、style-image
(五) 課堂練習(xí)
1. 暢銷(xiāo)書(shū)排行榜頁(yè)面
需求說(shuō)明
使用無(wú)序列表制作暢銷(xiāo)書(shū)排行榜頁(yè)面
超鏈接無(wú)下劃線(xiàn)，鼠標(biāo)懸浮至超鏈接時(shí)顯示下劃線(xiàn)
實(shí)現(xiàn)效果
[圖片上傳失敗...(image-cc5dc5-1554343106280)]
實(shí)現(xiàn)思路
(1) . 使用list-style-type屬性設(shè)置列表無(wú)標(biāo)記符號(hào)。
(2) . 使用背景屬性設(shè)置列表的圖標(biāo)樣式，列表內(nèi)容向內(nèi)縮進(jìn)2個(gè)字符。
六、 本章總結(jié)
(1) . 使用CSS設(shè)置字體的大小、類(lèi)型、風(fēng)格、粗細(xì)等。
(2) . 使用CSS設(shè)置文本顏色、行距、首行縮進(jìn)、對(duì)齊方式、文本裝飾等。
(3) . 使用CSS設(shè)置超鏈接在不同狀態(tài)下的樣式。
(4) . 使用CSS設(shè)置頁(yè)面背景顏色、背景圖片，為列表設(shè)置列表自定義圖標(biāo)。
(5) . 使用CSS設(shè)置列表項(xiàng)的類(lèi)型、列表圖像及列表符號(hào)顯示位置。
七、 課后作業(yè)
(一) 制作一個(gè)Android課程介紹的界面
1. 需求說(shuō)明
(1) . 使用<div>、<p>、<span>等標(biāo)簽編輯頁(yè)面，頁(yè)面整體背景顏色為灰色（#eeeeee）
(2) . 課程特色字體顏色為綠色（#5c9815）,設(shè)計(jì)理念字體顏色為（#F26522）
(3) . 課程特色和設(shè)計(jì)理念每行開(kāi)頭帶背景顏色的字體為白色，背景顏色從提供的素材的頁(yè)面效果圖中獲取。
(4) . 使用外部樣式表創(chuàng)建頁(yè)面樣式。
2. 實(shí)現(xiàn)效果
[圖片上傳失敗...(image-e8b015-1554343106280)]
(二) 淘寶女裝分類(lèi)頁(yè)面
1. 需求說(shuō)明
(1) . 使用<div>和標(biāo)題等HTML標(biāo)簽編輯頁(yè)面
(2) . 女裝各分類(lèi)名稱(chēng)前的圖片使用背景圖片的方式實(shí)現(xiàn)，標(biāo)題字體大小 為18px,加粗顯示
(3) . 分類(lèi)內(nèi)容字體大小 為12px,超鏈接文本字體顏色為黑色，無(wú)下劃線(xiàn)，當(dāng)鼠標(biāo)移至超鏈接文本上時(shí)字體顏色為橙色（#F60）,并且顯示下劃線(xiàn)。
(4) . 使用外部樣式表創(chuàng)建頁(yè)面樣式
(5) . 頁(yè)面中其他效果見(jiàn)效果圖
2. 實(shí)現(xiàn)效果
[圖片上傳失敗...(image-4631ca-1554343106280)]
