前端基礎 —— B / CSS基礎

一、CSS 基礎概述

定義：層疊樣式表（Cascading Style Sheets）

作用：美化頁面、實現樣式與結構分離

二、CSS 基本語法與引入方式

1. 語法規范

選擇器 +?{一條/N條聲明}

選擇器決定針對誰修改 (找誰)
聲明決定修改啥. (干啥)

<style>
p {
/* 設置字體顏色 */
color: red;
/* 設置字體大小 */
font-size: 30px;
}
</style>
<p>hello</p>

寫在 `<style>` 標簽中，通常放在 `<head>`

2. 引入方式

內部樣式表：寫在 HTML 的 `<style>` 標簽中

行內樣式表：通過元素的 `style` 屬性設置

外部樣式表：通過 `<link>` 標簽引入 `.css` 文件（推薦）

1. 創建一個 css 文件.
2. 使用 link 標簽引入 css

<link rel="stylesheet" href="[CSS文件路徑]">

創建 demo.html

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部樣式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>上帝為你關上一扇門, 然后就去睡覺了</div>
</body>

創建 style.css

div {
color: red;
}

注意: 不要忘記 link 標簽調用 CSS, 否則不生效.

三、代碼風格

格式風格：展開風格（推薦）、緊湊風格

緊湊風格
p { color: red; font-size: 30px;}展開風格
p {
color: red;
font-size: 30px;
}

大小寫：統一小寫

空格規范：冒號后加空格，選擇器與 `{` 之間加空格

四、選擇器

1. 基礎選擇器

標簽選擇器

選中所有同名標簽，能快速為同一類型的標簽都選擇出來.但是不能差異化選擇

<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>咬人貓</p>
<p>咬人貓</p>
<p>咬人貓</p>
<div>阿葉君</div>
<div>阿葉君</div>
<div>阿葉君</div>

類選擇器

可復用，差異化選擇?? ?

<style>
.blue {
color: blue;
}
</style>
<div class="blue">咬人貓</div>
<div>咬人貓</div>

語法細節:
類名用 . 開頭的
下方的標簽使用 class 屬性來調用.
一個類可以被多個標簽使用, 一個標簽也能使用多個類(多個類名要使用空格分割, 這種做法可以讓
代碼更好復用)
如果是長的類名, 可以使用 - 分割.
不要使用純數字, 或者中文, 以及標簽名來命名類名

<style>
.box {
width: 200px;
height: 150px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>

ID 選擇器

唯一，不能重復?? ?

CSS 中使用 # 開頭表示 id 選擇器
id 選擇器的值和 html 中某個元素的 id 值相同
html 的元素 id 不必帶 #
id 是唯一的, 不能被多個標簽使用 (是和類選擇器最大的區別)

<style>
#ha {
color: red;
}
</style>
<div id="ha">蛤蛤蛤</div>

通配符選擇器

選中所有元素?? ?頁面的所有內容都會被改成紅色 .不需要被頁面結構調用

* {
color: red;
}

2. 復合選擇器

后代選擇器：`父子`

元素 1 和元素 2 要使用空格分割
元素 1 是父級, 元素 2 是子級, 只選元素 2 , 不影響元素 1

代碼示例1: 把 ol 中的 li 修改顏色, 不影響 ul

<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>
ol li {
color: red;
}

代碼示例2: 元素 2 不一定非是兒子, 也可以是孫子

<ul>
<li>aaa</li>
<li>bbb</li>
<li><a href="#">ccc</a></li>
</ul>
ul li a {
color: yellow;
}
或者
ul a {
color: yellow;
}

代碼示例3: 可以是任意基礎選擇器的組合. (包括類選擇器, id 選擇器)

<ol class="one">
<li>ddd</li>
<li>eee</li>
<li><a href="#">fff</a></li>
<li><a href="#">fff</a></li>
<li><a href="#">fff</a></li>
</ol>.one li a {
color: green;
}

子選擇器：`父 > 子`

元素1>元素2 { 樣式聲明 }

使用大于號分割
只選親兒子, 不選孫子元素

1. 把以下代碼中的 "小貓" 改成紅色

<div class="cat">
<ul>
<li><a href="#">小貓</a></li>
<li><a href="#">小貓</a></li>
<li><a href="#">小貓</a></li>
</ul>
</div>

CSS 結果:

.cat ul li a {
color: red;
}

2. 把以下代碼中的 "小貓" 改成紅色

<div class="cat">
<a href="#">小貓</a>
<ul>
<li><a href="#">小狗</a></li>
<li><a href="#">小狗</a></li>
</ul>
</div>

.cat>a {
color: red;
}

