HTML+CSS學習筆記（六）

時間 2020-08-17

標籤 html+css html css 學習筆記欄目 CSS 简体版

原文原文鏈接

上次咱們說到了CSS的一些基礎性的概念，這裏咱們將要說的，是如何從零開始，構建一個樣式表。樣式表的種類，一般分爲三種：外部樣式表（推薦）、嵌入樣式表和內聯樣式（最不可取），咱們分開來講。 css

1、 html

外部樣式表： 瀏覽器

將全部的樣式，統一的放在一個文件中，並添加合適的註釋，保存爲.css文件。緩存

一般在index.html同級文件下新建一個"CSS"文件夾，專門用來存放css文件，若是css文件只有一個，一般寫爲style.css。服務器

優勢是與HTML文件鬆散耦合，有的時候多個HTML引用同一份CSS，只需修改CSS文件，就可改變HTML顯示的樣式，瀏覽器的緩存機制，也使得使用這種方式的頁面加載更快。推薦使用！ 網站

加載樣式表到HTML中，一般使用連接的方式：(須要注意的是URL是相對於服務器上該樣式表的位置，即相對於根目錄，而不是HTML文件) url

<head> spa

</head>htm

能夠link多個樣式表，後面的把前面的覆蓋，優先級更高。

嵌入式樣式表：

這種方式直接將CSS規則寫在HTML文件裏，準確的說是放在<head>標籤裏，同時用<style>標籤包圍。

<head>

<style>p{color:red;

font-size:1.2em;}

</style>

</head>

若是嵌入式樣式表出如今link以後，會把外部樣式表的規則覆蓋。

內聯樣式表：

這是最後因該考慮的方式，儘管優先級是最高的，除非有！important，不然內聯樣式會將以前的全部規則覆蓋。因爲這種方式將內容（HTML）與表現（CSS）混在了一塊兒，嚴重違背了最佳實踐，而且一般內聯樣式一次隻影響單個元素，效率低下，修改起來也很困難。類+外部樣式，就可實現對於元素的精確控制，修改起來也很容易，沒有必要寫成內聯樣式。

2、

樣式的層疊和順序：只需記住一點，越晚出現的，優先級越高，固然，！important除外，所以，一般狀況下，內聯樣式老是會優先顯示出來。！important不多使用，但也有例外，如你的網頁引用了第三方服務的新聞源，若是這些HTML中有些樣式不符合你的設計思路，就能夠用！important實現覆蓋！

使用與媒體相關的樣式表：

能夠指定一個只用於輸出，如打印的樣式表，貨只用於查看屏幕，又或者能夠新建一個具備打印和屏幕通用的樣式表，再分別編寫只用於打印，和只用於屏幕版本的樣式。

output能夠是print,screen和all（這三個是最經常使用的），除此以外還有aural,braille,handheld,projection,tty和tv，不一樣瀏覽器的支持程度不一樣，不過最經常使用的仍是前面的三個。若是輸出的方式有多個，用逗號隔開，如meida="print,screen"

還有一種方式，就是在樣式表，一般是外部樣式表，添加媒體輸出：

p{color:red;}

@media print {

p{color:blue;}

}

在後面咱們還會接觸到媒體查詢，構建響應式網站，一樣也是使用media。

借鑑他人的靈感：

查看網頁源代碼，若是是外部樣式的話，就能夠在<head>裏找到引用的位置，點擊便可打開，查看其CSS。

總結：此次的內容比較少，以後咱們統一用外部樣式表的形式創建CSS，讓HTML，CSS和JavaScript各自獨立，這樣以來，不管是編寫仍是維護，都比較簡單，這是構建Web最簡單的方法論，遵循"漸進加強"的原則。