前端菜鳥筆記 Day-3 CSS基礎
文章大綱來源：【Day 3】HTML複習 + CSS基礎
- 初識CSS
- 入門CSS
初識CSS
層疊樣式表（Cascading Style Sheets），即前端常說的CSS。
內容引用：CSS 簡介
樣式解決了什麼問題？
HTML標籤原本 被設計為用於定義文件內容 。
通過使用標籤 來表達語義資訊 。
那個時候的文件佈局由瀏覽器實現，沒有使用什麼格式的標籤。
但是當時主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的HTML標籤和屬性（比如字型顏色等）加入到HTML規範中，文件內容要獨立於文件表示層越來越困難（各家都有各家的HTML書寫屬性規範，並且樣式一般不統一）。
為了解決這個問題，全球資訊網聯盟（W3C）在HTML 4.0 之外創造出樣式 （Style）。
樣式表如何提高工作效率？
樣式表（Style Sheets）定義如何顯示 HTML 元素 。
樣式通常儲存在外部的.css
檔案中，並且可以被多個.html
檔案所引用，所以外部的樣式表可以一處修改，多處協同影響
。
CSS的使用方法
一共有三種：
標籤內屬性定義
<!-- learn.html --> <body style="background: red;"> ... </body>
內部定義
<!-- learn.html -->
<style>
body {
background: red;
}
</style>
外部定義
<!-- learn.html --> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
/* style.css */
body {
background: red;
}
外部定義可以<link>
多個樣式表，書寫多個<link>
標籤引用即可。
那“層疊”指的是什麼？
樣式表允許多種方式 規定樣式資訊。
- HTML元素屬性中
- HTML的頭元素中
- 外部的CSS檔案中
- 同一個文件引用多個外部樣式表
那麼就容易遇到一個問題：“當同一個 HTML 元素被不止一個樣式 定義時，會使用哪個樣式呢？”
這就是一種層疊 了，即多重樣式將層疊為一個 。
在這個層疊過程中，就需要一種層疊次序 ，來選擇最後到底選擇哪一個樣式：
- 最高 ——內聯樣式 ，即 HTML 元素內部
-
高 ——內部樣式表
，即
<head>標籤內部 - 中 ——外部樣式表
- 最低 ——瀏覽器預設樣式
擁有高次序的樣式會覆蓋低次序的樣式定義。
入門CSS
基礎語法
CSS規則 由兩個主要部分構成：選擇器 ，以及宣告 。
selector {
declaration1;
declaration2;
...
declarationN;
}
property: value
例如：
h1 {
color: red;
font-size: 14px;
}
將<h1>
元素內的文字顏色定義為紅色，同時字型大小設定為14畫素。
內容引用：CSS 基礎語法
語法補充
除了基礎語法，還有一些需要補充的內容。
內容引用：CSS 高階語法
選擇器分組
被分組的選擇器可以分享相同的宣告。
h1,h2,h3,h4,h5,h6 {
color: green;
}
使用逗號將需要分組到一組的選擇器連線在一起即可。
樣式繼承
根據CSS，子元素從父元素繼承屬性。
body {
font-family: Verdana, sans-serif;
}
上述規則說明，<body>
元素將使用Verdana
字型（如果訪問者系統中有的話）。
通過CSS繼承，子元素將繼承最高階元素
（上面的例子是<body>
）所擁有的屬性。這裡的子元素指的就是在<body>
標籤內宣告的那些所有標籤(其實並不一定是所有，具體取決於瀏覽器支援度)。
但是在使用CSS繼承規則時，如果不希望一個特定子元素繼承該CSS，則再說明一條特殊規則來覆蓋即可（這部分涉及到選擇器優先順序問題，將在後面說明）。
body {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}
CSS 派生選擇器
依據元素的位置關係來定義樣式。
CSS1稱其為上下文選擇器（contextual selectors），CSS2稱其為派生選擇器。
例子：
li strong {
font-style: italic;
font-weight: normal;
}
<p> <strong>我是粗體字，不是斜體，因為這個規則對我不起作用</strong> </p> <ol> <li> <strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong> </li> <li>我是正常的字型。</li> </ol>
只有 li 元素中的 strong 元素的樣式為斜體字，這樣無需為需要修飾的 strong 元素單獨定義 class或者id，程式碼更加簡潔。
派生選擇器還有更加深入的內容：
- CSS 後代選擇器
- CSS 子元素選擇器
- CSS 相鄰兄弟選擇器
內容引用：CSS 派生選擇器
CSS id選擇器
為標有特定id 的 HTML 元素指定特定的樣式。
id選擇器以"#"來定義。
#red { color: red; }
#green { color: green; }
<p id="red">這個段落是紅色。</p> <p id="green">這個段落是綠色。</p>
之所以叫特定的，就是因為 id屬性只能在每個HTML文件中出現一次 。
在現在佈局中，id選擇器常常用於建立派生選擇器 。
#sidebar p {
...
}
樣式只會應用於出現在id是sidebar
的元素內的段落。
內容引用：CSS id 選擇器
CSS 類選擇器
類選擇器的功能可以簡單看成是：能給多個元素相同id的id選擇器，只不過這裡不再是用id了，而是用class。
在CSS中，類選擇器以一個點號顯示。
.center {
text-align: center;
}
所有擁有center
類的HTML元素都會應用這個樣式。
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
注意：類名的第一個字元不能是數字，否則無法在 Mozilla 或 Firefox 中起作用。
和 id 一樣，class 也可被用作派生選擇器。
.sidebar p {
...
}
內容引用：CSS 類選擇器
CSS 屬性選擇器
對帶有指定屬性的 HTML 元素設定樣式，不僅限於 class 和 id 屬性。
注意：只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支援屬性選擇器。在 IE6 及更低的版本中，不支援屬性選擇。
屬性選擇器：
/* 帶有 title 屬性的所有元素 */
[title] {
color: red;
}
屬性和值選擇器：
/* title="W3School" 的所有元素 */
[title=W3School] {
border: 5px solid blue;
}
如果一個屬性有多個值，想要選中這樣的元素：
/* 適用於由空格分隔的屬性值 */
[title~=hello] {
color: red;
}
/* 適用於由連字元分隔的屬性值 */
[lang|=en] {
color: red;
}
這種方法的一個應用是設定表單的樣式：
input[type="text"] {
...
}
input[type="button"] {
...
}
...
內容引用：CSS 屬性選擇器
個人靜態部落格：
- 氣泡的前端日記：https://rheabubbles.github.io