---
# System prepended metadata

title: CSS第一章
tags: [第一章, CSS]

---

---
tags: CSS,第一章
---
# CSS第一章
## 骨架
```
引入方式一
內嵌式
<html>
    <head>
        <title></title>
        <style>
        在這邊寫CSS程式碼
        </style>
    </head>
    <body>
        內容
    </body>
</html>
```
```
引入方式二
外聯式
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="mycss.css" />
    </head>
    <body>
        內容
    </body>
</html>
```
link    網頁與外部資源連結
rel    當前文件與被連結文件的關係
rel="stylesheet"    文件的外部樣式表(白話:我要連結的是css)
href    引用及跳轉地址
```
引入方式三
行內式
<html>
    <head>
        <title></title>     
    </head>
    <body>
        內容
        <div style="color:red;font-size:20px;">
    </body>
</html>
```
| 引入方式 | 作用範圍 | 使用場景 |
| -------- | -------- | -------- |
| 內嵌式   | 一個頁面 | 小的範例     |
| 外聯式   | 多個頁面 | 工作專案     |
| 行內式   | 一個標籤 | 配合JS     |


# 選擇器
## 標籤選擇器
```
<p></p>
以上為前提
p{
    color:red;
}
```
## 類選擇器(類名可以自己亂取)
類名可以由數字、字母、下畫線_、中畫線-組成
不能以數字和中畫線-開頭
一個標籤可以用多個類名，用空格隔開就好
class類名可以隨便加在任何能使用CSS的標籤
(VScode出現紅色波浪99%是程式碼錯誤)
```
<p class="one"></p>
以上為前提
.one{
    color:red;
}
```
```
<p class="one two"></p>
以上為前提
.one{
    color:red;
}
.two{
    background-color:green;
}
```
## id選擇器(id名可以自己亂取)
id屬性不是拿來配合CSS，是配合JavaScript用的
id正確用法為每一個id屬性值在該頁面只能用一次，亂用不一定會報錯
```
<p id="one"></p>
以上為前提
#one{
    color:red;
}
```
## 通配符選擇器
基礎網站會用來設定margin和padding
```
套用所有標籤
不需要前提
*{
    color:red;
}
```
```
套用所有標籤
不需要前提
*{
    margin:0;
    padding:0;
}
```
# 文字
```
文字大小
p{
    font-size:30px;
}
```
chrome預設文字大小為16px
```
文字粗細
p{
    font-weight:900;
}
```
可輸入100~900(只能整百數，所以只有9種尺寸)
正常:normal或400
加粗:bold或700
```
文字傾斜
p{
    font-style:italic;
}
```
normal    正常(不傾斜)
italic    傾斜
```
字體
p{
    font-family:微軟雅黑,黑體,sans-serif;
}
```
windows預設字體:微軟雅黑
font-family:微軟雅黑,黑體,sans-serif    使用微軟雅黑，沒有就用黑體，再沒有就隨便用一種無襯線字體


常見字體系列
無襯線字體
>特點:文字筆畫均勻
>場合:大多數網站
>舉例:黑體、Arial

襯線字體
>特點:文字筆畫不均勻
>場合:報紙書籍
>舉例:宋體、Times New Roman

等寬字體
>特點:每個字母和文字寬度相等
>場合:寫程式
>舉例:Consolas、fira code

```
一次設定四個文字屬性值
p{
    font:italic 700 60px 宋體;
    font:60px 宋體;
    進階寫法
    font:italic 700 60px/2 宋體;
}
```
font    傾斜、粗細、大小、字體(照順序寫)
複合屬性    一個屬性要設定多個屬性值，每個屬性值用空格隔開
font省略    只能省略傾斜、粗細
font(進階)    傾斜、粗細、大小/行高、字體(照順序寫)
行高不寫單位就是倍數
```
文本縮進
p{
    text-indent:32px;
    text-indent:2em;
}
```
寫作文首段需要空兩個字，利用文本縮進就能達到效果
建議適用em，1px為1像素，1em為1個字
```
水平對齊
p{
    text-align:left;
    text-align:center;
    text-align:right;
}
```
文字類標籤可以直接居中
img要設定父元素居中
:::danger
待補充
:::
```
文本修飾
p{
    text-decoration:underline;
    text-decoration:line-through;
    text-decoration:overline;
    text-decoration:none;
}
```
underline    下畫線(常用)
line-through    刪除線(不常用)
overline    上畫線(幾乎不用)
none    無裝飾線(常用)
```
行高
p{
    line-height:50px;
    line-height:1.5;
}
```
line-height:50px;    上間距+文本高度+下間距=50px
line-height:1.5;    1.5倍的意思，不用寫單位
```
顏色取值
p{
    color:red;
    background-color:green;
}
```
顏色屬性值種類
關鍵詞:預定義顏色名
ex:red、green、blue、yellow
rgb表示法:紅綠藍三原色，每項取值0~255
ex:rgb(0,0,0)、rgb(255,255,255)
rgba表示法:紅綠藍三原色加上透明度，a取值範圍0~1
ex:rgb(0,0,0,1)、rgb(255,255,255,0.5)
透明度0.5如果寫成.5不會報錯
十六進制表示法:#開頭，將數字轉成十六進制表示，且兩個兩個為一組
ex:#000000、#ff0000
若類似以上兩種特殊的可簡寫成#000、#f00
```
標籤居中
div{
    width:300px;
    height:300px;
    background-color:pink;
    margin:0 auto;
}
```
:::danger
待補充margin:0 auto
:::

