2019-04-04第九次課CSS美化網(wǎng)頁元素

CSS美化網(wǎng)頁元素

[圖片上傳失敗...(image-d90d17-1554343106280)] 學習目標

(1) . 會使用CSS設置字體樣式

(2) . 會使用CSS設置文本樣式

(3) . 會使用CSS設置圖片對齊方式

(4) . 會使用CSS設置超鏈接樣式

(5) . 會使用CSS設置鼠標外觀

(6) . 會使用CSS設置背景樣式

(7) . 會使用CSS設置列表樣式

[圖片上傳失敗...(image-fb7013-1554343106280)] 知識點講授

一扮碧、使用CSS編輯網(wǎng)頁文本

(一) 描述

本節(jié)將學習使用CSS設置字體大小倔幼、字體類型、文字顏色端圈、字體風格等字體樣式搬素；通過CSS設置文本段落的對齊方式寡具、行高、文本與圖片的對齊方式，以及文字縮進方式徠排版網(wǎng)頁砰识。

(二) <span>標簽

1. 描述

在HTML中，<span>標簽是被用來組合HTML文檔中的行內(nèi)元素佣渴，它沒有固定的格式表示辫狼，只有對它應用CSS樣式，它才會產(chǎn)生視覺變化辛润。

2. 案例演示

需求說明

文字“教師夢想”膨处、“寧教”突出顯示

實現(xiàn)效果

[圖片上傳失敗...(image-3ac313-1554343106285)]

核心代碼

<p>在寧波教育學院，有一群人默默支持你的<span class="dream">教師夢想<span></p>

<p>選擇<span class="school">寧教</span>频蛔，成就你的夢想</p>

font-size: 14px;

}

.dream{

font-size: 24px;

color: red;

}

.school{

font-size: 36px;

color: green;

}

(三) 字體樣式

1. 描述

CSS字體屬性定義字體類型灵迫、字體大小秦叛、字體是否加粗晦溪、字體風格等。

屬性名

含義

舉例

|
|

font-family

設置字體類型

font-family:"隸書";

|
|

font-size

設置字體大小

font-size:12px;

|
|

font-style

設置字體風格

font-style:italic;

|
|

font-weight

設置字體的粗細

font-weight:bold;

|
|

font

在一個聲明中設置所有字體屬性

font:italic bold 36px "宋體";

(四) 字體類型 font-family

1. 語法格式

p{font-family:Verdana,"楷體";}

這句代碼聲明了HTML頁面中<p>標簽的字體樣式挣跋，并同時聲明了兩種字體：Verdana,"楷體"三圆。這樣瀏覽器會優(yōu)先用英文字體顯示文字，如果英文字體沒有包含的字符（通常英文字體不支持中文）避咆，則從后面的中文字體里找舟肉，這樣就達到英文使用Verdana，中文使用楷體的不同字體效果查库。

多種字體之間用逗號隔開路媚。

一些字體的名稱中間會出現(xiàn)空格，如Times New Roman字體樊销，或中文整慎，如楷體脏款，這里需要用號將其引起來，命名瀏覽器知道這是一種字體名稱裤园。

2. 案例演示

需求說明

設置中英文字體不一樣

實現(xiàn)效果

[圖片上傳失敗...(image-21c4ac-1554343106284)]

核心代碼

body{font-family: Times,"Times New Roman", "楷體";}

3. 經(jīng)驗說明

(1) . 當需要同時設置英文字體和中文字體時撤师，一定要將英文字體設置在中文字體之前，如果中文字體設置于英文字體之前拧揽，英文字體設置將不起作用剃盾。

(2) . 在實際網(wǎng)頁開發(fā)中，網(wǎng)頁的文本如果沒有特殊的要求淤袜，通常設置為“宋體”痒谴，宋體是計算機的默認字體，如果需要其他比較炫的字體饮怯，則使用圖片代替闰歪。

(五) 字體大小

1. 描述

CSS通過font-size屬性來控制文字的大小，常用單位是px(像素)蓖墅。其他單位還有in库倘、cm、mm论矾、pt教翩、pc

這里不再展示頁面效果圖

(六) 字體風格

1. 描述

CSS通過font-style屬性設置字體的風格，font-style有三個值：

normal:標準字體樣式

italic:斜體字體樣式

oblique:傾斜字體

font-style的默認值是normal贪壳，italic和oblique在頁面中顯示效果非常相似饱亿。

