天天看點
傳回

筆記之CSS3CSS

本部落格為狂神說在B站視訊的筆記（如有侵權請告知我，我會立刻删除本部落格）

狂神說

CSS

1. CSS的優勢

  1. 内容和表現的分離
  2. 網頁結構表現統一，可以實作複用
  3. 樣式十分的豐富
  4. 利用SEO，容易被搜尋引擎收錄

2. 導入方式

  1. 行内樣式
  2. 内部樣式
  3. 外部樣式

優先級：就進原則

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>導入方式</title>

    <!-- 内部樣式 -->
    <style>
        h1 {
            color: green;
        }
    </style>
    <!-- 外部樣式 -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<!-- 行内樣式：在标簽元素中，編寫一個style屬性，編寫樣式即可 -->
<h1 style="color: red">我是标題</h1>
</body>
</html>
           
/*外部樣式*/
h1 {
    color: hotpink;
}

拓展：外部樣式的兩種寫法

  • 連結式 
    <!-- 外部樣式 -->
<link rel="stylesheet" href="css/style.css">
  • 導入式 
    <!-- 導入式 -->
<style>
	@import url("css/style.css");
</style>

3. 選擇器

作用：選擇頁面上的某一個或者某一類元素

3.1 基本選擇器

  1. 标簽選擇器
    • 選擇到頁面上**所有**的這個标簽的元素
  2. 類選擇器
    • 格式：.class名稱 {}
    • 可以多個标簽同屬于一個class
  3. id選擇器
    • 格式：#id名稱 {}
    • id必須保證全局唯一
  4. 優先級
    • id選擇器 > class選擇器 > 标簽選擇器

3.2 層次選擇器

  1. 後代選擇器
    • 該标簽後面的所有 
    /* 後代選擇器 */
body p {
	background-color: red;
}
  2. 子選擇器
    • 該标簽後面的一個 
    /* 子選擇器 */
body>p {
    background-color: hotpink;
}
筆記之CSS3CSS
  1. 相鄰兄弟選擇器
    • 目前選中标簽後面的一個同類，相鄰（對下，不對上） 
    /* 相鄰兄弟選擇器 */
.active + p {
	background-color: yellowgreen;
}
筆記之CSS3CSS
  1. 通用兄弟選擇器
    • 目前選中标簽的向下的所有兄弟标簽 
    /* 通用選擇器 */
.active ~ p {
    background-color: lightgreen;
}
筆記之CSS3CSS
  • html代碼： 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>層次選擇器</title>

    <style>
        /* 後代選擇器 */
        body p {
            background-color: red;
        }

        /* 子選擇器 */
        body>p {
            background-color: hotpink;
        }

        /* 相鄰兄弟選擇器 */
        .active + p {
            background-color: yellowgreen;
        }

        /* 通用選擇器 */
        .active ~ p {
            background-color: lightgreen;
        }
    </style>

</head>
<body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <p>p3.5</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
    <p class="active">p8</p>
    <p>p9</p>
    <p>p10</p>
</body>
</html>

3.3 結構僞類選擇器

僞類：相當于條件判斷 
/* ul的第一個子元素 */
ul li:first-child {
    background-color: #02ff00;
}
/* ul的最後一個子元素 */
ul li:last-child {
    background-color: #ff4832;
}
/* 選中p1：定位到父元素，選擇目前的第一個元素
選擇目前p元素的父級元素，選中父級元素的第一個，并且是目前元素才生效！
例子中夾雜了一個h1标簽，故效果無法出現*/
p:nth-child(1) {
    background-color: #2700ff;
}
/* 選中父元素，下的p元素的第二個，按類型選擇 */
p:nth-of-type(2) {
    background-color: yellow;
}
           
<!-- <h1>h1</h1> -->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
筆記之CSS3CSS

3.4 屬性選擇器（常用）

