铁人赛 Day4 -- 一定要知道的 CSS (一)

前言

昨天有谈到 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见!!

<<: MySQL：如何让 query 区分大小写

>>: Transactions (3-2) - Weak Isolation Levels - Snapshot Isolation