CSS2基礎
基礎
簡介
【全稱】Cascading Style Sheets，又名層疊樣式表
- 層疊：一層一層塗上去
- 表：列表
- 樣式：如文字大小，顏色，元素寬高等。
CSS 描述了在螢幕、紙質、音訊等其他媒體上的元素應該如何被渲染的問題。
語言型別
標記語言，為HTML結構美化樣式，實現語義與效果的分離，更好地美化網頁，最佳化網頁結構
作用於HTML的方式
行內樣式（不推薦）
語法：
<!--寫在標籤中的style中-->
<body>
<h1 style="color:skyblue;">title</h1>
</body>
缺點：
- 工作量大，效率低下
- html和css耦合性太高，css使html結構與樣式分離的作用微乎其微
內部樣式
語法：
<head>
<meta charset="UTF-8">
<title>內部樣式</title>
<style>
h1{
color: skyblue;
}
h2{
color: greenyellow;
}
</style>
</head>
<body>
優點：
- 結構和樣式已經初步分開，程式碼可以進行服用
缺點：
- 需要複製到另一個html檔案才可以實現樣式複用，耗費時間
[!NOTE]
一開始寫CSS樣式的時候，可以使用內部樣式，不用再開一個.css檔案來賦予結構樣式，
到後來熟練了可以使用外部樣式，寫在.css檔案中
外部樣式
語法：
<!--HTML檔案-->
<head>
<meta charset="UTF-8">
<title>外部樣式表</title>
<link rel="stylesheet" href="../CSS/03.css">
<!--head中寫link來連線外部樣式表-->
<!--rel:關係 href:來源-->
</head>
/*CSS檔案*/
h1{
color: skyblue;
}
h2{
color: gray;
}
最常使用的方式，實際開發幾乎都使用外部樣式表
優點：
- 當第一次透過瀏覽器渲染後，CSS樣式就會因為與.html檔案的分離而進行快取，下次渲染則可以提高訪問速度
樣式的優先順序
順序：
行內樣式 > 內部樣式 = 外部樣式
attention
- 遵循“後來者居上”的原則
- 相當於塗鴉，塗了第二層，第一層就會看不見了
語法規範
結構：
| 選擇器 | 找到想要更改樣式的元素 |
|---|---|
| 宣告塊 | 一個或多個宣告（宣告：[屬性名： 屬性值；]） |
h2{
color: gray;
}
程式碼風格
| 風格 | 作用 |
|---|---|
| 展開風格 | 開發時推薦，便於維護和除錯 |
| 緊湊風格 | 專案上線時推薦，可以減小檔案體積，以節約網路流量，同時使開啟網頁的速度更快 |
CSS選擇器
基本選擇器
通配選擇器
作用：
選中所有的HTML元素（清除樣式的時候有用）
* {
color: red;
}
元素選擇器
作用：
為某種元素統一設定，無法實現同型別的差異化
標籤名 {
屬性名: 屬性值;
}
類選擇器
作用：
透過元素中的class的屬性值來進行可以自己分類的樣式分配
元素中的class屬性的屬性值可以有多個，用空格隔開
class屬性的屬性值儘量為字母+數字，用-連線，避免純數字的出現
/*假設有一個元素h1，它的class屬性的屬性值為skyblue*/
.skyblue {
color: skyblue;
}
ID選擇器
作用：
選中唯一的元素透過id屬性的屬性值（其中的原理是不同的元素，id屬性的屬性值必須不同）
/*假設有一個元素h1，它的id屬性的屬性值為special*/
#special {
color: skyblue;
}
複合選擇器
交集選擇器
作用：
選中同時符合多個條件的元素
選擇器1選2選3 {
color: skyblue;
}
/*比如p.blue 就是說class屬性的屬性值為blue的p標籤（雙重篩選）*/
[!NOTE]
- 有標籤名必須寫在前面
- 不可能同時出現兩個元素選擇器
並集選擇器
作用：
選中多個選擇器對應的元素
h2,
h3,
p {
font-size: large;
}
/*
選擇器1，
選擇器2，
選擇器3 {
屬性名： 屬性值；
}
*/
- 一般豎著寫
- 集體宣告，可以縮小樣式表的體積
HTML元素之間的關係
- 父元素
- 子元素
- 祖先元素（爸爸也算是祖先）
- 後代元素（兒子也算是後代）
- 兄弟元素
為後面的後代選擇器等選擇器做知識儲備
後代選擇器（id，類也可）
作用：
選中指定元素中，符合要求的後代元素
<style>
ul li {
color: skyblue;
font-size: large;
}
</style>
<ul>
<li>l</li>
<li>o</li>
<li>v</li>
<li>e</li>
<li>
<a href="#">love</a>
</li>
<li>
<ul>
<li>1</li> <!--這個也可以被選中-->
</ul>
</li>
</ul>
[!TIP]
- 最後選中的是後代，不包括祖先
- 須符合html的巢狀要求 （可以跨代尋找）
- 子代和孫子輩以及等等可以同時兼顧
子代選擇器
作用：
選中指定元素中符合要求的子代元素
選1>選2>選3 {
color： skyblue；
}
/*
選擇器可以不從最外面開始找尋元素
*/
兄弟選擇器
作用：
選中指定元素後，符合條件的相鄰兄弟元素
分類：
| 分類 | 語法 | 作用 |
|---|---|---|
| 相鄰 | 選1+選2 | 向下找同代，第一個如果是選2，則賦予樣式 |
| 通用 | 選1~選2 | 向下找通帶，如果是選2，則賦予樣式，可以不止一個 |
<style>
ul+ol {
color: skyblue;
}
p+h2 {
color: yellow;
}
h2~h3 {
color: aquamarine;
font-size: large;
}
</style>
<body>
<div>
<ul>
<li>love</li>
<li>like</li>
</ul>
<ol>
<li>long</li>
<li>lonely</li>
</ol>
<p>paragrah</p>
<h3>title333</h3>
<h2>title2</h2>
<h3>title3</h3>
<h3>title33</h3>
</body>
屬性選擇器
作用：
選中屬性值符合一定要求的元素
/* 第一種寫法，選中具有相同屬性的元素 */
[title] {
color: skyblue;
}
/* 第二種寫法，選中屬性以及屬性值都相同的元素 */
[title = "1"] {
color: aquamarine;
}
/* 第三種寫法，選中屬性相同，且屬性值開頭相同的元素 */
[title^="a"] {
color: yellow;
}
/* 第四種寫法，選中屬性相同，且屬性值結尾相同的元素 */
[title$="e"] {
font-size: larger;
}
/* 第五種寫法，選中屬性相同，且屬性值中包含部分值的元素 */
[title*="1"] {
color: brown;
}
偽類選擇器
概念解析：
不是真的類class，而是元素的一種狀態
分類：
| 動態偽類 | 意思 | 結構偽類 | 意思 |
|---|---|---|---|
| link（超連結獨有） | 尚未連線 | first-child | 第一個孩子 |
| visted（超連結獨有） | 連線過 | last-child | 最後一個孩子 |
| hover | 滑鼠懸停 | nth-child（n） | 第n個孩子 |
| active | 元素啟用（按下滑鼠不鬆開） | first-of-type | 第一個同型別孩子 |
| focus | 獲取焦點（表單元素） | last-of-type | 最後一個同型別孩子 |
| nth-of-type（n） | 第n個同型別孩子 | ||
結構偽類補充
1.關於括號中的n
- 0或不寫：什麼都不選
- n：選中所有（幾乎不用）
- 1~正無窮：選中對應序號
- 2n或even：選中序號為偶數
- 2n+1或odd：選中序號為奇數
- -n+3：選中前三個
原理：an + b
2.細節：
類似於立嫡立長，即取第一個兒子，孫子...(同時)
例子：
div p:first-child
意思是找div中的第一個兒子，孫子...是不是p，是就賦予樣式
p:first-child
意思是找body中的第一個兒子，孫子...是不是p，是就賦予樣式
否定偽類
作用：
排除滿足括號中條件的元素
語法：
:not(選擇器)
p:not(:first-child) {
color: skyblue;
}
UI偽類
分類：
| what | 意思 |
|---|---|
| checked | 被選中的核取方塊或單選框 |
| enable | 可用的表單元素 |
| disabled | 不可用的表單元素 |
/* 選中的是被選中的核取方塊和單選框 */
input:checked {
width: 100px;
height: 100px;
}
/* 選中的是被禁用的input元素 */
input:disabled {
background-color: gray;
}
/* 選中的是可用的input元素 */
input:enabled {
background-color: skyblue;
}
目標偽類（瞭解）
作用：
選中指定的錨點元素
/* 選中錨點指向的元素 */
div:target{
background-color: gray;
}
語言偽類（瞭解）
作用：
根據指定的語言選擇元素
div:lang(en) {
color: skyblue;
}
偽元素選擇器
作用：
選中元素中的一些特殊位置（在元素裡）
分類：
| what | 意思 |
|---|---|
| first-letter | 第一個文字 |
| first-line | 第一行文字 |
| selection | 被滑鼠選中 |
| placeholder | 提示文字（輸入框中） |
| before | 最開始的位置建立子元素 |
| after | 最後的位置建立子元素 |
/* 選中元素中的第一個文字 */
div::first-letter {
color:skyblue;
}
/* 選中元素中的第一行文字 */
div::first-line {
color: gray;
}
/* 選中的是滑鼠選中的文字 */
div::selection {
color: red;
background-color: gainsboro;
}
/* 選中的是input元素中的提示文字 */
input::placeholder {
color:skyblue;
}
/* 在p元素一開始的位置，建立一個子元素 */
p::before {
content: "￥";
}
/* 在p元素最後的位置，建立一個子元素 */
p::after {
content: "millions";
}
[!WARNING]
first-letter 和first-line內容若出現使用重疊，first-letter所使用的樣式會覆蓋first-line的樣式
選擇器優先順序
原則：
- 透過權重來區分到底哪個樣式最優先
- 行內樣式和!important出現就不計較權重誰大誰小
細節呈現：
權重語法：（a，b，c）{a,b,c為個數}
| a | ID |
|---|---|
| b | 類，偽類，屬性 |
| c | 元素，為元素 |
權重比較方式
一個一個進行比較，當a比出結果，權重就出結果，若沒有，就接著往下讓b進行比較，以此類推
[!IMPORTANT]
!important > 行內樣式 > 一切權重
!important不到情急不可進行使用，因為這種做法會使工作的交接細節出現問題，
即使使用了，過後也需要刪除，找到無法用權重方式使樣式變更的原因，並解決
快捷方式：
只要將滑鼠放在選擇器上，則可以出現權重，無需計算
之前的講解是為了瞭解其中的權重計算原理，而非只是表面的計算