相當于：id + class 的結合 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>
    <style>
        .demo a {
            float: left;
            /* 讓個部分成為一個單獨的塊 */
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background-color: hotpink;
            text-align: center;
            color: #ffffff;
            /* 去下劃線 */
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /* 屬性名，屬性名 = 屬性值（正則）
         = 絕對等于
         *= 包含這個元素
         ^= 以這個開頭
         $= 以這個結尾
         */
        /* 存在id屬性的元素 a[] {} */
        a[id] {
            background-color: yellow;
        }
        
        /* id=first的元素 */
        a[id=first] {
            background-color: #63ff23;
        }

        /* class中帶有links的元素 */
        a[class*="links"] {
            background-color: pink;
        }

        /* 選中href中以http開頭的元素 */
        a[href^=http] {
            background-color: yellowgreen;
        }

        /* 選中href中以doc結尾的元素 */
        a[href$=doc] {
            background-color: orange;
        }

    </style>
</head>

<body>
<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="image/123.html" class="links item">3</a>
    <a href="image/123.png" class="links item">4</a>
    <a href="image/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="adc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
筆記之CSS3CSS

4. 美化網頁

4.1. 字型樣式

  • span标簽：重點要突出的字，使用span套起來

4.2. 文本樣式

  • text-indent: 2em; 段落首行縮進（em表示字元）。
  • 行高與塊的高度一緻時就可以上下居中。
  • text-decoration：
    • underline是下劃線
    • line-through是中劃線
    • overline是上劃線
    • none可以用于超連結去掉下劃線 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img, span {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <img src="image/1608.jpg">
    <span>123456</span>
</body>
</html>
筆記之CSS3CSS

4.3. 清單樣式

  • list-style:
    • none去掉圓點
    • circle空心圓點
    • decimal數字
    • square正方形

4.4. 盒子模型

  • body總有一個預設的外邊距，故經常設定margin: 0
  • 外邊距的妙用：居中元素（margin: 0 auto;)

4.5. 圓角邊框

  • border-radius: xpx, ypx, zpx, rpx; （x代表左上，y代表右上，z代表右下，r代表左下，順時針方向）

5. 浮動

5.1. 标準文檔流

筆記之CSS3CSS
  • 塊級元素：獨占一行 
h1-h6	p	div	清單...
  • 行内元素：不獨占一行 
span   a   img   strong...
  • 行内元素可以被包含在塊級元素中，反之不可以

5.2. display 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--
        block 塊元素
        inline 行内元素
        inline-block 塊元素，但是可以内聯在一行
        none 不顯示
        -->
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline;
        }
        span {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: block;
        }
    </style>
</head>
<body>
<div>div塊元素</div>
<span>span行内元素</span>
</body>
</html>
筆記之CSS3CSS
  • display是一種實作行内元素排列的方式，但是float更常用

5.3. float

  • float是使得元素浮于網頁之上，浮動以後的元素是不占位置的
  • 清除浮動：
    • clear: both; 兩側不允許有浮動元素
    • clear:left; 左側不允許有浮動元素
    • clear:right; 右側不允許有浮動元素

5.4. 父級邊框塌陷的問題

  1. 增加腹肌元素的高度 
#father {
    border: 1px #000 solid;
    height: 800px;;
}
  1. 增加一個空的div标簽，清除浮動 
<div class="clear"><div>

.clear {
    clear: both;
    margin: 0;
    padding: 0;
}
  1. overflow 
在父級元素中增加一個    overflow: hidden;
  1. 父類添加一個僞類：after 
#father:after {
    content: '';
    display: block;
    clear: both;;
}
  1. 小結
  • 代碼中盡量避免空div
  • overflow在下拉的一些場景避免使用
  • 父類添加一個僞類：after（推薦使用）
  1. 對比

  • display

    方向不可以控制

  • float

    浮動起來會脫離标準文檔流，是以要解決父級邊框塌陷問題

6. 定位

6.1. 相對定位

  • 相對定位：positive: relative;
  • 相對于原來的位置，進行指定的偏移，相對定位仍然在标準文檔流中，原來的位置會被保留。

6.2. 絕對定位

  • 沒有父級元素定位的前提下，相對于浏覽器定位
  • 假設父級元素存在定位，通常會相對于父級元素進行偏移
  • 在父級元素範圍内移動，相對于父級或浏覽器的位置，進行指定的偏移，相對定位仍然不在标準文檔流中，原來的位置不會被保留。

6.3. 固定定位

  • 回到頂部，導覽列會使用。

6.4. z-index

  • 圖像層級：預設是0，最高無限，一般設定999
css3 css
上一篇: stm32f103 HAL庫sdmmc bugstm32f103 HAL庫sdmmc bug簡述
下一篇: CSS3筆記CSS3

繼續閱讀