Cascade Style Sheet

一、什麼是樣式表

在狹義的解釋中，樣式表就是寫在<style>標籤或者link標籤中的一段CSS語句。但是在更廣義上，樣式表還包含了引用的外部CSS文件和通過JS DOM或者特定框架(如Vue.js中的scoped styling)動態生成的樣式。

樣式表的作用是對網頁內容進行視覺上的設計和修飾。通過修改樣式表，開發者可以統一修改網站的視覺風格，實現網頁的復用性，提高開發效率。同時，樣式表還可以使得網站在不同設備上呈現出更好的用戶體驗。

二、什麼是CSS

CSS（Cascading Style Sheets）翻譯為層疊樣式表，在網頁中主要起到渲染HTML元素的作用。除此之外，CSS還可以實現網頁內容的動畫效果、響應式布局、列印樣式等。

CSS的基本語法結構為「選擇器 + 聲明」，其中選擇器用來定位HTML元素，聲明包括屬性和屬性值，用來設定元素的樣式。

    /* 選擇器 */
    p {
        /* 屬性和屬性值 */
        color: red;
    }

三、CSS的層疊規則

層疊規則是指在CSS中，當多個樣式作用於同一個元素時，如何決定哪個樣式擁有最終的優先順序。層疊順序從低到高依次為：

1. 瀏覽器默認樣式

2. 用戶設置的樣式

3. 開發者設置的樣式（內聯樣式 <style>標籤 <link>引用的外部樣式）

4. !important聲明的樣式

註：!important聲明應該被儘可能地避免，因為它具有破壞樣式層疊的風險。

四、CSS選擇器

CSS選擇器用來定位HTML元素。常用的選擇器有：

1. 標籤選擇器（元素選擇器）：根據標籤名選擇元素。

    /* 選中所有h1元素 */
    h1 {
        font-size: 24px;
    }

2. 類選擇器：根據設置class屬性的元素選擇。

    /* 選中class為btn的所有元素 */
    .btn {
        border: 1px solid #ccc;
    }

3. ID選擇器：根據設置id屬性的元素選擇。

    /* 選中id為header的元素 */
    #header {
        background-color: #f5f5f5;
    }

4. 偽類選擇器：如:hover、:active等，選擇元素的特定狀態。

    /* 滑鼠懸浮時文本顏色變為紅色 */
    a:hover {
        color: red;
    }

五、CSS布局

CSS布局主要包括盒模型、浮動、定位、flex布局、grid布局等。其中，盒模型是CSS布局的基礎概念，指元素在頁面中的排布和大小屬性。

浮動布局通過設置float屬性實現元素的左右浮動，使元素不佔據原來的文檔流位置，從而實現多列布局等效果。

    /* 左右兩側的元素浮動，中央元素使用margin居中 */
    .left {
        float: left;
        width: 30%;
    }
    .right {
        float: right;
        width: 30%;
    }
    .center {
        margin: 0 auto;
    }

定位布局通過設置position屬性和top/bottom/left/right值實現元素的定位，它可以實現更為複雜的布局效果。

    /* 讓一個元素距離底部100px、右側150px */
    .box {
        position: fixed;
        bottom: 100px;
        right: 150px;
    }

flex布局是一種基於伸縮盒子模型的布局方式，通過設置flex容器和flex子項的屬性，實現自適應布局。

    /* 使用flex布局實現水平居中和垂直居中 */
    .container {
        display: flex;
        justify-content: center; /*水平居中*/
        align-items: center; /*垂直居中*/
    }

grid布局是一種二維網格布局方式，將容器分為若干行和若干列，可以更加方便地進行網頁布局。

    /* 列出三列，每列寬度平均分為3份 */
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

六、CSS高級特性

CSS中還有很多高級特性，例如變數、Mixin、CSS模塊等。

CSS變數可以通過定義和重新使用變數來簡化樣式表的開發，提高樣式的復用性。

    /* 定義變數 */
    :root {
        --primary-color: #007bff;
    }
    /* 使用變數 */
    .btn {
        background-color: var(--primary-color);
    }

Mixin是一種將常見樣式集中在一起的方法，它可以通過@include指令調用。

    /* 定義Mixin */
    @mixin border-radius($radius: 3px) {
        border-radius: $radius;
        -moz-border-radius: $radius;
        -webkit-border-radius: $radius;
    }
    /* 使用Mixin */
    .box {
        @include border-radius(5px);
    }

CSS模塊允許開發者將樣式表拆分成多個文件，這樣既可以提高開發效率，又可以讓樣式更加清晰、易於維護。

    /* 定義模塊 */
    /* base.css */
    body {
        font: 16px/1.5 "Microsoft YaHei",sans-serif;
        background: white;
    }
    /* layout.css */
    .container {
        width: 960px;
        margin: 0 auto;
    }
    /* styles.css */
    @import 'base.css';
    @import 'layout.css';
    /* 定義新樣式 */
    .box {
        color: #333;
    }

七、總結

CSS作為前端開發中的核心技能，掌握了CSS，不僅可以實現網頁的基本布局，還可以實現複雜的交互效果和動畫效果，提高用戶體驗。希望本文能夠對您有所幫助。