# CSS
參考資料：[【css】初學者教學](https://youtu.be/Ml78vnNTBLw)、[Flex 排版教學](https://w3c.hexschool.com/flexbox/a0979749)、[開發者工具介紹]、https://training.pada-x.com/javascript-start.htm

## Style
可以在每個標籤的開頭加入 style ，加入不同的屬性，再以分號隔開

<!--可以加入 style 設定顏色和大小-->
<div style="color:red; font-size:20px;">

    <h1 style="color:blue;">css教學</h1>
    
    <!--background color是背景色， border是框線 要設定粗細 樣式 顏色-->
    <p style="background-color:green;border:1px solid black;">這是一個段落</p>
    
    <!--可以設定寬度-->
    <p style="border:5px dashed green;width:200px; height:200px;">這是一個段落</p>
    
    <!--設定最大寬度-->
    <p style="border:5px dashed green; max-width:800x;">這是一個段落</p>
    
    <!--如果都沒給的話就會依視窗的大小進行調整-->
    <p style="border:5px dashed green; max-width:800x">這是一個段落</p>
</div>

<br>

## Color
可以參考網頁:[CSS colors](https://www.w3schools.com/css/css_colors.asp)、[HTML Color Picker](https://www.w3schools.com/colors/colors_picker.asp)、[色碼表](https://www.ifreesite.com/color/)、[HTML Color Code](https://htmlcolorcodes.com/)

<h1 style="color:chocolate;">css教學</h1>
<h1 style="color: #ff6666;">css教學</h1>
<h1 style="color: rgb(255, 102, 102);">css教學</h1>
<h1 style="color: hsl(0, 100%, 70%);">css教學</h1>

## Padding & Margin
兩個控制空間的屬性，Padding是設定內部的空間，Margin是設定外部的空間

<!--框線內部增加20px的空間，外部也增加20px的空間-->
<div style="padding:20px; margin:20px; background-color:lightblue; border:1px solid black;">
    大家好 我是小白，接下來要介紹的是 padding & margin
</div>


<!--可以單設定上下左右-->
<div style="padding-top:20px; margin-top:20px; background-color:lightblue; border:1px solid black;">
    大家好 我是小白，接下來要介紹的是 padding & margin
</div>

<!--也可以順時針設定空間大小-->
<div style="padding:20px 30px 40px 50px; margin:20px 50px 40px 30px; background-color:lightblue; border:1px solid black;">
    大家好 我是小白，接下來要介紹的是 padding & margin
</div>

<!--也可以設定負數-->
<div style="padding:20px; margin:-40px; background-color:lightblue; border:1px solid black;">
    大家好 我是小白，接下來要介紹的是 padding & margin
</div>

## Float & Display
這兩個屬性是專門控制排版的屬性，網頁的排版實際上有點3D的概念
https://www.tpisoftware.com/tpu/articleDetails/1941
### Float
* 假設我們現在有一張圖片和一段文字

<img src="../html/IMG_2417.JPG" width="200px" />
<p>孔雀是雞形目、雉科的一類鳥的通稱，一般特指孔雀屬（屬名：Pavo）的綠孔雀和藍孔雀，廣義的孔雀則還包含單獨成屬的剛果孔雀。藍孔雀雄鳥羽毛為深藍色，富有金屬光澤，分布於印度和斯里蘭卡。綠孔雀羽色則為翠綠色，分布於東南亞和中國雲南省。此外，藍孔雀還有白孔雀和黑孔雀兩種變異色型。</p>

圖中，綠色方塊為圖片，紅色方塊為段落

如果換個角度看，圖片與段落是互相卡在一起的，文字則是再上一層

一旦設定 float 之後，圖片就會浮起來

<img src="../html/IMG_2417.JPG" width="200px" style="float:left" />


此時，段落沒有地方可以卡了，就會自動往上移

接著文字也會跟著往上移，看圖片在哪邊
假設圖片在左
假設圖片在右

<br>

* 側欄設定就可以用這種方法

<ul style="background-color: lightblue; margin: 0px; padding: 15px; float: left;">
    <li>主頁</li>
    <li>部落格</li>
    <li>關於</li>
    <li>聯絡我們</li>
</ul>

### Display
有一些標籤本來就會有預設的 Display 方式，像不管文字長度都占用整行空間顯示的標籤，預設的 Display 就是 block，而只會占用符合文字長度空間的標籤預設的 Display 方式就是 inline

<!-- 預設顯示方式：block -->
<p style="display:inline;">你好</p>
<p style="display:inline;">哈哈</p>
<!-- 預設顯示方式：inline -->
<span style="display:block;">span1</span>
<span style="display:block;">span2</span>

## Position
如果 position 設為 fixed 或 absolute 他就會像變成自己獨立的一層，有點像 float 那樣的感覺，而有設定相對位置的物件會蓋過沒有設定相對位置的物件
### Fixed 固定定位
把物件固定在畫面的某個地方，會隨著滾輪一起移動，此時物件就會變成自己獨立一層，下面的物件就會往上移動

<!-- 記得要給一個位置 top left right bottom 不然會變成 static position 可能會找不到 -->
<div style=" position:fixed; top:10px; width:80px; height:80px; background-color:blue; "></div>

### Relative 相對定位
位置設置成 relative 物件就會顯示在原本位置的相對位置，此時不會變自己獨立一層，下面的物件不會往上移動

<div style=" position:relative;bottom:10px; width:80px; height:80px; background-color:darkolivegreen; "></div>

### Absolute 絕對定位
位置設置成 absolute ，物件就會變成自己獨立一層飄浮起來，外面的 div 就不會知道裡面有 div，會固定在某個位置，但不會隨著滾輪移動

<div style="padding:30px; border:5px solid red;">
    <div style="padding:30px; border:5px solid red;">
        <div style="position:absolute; top:0px; right:0px; width:40px; height:40px; background-color:blue;">
        </div>
    </div>
</div>

<br>

特別的是，如果絕對定位外層的 div 也有做定位的話，那絕對定位就會根據外層的位置來做定位

<div style="padding:30px; border:5px solid red;">
    <div style="position:relative; padding:30px; border:5px solid red;">
        <div style="position:absolute; top:0px; right:0px; width:40px; height:40px; background-color:blue;">
        </div>
    </div>
</div>


<br>

如果定位是定在更外層，那絕對定位就會根據最外層的定位來定位

<div style="position:relative;padding:30px; border:5px solid red;">
    <div style=" padding:30px; border:5px solid red;">
        <div style="position:absolute; top:0px; right:0px; width:40px; height:40px; background-color:blue;">
        </div>
    </div>
</div>


## Opacity
opacity屬性可以設定我們的透明度，介於 0 ~ 1 之間，0 是完全透明，1 是原本的顏色

## Border-radius
border-radius 屬性可以讓我們的邊緣變成圓弧狀的，只要把數值設為長度的一半就會變成圓形

<div style="opacity: 1; border-radius: 40px; width: 80px; height: 80px; background-color: blue; "></div>

也可以客製調整每個角的圓弧程度

<div style="opacity: 1; border-radius: 20px 30px 40px 50px; width: 80px; height: 80px; background-color: blue; "></div>

<br>

## Style標籤
style 標籤通常會被包含在 head 標籤裡面，可以在 style 標籤裡再設定不同標籤的屬性

<head>
    <meta charset="utf-8" />
    <title>小白的網頁 </title>
    <style>
        p{
            color:blue;
            background-color:grey;
         }
        h1{
            color:red;
        }
    </style>
</head>

## 引入外部 css檔
當我們有很多的檔案都需要透用同一份 css 設定的時候就可以使用，引入外部檔案要寫在 head 標籤裡面，用 link 標籤表示，rel 屬性是表示我們引入的檔案類型，而 stylesheet 就表示我們引入的是 css檔， href 則是路徑表示

<br>

先設置一個 style.css 檔

p{
    color: yellow;
    background-color: grey;
 }

h1{
    color: blue;
  }

再從html檔引入

<head>
<link rel="stylesheet" href="style.css" />
</head>

<br>

## class
我們可以在標籤裡面設置多個class屬性，然後在 head 標籤裡定義每個 class 屬性的特性

    <head>
        <style>
            .food{
                    color:red;
                 }

            .person{
                        color:blue;
                   }

            .background-grey{
                                background-color:grey;
                            }
        </style>
    </head>
    <body>
        <p class="food background-grey">麻婆豆腐小辣</p>
        <p class="food">肋眼牛排三分熟</p>
        <p class="food">清茶加珍珠微微</p>
        <p class="person background-grey">蔡英文</p>
        <p class="person">馬英九</p>
        <p class="person">陳水扁</p>
    </body>

## id
我們可以在標籤裡面一個且唯一的 id 屬性，然後在 head 標籤裡定義 id 屬性的特性

    <head>
        <style>
        #css-h1{
            color:yellow;
        }
        </style>
    </head>
    <body>
        <h1 id="css-h1">css教學</h1>
    </body>

<br>

## 其他css
也可以同時表示

.class-1, id-1 {
    background-color: grey;
}

套用在所有標籤上

* {
    background-color: grey; #會變成整個頁面的背景色
    color:red;
}

* 字號屬性會套用在整個html的所有標籤上面

套用在列表裡
* 列表裡的 li 標籤

.ul li {
    background-color: grey;
}

* 列表裡的 a 標籤

.ul a {
    background-color: grey;
}

套用在所有包含type的標籤上

[type] {
    background-color: grey;
}

[href] {
    background-color: grey;
}

游標移過去會有效果

h1:hover {
    background-color: grey;
}
p:hover {
    background-color: grey;
}

[type]:hover {
    background-color: grey;
}

###### tags: `HTML`