CSS（1）基礎語法、常見屬性

曹老三丶發表於2021-05-28
CSS
CSS
  • CSS：層疊樣式表。主要用於設定HTML頁面中的文字內容（字型、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。
  • CSS語法：CSS例項由選擇器，以及一條或多條宣告（屬性）兩部分組成。每個宣告（屬性）可以有一個或多個值。屬性和值被冒號分開。CSS宣告以分號;結束，宣告以大括號{}括起來。
p {
    color: red;
}
  • CSS註釋：CSS中僅支援使用/*  */進行註釋
/* 我是註釋內容 */
  • CSS引入：引入CSS樣式表的方法有三種。外部樣式表、內部樣式表、內聯樣式。
<head>
    <!-- 
        引入外部樣式檔案（推薦）:<link>標籤在寫在<head>標籤內。外部樣式表檔案不能包含任何的HTML標籤。樣式表應該以.css副檔名進行儲存。
            href：定義所連結外部樣式表檔案的URL，可以是相對路徑，也可以是絕對路徑。
            type：定義所連結文件的型別，在這裡需要指定為“text/CSS”，表示連結的外部檔案為CSS樣式表。
            rel：定義當前文件與被連結文件之間的關係，在這裡需要指定為“stylesheet”，表示被連結的文件是一個樣式表檔案。
    -->
    <link type="text/css" rel="styleSheet" href="./study.css" />
</head>

<body>
    <!-- 行內樣式：語法中style是標籤的屬性，實際上任何HTML標籤都擁有style屬性，用來設定行內式。其中屬性和值的書寫規範與CSS樣式規則相同，行內式只對其所在的標籤及巢狀在其中的子標籤起作用。 -->
    <div style="font-style:italic; color:blue;"> Hello there</div>
    <div class="a"> Hello A</div>
    <!-- 內部樣式：語法中，style標籤一般位於head標籤中title標籤之後，也可以把他放在HTML文件的任何地方。 -->
    <style>
        .a {
            color: red;
        }
    </style>
</body>
CSS選擇器
  • CSS選擇器（一）：用於選取頁面上的某個標籤，在CSS中稱為選擇器。
  1. 萬用字元選擇器：萬用字元選擇器是以*選取所有標籤。
  2. 標籤選擇器：直接使用標籤名選取該標籤名的所有標籤。
  3. id選擇器：id選擇器可以選取到標有該id屬性的HTML標籤。id選擇器以"#"來定義。一個元素只能有一個ID
  4. 類選擇器：類選擇器可以選取到標有該class屬性的HTML標籤。類選擇器以"."來定義。class選擇器有別於id選擇器，class屬性可以在多個標籤中使用。也支援一個標籤中有多個class屬性值（用空格隔開）。
<!-- 類可以在同個標籤上有多個值 -->
<div class="a b c"> Hello A</div>
<!-- 類可以在多個標籤上使用 -->
<div class="a b"> Hello B</div>
/* 萬用字元選擇器 */
* {
    color: gray;
}

/* id選擇器 */
#china {
    color: red;
}

/* 類選擇器 */
.america {
    color: green;
}

/* 標籤選擇器 */
li {
    color: yellow;
}
  • CSS選擇器（二）：
  1. 後臺選擇器：兩個元素用空格隔開，並且選中的是元素1所有層級的後代
  2. 子代選擇器：只能選擇子元素
  3. 並集選擇器：並集選擇器中間用逗號隔開，支援任意其他選擇器，多個元素要求豎著寫
  4. 偽類選擇器：偽類選擇器表示的是同一個標籤，根據其不同的種狀態，有不同的樣式。例如<a>標籤有點選前和點選後兩種狀態。
<body>
    <ol class="haha">
        <li>1</li>
        <li>
            <p>我是兒子</p>
        </li>
        <li>3</li>
        <p>我是孫子</p>
    </ol>
    <div>熊大</div>
    <p>熊二</p>
    <span>光頭強</span>
    <a href="http://www.baidu.com">百度一下</a>
    <input>