# 背景
背景色
background-color
背景圖片
background-image
```
div{
    background-image:url(./image.jpg);
}
```
背景圖片預設會把圖片鋪很多張直到填滿背景
背景圖片上可直接出現文字

背景平舖(使用background-image)
background-repeat
```
div{
    background-repeat:repeat;
    background-repeat:no-repeat; 最常用，圖片只顯示一個
    background-repeat:repeat-x;
    background-repeat:repeat-y;
}
```
背景位置(使用background-image)
background-position
```
div{
    background-position:right 0        右上
    background-position:right bottom    右下
    background-position:center center    完全居中
    background-position:center         完全居中(效果跟上面一樣)
    background-position:50px 100px    往右移動50往下移動100
    background-position:-50px -100px    往左移動50往上移動100
}
```
背景圖只能顯示在盒子裡面
水平方向
>left
>center
>right

垂直方向
>top
>center
>bottom

背景複合屬性
background
```
div{
    width: 400px;
    height: 400px;
    background: pink url(./image.jpg) no-repeat center bottom
}
```
```
div{
    width: 400px;
    height: 400px;
    background: pink url(./image.jpg) no-repeat 100px 50px
}
```
不照順序寫沒關係
推薦順序:background color image repeat position
position中的center bottom寫成bottom center是可以的，位置不變
position中的100px 50px寫成50px 100px也可以，但位置不一樣

img和background的差別
img用在公司產品圖
background用在不是很重要的小功能

# 複合選擇器
## 後代選擇器
```
div p {
    color:red;
}
```
```
<div>
    <p>文字</p>
</div>
```
## 後代選擇器(全選)
```
div a {
    color:red;
}
```
```
<div>
    <a>這是div裡面的a</a>
    <p>
        <a>這是div裡面的p裡面的a</a>
    </p>
</div>
```
變色    這是div裡面的a
變色    這是div裡面的p裡面的a
## 子代選擇器
```
div>a {
    color:red;
}
```
```
<div>
    <a>這是div裡面的a</a>
    <p>
        <a>這是div裡面的p裡面的a</a>
    </p>
</div>
```
變色    這是div裡面的a
其它不變色
## 並集選擇器
```
p,
div,
span,
h1{
    color:red;
}
```
```
<p>ppp</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>

<h2>h2</h2>
```
## 交集選擇器
```
p.box{
    color:red;
}
```
```
<p class="box">這是p標籤</p>
<p>ppp</p>
<div class="box">這是div標籤</div>
```
交集選擇器都是緊接著的，沒有空格或標點符號
如果有標籤選擇器就一定要寫在最前面
## 偽類選擇器
```
a:hover{
    color:red;
    background-color:green;
}
```
```
<a href="#">這是超連結</a>
```
hover是滑鼠懸停在東西上時改變的樣式
任何標籤都可以用hover

# 元素顯示模式
## 塊級元素
特點
1.獨佔一行
2.寬度為默認值，高度被內容撐開
3.可自行設置寬高
代表標籤
div
p
h系列
ul li
dl dd dt
form
header
nav
footer
## 行內元素
特點
1.一行可以顯示多個
2.寬度和高度被內容撐開
3.不可自行設置寬高
代表標籤
a
span
b
u
i
s
## 行內塊元素
特點
1.一行可以顯示多個
2.可自行設置寬高
input
textarea
button
select
:::danger
特殊情況:img有行內塊元素，但在google調試工具中顯示inline
:::

## 顯示模式轉換
```
div{
    display:block
    display:inline-block
    display:inline
}
```
display:inline少用

