---
# System prepended metadata

title: css樣式設定
tags: [css基本, css, css 樣式]

---

# css樣式:
## 行內樣式
* 寫在標籤的style 屬性中
* 語法:
```
<h1 style="color:red;font-size:60px">哈囉你好!</
```
> **總結**:
>  (1)css 語法>  名:值;
> (2)語法缺點:樣式不能重複用，卡在H1標籤裡面，無法做到統一修改。不推薦使用

## 內部樣式
* 寫在html頁面內部，將所有的css代碼拉出來，單獨放在 style標籤裡面
* 語法:
```
<style>
    h1{
        color:red;
        font-size:40px;
    }
    p{
        color:red;
        font-size:40px;
    }
</style>
```
> **總結**:
>  (1)style 標籤大部分都放在 head裡面
> (2)語法缺點:無法通用多個html ，變成每個html檔案都得加上

## **外部樣式**
* 寫在單獨的css文件，導入到html文件中使用
* 語法:
```
1. 在.css文件中，把所有樣式代碼都放入= 讓這個檔案純寫樣式
    h1{
        color:red;
        font-size:40px;
    }
    p{
        color:red;
        font-size:40px;
    }

2.在 Html文件中 link導入css文件
    <link rel="stylesheet" href="./xxx.css">
```
> **總結**:
> (1)link 標籤大部分都放在 head裡面
> (2)語法優點:最推薦的用法，可以讓樣式與結構分離!!! 還可以重複使用在多個html文件。**