</body>
<style>
    /* 後臺選擇器：兩個元素用空格隔開，並且選中的是元素1所有層級的後代 */
    .haha p {
        color: green;
    }
    /* 子代選擇器：只能選擇子元素 */
    .haha>p {
        color: red;
    }
    /* 並集選擇器：並集選擇器中間用逗號隔開，支援任意其他選擇器，儘量豎著寫 */
    div,
    p,
    .haha>a {
        color: pink;
    }
    /* 偽類選擇器：偽類選擇器表示的是同一個標籤，根據其不同的種狀態，有不同的樣式。例如<a>標籤有點選前和點選後兩種狀態。注意：一定先寫靜態偽類，後寫動態偽類。
        1.靜態偽類：只能用於超連結的樣式。
            :link。超連結點選之前（主要是能區分是不是帶有href的<a>標籤）
            :visited。連結被訪問過之後
        2.動態偽類：針對所有標籤都適用的樣式。
            :hover。懸停，滑鼠放到標籤上的時候
            :active。啟用，滑鼠點選標籤，但是不鬆手時。
            :focus。是某個標籤獲得焦點時的樣式（一般用於輸入框獲得焦點）
    */
    /* 讓超連結點選之前 */
    a:link {
        color: red;
    }
    /* 讓超連結點選之後 */
    a:visited {
        color: orange;
    }
    /* 滑鼠懸停，放到標籤上的時候 */
    a:hover {
        color: green;
    }
    /* 滑鼠點選連結，但是不鬆手的時候（啟用） */
    a:active {
        color: black;
    }
    /* 輸入框獲取焦點時 */
    input:focus {
        background-color: palegoldenrod;
    }
 CSS常用屬性
  • CSS度量單位：
單位名稱說明例子
Piexels(畫素) 一個畫素的大小根據使用者顯示器尺寸和畫素密度不同而設定 .classname { margin:5px; }
Points(磅) 一英鎊等於一英寸的1/72，來源於印刷背景設計。 .classname { margin:5pt; }
Inches(英寸) 1英寸相當於72英鎊 .classname { margin:5in; }
Centimeters(釐米) 1釐米比28英鎊稍大一些 .classname { margin:5cm; }
Millimeters(毫米) 1毫米等於1/10釐米(約為3磅) .classname { margin:5mm; }
Picas Picas是另一種印刷度量單位，等於12磅 .classname { margin:5pc; }
Ems 一個em等於當前字型的大小，用於描述相對尺寸 .classname { margin:5em; }
Exs 也與當前字型大小有關，等於小寫字母x的高度，不常用 .classname { margin:5ex; }
Percent(百分比) 這個單位與em相關，它是相對單位 .classname { margin:125%; }
  • 字型相關屬性：可以用CSS設定的四種主要的字型屬性：family(字型族)、style(樣式)、size(大小)和weight(粗細)。字型一般直接設定在body上用於控制整個頁面。
  1. font-family：設定文字的字型
  2. font-size：設定文字的字型大小
  3. font-style：設定文字的字型樣式（正常normal、斜體italic、傾斜oblique）
  4. font-weight：設定文字的字型粗細
<style>
    div {
        height: 50px;
        width: 50px;
    }
    #cqz {
        /* 設定文字的字型系列：楷體、宋體等（不推薦漢字，推薦使用英文）。可以設定多個，當前一個瀏覽器不支援的時候，用第二個，以此類推 */
        font-family: "楷體";
        /* 設定文字的字型大小：可以使用px、em、百分比。不同瀏覽器字型預設大小不同，所以必須設定文字預設值。h1等標題標籤需要單獨指定字型大小。 */
        font-size: 16px;
        /* 設定文字為斜體：預設normal是正常字型 */
        font-style: italic;
        /* 設定文字粗細：主要是normal和bold這兩個值。blod為加粗。或者可以使用數字（注意不要有單位） */
        font-weight: 700;
　　　　　/* 複合寫法：前兩個可以省略，後兩個不能省略。 */
　　　　　font: font-style font-weight font-size font-family;
    }
</style>
<body>
    <div id="cqz">曹</div>
