【前端】CSS基礎（3）

文章目錄

前言
1. CSS常用元素屬性
- 1.1 字體屬性
- - 1.1.1 字體
  - 1.1.2 字體大小
  - 1.1.3 字體顏色
  - 1.1.4 字體粗細
  - 1.1.5 文字樣式

前言

這篇博客僅僅是對CSS的基本結構進行了一些說明，關于CSS的更多講解以及HTML、Javascript部分的講解可以關注一下下面的專欄，會持續更新的。
鏈接： Web前端學習專欄
下面我對這個專欄的內容進行幾點說明：
1. 適合每一個前端0基礎的小伙伴學習。
2. 對常用標簽以及常用屬性進行了詳細講解。
3. 最后有綜合案例實現，手把手帶大家實現每一個綜合案例。
4. 可以把專欄當作查詢資料，前端的知識忘記了的話可以根據博客的目錄找到相對應的內容進行復習。
首先，提示一下大家，如果是在手機端看這篇博客的小伙伴，請移步電腦端學習哈！在電腦上會更好看一些！如果能夠跟著在電腦上進行代碼的實現就會更好了！
其次，歡迎大家來到前端的學習，因為我們可以很直觀的看見代碼的效果，所以我覺得前端的學習其實是很有意思的。這篇博客，將幫助您從零開始學習前端。
在這個學習過程中，將遇到挑戰和困難，但請相信，每一次的努力和堅持都將化為成長的動力。讓我們攜手共進，一起探索Web前端的無限可能！

1. CSS常用元素屬性

CSS 屬性有很多, 可以參考文檔
鏈接：參考文檔

不需要全都背下來, 而是在使用中學習.

1.1 字體屬性

1.1.1 字體

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

語法說明：

字體名稱可以使用中文，但是不建議。
多個字體之間使用逗號分割（從左到右查找字體，如果都找不到，會使用默認字體）。
如果字體名有空格，使用引號包裹。
建議使用常見字體，否則兼容性不好。

代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>這是宋體</div>
</body>
</html>

瀏覽器顯示如下：

在這里插入圖片描述
上面的是我們的瀏覽器的默認效果。
那么我們接下來將其設置為宋體：

代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font-family: '宋體';}</style>
</head>
<body><div>這是宋體</div>
</body>
</html>

瀏覽器顯示如下：
在這里插入圖片描述

1.1.2 字體大小

p {font-size: 20px;
}

語法說明：

不同瀏覽器默認字號是不一樣的，最好給一個明確值（chrome默認是16px）.
可以給boby標簽使用font-size.
要注意單位px不要忘記。
標題標簽需要單獨指定大小。

代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font-family: '宋體';font-size: 80px;}</style>
</head>
<body><div>這是宋體</div>
</body>
</html>

瀏覽器顯示如下：
在這里插入圖片描述
如果，我們在寫代碼時，將字體大小的單位寫錯了，那么會是怎樣呢？
代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font-family: '宋體';font-size: 80p;}</style>
</head>
<body><div>這是宋體</div>
</body>
</html>

瀏覽器顯示如下：
在這里插入圖片描述

我們可以看到，此時瀏覽器會表現出一定的容錯能力，我們把字體大小的單位寫錯了，瀏覽器會展示瀏覽器默認的字體大小。

1.1.3 字體顏色

認識RGB:
我們的顯示器是由很多很多的 “像素” 構成的. 每個像素視為一個點, 這個點就能反映出一個具體的顏色.

我們使用 R (red), G (green), B (blue) 的方式表示顏色(色光三原色). 三種顏色按照不同的比例搭配, 就能混合出各種五彩斑斕的效果.

計算機中針對 R, G, B 三個分量, 分別使用一個字節表示(8個比特位, 表示的范圍是 0-255, 十六進制表示為 00-FF)。
數值越大, 表示該分量的顏色就越濃. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色。

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

注意： 鼠標懸停在vscode的顏色上，會出現顏色選擇器，可以手動調整顏色。

color 屬性值的寫法：

預定義的顏色值（直接是單詞）。
最常用的是十六進制的形式。
十六進制形式表示顏色, 如果兩兩相同, 就可以用一個來表示.
#ff00ff => #f0f
RGB方式。

第二種顏色設置說明：

前兩位是指紅像素點的數量，其數值是像素點的個數，其數值越大，顏色就越深。

中間兩位數字是指綠色像素點的數值。

最后兩位數字是指藍色像素點的值。

第三種寫法說明：

其中rgb中的r是指紅色。括號中被逗號隔開的第一個數值就是紅色的數值。

其中rgb中的g是指綠色。括號中被逗號隔開的第二個數值就是綠色的數值。

其中rgb中的b是指藍色。括號中被逗號隔開的第三個數值就是藍色的數值。

代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>這是第一段話</div><p>這是第二段話</p>
</body>
</html>

瀏覽器顯示如下：
在這里插入圖片描述

現在我們有一個需求：將第一段話改成紅色。

第一種方式：
代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div {color: red;}
</style>
<body><div>這是第一段話</div><p>這是第二段話</p>
</body>
</html>

瀏覽器顯示如下：

在這里插入圖片描述
第二種方式：
代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div {color: #f00;}
</style>
<body><div>這是第一段話</div><p>這是第二段話</p>
</body>
</html>

瀏覽器顯示如下：
在這里插入圖片描述
第三種方式：
代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div {color: rgb(255,0,0);}
</style>
<body><div>這是第一段話</div><p>這是第二段話</p>
</body>
</html>

瀏覽器顯示如下：
在這里插入圖片描述

1.1.4 字體粗細

字體粗細的問題大家可以參考上面提到的參考手冊，在里面找到font-weight屬性，點進去就好。
鏈接：參考手冊

下面我截取一些網頁中的內容對其進行說明：

首先第一部分：我們可以通過英文單詞來對字體粗細進行設置。

其次，我們還可以通過用數值來對其進行設置：

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

語法說明：

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

代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>這是第一段話</div>
</body>
</html>

瀏覽器顯示如下：
在這里插入圖片描述

這是默認的字體大小。

代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font-weight: bold;}</style>
</head>
<body><div>這是第一段話</div>
</body>
</html>

瀏覽器顯示如下：

在這里插入圖片描述

這是加粗的效果。

1.1.5 文字樣式

文字樣式的問題大家可以參考上面提到的參考手冊，在里面找到font-style屬性，點進去就好。
鏈接：參考文檔
在這里插入圖片描述

代碼示例：

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

很少會把某個文字變傾斜，但是經常要把em / i改成不傾斜。

代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font-style: italic;}</style>
</head>
<body><div>這是第一段話</div>
</body>
</html>

瀏覽器顯示如下：
在這里插入圖片描述

代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {font-style: oblique;}</style>
</head>
<body><div>這是第一段話</div>
</body>
</html>