一他爸、本課目標(biāo)
- 掌握字體屬性的使用
- 掌握文本排版樣式的使用
為什么使用CSS？
- 有效的傳遞頁面信息
- 使用CSS美化過的頁面文本果善，漂亮诊笤，美觀，吸引用戶
- 可以很好的突出頁面的主題內(nèi)容巾陕，使用戶第一眼可以看到頁面主要內(nèi)容
- 具有良好的用戶體驗(yàn)
二讨跟、span標(biāo)簽
2.1、綜述
<span>標(biāo)簽的作用：能讓某幾個(gè)文字或者某個(gè)詞語凸顯出來
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>測(cè)試</title>
<style>
p .show, .bird span {
font-size: 36px;
font-weight: bold;
color: blue;
}
.yellow {
color: yellow;
}
p #dream {
font-size: 24px;;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<p>享受<span class="show">"北大式"</span>教 <span>育</span>服務(wù)</p>
<p>在北大青鳥鄙煤，有一群人默默支持你成就 <span id="dream">IT夢(mèng)想</span></p>
<p class="yellow">選擇 <span class="show">北大青鳥</span>,成就你的夢(mèng)想</p>
<p class="bird">醉后不 <span>知天</span>在水<span>滿船清夢(mèng)壓星河</span></p>
</body>
</html>
最終效果：
分析1晾匠、當(dāng)使用span標(biāo)簽時(shí)，需要在style里面定義相應(yīng)的樣式梯刚，定義樣式時(shí)需要前面加上p表示這個(gè)樣式是span用的.
2凉馆、對(duì)于一個(gè)段落，如果只是需要某幾個(gè)字需要用到樣式乾巧，則在這幾個(gè)字上加上span標(biāo)簽句喜，同時(shí)早span標(biāo)簽里面定義class或者id屬性，就如body里面的第一行沟于，第二行咳胃。
3、當(dāng)class標(biāo)簽與span標(biāo)簽共用時(shí)旷太，則span標(biāo)簽有更高的優(yōu)先級(jí)展懈。如第三行。
4供璧、當(dāng)在p標(biāo)簽里面使用span標(biāo)簽里面的樣式時(shí)存崖，在只需在相應(yīng)的需要用到的該樣式的字體前后加上span標(biāo)簽即可，此時(shí)span標(biāo)簽里面不需要設(shè)置標(biāo)簽樣式睡毒，如第四行来惧。
2.2、font-family屬性：設(shè)置字體類型
設(shè)置字體的時(shí)候演顾，不要去設(shè)置你電腦上沒有安裝的字體供搀，這樣會(huì)顯示不出來的。
2.3钠至、font-size屬性：設(shè)置字體大小
單位：px（像素）葛虐、em、rem棉钧、cm屿脐、mm、pt、pc
2.4的诵、font-style屬性
字體的風(fēng)格：normal万栅、italic和oblique。第一個(gè)是正常的奢驯，后兩個(gè)是傾斜的申钩。
2.5font-weight屬性
2.6font屬性
在這個(gè)生命中可以設(shè)置所有的字體屬性：
但是是有順序的：
字體屬性的順序：字體風(fēng)格-字體粗細(xì)-字體大小-字體類型
三、文本屬性
文本屬性有一下這些：
文本裝飾其實(shí)就是有沒有下劃線瘪阁。
3.1color屬性
如果有模板的話，可以用PhotoShop拾取你想要的顏色邮偎，然后把相應(yīng)的顏色的值設(shè)置在樣式中管跺。
3.2水平對(duì)齊方式
3.3首行縮進(jìn)
text-indent：48px（text-indent：2em）第一種方式是縮進(jìn)48個(gè)像素，當(dāng)文本的尺寸設(shè)置為12px時(shí)禾进，48px就是兩個(gè)空格豁跑。但是當(dāng)文本尺寸為別的尺寸的時(shí)候，這時(shí)就不一定是兩個(gè)空格的縮進(jìn)了泻云。第二種方式是2em艇拍，此時(shí)是相對(duì)于文本尺寸來定義的。不管文本尺寸怎么改變宠纯，就是縮進(jìn)兩個(gè)字符卸夕。
3.4行高：設(shè)置行與行之間的空隙
line-height：30px，這樣設(shè)置之后行與行之間就會(huì)有30個(gè)像素的空隙婆瓜。行高會(huì)平均分配到行的上下快集。
3.5文本裝飾和垂直對(duì)齊
-
文本裝飾
text-decoration屬性
image.png - 垂直對(duì)齊方式
vertical-align屬性：middle、top廉白、bottom
3.6文本陰影
text-shadow：color x-offset y-offset biur-radius;
3.7總結(jié)
3.8補(bǔ)充
示例代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>樣式復(fù)習(xí)文字</title>
<!--<link rel="stylesheet" href="css.css"/>-->
<style>
/*<!-- 下面這個(gè)樣式代表包含bird這個(gè)屬性的p標(biāo)簽的里面的span標(biāo)簽的樣式-->*/
p.bird span {
font-size: 36px;
font-weight: bold;
color: blue;
}
p.yellow span {
color: yellow;
}
/*下面這個(gè)標(biāo)簽標(biāo)示包含屬性為green的span標(biāo)簽*/
span.green {
font-size: 40px;
color: green;
}
/*這個(gè)表示所有的包含屬性為silver的標(biāo)簽*/
.silver {
color: silver;
}
/*id選擇器*/
#dream {
font-size: 24px;;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<p>享受<span class="green">"北大式"</span>教 <span class="silver">育</span>服務(wù)</p>
<p>在北大青鳥个初，有一群人默默支持你成就 <span id="dream">IT夢(mèng)想</span></p>
<p class="yellow">選擇 <span>北大青鳥</span>,成就 <span>你的夢(mèng)想</span></p>
<p class="bird silver">醉后不<span>知天</span>在水滿船 <span>清夢(mèng)</span>壓星河</p>
</body>
</html>
結(jié)果如下：
注：解決這個(gè)問題給我最重要的啟示是速到不會(huì)的隨時(shí)去查3cschool。
