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

本文轉載自查看原文 2021-05-28 17:27 300 前端

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中稱為選擇器。

通配符選擇器：通配符選擇器是以*選取所有標簽。
標簽選擇器：直接使用標簽名選取該標簽名的所有標簽。
id選擇器：id選擇器可以選取到標有該id屬性的HTML標簽。id選擇器以"#"來定義。一個元素只能有一個ID
類選擇器：類選擇器可以選取到標有該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所有層級的后代
子代選擇器：只能選擇子元素
並集選擇器：並集選擇器中間用逗號隔開，支持任意其他選擇器，多個元素要求豎着寫
交集選擇器：標簽.類名。表示同時符合標簽和類名的。
偽類選擇器：偽類選擇器表示的是同一個標簽，根據其不同的種狀態，有不同的樣式。例如<a>標簽有點擊前和點擊后兩種狀態。（詳情見代碼）
偽元素選擇器：（CSS3）詳情見代碼

<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>
    <p class="jj">我被交集選擇</p>
    <p class="jj">我被交集選擇</p>
    <p class="jj1">未被交集選擇</p>
    <p class="jj2">未被交集選擇</p>
    <p id="wys">測試偽元素選擇器</p>
</body>
<style>
    /* 后台選擇器：兩個元素用空格隔開，並且選中的是元素1所有層級的后代 */
    .haha p {
        color: green;
    }

    /* 子代選擇器：只能選擇子元素 */
    .haha>p {
        color: red;
    }

    /* 交集選擇器：標簽.類名。表示同時滿足標簽和類名的。 */
    p.jj {
        color: blue;
    }

    /* 並集選擇器：並集選擇器中間用逗號隔開，支持任意其他選擇器，盡量豎着寫 */
    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;
    }

    /* 
        偽元素選擇器：
            E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）
            E::first-line 文本第一行；
            E::selection 可改變選中文本的樣式；
            E::before和E::after在E元素內部的開始位置和結束位創建一個元素，該元素為行內元素，且必須要結合content屬性使用
     */
    #wys::first-letter {
        color: green;
    }
</style>

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上用於控制整個頁面。（使用技巧：網頁普遍字體大小為14px、盡量使用偶數字號、font-family: “\5FAE\8F6F\96C5\9ED1”使用Unicode編碼防止系統不支持中文的問題。盡量僅使用宋體或微軟雅黑字體）

font-family：設置文本的字體類型。
font-size：設置文本的字體大小。
font-style：設置文本的字體樣式（正常normal、斜體italic、傾斜oblique）
font-weight：設置文本的字體粗細

<style>
    div {
        height: 50px;
        width: 50px;
    }
    #cqz {
        /* 設置文本的字體系列：楷體、宋體等（不推薦漢字，推薦使用英文Mixrosoft Yahei）。可以設置多個，當前一個瀏覽器不支持的時候，用第二個，以此類推 */
        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>

文本相關屬性：

color：文本顏色。
text-align：設置文本的水平對齊方式。左對齊(left)、右對齊(right）、居中(center)和兩端對齊(justify)。
line-height：設置行間距。也是文本垂直的對齊方式（行高）【實現原理：行高由文字高度 + 上下空隙組成，當父類有高度，則會自動填滿上下空隙，保證文字居中。】
word-spacing：設置文本字間距
letter-spacing：設置單詞和字符間距
text-transform：設置文本轉換。無、首寫字母大寫、大寫和小寫。
text-decoration：設置文本裝飾。下划線、刪除線、上划線、閃爍等。
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;
}

背景屬性：

background-color：設置背景顏色
background-image：設置背景圖片
background-repeat：設置背景圖片重復/平鋪方式
background-position：設置背景圖片定位
background-attachment：設置背景圖片是否固定或者隨着頁面的其余部分滾動
background-size：設置背景圖片大小【CSS3以前，背景圖像大小由圖像的實際大小決定】
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）。

行內元素：行內元素就是不會獨占一行的元素，行內元素不能設置寬度和高度。它的寬度和高度會隨着文本的改變而該改變。內部不能填寫塊級元素。例如：<span> <buis> <strong> <em> <ins> <del>等；
塊級元素：塊級元素就是會獨占一行的元素，塊級元素可以設置寬度和高度，如果沒有設置寬度和高度，默認父元素一樣寬，高度則為0。例如：<p> <div> <h> <ul> <ol> <dl> <li> <dt> <dd>等。
行內塊級元素：由於我們有的時候不僅要設置元素的寬度和高度，同時也希望元素不會獨占一行，這時就出現了行內塊級元素（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的三個特性是指層疊性、繼承性以及優先級。

層疊性：層疊性是在HTML中對於同一個元素可以有多個CSS樣式存在，當有相同權重的樣式存在時，會根據這些樣式書寫的先后順序來決定，處於最后面的CSS樣式將會覆蓋前面的CSS樣式。
繼承性：子標簽會繼承父標簽的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用於父元素即可。合理使用繼承可以簡化代碼，降低CSS樣式的復雜性。對於字體、字號、顏色、行距等文本類屬性具有繼承性，都可以在body中統一設置，然后影響文檔中所有文本。但是，並不是所有的CSS屬性都可以繼承，如邊框、外邊距、內邊距、背景、定位、元素高度等與塊級元素相關的屬性都不具有繼承性。
優先級：在復雜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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css常見屬性 CSS基礎-行快屬性，hover VUE - 基礎語法（文本、標簽、屬性） CSS3基礎(4)——CSS3 渲染屬性 CSS基礎（float屬性與清除浮動） CSS盒子模型基礎屬性 HTML+css基礎 img 標簽的屬性 CSS基本語法（二）【原】常見CSS3屬性對ios&android&winphone的支持 freemarker常見語法大全