鐵人賽 Day4 -- 一定要知道的 CSS (一)

13th鐵人賽

SKYDOG

2021-09-04 15:10:05

1562 瀏覽

分享至

前言

昨天有談到 Div 區塊是怎麼寫出來的之後，今天就要來談談 CSS

什麼是 CSS ?

簡單來說就是可以美化我們畫面，讓我們的畫面可以更讓人賞心悅目

要用CSS來排版時，一定要用知道class

Class 可以解釋為名子
每個人的名子不一樣，當別人在叫你的時候你才會知道是在叫你
如果今天班上同學全都叫做王小明，當老師今天叫王小明起立時，全班就都會一起站起來。

所以Class也是一樣，
當我們今天沒有為我們的 Div 命名的時候，你會發現我們做設定的時候，所有的div都會一起被修改掉
所以我們在使用CSS時，要讓CSS知道我們是要對誰做設定

所以我先隨便設一個 Div 他的 Class名稱叫做 banner

<div class="banner">
     <h2>我是區域1</h2>
</div>

那我們要單獨對這個 Div 去做設定的時候，要這樣寫，
--> . + Class名稱+{ }

<style>
    .banner{
        /*寫在這裡面的程式碼，會讓CSS知道我是單獨對banner做設定*/
    }
</style>

CSS該寫在哪裡??

在介紹該怎麼寫之前要先來介紹 Style標籤
style 用來設定 HTML 文件的樣式，在 style 裡面你可以寫 CSS 來排版

而通常在寫CSS的時候都會把 CSS 放在 head 裡面，也就是像下面這樣

<!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>
        .banner{
            /*寫在這裡面的程式碼，會讓CSS知道我是單獨對banner做設定*/
        }
    </style>
</head>
<body>

</body>
</html>

我要設定Div的長寬我要怎麼寫??

width寬度

撰寫小撇步 : w + 數字後按下 Tab
例如 : w100 + Tab 會自動產生 width: 100px;

<style>
    .banner{
        width: 100px;
    }
</style>

height長度

撰寫小撇步 : w + 數字後按下 Tab
例如 : h100 + Tab 會自動產生 height: 100px;

<style>
    .banner{
        height: 100px;
    }    
</style>

Div背景顏色

-->系統預設為 #fff 白色，若要其他顏色可以修改 #fff 去做變更

撰寫小撇步 : bgc 後按下 Tab
例如 : bgc + Tab 會自動產生 background-color: #fff;

<style>
    .banner{
        background-color: #fff;
    }    
</style>

在此附上色碼表https://www.toodoo.com/db/color.html

border 外邊框線

border : 3px solid #fff ;
border : ( 大小樣式顏色 ) ;

<style>
    .banner{
        border: 2px solid #000;
    }    
</style>

附上其他邊框樣式

樣式	顯示結果
solid	實線
double	雙線
dashed	虛線
dotted	點線
groove	凹線
ridge	凸線
inset	嵌入線
outset	浮出線

大家可以試著去修改看看昨天的程式碼，試著玩玩看
(不囉嗦，先附上昨天的程式碼)

<!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>
        .banner1{
            width: 300px;
            height: 200px;
            border: 2px solid #000;
        }
        .banner{
            display: inline-block;
            background-color: rgb(158, 255, 2);
            width: 100px;
            height: 100px;
        }
        .banner1 h2{
            font-size: 20px;
        }
        .banner2{
            display: inline-block;
            background-color: rgb(158, 255, 2);
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="banner1">
        <h2>我是土地</h2>
        <div class="banner">
            <h2>我是區域1</h2>
        </div>
        <div class="banner2">
            <h2>我是區域2</h2>
        </div>
    </div>
</body>
</html>

明天再來講 display，我們鐵人賽Day5見!!