2. 案例演示

需求說明

標題題使用二種斜體，二級標題使用標準字體樣式

實現(xiàn)效果

[圖片上傳失敗...(image-6437f3-1554343106284)]

核心代碼

h1{font-size:24px; font-style:italic;}

.title{font-style:oblique;}

h2{font-size:16px; font-style:normal;}

(七) 字體粗細

1. 描述

CSS中使用font-weight屬性控制文字的粗細闰靴。

2. font-weight屬性的值

值

說明

|
|

normal

默認值彪笼，定義標準的字體。

|
|

bold

粗體字體蚂且。

|
|

bolder

更粗的字體配猫。

|
|

lighter

更細的字體。

|
|

100杏死、200泵肄、300、400淑翼、500腐巢、600、700玄括、800冯丙、900

定義由細到粗的字體。

400等同于normal遭京，700等同于bold胃惜。

3. 案例演示

實現(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. 描述

在前講解的幾個字體屬性是單獨使用的风宁，實際上CSS中如果對同一部分的字體設置多種字體屬性時，需要使用font屬性來進行聲明蛹疯，即利用font屬性一次設置字體的所有屬性戒财。

各個屬性之間用英文空格分開，順序依次是字體風格捺弦、字體粗細饮寞、字體大小、字體類型

2. 案例演示

font:oblique bold 12px “楷體”;

}

(九) 使用CSS排版網(wǎng)頁文本

在網(wǎng)頁中列吼，用于排版網(wǎng)頁文本的樣式有文本顏色幽崩、水平對齊方式，首行縮進寞钥、行高慌申、文本裝飾、垂直對齊方式理郑。常用的文本屬性蹄溉、及用法如下表：

屬性

含義

舉例

|
|

color

設置文本顏色

color:#00C;

|
|

text-align

設置元素水平對齊方式

text-align:right;

|
|

text-indent

設置首行文本的縮進

text-indent:20px;

|
|

line-height

設置文本的行高

line-height:25px;

|
|

text-decoration

設置文本的裝飾

text-decoration:underline;

(十) 文本顏色

1. 描述

在HTML頁面中，顏色統(tǒng)一采用RGB格式您炉，按十六進制的方法表示柒爵，前兩位表示紅色，中間兩位表示綠色赚爵，最后兩位表示藍色棉胀。比如“#FFFFFF”; 如果看到3位的時，比如”#396”冀膝，是這個簡寫“#339966”唁奢。

當然也可以用英文單詞直接表示顏色

2. 案例演示

前面的例子都演示過，不再演示

(十一) 水平對齊方式

1. 描述

在CSS中窝剖，文本的的水平對齊是通過text-align屬性來控制的麻掸。

2. text-align屬性常用值

值

說明

|
|

left

把文本排列到左邊。默認值：由瀏覽器決定

|
|

right

把文本排列到右邊

|
|

center

把文本排列到中間

|
|

justify

實現(xiàn)兩端對齊文本效果

3. 案例演示：新聞

需求：

標題居中枯芬，來源居右论笔，內(nèi)容居左

實現(xiàn)效果

[圖片上傳失敗...(image-9aec7b-1554343106284)]

核心代碼

h1{

color: #091cc4;

font-size: 24px;

text-align: center;

}

h3{

text-align: right;

}

font-size: 12px;

text-align: left;

}

(十二) 首行縮進和行高

1. 描述

在使用word編輯文檔時采郎，通常會設置段落的行距千所，并且段落的首行縮進兩個字符，CSS蒜埋，通過line-height屬性民來設置行高淫痰，通過text-indent屬性設置首行縮進。

在CSS中整份，text-indent常使用的單元是em,text-indent:2m表示縮進2個字符

2. 案例演示

需求

首行縮進2個字符待错，行高20px籽孙；

實現(xiàn)效果

[圖片上傳失敗...(image-eb1f28-1554343106283)]

核心代碼

h1{

color: #091cc4;

font-size: 24px;

text-align: center;

}

h3{

text-align: right;

}

font-size: 12px;

text-align: left;

line-height: 20px;

text-indent: 2em;

}

(十三) 文本修飾和垂直對齊

1. 描述

文本裝飾

text-decoration屬性

值

說明

|
|

none

默認值，定義的標準文本火俄。

|
|

underline

設置文本的下劃線犯建。

|
|

overline

