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