使用<span>標簽為文字設置單獨樣式
這一小節講解<span>標簽,我們對<em>
、<strong>
、<span>
這三個標簽進行一下總結:
1. <em>
和<strong>
標簽是為了強調一段話中的關鍵字時使用,它們的語義是強調。
2. <span>
標簽是沒有語義的,它的作用就是為了設置單獨的樣式用的。
如果現在我們想把上一小節的第一段話“美國夢”三個字設置成blue(藍色),但註意不是為了強調“美國夢”,而只是想為它設置和其它文字不同的樣式(並不想讓屏幕閱讀器對“美國夢”這三個字加重音讀出),所以這樣情況下就可以用到<span>標簽了。
如下面例子:
<p>1922年的春天,一個想要成名名叫<em>尼克?卡拉威</em>(托比?馬奎爾Tobey Maguire 飾)的作家,離開了美國中西部,來到了紐約。那是一個道德感漸失,爵士樂流行,走私為王,<strong>股票</strong>飛漲的時代。為了追尋他的<span>美國夢</span>,他搬入紐約附近一海灣居住。</p>
語法:
<span>文本</span>
任務
我來試試:把“美國夢”設置為藍色
1. 在右部編輯器中的第13行對“美國夢”文本加上<span>標簽。
2. 在第8行輸入color:blue;
,為<span>元素設置文本顏色為藍色。
代碼:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的蓋茨比</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<p>1922年的春天,一個想要成名名叫尼克?卡拉威(托比?馬奎爾Tobey Maguire 飾)的作家,離開了美國中西部,來到了紐約。那是一個道德感漸失,爵士樂流行,走私為王,股票飛漲的時代。為了追尋他的<span>美國夢</span>,他搬入紐約附近一海灣居住。</p>
<p>菲茨傑拉德,二十世紀美國文學巨擘之一,兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗挽歌,其詩人和夢想家的氣質亦為那個奢靡年代的不二註解。</p>
</body>
</html>
使用<span>標簽為文字設置單獨樣式