# 基礎CSS
###### tags: `CSS`
## CSS套用
1. style標籤樣式，寫在 \<style>\</style> ，為這份文件的專屬樣式。
```css=
<head>
<style>
/* 標籤選擇器 */
h1{
color: blue;
background-color: antiquewhite;
font-size: 40px;
}
p{
color: rgb(169, 112, 207);
}
/* 群組選器 */
h1,h2,h3,h4,h5,h6{
color: darkolivegreen;
}
</style>
</head>
```
2. 第二種方式 \<link> 外部樣式表
- 優點可以減少 CSS 樣式碼，不需在每份文件重複寫 CSS，HTML檔案也比較小。
- 專題或工作時，使用外部樣式表來管理樣式。
```css=
<head>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
</head>
```
3. 第三種方式 style 屬性樣式 ，一般稱為行內樣式。行內樣式優先權最高，因為 style 是元素的屬性，表示該元素專屬樣式。不會被\<style>外部樣式影響。
``` html=
<h1 style="color: darkseagreen;">CSS 第一堂課</h1>
<p style="color:maroon;">學習控制元素的樣式屬性及基礎選擇器。</p>
```
---------------------------------------
## 顏色
##### 使用函式 rgb() 或 rgba()
```html=
<!-- r , g , b 逗點分開 -->
<p style="color:rgb(255,0,0)">Lorem ipsum dolor sit amet consectetur.</p>
<!-- rgba 的 a 為 alpha 透明度 0.1 ~ 1 -->
<p style="color:rgba(255,0,0,0.3)">Lorem ipsum dolor sit amet consectetur.</p>
<!-- 四值用空格分開 -->
<p style="color:rgb(255 0 0/0.3)">Lorem ipsum dolor sit amet consectetur.</p>
```
--------------------------
## 全域選擇器
``` css=
/* 通用選擇器(全域選擇器)，全部元素都選取(除了偽元素::before ::after) */
<head>
<style>
*{
background-color: darkgrey;
}
</style>
</head>
```
--------------------------
## class 類別選擇器(.)
CSS 有非常多種選擇器，幫助我們在撰寫樣式時選擇到目標
#### 命名規則:
- 以.開頭
- 英文、數字、-、_)
- 必須以字元開頭
- 可以使用中文命名，但不要這樣做。
- 區分大小寫
```css=
/* 後代選擇器，以半型空白選擇到兒子孫子。 */
nav p {
color: rgb(160, 117, 64);
}
/* 子代選擇器，只選擇到兒子 */
nav > p {
olor: red;
}
```
#### Class 選擇器
使用場景:
1. 相同元素但需要不同外觀時。
```css=
<head>
<style>
.active{
color:red
}
<style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li class="active">Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
/<body>
```
2. 重複使用時
``` css=
<head>
<style>
.font{
color:red
}
<style>
</head>
<body>
<p>Lorem ipsum <a class="font">dolor sit amet</a> consectetur </p>
<p>Lorem ipsum <em class="font">dolor sit amet consectetur,</em> adipisicing elit.</p>
<p>Lorem ipsum <b class="font">dolor sit amet</b> consectetur adipisicing elit.</p>
<p>Lorem ipsum <a href="#" class="font">ipsum dolor.</a>dolor sit amet.</p>
</body>
```
#### id 選擇器
- 一份文件裡面，只允許一個獨一無二的 id 名稱，就像身分證不能重複。
- 通常作為網頁區塊的名稱或程式操縱元素的選擇器。
- 對程式來說，id 是最簡單、最快速、最直接的選擇方式。
1. 網頁區塊的名稱會以id命名。</h2>
做家裡的格局分布，例如客廳、廚房、臥室、浴室...</p>
```css=
<div id="header">這是 herder 區塊，裡面式子結構。</div>
<div id="main">這是 main 區塊，裡面式子結構。</div>
<div id="sidebar">這是 sidebar 區塊，裡面式子結構。</div>
<div id="footer">這是 footer 區塊，裡面式子結構。</div>
```
2. 被程式拿來當選擇器目標使用。
Sign in with Wallet
Connect another wallet