注意：手機（APP）打開，內容顯示更佳，不會的私聊博主即可
想要拿代碼或加入學習計劃（** 博主會監督你并且教你寫文章 **）的拉到最下面（PC端Web打開）加博主即可，目錄也在最下面。

參加1_bit博主前端學習計劃發文時再頭部記得機上本專欄鏈接，示例如下：

我已加入 1_bit 博主的免費前端站起來學習計劃，專欄鏈接：https://blog.csdn.net/a757291228/category_11609526.html

一、css初嘗試

🐶1_bit：這節課咱們開始學習CSS。

👸小媛：CSS 是啥？

🐶1_bit：CSS 是前端中必不可少的一項技術，當然說必不可少不是說缺少了CSS不行，而是缺少CSS將無法做出精美的Web頁面。CSS是給網頁添加效果以及顯示樣式的一項技術，缺少了CSS你的網頁將會缺少了“靈動”。

👸小媛：哇，怎么感覺CSS就像畫畫一樣？

🐶1_bit：對的，你可以這樣去理解CSS的作用就像畫畫一樣給一個頁面增加美感。

👸小媛：明白了，咱們開始學習吧。

🐶1_bit：CSS 的全稱是層疊樣式表，可以控制例如字體的大小、顏色、背景色、通過特定的語法用于修飾網頁中的標簽元素，使其具備CSS所修飾的樣式，例如以下這一段代碼。

<p style="color: blue;">這是一個段落標簽所標記的文本內容。</p>

在這里插入圖片描述
🐶1_bit：這一段代碼中的 style 就是表示這一段的 css 樣式內容。

👸小媛：感覺好像挺容易的，style 后等于號的后面就是表示 css 的樣式了嗎？

🐶1_bit：對的，style 表示引入 css 的樣式，等于號右邊的雙引號內是對應的樣式內容，咱們使用雙引號進行標記，其中 color 表示對這個標簽進行樣式的修飾，修飾其中的內容顏色為 blue 藍色。

👸小媛：真的耶，這一段文字的內容變成了藍色。

🐶1_bit：咱們還可以設置多個樣式，例如新增一個樣式，使這個標簽 p 的背景色為橙色，可以寫成如下代碼。

<p style="color: blue;background-color: coral;">這是一個段落標簽所標記的文本內容。</p>

在這里插入圖片描述
👸小媛：同一個 style 里面可以寫多個不同的樣式嗎？

🐶1_bit：對的，可以寫多個不同的樣式，他們之間使用分號“;”進行分隔，并且注意，這個分號是英文輸入法下輸入的分號，并不是中文輸入法輸入下的分號，這兩個符號是不一樣的。

👸小媛：明白了。

🐶1_bit：在此還需要注意在標簽內寫樣式，是使用 style，并且在樣式中一個“屬性”或者說需要修飾的一個內容與給定的呈現方式（值）的語法（寫法）是“屬性：值”的形式，例如“color:blue”，這個需要主要，并且多個內容之間使用分號進行分隔。

👸小媛：收到。

🐶1_bit：其實咱們在寫樣式時還可以在外部編寫樣式，意思就是說不用在標簽內編寫對應的樣式；例如在 head標簽中咱們可以新增一個 style 標簽。
在這里插入圖片描述
🐶1_bit：咱們可以在 style 標簽中編寫一些樣式，可以使整個HTML頁面中的對應標簽都對這個樣式生效。

👸小媛：怎么做呢？

🐶1_bit：咱們在 style 中打上如下代碼。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS基礎 03 1_bit 的實戰課</title><style>p{color: blue;background-color: coral;}</style>
</head>
<body><p>這是一個段落標簽所標記的文本內容。</p><p>這是第二個段落標簽所標記的文本內容。</p>
</body>
</html>

在這里插入圖片描述
🐶1_bit：此時整個頁面將會對 p 標簽樣式生效。

👸小媛：那style中具體的寫法是一個標簽名加上一個花括號并且在花括號內編寫對應的樣式嗎？

🐶1_bit：對的，在剛剛的示例中，在style標簽內，使用一個p標簽名，在p標簽名之后使用一堆花括號包含其修飾樣式即可。

👸小媛：明白了，但是如果這樣不就所有的標簽都生效了，我只想要部分進行生效怎么辦？

二、選擇器

2.1 類選擇器

🐶1_bit：這個時候咱們就得講一個選擇器的知識點了。我們先認識CSS中的三個選擇器，分別是元素選擇器、類選擇器和ID選擇器，這三個選擇器其中之一的元素選擇器剛剛咱們已經使用過了，使用元素選擇器可以對同類元素的樣式進行修改，想要具體到某個元素修改其樣式咱們可以通過類選擇器以及ID選擇器。

👸小媛：做個示例看看是怎么寫的。

