整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
部樣式解決了內(nèi)聯(lián)樣式的問題，但他也有弊端，主要表現(xiàn)在一下兩個方面：
弊端1，內(nèi)部樣式只能作用于一個頁面，如果要實現(xiàn)多個頁面共享一個樣式，就做不到了。
弊端2，隨著樣式代碼的不斷增加，在編輯器中，要不停的上下滾動屏幕來編輯樣式，很不方便。
解決這些弊端的方法就是使用外部 CSS。
外部 CSS，也叫外部樣式，可以通過改變一個文件來改變整個網(wǎng)站的外觀！
外部樣式，將 CSS 代碼放在一個獨立的，以 .css 為后綴名的文件中，使 html 頁面結(jié)構(gòu)文件和 css 樣式文件完全獨立開來。
每個HTML頁面都必須在 head 元素里添加 <link> 元素，link 是鏈接的意思。
在 <link> 元素里定義 rel 屬性，rel 是 relationship 的縮寫，譯為關(guān)系、關(guān)聯(lián)，值為 stylesheet，表示關(guān)聯(lián)一個樣式表。
再定義一個 href 屬性，用來設(shè)置一個對外部樣式表文件的引用，值為 .css 文件的路徑。
我們來做個例子。
在 002-add-css 文件夾里創(chuàng)建一個 external-1.html 文件，構(gòu)建好基礎(chǔ)代碼。添加 h1 和 p 元素，分別填入一些文本。
再創(chuàng)建一個 external-2.html 文件，構(gòu)建好基礎(chǔ)代碼。添加 h1 和 p 元素，分別填入一些文本。
在 002-add-css 文件夾里創(chuàng)建一個 mystyle.css 文件，在這個文件里直接編寫樣式：
body，空格，花括號，回車，定義樣式屬性名 background-color，冒號，屬性值為 lightblue，分號。
h1，空格，花括號，回車，color，navy，分號，margin-left，20px，分號。
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
前面說到，樣式表代碼的編寫格式很寬松，但是我們編寫樣式的時候還是要有一定的規(guī)范：
選擇器和花括號中間用一個空格隔開；
每一條樣式聲明語句單獨一行定義；
兩組樣式定義用空行來分隔。
樣式文件定義好后，在 external-1.html 文件的 head 元素里輸入 link，按下回車鍵或 tab 鍵，emmet 會為我們自動補全一些代碼，我們只需要設(shè)置 href 屬性的外部樣式文件路徑就好了。這里我們填入 mystyle.css。保存。
預(yù)覽頁面，第一個頁面的樣式添加好了。
在 external-2.html 文件的 head 元素里也添加一個 link 元素，設(shè)置同樣的路徑 mystyle.css。保存。
預(yù)覽頁面，第二個頁面的樣式也添加好了。
不難發(fā)現(xiàn)，在 mystyle.css 定義的一套樣式，應(yīng)用到了兩個頁面上，做到了多個頁面的樣式共享。
文章配套視頻鏈接：https://www.bilibili.com/video/BV1oU4y1278g?p=55
avaScript 程序不能獨立運行，它需要被嵌入 HTML 中，然后瀏覽器才能執(zhí)行 JavaScript 代碼。通過 <script> 標簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內(nèi)部方式
內(nèi)部方式是通過<script>標簽包裹JavaScript代碼,從而引入HTML頁面中，示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 基礎(chǔ) - 引入方式</title>
</head>
<body>
<!-- 內(nèi)聯(lián)形式：通過 script 標簽包裹 JavaScript 代碼 -->
<script>
alert('嗨，歡迎來傳智播學習前端技術(shù)！')
</script>
</body>
</html>2.外部形式
一般將 JavaScript 代碼寫在獨立的以 .js 結(jié)尾的文件中，然后通過 <script>標簽的 <src>屬性引入，示例代碼如下：
// demo.js
document.write('嗨，歡迎來傳智播學習前端技術(shù)！')<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 基礎(chǔ) - 引入方式</title>
</head>
<body>
<!-- 外部形式：通過 script 的 src 屬性引入獨立的 .js 文件 -->
<script src="demo.js"></script>
</body>
</html>注意：如果 script 標簽使用 src 屬性引入了某 .js 文件，那么 標簽的代碼會被忽略！！！如下代碼所示：
1）字體的屬性
字體屬性用于定義字體的類型、字號大小、加粗、斜體等方面樣式。常用的字體屬性如下表所示：
屬 性 | 可 取 值 | 描 述 |
font | font-style、font-variant、font-weight、font-size（或 line-height）、font-family | 在一個聲明中設(shè)置所有的字體屬性 |
font-family | 字體名稱、inherit | 設(shè)置字體類型 |
font-size | xx-small、x-small、small、medium（默認）、large、x-large、xx-large smaller、larger length、%、inherit | 設(shè)置字體大小 |
font-weight | normal（默認）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold） | 設(shè)置字體粗細 |
font-style | normal、italic、oblique、inherit | 設(shè)置字體風格 |
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h3 {
font-size: 20px;
font-family: 隸書;
line-height: 28px;
}
span {
font: italic 16px 華文彩云;
}
</style>
</head>
<body>
<h3>Web 前端技術(shù)</h3>
<span
>在當今社會中，Web 已經(jīng)成為網(wǎng)絡(luò)信息共享和發(fā)布的主要形式。要想開發(fā) Web 應(yīng)用
系統(tǒng)，就必須掌握 Web 前端技術(shù)。</span
>
</body>
</html>顯示為，
（2）CSS 中鏈接標簽可用的偽類：
CSS 中，偽類是添加到選擇器的關(guān)鍵字，給指定元素設(shè)置一些特殊狀態(tài)，我們以 : 開頭。
鏈接有以下四個狀態(tài)。這四種狀態(tài)也稱之為超鏈接的偽類。
狀態(tài) | 效果 |
a:link | 普通的、未被訪問的鏈接。 |
a:hover | 鼠標指針位于鏈接的上方。 |
a:active | 鏈接被單擊的時刻。 |
a:visited | 用戶已訪問的鏈接。 |
針對超鏈接的上述四種狀態(tài)設(shè)置樣式規(guī)則，能起到美化超鏈接的作用。例如，為了完成下對超鏈接的顯示要求，編寫的 CSS 樣式代碼如下。
狀 態(tài) | 顏 色 | 背 景 色 | 文 本 修 飾 |
未訪問 | 藍色 | 無 | 無下畫線 |
鼠標移到 | 黑色 | #DDDDDD | 下畫線 |
正單擊 | 紅色 | #AAAAAA | 刪除線 |
已訪問 | 綠色 | 無 | 無下畫線 |
對于超鏈接的偽類，我們推薦的使用順序是：:link - :visited - :hover - :active。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
text-decoration: none;
}
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="#">這是一個鏈接</a>
</body>
</html>
顯示為，
為什么要按照這樣的順序來使用呢？ 調(diào)整幾個偽類的順序，看看會發(fā)生什么。
我們把 a:link 放到最后，效果如下：
從圖中可以發(fā)現(xiàn)其中的樣式屬性都被覆蓋了。
（3）列表相關(guān)的樣式屬性：
屬 性 | 可 取 值 | 描 述 |
list-style | list-style-type、list-style-position、list-style-image | 在一個聲明中設(shè)置所有的列表屬性 |
list-style-image | URL、none | 設(shè)置圖像為列表項標志 |
list-style-position | inside、outside、inherit | 設(shè)置列表中列表項標志的位置 |
list-style-type | disc（默認）、circle、square、decimal 等 | 設(shè)置列表項標志的類型 |
例子，
wget https://labfile.oss.aliyuncs.com/courses/2841/list.gif*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
