CSS：CSS概述與引用
阿新 • • 發佈：2018-12-26
CSS概述
CSS，全稱“Cascading Style Sheets”，用於設定HTML標籤的樣式，它的基本結構如下：
CSS引用方式
CSS引用方式主要有四種：行內樣式、內嵌樣式、外鏈樣式和匯入式。
行內樣式
行內樣式是將“style”作為標籤的一個屬性，然後通過它的值來設定的一種方式，寫法如下：
<div style="width:300px；height:300px；background-color: black；"></div>內嵌樣式
內嵌樣式是將樣式作為一個標籤放入 head 標籤對以內，讓瀏覽器在載入完成其他基本資訊之後，首先將樣式給渲染出來，寫法如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Example</title>
<!-- 內嵌樣式 -->
<style type="text/css">
div {
width: 300px;
height: 300px;
background-color: black;
} 外鏈樣式
所謂的外鏈樣式，就是在html文件中引入一個獨立的樣式表文件（.css檔案），這樣做的目的是為了便於我們去設定那些具有相同樣式但不在同一個文件中的內容樣式時使用。使用外鏈樣式需要在 head 標籤對中使用 link 標籤，引入樣式表，寫法如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta 在styles.css檔案中，你需要在檔案開始部分設定字元編碼格式，然後再設定樣式，寫法如下：
/*編碼格式*/
@charset "UTF-8";
div {
width: 300px;
height: 300px;
background-color: black;
}匯入式
匯入式主要用於在一個樣式表中匯入其他的樣式表，可通過 @import 語句實現，@import語句必須位於樣式表頂端，樣式表自己的樣式定義不能出現在它之前，@import語句用得並不廣泛，其中一個原因是不少人並不知道有這個東西。另一個原因則是瀏覽器處理 @import 語句的效率往往不如處理多可 link 元素並靠樣式層疊解決問題。
CSS引用優先順序
行內樣式 > 內嵌樣式 > 外鏈樣式 > 匯入樣式。