【前端筆記】☞ CSS 基礎

時間 2019-11-09

標籤前端筆記 css 基礎欄目 CSS 简体版

原文原文鏈接

1. 什麼是CSS

CSS的全稱是Cascading Style Sheets，層疊樣式表。它用來控制HTML標籤的樣式，在美化網頁中起到很是重要的做用。

　　CSS的編寫格式是鍵值對形式的，好比　　　　css

color: red;web

background-color: blue;瀏覽器

font-size: 20px;ssh

　　冒號左邊的是屬性名，冒號右邊的是屬性值。佈局

　　CSS遵循一個規律：就近原則（同一個樣式出現屢次定義，以離內容最近的爲準）、疊加原則（同一個樣式只出現一次定義，以出現的爲準）字體

2. CSS有3種書寫形式

　　1》行內樣式：（內聯樣式）直接在標籤的style屬性中書寫url

　　　　<body style="color: red;">spa

　　2》頁內樣式：在本網頁的style標籤中書寫
3d

<style>code

　　body {

　　　　color: red;

　　}

</style>

　　3》外部樣式：在單獨的CSS文件中書寫，而後在網頁中用link標籤引用

　　　　// relation 關係，要告訴瀏覽器導入的是什麼東西。（層疊樣式表）

3. CSS的兩大重點

　　屬性：經過屬性的複雜疊加才能作出漂亮的網頁

　　選擇器的做用：經過選擇器找到對應的標籤設置樣式（選擇器就是用來找網頁中的標籤，去設置樣式）

1》標籤選擇器
    /* 1.標籤選擇器 */
    div {
        color: red;
    }
    p {
        color: blue;
    }
    <div>11111</div>
    <p>222222</p>

2》類選擇器的格式
    /* 2.類選擇器 */
    .one {
        color: yellow;
    }
    <div class="one">3333333</div>
    <p class="one">444444</p>

3》id選擇器的格式
    /* 3.id選擇器 */
    #first {
        font-size: 40px;
    }
    <div id="first">555555</div>
    <!--id選擇器只能用一次，是惟一標識，其它地方不能重複使用-->
    <!--<div id="first">666666</div>-->
 4》並列選擇器
    /* 並列選擇器 */
    div,.one {
        color: blue;
    }
    說明：並列選擇器是一種合併寫法，即把多個標籤相同的樣式合併寫到一塊兒。

5》複合選擇器
    /* 複合選擇器 */
    div .one {
        background-color: lightgray;
    }
    #first div {
        color: #84ffdb;
    }
    說明：複合選擇器是一種縮小定位範圍的寫法，方便快速定位。（首先先找div標籤，而後再在div標籤裏去找設置了one的類選擇器。）

6》直接後代選擇器
    /*直接後代選擇器*/
    div > p {
        color: red;
    }
    說明：定位div裏面的p標籤，包括全部兒子級的p標籤，不包括孫子級的p標籤。

7》相鄰兄弟選擇器
    /*相鄰兄弟選擇器*/
    div + p {
        color: red;
    }
    說明：定位與div並列同級且最近的一個p標籤。

8》屬性選擇器
    /*屬性選擇器，定位帶name屬性的div */
    div[name] {
        color: red;
    }
    /*屬性選擇器，定位 name屬性值爲zhangsan div */
    div[name="zhangsan"] {
        color: blue;
    }
    /*屬性選擇器，定位帶 name屬性和age屬性 的div */
    div[name][age]{
        color:gray;
    } <!--div有一個name屬性-->
    <div name="zhangsan">11111</div>
    <div name="lisi">22222</div>
    <!--div有兩個屬性：name和age-->
　　 <div name="wangwu" age="23">333333</div>

