認(rèn)識(shí)CSS樣式

番茄西紅柿發(fā)布于2019-04-23 13:19 / 490人閱讀

摘要：聲明在英文大括號(hào)中的的就是聲明，屬性和值之間用英文冒號(hào)分隔。嵌入式樣式慕課網(wǎng)，超酷的互聯(lián)網(wǎng)技術(shù)免費(fèi)學(xué)習(xí)平臺(tái)，創(chuàng)新的網(wǎng)絡(luò)一站式學(xué)習(xí)實(shí)踐體驗(yàn)服務(wù)及時(shí)貼心，內(nèi)容專業(yè)有趣易學(xué)。

6-2 css樣式的優(yōu)點(diǎn)

　　為什么使用css樣式來(lái)設(shè)置網(wǎng)頁(yè)的外觀樣式呢？右邊編輯器是一段文字，我們想把“超酷的互聯(lián)網(wǎng)”、“服務(wù)及時(shí)貼心”、“有趣易學(xué)”這三個(gè)短語(yǔ)的文本顏色設(shè)置為紅色，這時(shí)就可以通過(guò)設(shè)置樣式來(lái)設(shè)置，而且只需要編寫一條css樣式語(yǔ)句。

第一步：把這三個(gè)短語(yǔ)用括起來(lái)。（見(jiàn)右邊代碼編輯器13行）

第二步：寫入下列代碼：（見(jiàn)右邊代碼編輯器7-8行）

span{
    color:red;
}

觀察結(jié)果窗口文字的顏色是否變?yōu)榧t色了

 1 DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS樣式的優(yōu)勢(shì)title>
 6 <style type="text/css">
 7 span{
 8    color:blue;
 9 }
10 style>
11 head>
12 <body>
13     <p>慕課網(wǎng)，<span>超酷的互聯(lián)網(wǎng)span>、IT技術(shù)免費(fèi)學(xué)習(xí)平臺(tái)，創(chuàng)新的網(wǎng)絡(luò)一站式學(xué)習(xí)、實(shí)踐體驗(yàn)；<span>服務(wù)及時(shí)貼心span>，內(nèi)容專業(yè)、<span>有趣易學(xué)span>。專注服務(wù)互聯(lián)網(wǎng)工程師快速成為技術(shù)高手！p>
14 body>
15 html>

View Code

6-3 css 代碼語(yǔ)法

css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示：

選擇符：又稱選擇器，指明網(wǎng)頁(yè)中要應(yīng)用樣式規(guī)則的元素，如本例中是網(wǎng)頁(yè)中所有的段（p）的文字將變成藍(lán)色，而其他的元素（如ol）不會(huì)受到影響。

聲明：在英文大括號(hào)“｛｝”中的的就是聲明，屬性和值之間用英文冒號(hào)“：”分隔。當(dāng)有多條聲明時(shí)，中間可以英文分號(hào)“;”分隔，如下所示：

p{font-size:12px;color:red;}

注意：

1、最后一條聲明可以沒(méi)有分號(hào)，但是為了以后修改方便，一般也加上分號(hào)。

2、為了使用樣式更加容易閱讀，可以將每條代碼寫在一個(gè)新行內(nèi)，如下所示：

p{
   font-size:12px;
   color:red;
}

 1 DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS代碼語(yǔ)法title>
 6 <style type="text/css">
 7 p{
 8    font-size:12px;
 9    color:red;
10    font-weight:bold;
11 }
12 style>
13 head>
14 <body>
15 <p>慕課網(wǎng)，超酷的互聯(lián)網(wǎng)、IT技術(shù)免費(fèi)學(xué)習(xí)平臺(tái)，創(chuàng)新的網(wǎng)絡(luò)一站式學(xué)習(xí)、實(shí)踐體驗(yàn)；服務(wù)及時(shí)貼心，內(nèi)容專業(yè)、有趣易學(xué)。專注服務(wù)互聯(lián)網(wǎng)工程師快速成為技術(shù)高手！p>
16 body>
17 html>

CSS代碼語(yǔ)法

6-4 CSS注釋代碼