# 盒子模型
外邊距    margin
邊框    border
內邊距    padding
內容    content
寬    width
高    height
```
div{
    margin:50px;
    border:1px solid red;
    padding:20px;
}
```
## 邊框border
複合屬性
設定:粗細、虛實、顏色
實線solid
虛線dashed
點點虛線dotted
border-方位名詞
上top
下bottom
左left
右right
邊框單屬性
border-width:粗細
border-style:虛實
border-color:顏色
```
範例:做一個400x400的框框
div{
   width: 380px;
   height: 380px;
   background-color: pink;
   border: 10px solid #000;
    }
```
## 範例-新浪導航
布局思路
從外到內
先寬高背景色
放內容
調內容位置
控制文字細節
```
<!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>
        .box{
           height: 40px;
           border-top: 3px solid #ff8500;
           border-bottom: 1px solid #edeef0;
        }
        .box a{
            width: 80px;
            height: 40px;
            /*background-color: #edeef0;*/
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;

        }
        .box a:hover{
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">新浪導航</a>
        <a href="#">新浪導航</a>
        <a href="#">新浪導航</a>
        <a href="#">新浪導航</a>
    </div>
</body>
</html>
```
## 內邊距padding
普通情況
```
div{
    padding:50px;
}
```
也可當複合屬性使用
設定順序為
上右下左(順時針)
```
div{
    padding:10px 20px 40px 80px;
}
```
三值
上、左右、下
```
div{
    padding:10px 40px 80px;
}
```
二值
上下、左右
```
div{
    padding:10px 80px;
}
```
範例:做一個300x300的框框，邊框10，內邊距20
300-(10x2)-(20x2)=240
```
div{
   width: 240px;
   height: 240px;
   background-color: pink;
   border: 10px solid #000;
   padding:20px;
    }
```
### 內減模式
承上範例
```
div{
   width: 300px;
   height: 300px;
   background-color: pink;
   border: 10px solid #000;
   padding:20px;
   box-sizing:border-box;
    }
```
## 範例-新浪導航2
```
<!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>
        .box{
           height: 40px;
           border-top: 3px solid #ff8500;
           border-bottom: 1px solid #edeef0;
        }
        .box a{
            padding: 0 16px;
            /* width: 80px; */
            height: 40px;
            /* background-color: #edeef0; */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;

        }
        .box a:hover{
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">新浪導航</a>
        <a href="#">新浪導航新浪導航</a>
        <a href="#">新浪導航新浪導航新浪導航</a>
        <a href="#">新浪導航新浪導航新浪導航新浪導航</a>
    </div>
</body>
</html>
```
## 外邊距margin
普通情況
```
div{
    margin:50px;
}
```
也可當複合屬性使用
設定順序為
上右下左(順時針)
```
div{
    margin:10px 20px 40px 80px;
}
```
三值
上、左右、下
```
div{
    margin:10px 40px 80px;
}
```
二值
上下、左右
```
div{
    margin:10px 80px;
}
```
版心居中
margin:0 auto
margin:上下沒有 左右平均分配
```
div{
    margin:0 auto;
}
```
## 默認樣式
body標籤默認margin:8
p標籤默認margin:上下16
```
*{
    padding: 0;
    margin: 0;
}
```
## 案例:新聞列表
```
<!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>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .news {
        width: 500px;
        height: 400px;
        border: 1px solid #ccc;
        margin: 50px auto;
        padding: 42px 30px 0;
      }
      .news h2 {
        border-bottom: 1px solid #ccc;
        font-size: 30px;
        /* 行高1倍就是字號大小 */
        line-height: 1;
        padding-bottom: 9px;
      }
      ul {
        /* 去掉列表的圓點符號 */
        list-style: none;
      }
      .news li {
        height: 50px;
        border-bottom: 1px dashed #ccc;
        padding-left: 28px;
        /* 隱式垂直居中 */
        line-height: 50px;
      }
      .news a {
        text-decoration: none;
        color: #666;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div class="news">
      <h2>最新文章</h2>
      <ul>
        <li><a href="#">安安安安安安安安</a></li>
        <li><a href="#">安安安安安安安安</a></li>
        <li><a href="#">安安安安安安安安</a></li>
        <li><a href="#">安安安安安安安安</a></li>
        <li><a href="#">安安安安安安安安</a></li>
      </ul>
    </div>
  </body>
</html>
```
## 外邊距問題
### 合併現象
垂直布局的塊級元素，上下的margin會合併
最終兩者距離為其中一元素的margin大小(取較大者)
```
<div class="one">111</div>
<div class="two">222</div>
```
```
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
      .one {
        margin-bottom: 50px;
      }
      .two {
        margin-top: 50px;
      }
```
### 塌陷現象
互相嵌套的塊級元素，子元素的margin-top會作用在父元素上
導致父元素一起往下移動
```
    <div class="father">
      <div class="son">son</div>
    </div>
```
```
      .father {
        width: 300px;
        height: 300px;
        background-color: pink;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        margin-top: 50px;
      }
```
解決方法
一、給父元素設置border-top，子元素就可以設margin-top
二、給父元素設置overflow:hidden，子元素就可以設margin-top
三、給父元素設置padding-top
四、子元素轉成行內塊
五、設置浮動
## 行內標籤問題
如果想要通過margin和padding改變行內標籤的垂直位置，無法生效
可以用line-height
```
    <span>span</span>
    <span>span</span>
```
```
      span {
        margin: 100px;
        padding: 100px;
        line-height: 100px;
      }
```