并集選擇器：`元素1, 元素2`

偽類選擇器：

鏈接偽類：`:link`, `:visited`, `:hover`, `:active`

焦點偽類：`:focus`

五、常用屬性

1. 字體屬性

font-family：字體類型

body {
font-family: '微軟雅黑';
font-family: 'Microsoft YaHei';
}

<style>
.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋體';
}
</style>
<div class="font-family">
<div class="one">
這是微軟雅黑
</div>
<div class="two">
這是宋體
</div>
</div>

font-size：字體大小

p {
font-size: 20px;
}

<style>
.font-size .one {
font-size: 40px;
}
.font-size .two {
font-size: 20px;
}
</style>
<div class="font-size">
<div class="one">
大大大
</div>
<div class="two">
小小小
</div>
</div>

font-weight：字體粗細

p {
font-weight: bold;
font-weight: 700;
}

可以使用數字表示粗細.
700 == bold, 400 是不變粗, == normal
取值范圍是 100 -> 900

<style>
.font-weight .one {
font-weight: 900;
}
.font-weight .two {
font-weight: 100;
}
</style>
<div class="font-weight">
<div class="one">
粗粗粗
</div>
<div class="two">
細細細
</div>
</div>

font-style：斜體/正常

/* 設置傾斜 */
font-style: italic;
/* 取消傾斜 */
font-style: normal;

<style>
.font-style em {
font-style: normal;
}
.font-style div {
font-style: italic;
}
</style>
<div class="font-style">
<em>
放假啦
</em>
<div class="one">
聽說要加班
</div>
</div>

2. 文本屬性

color：顏色

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

RGB、十六進制、預定義色，鼠標懸停在 vscode 的顏色上, 會出現顏色選擇器, 可以手動調整顏色.十六進制形式表示顏色, 如果兩兩相同, 就可以用一個來表示.#ff00ff => #f0f

<style>
.color {
color: red;
/* color: rgb(255, 0, 0); */
/* color: #ff0000; */
}
</style>
<div class="color">這是一段話</div>

text-align：水平對齊

控制文字水平方向的對齊.不光能控制文本對齊, 也能控制圖片等元素居中或者靠右

<style>
.text-align .one {
text-align: left;
}
.text-align .two {
text-align: right;
}
.text-align .three {
text-align: center;
}
</style>
<div class="text-align">
<div class="one">左對齊</div>
<div class="two">右對齊</div>
<div class="three">居中對齊</div>
</div>

text-decoration：下劃線、刪除線

text-decoration: [值];

underline 下劃線. [常用]
none 啥都沒有. 可以給 a 標簽去掉下劃線.
overline 上劃線. [不常用]
line-through 刪除線 [不常用]

<style>
.text-decorate .one {
text-decoration: none;
}
.text-decorate .two {
text-decoration: underline;
}
.text-decorate .three {
text-decoration: overline;
}
.text-decorate .four {
text-decoration: line-through;
}
</style>
<div class="text-decorate">
<div class="one">啥都沒有</div>
<div class="two">下劃線</div>
<div class="three">上劃線</div>
<div class="four">刪除線</div>
</div>

text-indent：首行縮進

text-indent: [值];

單位可以使用 px 或者 em.
使用 em 作為單位更好. 1 個 em 就是當前元素的文字大小.
縮進可以是負的, 表示往左縮進. (會導致文字就冒出去了)

<style>
.text-indent .one {
text-indent: 2em;
}
.text-indent .two {
text-indent: -2em;
}
</style>
<div class="text-indent">
<div class="one">正常縮進</div>
<div class="two">反向縮進</div>
</div>

line-height：行高

3. 背景屬性

background-color：背景顏色

background-image：背景圖片

background-repeat：平鋪方式

background-position：背景位置

background-size：背景尺寸（contain/cover）

六、圓角與邊框

?border-radius：圓角矩形、圓形

復合寫法：四個角分別設置

border` 簡寫：寬度、樣式、顏色

七、元素顯示模式

類型?? ?特點描述?? ?
塊級元素?? ?獨占一行，可設寬高，如 div、p、h1h6?? ?
行內元素?? ?不獨占一行，不能設寬高，如 span、a?? ?
行內塊元素?? ?可設寬高且不獨占一行，如 img、input?? ?

- `display` 屬性可改變顯示模式：
- `block` / `inline` / `inline-block`

八、盒模型

?組成：`content + padding + border + margin`
- `box-sizing: border-box`：防止 padding/border 撐大盒子
- `margin: 0 auto`：塊級元素水平居中
- 清除默認樣式：`* { margin: 0; padding: 0; }`