css基礎

更多web開發知識歡迎訪問我的專欄>>>

01-CSS初體驗

層疊樣式表 (Cascading Style Sheets，縮寫為 CSS），是一種 樣式表 語言，用來描述 HTML 文檔的呈現（美化內容）。

書寫位置：title 標簽下方添加 style 雙標簽，style 標簽里面書寫 CSS 代碼。

<title>CSS 初體驗</title>
<style>/* 選擇器 { } */p {/* CSS 屬性 */color: red;}
</style><p>體驗 CSS</p>

提示：屬性名和屬性值成對出現 → 鍵值對。

02-CSS引入方式

• 內部樣式表：學習使用
  • CSS 代碼寫在 style 標簽里面
• 外部樣式表：開發使用
  • CSS 代碼寫在單獨的 CSS 文件中（.css）
  • 在 HTML 使用 link 標簽引入

<link rel="stylesheet" href="./my.css">

• 行內樣式：配合 JavaScript 使用
  • CSS 寫在標簽的 style 屬性值里

<div style="color: red; font-size:20px;">這是 div 標簽</div>

03-選擇器

作用：查找標簽，設置樣式。

標簽選擇器

標簽選擇器：使用標簽名作為選擇器 → 選中同名標簽設置相同的樣式。

例如：p, h1, div, a, img…

<style>p {color: red;}
</style>

注意：標簽選擇器無法差異化同名標簽的顯示效果。

類選擇器

作用：查找標簽，差異化設置標簽的顯示效果。

步驟：

• 定義類選擇器 → .類名
• 使用類選擇器 → 標簽添加 class=“類名”

<style>/* 定義類選擇器 */.red {color: red;}
</style><!-- 使用類選擇器 -->
<div class="red">這是 div 標簽</div>
<div class="red size">div 標簽</div>

注意：

• 類名自定義，不要用純數字或中文，盡量用英文命名
• 一個類選擇器可以供多個標簽使用
• 一個標簽可以使用多個類名，類名之間用空格隔開

開發習慣：類名見名知意，多個單詞可以用 - 連接，例如：news-hd。

id選擇器

作用：查找標簽，差異化設置標簽的顯示效果。

場景：id 選擇器一般配合 JavaScript 使用，很少用來設置 CSS 樣式

步驟：

• 定義 id 選擇器 → #id名
• 使用 id 選擇器 → 標簽添加 id= “id名”

<style>/* 定義 id 選擇器 */#red {color: red;}
</style><!-- 使用 id 選擇器 -->
<div id="red">這是 div 標簽</div>

規則：同一個 id 選擇器在一個頁面只能使用一次。

通配符選擇器

作用：查找頁面所有標簽，設置相同樣式。

通配符選擇器： *，不需要調用，瀏覽器自動查找頁面所有標簽，設置相同的樣式

* {color: red;margin: 0;padding: 0;
}

經驗：通配符選擇器可以用于清除標簽的默認樣式，例如：標簽默認的外邊距、內邊距。

04-盒子尺寸和背景色

目標：使用合適的選擇器畫盒子

當涉及到CSS中的盒模型時，通常會涉及尺寸和背景色等屬性。以下是一個簡單的表格，將屬性名和其作用列出：

屬性名	作用
width	設置盒子的寬度
height	設置盒子的高度
max-width	設置盒子的最大寬度，可防止盒子超出指定寬度
max-height	設置盒子的最大高度，可防止盒子超出指定高度
min-width	設置盒子的最小寬度，保證盒子至少達到指定寬度
min-height	設置盒子的最小高度，保證盒子至少達到指定高度
background-color	設置盒子的背景色
background-image	設置盒子的背景圖片
background-repeat	設置背景圖片的重復方式
background-position	設置背景圖片的位置
background-size	設置背景圖片的尺寸
background-attachment	設置背景圖片的滾動方式

這些屬性可用于控制盒子的尺寸和背景樣式。

05-文字控制屬性字體大小

字體大小

• 屬性名：font-size
• 屬性值：文字尺寸，PC 端網頁最常用的單位 px

p {font-size: 30px;
}

經驗：谷歌瀏覽器默認字號是16px。

字體樣式（是否傾斜）

作用：清除文字默認的傾斜效果

屬性名：font-style

屬性值

• 正常（不傾斜）：normal
• 傾斜：italic

行高

作用：設置多行文本的間距

屬性名：line-height

屬性值

• 數字 + px
• 數字（當前標簽font-size屬性值的倍數）

line-height: 30px;/* 當前標簽字體大小為16px */
line-height: 2;

行高的測量方法：從一行文字的最頂端（最底端）量到下一行文字的最頂端（最底端）。

單行文字垂直居中

垂直居中技巧：行高屬性值等于盒子高度屬性值

注意：該技巧適用于單行文字垂直居中效果

div {height: 100px;background-color: skyblue;/* 注意：只能是單行文字垂直居中 */line-height: 100px;
}

字體族

屬性名：font-family

屬性值：字體名

font-family: 楷體;

拓展（了解）：font-family屬性值可以書寫多個字體名，各個字體名用逗號隔開，執行順序是從左向右依次查找

• font-family 屬性最后設置一個字體族名，網頁開發建議使用無襯線字體

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

font復合屬性

使用場景：設置網頁文字公共樣式

復合屬性：屬性的簡寫方式，一個屬性對應多個值的寫法，各個屬性值之間用空格隔開。

font: 是否傾斜 是否加粗 字號/行高 字體（必須按順序書寫）

div {font: italic 700 30px/2 楷體;
}

注意：字號和字體值必須書寫，否則 font 屬性不生效 。

文本縮進

屬性名：text-indent

屬性值：

• 數字 + px
• 數字 + em（推薦：1em = 當前標簽的字號大小）

p {text-indent: 2em;
}

文本對齊方式

作用：控制內容水平對齊方式

屬性名：text-align

屬性值	作用
left	將文本左對齊（默認）
center	將文本居中對齊
right	將文本右對齊

text-align: center;

text-align本質是控制內容的對齊方式，屬性要設置給內容的父級。

<style>div {text-align: center;}
</style><div><img src="./images/1.jpg" alt="">
</div>

文本修飾線

屬性名： text-decoration

屬性值	作用
none	移除文本的修飾線
underline	在文本下方添加下劃線
overline	在文本上方添加上劃線
line-through	在文本中間添加刪除線
blink	使文本閃爍（不被所有瀏覽器支持，不推薦使用）

這些屬性值可用于設置文本的不同修飾線樣式。

color 文字顏色

提示：只要屬性值為顏色，都可以使用上述四種顏色表示方式，例如：背景色。

06-調試工具

作用：檢查、調試代碼；幫助程序員發現代碼問題、解決問題

1. 打開調試工具

• 瀏覽器窗口內任意位置 / 選中標簽 → 鼠標右鍵 → 檢查
• F12

2. 使用調試工具