設置文本的上劃線。

|
|

line-through

設置文本的刪除線瓜客。

|
|

blink

設置文本閃爍适瓦。此值只在firefox瀏覽器中有效，在IE中無效谱仪。

其中none和underline是常用的玻熙，在后面的課程中會經(jīng)常使用。

垂直對齊方式

vertical-align屬性：middle疯攒、top嗦随、bottom

2. 案例演示

實現(xiàn)效果

[圖片上傳失敗...(image-ff18c0-1554343106283)]

(十四) 課堂練習

1. 制作百度音樂標簽頁面

訓練要點

(1) . 使用Dreamweaver制作網(wǎng)頁

(2) . 使用字體屬性設置字體風格、大小

(3) . 使用文本屬性設置字體顏色敬尺、行距

(4) . 使用<span>標簽

需求說明

[圖片上傳失敗...(image-ce8a82-1554343106283)]

實現(xiàn)思路

(1) . 使用color屬性設置字體顏色

(2) . 使用font設置字體類型和字體大小枚尼，但是順序為字體大小→字體類型，字體類型要先設置英文字體砂吞，再設置中文字體姑原；或者使用font-size設置字體大小，使用font-family設置字體類型呜舒。

(3) . 歌手分類字母序號放在標簽<span>锭汛，使用font-weight設置字體加粗。

(4) . CSS文件單獨放在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;}

(十五) 課后練習

1. 新聞信息展示頁面

需求說明

制作北大青鳥網(wǎng)站新聞信息展示頁面

使用外部樣式表創(chuàng)建頁面樣式

[圖片上傳失敗...(image-e648b2-1554343106283)]

二、 CSS的復合選擇器和CSS的繼承性

(一) CSS的復合選擇器

1. 描述

CSS復合選擇器是以標簽選擇器到腥、類選擇器朵逝、ID選擇器這3種基本選擇器為基礎，通過不同方式將兩個或多個選擇器組合在一起而形成的選擇器乡范。復合選擇器分為后代選擇器配名、交集選擇器和并集選擇器。

2. 后代選擇器

描述

在HTML中經(jīng)常有標簽的嵌套使用晋辆，那么在CSS選擇器渠脉，就可以通過嵌套的方式，對特殊位置的HTML標簽進行聲明瓶佳。

比如芋膘，當<H3>……</H3>標簽之間包含<strong>……</strong>標簽時，就可以使用后代選擇器。

語法

后代選擇器的寫法就是把外層標簽寫在前面为朋，內(nèi)層標簽寫在后面臂拓，之間用空格分隔。

案例演示

【需求說明】：

第一行<strong>標簽中的文本字體顏色為紅色习寸，字體大小為16px

第二行<strong>標簽的文本字體顏色為藍色胶惰，字體大小為36px

【案例演示效果】

[圖片上傳失敗...(image-b8ecef-1554343106282)]

【參考代碼】

<strong>問君能有幾多愁，</strong>

<h3>恰似一江<strong>春水</strong>向東流霞溪。</h3>

strong {color: red; font-size: 16px; }

h3 strong {color: blue; font-size: 36px; }

后代選擇器常用情況

后代選擇是CSS應用中非常常用的童番，通常在HTML標簽嵌套時，常用情況如下：

(1) . 按標簽的嵌套關系威鹿，如上例中<h3>標簽嵌套<strong>剃斧，直接按標簽嵌套關系編寫樣式；

(2) . 按選擇器的嵌套關系忽你，當最外層的類選擇器名稱為head幼东，它里面嵌套類選擇器、ID選擇器科雳，這時直接按樣式的嵌套關系編寫根蟹，如.head .menu 或.head #menu

(3) . 3種選擇互相嵌套關系，當最外層的ID選擇器名稱為nav糟秘，它里面嵌套類選擇器和標簽選擇简逮，如#nav .title 或#nav li

3. 交集選擇器【理解】

描述

交集選擇器是由兩個選擇器直接連接構成，其結果是選中二者各自元素范圍的交集尿赚。即選中同時滿足前后兩者定義的元素

語法格式

第一個必須是標簽選擇器散庶，第二個必須是類選擇器或ID選擇器；

這兩個選擇器之間不能有空格凌净，必須連續(xù)書寫悲龟。

案例演示

【需要說明】