🐶1_bit：類選擇器的使用方式如下。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS基礎 03 1_bit 的實戰課</title><style>.p{color: blue;background-color: coral;}</style>
</head>
<body><p>這個文本沒有使用類樣式</p><p class="p">這個文本使用了類樣式</p>
</body>
</html>

在這里插入圖片描述
👸小媛：使用小數點就是類樣式的方式嗎？那個 p 我可以進行改名嗎？我叫xiaoyuan可以嗎？

🐶1_bit：當然可以的，這個只是個名稱，但是在元素選擇器中則不能這樣做，因為元素選擇器是直接使用的標簽名，在類選擇器中是使用樣式名，所以是可以更改的。

👸小媛：明白了，所以如果是想這個標簽使用類樣式只需要使用 “class=”就可以了，并且在給予樣式名的時候使用雙引起引起來去掉小數點就完成了引用。

🐶1_bit：是這么回事。

👸小媛：沒問題了，我試了一下，沒問題，效果如下。
在這里插入圖片描述

2.2 ID選擇器

🐶1_bit：那咱們繼續往下，還有一個選擇器叫做ID選擇器，ID選擇器使用也很簡單，在給樣式名稱的時候使用一個“#”號，在“#”號后給予一個ID名即可，那么在這個HTML中，為這個ID名的元素將會擁有這個樣式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS基礎 03 1_bit 的實戰課</title><style>.p{color: blue;background-color: coral;}#content{color: white;background-color: black;}</style>
</head>
<body><p>這里是沒有使用任何樣式的段落</p><p class="p">這個段落使用了類樣式</p><p>這里是沒有使用任何樣式的段落</p><p id="content">這個段落是使用了ID選擇器進行修飾</p>
</body>
</html>

👸小媛：真的耶，下面就是顯示效果。

2.3 多個類樣式的使用

🐶1_bit：在使用類選擇器時，咱們可以同時調動兩個類樣式對一個標簽進行修飾。

👸小媛：還可以這樣嗎？

🐶1_bit：是的，使用兩個類樣式對標簽名進行修飾很簡單，只需要在 class 的類名中，使用空格分隔兩個類名就可以了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>._color{color: white;background-color: black;}._size{font-size: 30px;}</style>
</head>
<body><p class="_color">這個文本使用了_color類樣式</p><p class="_size">這個文本使用了_size類樣式</p><p class="_color _size">這個文本使用了_size 與 _color 兩個類樣式</p>
</body>
</html>

在這里插入圖片描述
👸小媛：哇塞，原來可以這樣，效果出來了。

3.4 集體選擇器

🐶1_bit：咱們還可以使用一種叫做集體選擇器的方式統一創建同樣式的不同調用。

👸小媛：咦？怎么用呢？

🐶1_bit：這個很簡單。只需要使用相同的樣式，在名稱前逗號分隔不同的樣式名即可。
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程 集體選擇器</title><style>p,._color,a{color: white;background-color: black;}</style>
</head>
<body><p>這是文本一</p><p>這是文本二</p><p>這是文本三</p><a href="03-1.html">這是鏈接1</a><a href="03.html">這是鏈接2</a>
</body>
</html>

👸小媛：果然是這樣耶。

在這里插入圖片描述

👸小媛：不過那個span是什么標簽呢？

🐶1_bit：其實這個 span 標簽如果你不做什么樣式說明對于整個網頁并不影響，span的更大的作用是可以給予部分內容進行修飾，例如你有一句話“這是 1_bit 的前端零基礎實戰課”，你想將 1_bit 換上一些樣式，這個時候的p標簽就可以寫成以下示例。

<p>這是 <span> 1_bit </span> 的前端零基礎實戰課</p>

🐶1_bit：接著給 span 加上一個樣式就可以了。

👸小媛：明白了，原來是這樣的。

3.5 屬性選擇器

🐶1_bit：屬性選擇器可以通過對具有某一些屬性的標簽應用樣式，例如在一個 html 代碼中有有部分有些name 屬性的標簽需要顏色調紅，那么就可以寫代碼如下。
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程 屬性選擇器</title><style>.s_name[name]{color: red;}</style>
</head>
<body><a class="s_name" href="03-1.html" name="鏈接1">這是鏈接1</a><a class="s_name" href="03.html"  name="鏈接2">這是鏈接2</a><a class="s_name" href="03.html"  >這是鏈接3沒有name屬性</a><p class="s_name" >p標簽沒有寫name屬性</p><p class="s_name" name="寫了個name" >p標簽有寫name屬性</p>
</body>
</html>

🐶1_bit：這些使用class應用了這個類樣式，只有沒有寫name 樣式的元素沒有生效樣式。
在這里插入圖片描述
👸小媛：原來是這么回事呀，那有什么作用呢？