</body>
  • 文字相關屬性：
  1. color：文字顏色。
  2. text-align：設定文字的水平對齊方式。左對齊(left)、右對齊(right）、居中(center)和兩端對齊(justify)。
  3. line-height：設定文字垂直的對齊方式（行高）【實現原理：行高由文字高度 + 上下空隙組成，當父類有高度，則會自動填滿上下空隙，保證文字居中。】
  4. word-spacing：設定文字字間距
  5. letter-spacing：設定單詞和字元間距
  6. text-transform：設定文字轉換。無、首寫字母大寫、大寫和小寫。
  7. text-decoration：設定文字裝飾。下劃線、刪除線、上劃線、閃爍等。
  8. text-indent：設定首行文字縮排距離。
#cqz {
    /* 設定文字顏色（具體設定方式見下文CSS中顏色定義） */
    color: #00f0ff;
    /* 設定文字水平對齊方式：左對齊(left)、右對齊(right）、居中(center)和兩端對齊(justify)。 */
    text-align: center;
    /* 設定文字垂直對齊方式（設定行高，當行高與父容器的高度相同時且文字僅有一行，則文字垂直居中） */
    line-height: 100px;
    /* 設定文字裝飾：下劃線（underline）、刪除線（line-through）、上劃線（overline）、閃爍（blink）等。注意：<a>標籤預設值為underline，想要去除<a>標籤的下劃線，就將text-decoration設定為none */
    text-decoration: line-through;
    /* 設定文字縮排：一般設定為em，代表當前文字大小的距離，是一個相對單位 */
    text-indent: 2em;

}
a {
    /* 去除<a>標籤的預設下劃線 */
    text-decoration: none;
}
  • CSS中顏色定義：W3C標準化組織定義的標準的16中顏色的名稱分別是：aqua(水藍)、black(黑)、blue(藍)、fuchsia(紫紅)、gray(灰)、green(綠)、lime(綠黃)、maroon(醬紫)、navy(深藍)、olive(橄欖綠)、ourple(紫)、red(紅)、silver(銀)、teal(青)、white(白)、和yellow(黃)。還可以使用十六進位制RGB：#ff0000、#00ff00、#0000ff等。還可以使用rgb函式【rgb(0,255,255)】
#cqz {
    /* RGB函式 */
    color: rgb(0, 255, 255);
    /* 十六進位制RGB */
    color: #fff000;
    /* W3C標準色 */
    color: red;
}
  • 背景屬性：
  1. background-color：設定背景顏色
  2. background-image：設定背景圖片
  3. background-repeat：設定背景圖片重複/平鋪方式
  4. background-position：設定背景圖片定位
  5. background-attachment：設定背景圖片是否固定或者隨著頁面的其餘部分滾動
  6. background-size：設定背景圖片大小【CSS3以前，背景影像大小由影像的實際大小決定】
  7. background：複合寫法。任意屬性都可以省略。
<body>
    <div class="cqz"></div>
</body>
　　<style>
    * {
        margin: 0;
        padding: 0;
    }
    .cqz {
        margin-top: 50px;
        margin-left: 50px;
        height: 1000px;
        width: 1000px;
        border: 1px solid red;
        /* 設定背景顏色 */
        background-color: rgb(0, 0, 0);
        /* 設定背景圖片：預設重複鋪滿盒子 */
        background-image: url("../images/123.webp");
        /* 設定背景圖片重複平鋪方式：
            1.repeat        垂直方向和水平方向重複。【預設】
            2.repeat-x    水平方向重複。
            3.repeat-y    垂直方向重複。
            4.no-repeat    背景影像將僅顯示一次（不重複）。
        */
        background-repeat: no-repeat;
        /* 設定背景圖片定位：一般建議小圖示和超大圖片使用背景進行設定而不是<img>
            1.需要有兩個值。
            2.如果僅規定了一個關鍵詞，那麼第二個值將是center。
            3.方位名詞：    top left center right（方位名詞不區分設定順序）
            4.畫素/百分比： 設定畫素值時，第一個值是x軸，第二個值是y軸。
        */
        /* background-position: center top; */
        background-position: 50% 100%;
        /* 設定背景圖片大小：如果設定了圖片大小，圖片會被自動拉伸或壓縮到設定的大小。 */
        background-size: 1000px 1000px;
        /* 設定背景圖片是否固定或者隨著頁面的其餘部分滾動
            1.scroll    預設值。背景影像會隨著頁面其餘部分的滾動而移動。
            2.fixed        當頁面的其餘部分滾動時，背景影像不會移動。
        */
        background-attachment: fixed;
        /* 複合寫法：支援省略任意屬性 */
        /* background: #00FF00 url(bgimage.gif) no-repeat fixed top; */
    }
</style>
元素顯示模式
  • 元素顯示模式：在CSS中，根據元素顯示模式的不同元素標籤被分為了兩類。行內元素（inline-level）、塊級元素（block-level）。
  1. 行內元素：行內元素就是不會獨佔一行的元素，行內元素不能設定寬度和高度。它的寬度和高度會隨著文字的改變而該改變。內部不能填寫塊級元素。例如：<span> <buis> <strong> <em> <ins> <del>等；
  2. 塊級元素：塊級元素就是會獨佔一行的元素，塊級元素可以設定寬度和高度，如果沒有設定寬度和高度，預設父元素一樣寬，高度則為0。例如：<p> <div> <h> <ul> <ol> <dl> <li> <dt> <dd>等。
  3. 行內塊級元素：由於我們有的時候不僅要設定元素的寬度和高度，同時也希望元素不會獨佔一行，這時就出現了行內塊級元素（inline-block）。同一行的行內塊級元素會有空白間隔。例如<img><input><td>等。
  • 轉換CSS元素的顯示模式：設定元素的display屬性。inline（行內）、block（塊級）、inline-block（行內塊級）