以歐陽修的詞《蝶戀花·庭院深深幾許》為例，詞的所有內(nèi)容寫在<p>標簽內(nèi)冰寻，其中一句詞寫<p>標簽的嵌套標簽<strong>中须教，兩個標簽均加上類樣式txt; 兩個類樣式的txt分別是后代選擇器和交集選擇器。

【實現(xiàn)效果】

[圖片上傳失敗...(image-113c5c-1554343106282)]

【參考代碼】

<body>

<h2>蝶戀花?庭院深深深幾許</h2>

庭院深深深幾許斩芭，楊柳堆煙轻腺，簾幕無重數(shù)。

玉勒雕鞍游冶處划乖，樓高不見章臺路贬养。

<strong class="txt">雨橫風狂三月幕，門掩黃昏迁筛，無計留春住煤蚌。</strong>

淚眼問花花不語，亂紅飛過秋千去细卧。

</p>

</body>

p .txt {color: red; }/后代選擇器/

p.txt { color: blue;line-height: 28px;}/交集選擇器/

</style>

【總結說明】

(1) . 由兩個選擇器直接連接構成尉桩，選中二者各自元素范圍的交集

(2) . 第一個必須是標簽選擇器，第二個必須是類選擇器或者ID選擇器

(3) . 選擇器之間不能有空格贪庙，必須連續(xù)書寫

4. 并集選擇器

描述

與次選擇器相對應蜘犁，還有一種并集選擇器，它的結果是同時選中各個基本選擇器所選擇的范圍止邮。

語法說明

任何形式的選擇器（包括標簽選擇器这橙、類選擇器、ID選擇器等）都可以作為并集選擇器的的一部分导披。

并集選擇器是多個選擇器通過逗號連接而成屈扎。

案例演示

【需求說明】

以歐陽修的詞《蝶戀花·庭院深深幾許》為例，把詩詞的每句都放在不同的標簽中撩匕，然后這些標簽設置相同的樣式鹰晨。

【實現(xiàn)效果】

[圖片上傳失敗...(image-f202cb-1554343106281)]

【參考代碼】

<body>

<h2>蝶戀花?庭院深深深幾許</h2>

<h3>庭院深深深幾許，楊柳堆煙止毕，簾幕無重數(shù)模蜡。</h3>

<p class="first">玉勒雕鞍游冶處，樓高不見章臺路扁凛。</p>

<p class="second">雨橫風狂三月幕忍疾，門掩黃昏，無計留春住谨朝。</p>

<p id="end">淚眼問花花不語卤妒，亂紅飛過秋千去。</p>

</body>

h3,

.first,

.second,

end {

font-size: 16px;

color: green;

font-weight: normal;

}

</style>

經(jīng)驗說明

在實際開發(fā)中字币，并集選擇器經(jīng)常會用在對頁面中所有標簽進行全局設置樣式荚孵。

(二) CSS繼承特性【理解】

1. 什么是繼承

案例演示

【實現(xiàn)效果】

[圖片上傳失敗...(image-604091-1554343106281)]

【分析】

[圖片上傳失敗...(image-59dd0a-1554343106281)]

【參考代碼】

<html>

<head>

<title>繼承的應用</title>

</head>

<body>

<h1>網(wǎng)絡傳播學院學習平臺</h1>

<p>歡迎來到網(wǎng)傳學習平臺，這里將為您提供豐富的學習內(nèi)容纬朝。</p>

<ul>

<ul>

<li>使用Dreamweaver制作網(wǎng)頁</li>

<li>使用CSS布局和美化網(wǎng)頁

<ul>

<li>CSS初級</li>

<li>CSS中級</li>

<li>CSS高級</li>

</ul>

</li>

<li>使用JavaScript制作網(wǎng)頁特效</li>

</ul>

</li>

<ol>

<li>使用Photoshop處理圖形圖像</li>

<li>使用Illustrator設計圖形</li>

<li>制作Flash動畫</li>

</ol>

</ul>

<p>如果您有任何問題收叶，歡迎給我們留言。</p>

</body>

</html>

2. 繼承的CSS應用

描述

(1) . 子標簽可以繼承父標簽的樣式風格

(2) . 子標簽的樣式不會影響父標簽的樣式風格

案例演示

【實現(xiàn)效果】

[圖片上傳失敗...(image-ed7d95-1554343106281)]

【核心代碼】

li {

color: blue;

font-size: 12px;

}

ul li ul li ul li {

color: red;

}

