# CSS 選擇器、段落與列表 2019-12-12
###### tags: `CSS` `HTML`
### 選擇器
```css=
全域
* { color: #FF0000; }
元素
h3 { color: #FF0000; }
類別
.note { color: #FF0000; }
ID
#hotnews { color: #FF0000; }
```
### 偽類選擇器
* ==語法: a:atcive {color: yellow;}==
==範例:==
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS練習</title>
<style>
a {
text-decoration: none;
font-size: 13pt;
}
a:link {
color: blue;
}
a:visited {
color: crimson;
}
a:hover {
border: 1px solid black ;
}
a:active {
color:yellow;
}
</style>
</head>
<body>
<h2>小動物的窩</h2>
<ul>
<li><a href="#123">小屋</a></li>
<li><a href="#456">被窩</a></li>
<li><a href="#789">睡窩</a></li>
<li><a href="#111">涼蓆</a></li>
</ul>
</body>
</html>
```
>顯示如下:[color=#37619b]
---
### CSS3 child虛擬類別選擇器
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS練習</title>
<style>
/*表格樣式*/
table {
width: 300px;
border: 2px solid black;
}
th,td {
text-align: center;
margin: 10px; padding: 2px;
border: 1px solid gray;
}
td:nth-child(1){
text-align: left;
}
td:nth-child(2){
text-align: right;
}
tr:nth-child(2n+1){
background-color: #f1f1f1;
}
tr:first-child{
color:#ffffff;
background-color: #00CED1;
}
</style>
</head>
<body>
<!-- 表格 -->
<table>
<tr>
<th>食材</th>
<th>份量</th>
</tr>
<tr>
<td>無鹽奶油</td>
<td>100g</td>
</tr>
<tr>
<td>白細砂糖</td>
<td>120g</td>
</tr>
<tr>
<td>全蛋1顆</td>
<td>50g</td>
</tr>
<tr>
<td>低筋麵粉</td>
<td>250g</td>
</tr>
<tr>
<td>花生醬</td>
<td>50g</td>
</tr>
</table>
</body>
</html>
```
>顯示如下:[color=#37619b]
---
### 虛擬元素選擇器
* 原本沒有在網頁中，特定條件下出現的元素
```htmlmixed=
<style>
/*虛擬元素選擇器*/
p::first-line{
background-color: yellow;
}
p::first-letter{
font-size: 200%
}
ul::before{
content: "一覺好眠";
color: white;
background-color: black;
margin-left: -1em;
}
ul::after{
content: " ";
display: block;
border-bottom: 1px solid red;
}
</style>
<body>
<h2>小動物的窩</h2>
<ul>
<li><a href="#123">小屋</a></li>
<li><a href="#456">被窩</a></li>
<li><a href="#789">睡窩</a></li>
<li><a href="#111">涼蓆</a></li>
</ul>
<p>
每一個符合同一巨大藥品表明證明發行，要求人民幣馬上清除動物打擊想法不滿勞動模組會議條件回憶請教給，你的更新時間數據廣州基礎上天然義務市委生產學者，時刻眾人傢伙日報股市藥物設立老闆。
</p>
</body>
```
>顯示如下:[color=#37619b]
---
### 顏色設定
* #rrggbb
* #rgb
* rgb(n,n,n)
* rgb(n%,n%,n%)
* rgba(n,n,n,n)
* rgba(n%,n%,n%,n)
:::info
a是透明度，只能是數字
:::
### 文字尺寸
* em=1個文字大小
* rem 是以根元素body為基準
* %是以父層元素為基準
```htmlmixed=
<body style="font-size: 16px">
預設文字尺寸16px
<div>
<div style="font-size: xx-small;">文字尺寸 xx-small</div>
<div style="font-size: x-small;">x-small</div>
<div style="font-size: small;">small</div>
<div style="font-size: medium;">medium</div>
<div style="font-size: large;">large</div>
<div style="font-size: x-large;">x-large</div>
<div style="font-size: xx-large;">xx-large</div>
<div style="font-size: smaller;">smaller</div>
<div style="font-size: larger;">larger</div>
</div>
<hr>
預設文字尺寸16px
<div style="font-size: 20px">
<div>文字尺寸20px</div>
<div style="font-size: 1em">1em</div>
<div style="font-size: 1rem">1rem</div>
<div style="font-size: 100%">100%</div>
</div>
</body>
```
>顯示如下:[color=#37619b]
---
### 字體粗細
```htmlmixed=
<!-- 字體粗細 -->
字體粗細
<p style="font-weight: normal">font-weight: normal</p>
<p style="font-weight: bold">font-weight: bold</p>
<p style="font-weight: 100">font-weight: 100</p>
<p style="font-weight: 200">font-weight: 200</p>
<p style="font-weight: 300">font-weight: 300</p>
<p style="font-weight: 400">font-weight: 400</p>
<p style="font-weight: 500">font-weight: 500</p>
<p style="font-weight: 600">font-weight: 600</p>
<p style="font-weight: 700">font-weight: 700</p>
<p style="font-weight: 800">font-weight: 800</p>
<p style="font-weight: 900">font-weight: 900</p>
```
>顯示如下:[color=#37619b]
---
### 英文小型大寫字體
* font-variant:small-caps
```htmlmixed=
<!-- 英文小型大寫字體 -->
Small cap, <div style="font-variant:small-caps;">small cpas</div>
```
>顯示如下:[color=#37619b]
>
---
### 英文大小寫轉換
* text-transform: uppercase; 全都大寫
* text-transform: lowercase; 全都小寫
* text-transform: capitalize; 單字第一個字母大寫
練習:
```htmlmixed=
<style>
h1{ text-transform: uppercase; }
p{ text-transform: capitalize; }
</style>
</head>
<body>
<h1>lorem</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis culpa temporibus cupiditate tenetur quasi quas consequatur at omnis minus a enim nulla provident repellendus doloribus placeat molestias magnam, voluptatibus illum sint fugiat aliquid soluta perspiciatis vitae velit qui! Alias aliquid excepturi, modi temporibus laboriosam beatae quos, aut doloremque omnis debitis.</p>
</body>
```
>顯示如下:[color=#37619b]
>
### 底線&刪除線
* text-decoration: underline/line-through/
overline
```htmlmixed=
<p style="text-decoration: underline;">underline</p>
<p style="text-decoration: line-through;">line-through</p>
<p style="text-decoration: overline;">overline</p>
```
>顯示如下:[color=#0c5f9e]
>
---
### 崁入字型：@font-face
==CSS3崁入字型語法:==
```css=
@font-face {
font-family: myfont←自訂名稱;
src: url('字型檔案位置');
}
/* 使用 */
p{
font-family: myfont;
}
```
練習:
```htmlmixed=
<style>
@font-face {
font-family: GenWanMinTW-Medium;
src: url(GenWanMinTW-Medium.ttf);
}
p { font-family: GenWanMinTW-Medium; }
</style>
```
---
### 文字樣式快速設定：font
* 使用font 可以一次設定文字斜體、小型大寫字、粗細、大小、行高及字型的屬性值，格式如下：
==font : font-style 值 font-variant 值 font-weight 值 font-size 值 / line-height 值 font-family 值==
---
### 文字對齊 text-align
* text-align : left（靠左）/ right（靠右）/ center（置中）/ justify（左右對齊）
---
### 首行縮徘 text-indent
==語法: style="text-indent:1em;"==
```htmlmixed=
p {text-indent: 1em}
```
---
### 項目符號及編號：list-style-type
* 符號項目
disc / circle / square
* 編號
decimal / decimal-leading-zero / lower-alpha / upper-alpha / lower-roman / upper-roman
練習:
```htmlmixed=
<style>
ul {list-style-type: circle;}
</style>
```
---
### 垂直對齊 vertical-align
==CSS語法 {vertical-align: top;}==
---
### 行高 line-heifht
==語法 <style="line-height:1em">==
練習:
```htmlmixed=
<p style="line-height: 1.5em;">文字</p>
```
---
### 間距 letter-spacing / word-spacing
* letter-spacing 英文字母與中文字距
* word-spacing 英文單字之間的間隔
==語法 <style="letter-spacing: 0.5em">==
==語法 <style="word-spacing: 0.5em">==
練習:
```htmlmixed=
<p style="letter-spacing: 0.5em;">文字</p>
<p style="word-spacing: 0.5em">文字</p>
```
---
### 使用圖片作為項目符號：list-style-image
==語法 {list-style-image: url(圖片檔案路徑);}==
```htmlmixed=
ul { list-style-image: url(../20191205/images/CSS3.png);}
```
---
### 項目符號及編號的位置：list-style-position
* list-style-position : outside（文字區塊外）/ inside（文字區塊內）
練習:
```htmlmixed=
<style>
ul{list-style-position:utside;}
</style>
```
---
### 項目符號及編號快速設定：list-style
使用list-style 可以一次設定項目符號及編號的樣式，格式如下：
list-style : list-style-type list-style-position list-style-image
---
### 文字陰影
* text-shadow : 水平位移距離 垂直位移距離 模糊長度 顏色
* 多重文字陰影
text-shadow : 水平位移距離1 垂直位移距離1 模糊長度1 顏色1,水平位移距離2 垂直位移距離2 模糊長度2 顏色2
練習:
```htmlmixed=
<head>
<style>
/*文字陰影*/
.textshadow1 {
color: #FFFFFF;
background: #333333;
text-shadow: 0 0 20px #FF6600;
}
.textshadow2 {
color: #717171;
background: #d3d3d3;
text-shadow: 0 1px 1px #FFFFFF;
}
.textshadow3 {
color: #cccccc;
background: #d3d3d3;
text-shadow:
-1px -1px #fff,
1px 1px #333;
}
.textshadow4 {
color: #ccc;
background: #3699f6;
text-shadow:
0 1px 1 #cccccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbbbbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaaaaa,
}
</style>
</head>
<body>
<!-- 文字陰影 -->
<h1 class="textshadow1">HTML5 & CSS3 - 光暈字</h1>
<h1 class="textshadow2">HTML5 & CSS3 - 內崁字</h1>
<h1 class="textshadow3">HTML5 & CSS3 - 浮凸字</h1>
<h1 class="textshadow4">HTML5 & CSS3 - 立體字</h1>
</body>
```
Sign in with Wallet
Connect another wallet