在Html的注釋一樣，在CSS中也有注釋語(yǔ)句：用/*注釋語(yǔ)句*/來(lái)標(biāo)明（Html中使用)。就像下面代碼：

 1 DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS注釋代碼title>
 6 <style type="text/css">
 7 p{
 8    font-size:12px;/*設(shè)置文字字號(hào)為12px*/
 9    color:red;/*設(shè)置文字顏色為紅色*/
10 }
11 style>
12 head>
13 <body>
14 <p>慕課網(wǎng)，超酷的互聯(lián)網(wǎng)、IT技術(shù)免費(fèi)學(xué)習(xí)平臺(tái)，創(chuàng)新的網(wǎng)絡(luò)一站式學(xué)習(xí)、實(shí)踐體驗(yàn)；服務(wù)及時(shí)貼心，內(nèi)容專業(yè)、有趣易學(xué)。專注服務(wù)互聯(lián)網(wǎng)工程師快速成為技術(shù)高手！p>
15 body>
16 html>

注釋代碼

6-5 內(nèi)聯(lián)式css樣式，直接寫在現(xiàn)有的HTML標(biāo)簽中

現(xiàn)在有一任務(wù)，把右側(cè)編輯器中的“超酷的互聯(lián)網(wǎng)”、“服務(wù)及時(shí)貼心”、“有趣易學(xué)”這三個(gè)短詞文字字號(hào)修改為18px。如果用上節(jié)課我們學(xué)習(xí)的內(nèi)聯(lián)式css樣式的方法進(jìn)行設(shè)置將是一件很頭疼的事情（為每一個(gè)標(biāo)簽加入sytle="font-size:18px"語(yǔ)句），本小節(jié)講解一種新的方法嵌入式css樣式來(lái)實(shí)現(xiàn)這個(gè)任務(wù)。

嵌入式css樣式，就是可以把css樣式代碼寫在標(biāo)簽之間。如下面代碼實(shí)現(xiàn)把三個(gè)標(biāo)簽中的文字設(shè)置為紅色：

嵌入式css樣式必須寫在之間，并且一般情況下嵌入式css樣式寫在之間。如右邊編輯器中的代碼。

 1 DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>嵌入式css樣式title>
 6 <style type="text/css">
 7 span{
 8    color:blue;
 9 }
10 style>
11 head>
12 <body>
13     <p>慕課網(wǎng)，<span>超酷的互聯(lián)網(wǎng)span>、IT技術(shù)免費(fèi)學(xué)習(xí)平臺(tái)，創(chuàng)新的網(wǎng)絡(luò)一站式學(xué)習(xí)、實(shí)踐體驗(yàn)；<span>服務(wù)及時(shí)貼心span>，內(nèi)容專業(yè)、<span>有趣易學(xué)span>。專注服務(wù)互聯(lián)網(wǎng)工程師快速成為技術(shù)高手！p>
14 body>
15 html>

View Code

6-6

外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個(gè)多帶帶的外部文件中，這個(gè)css樣式文件以“.css”為擴(kuò)展名，在內(nèi)（不是在代碼的前面（實(shí)際開(kāi)發(fā)中也是這么寫的）。感興趣的小伙伴可以試一下，把它們調(diào)換順序，再看他們的優(yōu)先級(jí)是否變化。

其實(shí)總結(jié)來(lái)說(shuō)，就是--就近原則（離被設(shè)置元素越近優(yōu)先級(jí)別越高）。

 1 DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>嵌入式css樣式title>
 6 <link href="style.css" rel="stylesheet" type="text/css">
 7 <style type="text/css">
 8 span{
 9    color:red;
10 }
11 style>
12 head>
13 <body>
14     <p>慕課網(wǎng)，<span style="color:pink">超酷的互聯(lián)網(wǎng)span>、IT技術(shù)免費(fèi)學(xué)習(xí)平臺(tái)，創(chuàng)新的網(wǎng)絡(luò)一站式學(xué)習(xí)、實(shí)踐體驗(yàn)；服務(wù)及時(shí)貼心，內(nèi)容專業(yè)、有趣易學(xué)。專注服務(wù)互聯(lián)網(wǎng)工程師快速成為技術(shù)高手！p>
15 body>
16 html>