Cascading Style Sheets

Cascading Style Sheets，也稱為CSS，是一種旨在為Web頁定義樣式的語言。CSS樣式定義了對文本、字體、白色、背景和其他網頁元素該如何顯示和放置的規則。

一、樣式表的分類

CSS樣式表主要分為三類：

1、內聯樣式表：將CSS樣式直接寫在HTML頁面標籤的style屬性中。

    <h1 style="color:blue;margin-left:30px;font-size:20px;">標題</h1>

2、文檔樣式表： CSS代碼放置在一個獨立的外部文檔中，以.css後綴命名。

    /*style.css*/
    h1 {
        color:blue;
        margin-left:30px;
        font-size:20px;
    }

    /* index.html */
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>標題</h1>
    </body>

3、內部樣式表：CSS代碼寫在HTML文檔的heade標籤中，以style標籤包裹。

    <head>
        <style>
            h1 {
                color:blue;
                margin-left:30px;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <h1>標題</h1>
    </body>

二、CSS選擇器

選擇器是CSS中非常重要的一部分，它用於定位HTML文檔中的元素。

1、元素選擇器：使用元素名稱來選擇一組元素。

    h1 {
        color:blue;
        font-size:20px;
    }

2、類選擇器：使用class屬性選擇匹配的元素。

    .big {
        font-size:20px;
    }
    <p class="big">這是一個大號字體的段落</p>

3、ID選擇器：使用id屬性選擇匹配的元素。

    #main-logo {
        width:200px;
        height:100px;
    }
    <img id="main-logo" src="logo.jpg">

三、CSS盒模型

CSS盒模型封裝了HTML元素的內容、內邊距、邊框和外邊距。將Web文檔的各個部分視為一個矩形框，即盒子（box），盒模型的主要作用就是對這些矩形框進行布局，以及設置每個盒子的大小、位置。

盒模型主要分為兩種模型：

1、標準盒模型：盒子總寬度=內容寬度+內邊距寬度+邊框寬度+外邊距寬度。

    .box {
        width:200px;
        height:200px;
        padding:20px;
        border:1px solid #000;
        margin:10px;
    }
    <div class="box"></div>

2、IE盒模型：盒子總寬度=內容寬度+外邊距寬度+邊框寬度。padding 和 border都在裡面。

    .box {
        width:200px;
        height:200px;
        padding:20px;
        border:1px solid #000;
        margin:10px;
        box-sizing:border-box; /*IE盒模型*/
    }
    <div class="box"></div>

四、響應式布局

響應式設計是一種設計理念，可以自動適應不同設備和屏幕大小的網站。有兩種方法可以實現響應式布局：

1、媒體查詢：可以為不同設備設置不同的CSS樣式。

    @media screen and (max-width:768px) {
        body {
            background:blue;
        }
    }
    @media screen and (min-width:768px) {
        body {
            background:green;
        }
    }

2、彈性布局：使網頁元素的大小和位置隨屏幕大小的變化而變化。

    .parent {
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    .child {
        flex:1; /*平均分配空間*/
        height:50px;
        margin:5px;
    }
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>

五、定位和浮動

1、定位：使用position屬性設置元素的定位方式。

    .box {
        width:200px;
        height:200px;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    <div class="box"></div>

2、浮動：使元素向左或向右浮動，可以使多個元素在同一行顯示。

    .left {
        float:left;
        width:200px;
        height:200px;
        background:red;
    }
    .right {
        float:right;
        width:200px;
        height:200px;
        background:blue;
    }
    <div class="left"></div>
    <div class="right"></div>

六、CSS動畫

使用CSS動畫可以讓元素在頁面上顯示出流暢的運動效果。

    @keyframes move {
        0% {transform:translateX(0);}
        50% {transform:translateX(500px);}
        100% {transform:translateX(0);}
    }
    .box {
        width:100px;
        height:100px;
        background:red;
        animation:move 3s linear infinite;
    }
    <div class="box"></div>

七、總結

CSS作為網頁的樣式表，對於美化網頁、提高用戶體驗起著至關重要的作用。在學習CSS時，需要掌握基本的語法、選擇器、盒模型等知識，並學習響應式布局、定位和浮動、CSS動畫等高級應用。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/197593.html