🐶1_bit：我可以給你舉一個例子，例如有一個列表，這些列表里面有一些連接，這些鏈接部分沒有失效的則有 href 屬性，失效的則沒有，那么這個時候就需要你給這些沒有失效的連接標紅醒目，那就很好的用到了屬性選擇器，例如如下例子。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程 屬性選擇器</title><style>a[href]{color: red;}</style>
</head>
<body><h1>資源連接：</h1><ul><li><a href="http://www.baidu.com">vscode</a></li><li><a href="http://www.baidu.com">unity</a></li><li><a>VS</a></li><li><a href="http://www.baidu.com">QT</a></li><li><a>AndroidStduio</a></li></ul>
</body>
</html>

👸小媛：真的很好用的，效果出來了，不過這個 ul 元素是列表？
在這里插入圖片描述
🐶1_bit：是的，li 是列表的標簽，使用 li 將會以列表的形式呈現文本；由于列表有多項，每一項需要使用標簽<li></li>標簽進行標記，在其中編寫內容即可。當然 li 標簽分為有序和無須，咱們之后再做有序列表的講解，此時出現的是無序的列表，意思則是“沒有序號”的意思。

👸小媛：知道了。

3.6 后代選擇器

🐶1_bit：接下來咱們將后代選擇器，后代選擇器也比較簡單。

👸小媛：啥是后代呢？

🐶1_bit：例如一個標簽p中還包含了一個標簽span，這個span就是標簽p的子元素，span就是父元素；例如如下代碼示例。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程 后代選擇器</title><style>p span{color: red;}</style>
</head>
<body><p>這是p元素<span>這是p的后代</span>的內容</p><p>這是一個沒有包含 span 的 p 元素</p>
</body>
</html>

👸小媛：哇，真的如此呀。

🐶1_bit：我們還可以使用類樣式的形式來說明，例如以下示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程 后代選擇器</title><style>p span{color: red;}._a a{color: green;}</style>
</head>
<body><p>這是p元素<span>這是p的后代</span>的內容</p><p>這是一個沒有包含 span 的 p 元素</p><p class="_a"><a href="http://www.baidu.com">這是個鏈接</a>這是一個使用了類_a的p元素</p><p class="_a">這是一個使用了類_a的p元素,但并沒有 a 元素。</p>
</body>
</html>

👸小媛：生效了，這感覺挺好用的。

🐶1_bit：當然，兒子的兒子表示更深層的包含也可以。

p span span{color: red;
}

👸小媛：哇，我明白了。

3.7 相鄰元素選擇器

🐶1_bit：接下來咱們了解一下相鄰元素選擇器，這個選擇器顧名思義，選擇響鈴的元素；編寫方法很簡單，例如咱們需要使標題 h1 后最近的元素改變樣式，就可以編寫樣式成。

h1 + span {color:red;
}

🐶1_bit：以上示例中，h1 + span 就表示h1 標簽后的 span 元素，如果在 h1 下剛好是一個 span 標簽那么就生效，否則不生效，一個完整的示例代碼如下：
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_bit 的前端實戰課程 子元素選擇器 相鄰兄弟選擇器</title><style>h1 + span {color:red;}span + p{color:blue;}</style>
</head>
<body><h1>標題1</h1><span>這是span元素內容，我頂上就是h1標簽了，我離他最近</span><p>這是p的內容，我距離span最近</p><p>我上面就是p標簽</p>
</body>
</html>

🐶1_bit：你運行看一下效果。

👸小媛：真的成了耶。

在這里插入圖片描述
🐶1_bit：如果在span標簽上加一個p元素，span元素還會不會生效呢？

👸小媛：應該不會吧，我把代碼改成了這個樣子。
在這里插入圖片描述

👸小媛：運行了一下，果然沒有生效。
在這里插入圖片描述
🐶1_bit：當然也可以使用類或者id做相鄰兄弟選擇器，例如如下示例。

👸小媛：我明白了，這些都是靈活使用的。

【前端就業課第一階段】HTML5 零基礎到實戰（九）列表
【前端就業課第一階段】HTML5 零基礎到實戰（八）表單詳解
【前端就業課第一階段】HTML5 零基礎到實戰（七）文字及圖片樣式
【前端就業課第一階段】HTML5 零基礎到實戰（六）表格詳解
【前端就業課第一階段】HTML5 零基礎到實戰（五）基礎元素
【前端就業課第一階段】HTML5 零基礎到實戰（四）偽類與偽元素
【前端就業課第一階段】HTML5 零基礎到實戰（三）一篇文CSS基礎入門
【前端就業課第一階段】HTML5 零基礎到實戰（二）超鏈接
【前端就業課第一階段】HTML5 零基礎到實戰（一）基礎代碼結構詳解