<body>
    <span>我是行內元素，被轉換成了塊級元素</span>
    <div>我是塊級元素，被轉換成了行內元素</div>
    <img src="../images/1.webp"><img src="../images/1.webp">
</body>
　　<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* 將span轉換為塊級元素 */
    span {
        display: block;
        background-color: red;
        width: 400px;
        height: 200px;
    }

    /* 將div轉換為行內塊級元素 */
    div {
        display: inline-block;
        background-color: green;
        width: 300px;
        height: 300px;
    }

    /* 將img轉換為塊級元素 */
    img {
        display: block;
        width: 200px;
    }
</style>
CSS三大特性
  • CSS三大特性：CSS的三個特性是指層疊性、繼承性以及優先順序。
  1. 層疊性：層疊性是在HTML中對於同一個元素可以有多個CSS樣式存在，當有相同權重的樣式存在時，會根據這些樣式書寫的先後順序來決定，處於最後面的CSS樣式將會覆蓋前面的CSS樣式。
  2. 繼承性：子標籤會繼承父標籤的某些樣式，如文字顏色和字號。想要設定一個可繼承的屬性，只需將它應用於父元素即可。合理使用繼承可以簡化程式碼，降低CSS樣式的複雜性。對於字型、字號、顏色、行距等文字類屬性具有繼承性，都可以在body中統一設定，然後影響文件中所有文字。但是，並不是所有的CSS屬性都可以繼承，如邊框、外邊距、內邊距、背景、定位、元素高度等與塊級元素相關的屬性都不具有繼承性。
  3. 優先順序：在複雜CSS樣式表，經常出現兩個或多個不同樣式規則應用在同一元素上，這時到底採用哪個樣式呢？這就是典型的CSS優先順序問題。計算優先順序有如下規則：繼承 < 元素選擇器 < 類選擇器/偽類選擇器 < ID選擇器 < 行內樣式 < !important
    1. 繼承樣式的權重為0：在巢狀結構中，無論父元素樣式權重多大，子元素繼承時，應用在子元素上的權重都為0，即子元素定義的樣式會覆蓋所有繼承來的樣式。
    2. 行內樣式優先：應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大於100。總之，他擁有比上面提高的選擇器都大的優先順序。
    3. 就近原則：權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先順序，或者說排在最後的樣式優先順序最大。
    4. !important命令：CSS定義了一個!important命令，該命令被賦予最大的優先順序。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先順序。
    5. 權重會疊加，但是永遠不會進位。（下面講解權重疊加問題）
<style>
div {
    height: 100px;
    /* 層疊性：該屬性會被同權重CSS覆蓋 */
    width: 50px;
    margin-left: 50px;
    border: black 1px solid;
    /* 繼承性：該屬性會被子標籤繼承 */
    font-size: 20px;
    /* 繼承性：該屬性會被子標籤覆蓋 */
    font-family: "楷體";
}
div {
    /* 層疊性：該屬性會覆蓋上方的同權重CSS */
    width: 60px;
}
p {
    font-family: "微軟雅黑";
}
</style>
<body>
    <div>
        <p>曹老三</p>
    </div>
</body>
  • 權重疊加問題：每種選擇器的權重見下方表格。樣式繼承的權重為0，複合選擇器使權重疊加，權重之間不能越界，11個類也沒有id的權重大
選擇器 權重
0000 0000
標籤選擇器 0001
類選擇器與偽類選擇器 0010
ID選擇器 0100
行內樣式 1000
!important　　 +∞ 
<body>
    <div class="father" id="fatherid">
        <div class="child1" id="child1Id">孩子1</div>
    </div>
</body>
　　<style>
    * {
        margin: 0;
        padding: 0;
        /* 權重為0 */
        background-color: pink;
    }

    .child1 {
        /* 權重為0010 */
        background-color: red;
    }

    .father .child1 {
        /* 權重為0020 */
        background-color: black;
    }

    #fatherid .child1 {
        /* 權重為0110 */
        background-color: green;
    }

    #child1Id {
        /* 權重為0100 */
        background-color: wheat;
    }

    #fatherid #child1Id {
        /* 權重為0200 */
        background-color: greenyellow;
    }

    .child1 {
        /* 權重為+∞ */
        background-color: hotpink !important;
    }
</style>

 

相關文章