9》僞類
    在選擇器後加上「：屬性」,當這個屬性被觸發的時候，能夠去改變選擇器對應標籤的樣式。
    標籤:屬性 {
        樣式
    }

    div {
        background-color: red;
        width: 300px;
        height: 300px;
    }
    /* 僞類：當鼠標放到div區域上時，改變div的樣式 （webView不支持，點擊才能看到效果）*/
    div:hover {
        background-color: green;
        width: 100px;
        height: 100px;
    }
    /* 僞類：輸入框得到焦點（處於編輯狀態）時，改變input邊框的樣式 */
    input:focus {
        /* 去掉外邊框的顏色 */
        outline: none;
        /* 邊框：是一個複合屬性。(1.邊框寬度 2.邊框樣式:實線solid、虛線dashed、雙環線double 3.邊框顏色) */
        border: 1px solid yellow;
　　}

4. 選擇器的優先級

　　選擇器的針對性越強（範圍越小），它的優先級就越高。

　　如：id選擇器 > 類選擇器 > 標籤選擇器

　　/* 強制改變優先級用important，important優先級最高，設置body標籤裏全部文字爲黑色 */

* {

color:black !important;

}

5. CSS屬性

　　CSS有N多屬性，根據繼承性，主要能夠分爲2大類

　　1》可繼承屬性：

　　　　父標籤的屬性值會傳遞給子標籤

　　　　通常是文字控制屬性

body {

font-size: 30px;

color: red;

/*字體加粗*/

font-weight: bolder;

}

下面列舉一些可繼承屬性（紅色表示經常使用）：

全部標籤可繼承

　　　　visibility（隱藏內容）、cursor（光標樣式）

內聯標籤可繼承

　　　　line-height、color、font、font-family（文字字體）、font-size、font-weight（文字加粗）、text-decoration（文字下劃線）、letter-spacing、word-spacing、white-space、font-style、font-variant、text-transform、direction

　　　　/*去掉標籤的下劃線*/

　　　　text-decoration: none;

塊級標籤可繼承

　　　　text-indent（文字首行縮進）、text-align（內容水平居中）

列表標籤可繼承

　　　　list-style（列表樣式）、list-style-type、list-style-position、list-style-image

div {

background-color: red;

width: 300px;

height: 300px;

/* 隱藏標籤的內容和結構 */

/* display: none; */

/* 隱藏標籤的內容，保留標籤的結構，佔位 */

visibility: hidden;

/*規定光標的樣式（光標移到div上顯示）：pointer手指（跳轉/超連接用）；crosshair十字架（畫圖/畫區域用）*/

cursor: pointer;

}

p {

color: blue;

/* 段落首行縮進（根據像素/比例進行縮進）*/

text-indent: 3%;

}

ul {

/*列表樣式屬性：none無；square方塊；circle圓*/

list-style:square;

}

　　2》不可繼承屬性

父標籤的屬性值不能傳遞給子標籤

通常是區塊控制屬性

　　　　下面列舉一些不可繼承屬性（紅色表示經常使用）：

display、margin、border、padding、background（背景）

height、min-height、max-height、width、min-width、max-width

overflow、position、left、right、top、bottom、z-index

float、clear

table-layout、vertical-align

page-break-after、page-bread-before

unicode-bidi

div {

/*背景屬性：能夠直接設置顏色，也能夠設置圖片*/

/*background: red;*/

background: url("img/a.png");

/*背景圖片大小：自適應標籤的大小*/

background-size: cover;

}

div {

background-color: red;

width: 100px;

height: 30px;

/* 溢出屬性（內容超過顯示的大小）：auto 超出範圍的部分自動滾動顯示（相似於滾動視圖）；hidden 超出範圍的部分隱藏 */

overflow: auto;

}

6. CSS3新增的屬性

　　1》RGBA透明度

div {

/* RGB透明度 */

/* font-size: 9pt; color: gray; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;" lang="en-US"> rgb(255,58,15); */

background-color: rgba(255,56,14,1.0);

/* 設置不透明度 */

opacity: 0.2;

}

　　2》陰影

　　　　標籤陰影：

　　　　/* 塊(標籤)陰影：水平陰影的位置垂直陰影的位置模糊距離陰影的顏色 */

　　　　box-shadow: 5px 5px 10px red;

　　　　文字陰影：

　　　　/* 文字陰影：水平陰影的位置垂直陰影的位置模糊距離陰影的顏色 */

　　　　text-shadow: 5px 5px 10px #111534;

　　3》邊框