ul li ol li {

color: green;

}

</style>

三共苛、使用CSS設置超鏈接

在任何一個網(wǎng)頁上判没，超鏈接都是最基本的元素，通過超鏈接能夠實現(xiàn)頁面的跳轉隅茎、功能的激活澄峰。下面介紹如何使用CSS設置超鏈接的樣式。

(一) 超鏈接偽類

1. 超鏈接的默認樣式

描述

文本有下劃線辟犀，圖片有邊框

單擊鏈接前后的文本顏色不一樣

案例展示

[圖片上傳失敗...(image-f9a9ed-1554343106281)]

<body>

<p><a href="#">樓蘭蜜語新疆野生</a>??<a href="#">無漂白薄皮核桃</a></p>

</body>

2. 超鏈接接偽類

語法

標簽名:偽類名{聲明;}

常用的超鏈接偽類

偽類名稱

含義

示例

|
|

a:link

未單擊訪問時超鏈接樣式

a:link{color:#9ef5f9;}

|
|

a:visited

單擊訪問后超鏈接樣式

a:visited {color:#333;}

|
|

a:hover

鼠標懸浮其上的超鏈接樣式

a:hover{color:#ff7300;

|
|

a:active

鼠標單擊未釋放的超鏈接樣式

a:active {color:#999;}

設置偽類的順序：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設置鼠標形狀

語法說明

CSS通過cursor來設置鼠標指針的樣式

cursor屬性的常用值

值

說明

圖例

|
|

default

默認光標

[圖片上傳失敗...(image-83361a-1554343106274)]

|
|

pointer

超鏈接的指針

[圖片上傳失敗...(image-1c82e8-1554343106274)]

|
|

wait

指示程序正在忙

[圖片上傳失敗...(image-f8d9db-1554343106274)]

|
|

help

指示可用的幫助

[圖片上傳失敗...(image-86c4b7-1554343106274)]

|
|

text

指示文本

[圖片上傳失敗...(image-3be81-1554343106274)]

|
|

crosshair

鼠標呈現(xiàn)十字狀

[圖片上傳失敗...(image-ac99b4-1554343106274)]

案例演示

在上例的基礎上俏竞，加下如下樣式

span{cursor:pointer;}

四、背景樣式

background

可以設置背景顏色和背景圖像

(一) 認識<div>標簽

1. <div>標簽的用法

網(wǎng)頁布局

排版網(wǎng)頁內(nèi)容

2. 語法

3. 案例演示

header{

width:200px;

height:280px;

background-color: red;

}

</style>

(二) 背景顏色

1. 描述

在CSS中，使用background-color屬性設置字體魂毁、div玻佩、列表等網(wǎng)頁元素的背景顏色，它的值的表示方法與color表示方法一樣席楚，也是用十六進制的方法表示背景顏色值咬崔。

但是它有一個特殊的值-transparent值，即透明的意思烦秩。

2. 案例演示

實現(xiàn)效果

[圖片上傳失敗...(image-554ace-1554343106281)]

參考代碼

【HTML】

<div class="title">全部商品分類</div>

<ul>

</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屬性來設置背景圖像

2. 語法說明

背景圖像

background-image屬性

background-image:url(圖片路徑);

背景重復方式

background-repeat屬性

默認值是水平和垂直方向重復

repeat：沿水平和垂直兩個方向平鋪

no-repeat：不平鋪，即只顯示一次

repeat-x：只沿水平方向平鋪

repeat-y：只沿垂直方向平鋪

背景定位

background-position屬性

值

含義

|
|

Xpos Ypos

單位：px只祠，Xpos表示水平位置兜蠕，Ypos表示垂直位置

|
|

X% Y%

使用百分比表示背景的位置

|
|

X、Y方向關鍵詞

水平方向的關鍵詞：left抛寝、center牺氨、right

垂直方向的關鍵詞：top、center墩剖、bottom

3. 案例演示

需求說明

給導航標題右側添加向下指示的三角箭頭

給每行的導航菜單添加向右指示的三角箭頭

實現(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. 家用電器商品分類頁面

需求說明

(1) . 電器分類無下劃線猴凹，鼠標懸浮超鏈接時顯示下劃線。

(2) . 分類內(nèi)容超鏈無下劃線岭皂，鼠標懸浮至超鏈接時字體顏色為棕紅色（#F60）郊霎，顯示下劃線。

實現(xiàn)效果

[圖片上傳失敗...(image-f45da7-1554343106281)]

五爷绘、列表樣式

CSS列表有4個屬性來設置列表樣式书劝，分別是list-style-type、list-style-image土至、list-style-position和list-style购对。下面分別介紹這4個屬性。

(一) list-style-type

1. 描述

list-style-type屬性設置列表項標記的類型陶因。

2. 常用屬性值

值

說明

語法示例

|
|

none

無標記符號

list-style-type:none;

|
|

disc

實心圓骡苞，默認類型

list-style-type:disc;

|
|

circle

空心圓

list-style-type:circle;

|
|

square

實心正方形

list-style-type:square;

|
|

decimal

數(shù)字

list-style-type:decimal

(二) list-style-image

1. 描述

list-style-image屬性是使用圖像來替換列表項的標記

當設置了list-style-image，list-style-type就不會起作用楷扬。

2. 案例演示

需求說明

把三角形設置為列表項的標記

實現(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. 描述

此屬性設置在何處放置列表項標記解幽。

2. 屬性值

inside：放置在文本以風，且環(huán)繞文本根據(jù)標記對齊

outside：默認值烘苹，它保持標記位于文本的左側躲株，列表項標記放置在文本以外，且環(huán)繞文本不根據(jù)標記對齊

(四) 列表樣式簡寫

list-style簡寫順序

style-type镣衡、style-position霜定、style-image

(五) 課堂練習

1. 暢銷書排行榜頁面

需求說明

使用無序列表制作暢銷書排行榜頁面

超鏈接無下劃線档悠，鼠標懸浮至超鏈接時顯示下劃線

實現(xiàn)效果

[圖片上傳失敗...(image-cc5dc5-1554343106280)]

實現(xiàn)思路

(1) . 使用list-style-type屬性設置列表無標記符號。

(2) . 使用背景屬性設置列表的圖標樣式望浩，列表內(nèi)容向內(nèi)縮進2個字符辖所。

六、本章總結

(1) . 使用CSS設置字體的大小曾雕、類型奴烙、風格助被、粗細等剖张。

(2) . 使用CSS設置文本顏色、行距揩环、首行縮進搔弄、對齊方式、文本裝飾等丰滑。

(3) . 使用CSS設置超鏈接在不同狀態(tài)下的樣式顾犹。

(4) . 使用CSS設置頁面背景顏色、背景圖片褒墨，為列表設置列表自定義圖標炫刷。

(5) . 使用CSS設置列表項的類型、列表圖像及列表符號顯示位置郁妈。

七浑玛、課后作業(yè)

(一) 制作一個Android課程介紹的界面

1. 需求說明

(1) . 使用<div>、<p>噩咪、<span>等標簽編輯頁面顾彰，頁面整體背景顏色為灰色（#eeeeee）

(2) . 課程特色字體顏色為綠色（#5c9815）,設計理念字體顏色為（#F26522）

(3) . 課程特色和設計理念每行開頭帶背景顏色的字體為白色，背景顏色從提供的素材的頁面效果圖中獲取胃碾。

(4) . 使用外部樣式表創(chuàng)建頁面樣式涨享。

2. 實現(xiàn)效果

[圖片上傳失敗...(image-e8b015-1554343106280)]

(二) 淘寶女裝分類頁面

1. 需求說明

(1) . 使用<div>和標題等HTML標簽編輯頁面

(2) . 女裝各分類名稱前的圖片使用背景圖片的方式實現(xiàn)，標題字體大小為18px,加粗顯示

(3) . 分類內(nèi)容字體大小為12px,超鏈接文本字體顏色為黑色仆百，無下劃線厕隧，當鼠標移至超鏈接文本上時字體顏色為橙色（#F60）,并且顯示下劃線。

(4) . 使用外部樣式表創(chuàng)建頁面樣式

(5) . 頁面中其他效果見效果圖

2. 實現(xiàn)效果

[圖片上傳失敗...(image-4631ca-1554343106280)]

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末俄周，一起剝皮案震驚了整個濱河市栏账，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌栈源，老刑警劉巖挡爵，帶你破解...
沈念sama閱讀 221,198評論 6贊 514
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異甚垦，居然都是意外死亡茶鹃，警方通過查閱死者的電腦和手機涣雕，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,334評論 3贊 398
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來闭翩，“玉大人挣郭，你說我怎么就攤上這事×圃希” “怎么了兑障？”我有些...
開封第一講書人閱讀 167,643評論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長蕉汪。經(jīng)常有香客問我流译，道長，這世上最難降的妖魔是什么者疤？我笑而不...
開封第一講書人閱讀 59,495評論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任福澡，我火速辦了婚禮，結果婚禮上驹马，老公的妹妹穿的比我還像新娘革砸。我一直安慰自己，他們只是感情好糯累，可當我...
茶點故事閱讀 68,502評論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布算利。她就那樣靜靜地躺著，像睡著了一般泳姐。火紅的嫁衣襯著肌膚如雪效拭。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 52,156評論 1贊 308
城市分裂傳說
那天仗岸，我揣著相機與錄音允耿，去河邊找鬼。笑死扒怖，一個胖子當著我的面吹牛较锡，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播盗痒，決...
沈念sama閱讀 40,743評論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼蚂蕴，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了俯邓？” 一聲冷哼從身側響起骡楼，我...
開封第一講書人閱讀 39,659評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎稽鞭，沒想到半個月后鸟整，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,200評論 1贊 319
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡朦蕴，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,282評論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年篮条，在試婚紗的時候發(fā)現(xiàn)自己被綠了弟头。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,424評論 1贊 352
活死人
序言：一個原本活蹦亂跳的男人離奇死亡涉茧，死狀恐怖赴恨，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情伴栓，我是刑警寧澤伦连，帶...
沈念sama閱讀 36,107評論 5贊 349
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站钳垮，受9級特大地震影響惑淳，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜扔枫，卻給世界環(huán)境...
茶點故事閱讀 41,789評論 3贊 333
男人毒藥：我在死后第九天來索命
文/蒙蒙一汛聚、第九天我趴在偏房一處隱蔽的房頂上張望锹安。院中可真熱鬧短荐，春花似錦、人聲如沸叹哭。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,264評論 0贊 23
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽风罩。三九已至糠排，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間超升，已是汗流浹背入宦。一陣腳步聲響...
開封第一講書人閱讀 33,390評論 1贊 271
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留室琢，地道東北人乾闰。一個月前我還...
沈念sama閱讀 48,798評論 3贊 376
代替公主和親
正文我出身青樓，卻偏偏與公主長得像盈滴，于是被迫代替她去往敵國和親涯肩。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 45,435評論 2贊 359

2019-04-04第九次課CSS美化網(wǎng)頁元素

一扮碧、 使用CSS編輯網(wǎng)頁文本

(一) 描述

(二) <span>標簽

1. 描述

2. 案例演示

需求說明

實現(xiàn)效果

核心代碼

(三) 字體樣式

1. 描述

(四) 字體類型 font-family

1. 語法格式

2. 案例演示

需求說明

實現(xiàn)效果

核心代碼

3. 經(jīng)驗說明

(五) 字體大小

1. 描述

(六) 字體風格

1. 描述

2. 案例演示

需求說明

實現(xiàn)效果

核心代碼

(七) 字體粗細

1. 描述

2. font-weight屬性的值

3. 案例演示

實現(xiàn)效果

核心代碼

(八) 字體屬性

1. 描述

2. 案例演示

(九) 使用CSS排版網(wǎng)頁文本

(十) 文本顏色

1. 描述

2. 案例演示

(十一) 水平對齊方式

1. 描述

2. text-align屬性常用值

3. 案例演示：新聞

需求：

實現(xiàn)效果

核心代碼

(十二) 首行縮進和行高

1. 描述

2. 案例演示

需求

實現(xiàn)效果

核心代碼

(十三) 文本修飾和垂直對齊

1. 描述

文本裝飾

垂直對齊方式

2. 案例演示

實現(xiàn)效果

(十四) 課堂練習

1. 制作百度音樂標簽頁面

訓練要點

需求說明

實現(xiàn)思路

參考代碼

(十五) 課后練習

1. 新聞信息展示頁面

需求說明

二、 CSS的復合選擇器和CSS的繼承性

(一) CSS的復合選擇器

1. 描述

2. 后代選擇器

描述

語法

案例演示

后代選擇器常用情況

3. 交集選擇器【理解】

描述

語法格式

案例演示

【總結說明】

一扮碧、使用CSS編輯網(wǎng)頁文本

三共苛、使用CSS設置超鏈接

四、背景樣式

五爷绘、列表樣式