DAY49 CSS基礎1

CSS 概述

CSS 指層疊樣式表 (Cascading Style Sheets)，樣式定義瞭如何顯示 HTML文件中的標籤元素，CSS是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

CSS語法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

selector1{
        property: value;
        property: value;
        property: value;
}
selector2{
        property: value;
        property: value;
        property: value;
}

示例：

h1{
　　color:red;
　　font-size:14px;
}

CSS引入方法

行內式

行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。

<div style="color: red;background-color: plum">DIV</div>

嵌入式

嵌入式是將CSS樣式集中寫在網頁的標籤對的標籤對中。

<head>
    <style>
        div{
            color: red;
            font-size: 30px;
            font-weight: 800;
        }
        p{
            color: aqua;
            background-color: bisque;
        }
    </style>
</head>

鏈接式

將一個.css文件引入到HTML文件中，如定義文件csstest.css

/*csstest.css，註釋行*/
/*該文件內爲純粹的CSS樣式代碼，不需要style標籤聲明*/
div{
    color: red;
    font-size: 30px;
    font-weight: 800;
}
p{
    color: aqua;
    background-color: bisque;
}

示例：

<link rel="stylesheet" href="csstest.css" type="text/css">

導入式

類似於鏈接式，都是導入外部的css文件

<head>
    <style>
        @import "csstest.css";
    </style>
</head>

注意：導入式會在整個網頁裝載完後再裝載CSS文件，因此如果網頁比較大或網絡不穩定則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，這是鏈接式的優點。

CSS選擇器-基本選擇器

基本選擇器包括：標籤選擇器、id選擇器、class選擇器、通配選擇器

標籤選擇器

按照標籤名字進行匹配，上述的嵌入式、鏈接式和導入式使用的css代碼所使用的選擇器就是標籤選擇器，會匹配html文件中所有的div標籤和p標籤進行樣式渲染。

id選擇器

按照標籤的id進行匹配，將匹配到的id進行渲染，每個html文件中的id在根本上就禁止衝突，所以id是唯一的，所以一條css聲明只能匹配一個id

示例：

<head>
    <style>
        /*id選擇器*/
        p2{     
            background-color: red;
        }
    </style>
</head>
<body>
        <p id="p2">I am P</p>
</body>

class選擇器

同id選擇器，只不過是將id名字改成class名字，類不唯一，所以能夠匹配多條

示例：

<head>
    <style>
        /*類選擇器*/
        .p_ele{
            background-color: bisque;
        }
    </style>
</head>
<body>
        <div class="p_ele">我是第一個p_ele類</div>
        <div class="p_ele">我是第二個p_ele類</div>
</body>

通配選擇器

匹配所有的html文件中的標籤元素

示例：

<head>
    <style>
        /*通用選擇器*/
        *{
            background-color: green;
        }
    </style>
</head>
<body>
        <p id="p2">I am P</p>
        <div class="p_ele">我是第一個p_ele類</div>
        <div class="p_ele">我是第二個p_ele類</div>
        <p>I am P2</p>
</body>

CSS選擇器-組合選擇器

包括：多元素選擇器、後代選擇器、子代選擇器、毗鄰選擇器、普通兄弟選擇器

後代選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*後代選擇器,指定了一個標籤，匹配它下面的所有元素*/
        .outer p{
            color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <div class="inner">
            <p>p2</p>
        </div>
        <p class="p3">p3</p>
        <p>p4</p>
    </div>
    <p>p5</p>
    <div>
        <p>p6</p>
    </div>
</body>

子代選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*子代選擇器，指定一個標籤，匹配該標籤下面的第一級子標籤進行匹配渲染*/
        .outer > p{
            color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <div class="inner">
            <p>p2</p>
        </div>
        <p class="p3">p3</p>
        <p>p4</p>
    </div>
    <p>p5</p>
    <div>
        <p>p6</p>
    </div>
</body>

多元素選擇器

<head>
    <style>
        /*多元素選擇器，匹配包括.inner p（後代）或.p3的元素*/
        .inner p, .p3{
            color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <div class="inner">
            <p>p2</p>
        </div>
        <p class="p3">p3</p>
        <p>p4</p>
    </div>
    <p>p5</p>
    <div>
        <p>p6</p>
    </div>
</body>

毗鄰選擇器

<head>
    <style>
        /*不常用*/
        /*毗鄰選擇器，匹配同級的下面一個標籤，只會向下找，不會向上找*/
        .outer+p{
            color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <div class="inner">
            <p>p2</p>
        </div>
        <p class="p3">p3</p>
        <p>p4</p>
    </div>
    <p>p5</p>
    <div>
        <p>p6</p>
    </div>
</body>

普通兄弟選擇器

<head>
    <style>
        /*不常用*/
        /*普通兄弟選擇器，匹配同級的所有元素，只能向下，不能向上匹配*/
        .outer~p{
            color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <div class="inner">
            <p>p2</p>
        </div>
        <p class="p3">p3</p>
        <p>p4</p>
    </div>
    <p>p5</p>
    <div>
        <p>p6</p>
    </div>
</body>

補充

<head>
    <style>
        /*補充，精確匹配，匹配ul標籤包含.item類的*/
        ul.item{
            color: red;
        }
    </style>
</head>
<body>
    <ul class="item">
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>

    <ol class="item">
        <li>222</li>
        <li>222</li>
        <li>222</li>
        <li>222</li>
    </ol>

    <ul>
        <li>333</li>
        <li>333</li>
        <li>333</li>
        <li>333</li>
    </ul>
</body>

注意，關於標籤嵌套：

一般，塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。需要注意的是，p標籤不能包含塊級標籤。

CSS選擇器-屬性選擇器

標籤中的屬性可以自己定義，定義的屬性可以沒有任何功能，只是爲了進行匹配查詢

匹配所有帶有指定屬性的元素

<head>
    <style>
　　　　 div[sha]{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="item1 item2">DIV1</div>
    <div class="C2" id="D2">DIV2</div>
    <div>sha</div>
    <div sha="alex">sha jiejie</div>
    <div sha="yuan alvin">sha jiejie</div>
    <div sha="123">sha gg</div>
</body>

匹配所有指定的key:value的元素

<head>
    <style>
        div[sha='alex']{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="item1 item2">DIV1</div>
    <div class="C2" id="D2">DIV2</div>
    <div>sha</div>
    <div sha="alex">sha jiejie</div>
    <div sha="yuan alvin">sha jiejie</div>
    <div sha="123">sha gg</div>
</body>

匹配一個屬性有多個值，只包含其中一個值的屬性

<head>
    <style>
        div[class~='item1']{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="item1 item2">DIV1</div>
    <div class="C2" id="D2">DIV2</div>
    <div>sha</div>
    <div sha="alex">sha jiejie</div>
    <div sha="yuan alvin">sha jiejie</div>
    <div sha="123">sha gg</div>
</body>

匹配屬性值以某個字符串開頭的元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div[sha^='1']{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="item1 item2">DIV1</div>
    <div class="C2" id="D2">DIV2</div>
    <div>sha</div>
    <div sha="alex">sha jiejie</div>
    <div sha="yuan alvin">sha jiejie</div>
    <div sha="123">sha gg</div>
</body>

匹配屬性值以某個字符串結尾的元素

<head>
    <style>
        div[sha$='3']{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="item1 item2">DIV1</div>
    <div class="C2" id="D2">DIV2</div>
    <div>sha</div>
    <div sha="alex">sha jiejie</div>
    <div sha="yuan alvin">sha jiejie</div>
    <div sha="123">sha gg</div>
</body>

匹配屬性值中包含某個字符串的元素

<head>
    <style>
        div[sha*='2']{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="item1 item2">DIV1</div>
    <div class="C2" id="D2">DIV2</div>
    <div>sha</div>
    <div sha="alex">sha jiejie</div>
    <div sha="yuan alvin">sha jiejie</div>
    <div sha="123">sha gg</div>
</body>

CSS選擇器-僞類選擇器

僞類：僞類指的是標籤的不通的狀態

anchor僞類

專用於控制鏈接的顯示效果

<head>
    <style>
        a:link{     /*默認的鏈接顏色，沒有點擊過的狀態*/
            color: green;
        }
        a:hover{    /*鼠標放到超鏈接上變色，放到超鏈接上的狀態*/
            color: goldenrod;
        }
        a:active{   /*點擊後，即訪問的時候變色，點擊的狀態*/
            color: blue;
        }
        a:visited{  /*超鏈接訪問成功過一次後變色，訪問後的狀態*/
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">URL</a> /*井號爲不跳轉頁面，只爲當前測試使用*/
</body>

注：hover並不是鏈接專有的屬性

<head>
    <style>
        .a{
            height: 100px;
            width: 400px;
            background-color: blue;
        }
        .b{
            height: 200px;
            width: 200px;
            background-color: gold;
        }
        .all{
            width: 1000px;
            border: 1px solid red;
        }
        /*當鼠標放到.all類的div範圍內，.a的div變色，注意操作的標籤一定是被包含在內的子元素*/
        .all:hover .a{
            background-color: bisque;
        }
        /*.b:hover .a{*/
            /*background-color: plum;*/
        /*}*/
    </style>
</head>
<body>
    <div class="all">
        <div class="a">AAAAAAAAA</div>
        <div class="b">BBBBBBBBB</div>
    </div>
</body>

hover示例

before/after僞類

:before 在元素之前插入內容

:after 在元素之後插入內容

<head>
    <style>
        div:before{
            content:"hello";    /*插入的值*/
            color:red;
            display: block; /*設置爲塊級*/
        }
        p:after{    /*默認爲內聯*/
            content:"byby";    /*插入的值*/
            color:blue;
        }
    </style>
</head>
<body>
    <div>divdiv</div>
    <p>hi</p>
</body>

一般用於佈局使用

選擇器優先級

優先級

所謂CSS優先級，即是指CSS樣式在瀏覽器中被解析的先後順序。

樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：

　　1 內聯樣式表的權值最高 style=”“－－－－－－－－－－－－1000

　　2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－－100

　　3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10

　　4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-－1

按這些規則將數字符串逐位相加，就得到最終的權重，然後在比較取捨時按照從左到右的順序逐位比較。

示例：可以再加一個行內式測試

<head>
    <style>
        p{
             color: red;
         }
        #d1{
            color: gold;
        }
        .c1{
            color: green;
        }
    </style>
</head>
<body>
    <p class="c1" id="d1">PPP</p>
</body>

1、文內的樣式優先級爲1,0,0,0，所以始終高於外部定義。
2、有!important聲明的規則高於一切。
3、如果!important聲明衝突，則比較優先權。
4、如果優先權一樣，則按照在源碼中出現的順序決定，後來者居上。
5、由繼承而得到的樣式沒有specificity的計算，它低於一切其它規則(比如全局選擇符*定義的規則)。

.c1{
     color: red!important;    /*無敵的聲明*/
}

繼承

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代

<head>
    <style>
        .c2{
            color: red;
        }
    </style>
</head>
<body>
    <div class="c2">
        <div>
            <p>P4</p>
        </div>
    </div>
</body>

anchor僞類：專用於控制鏈接的顯示效果

CSS 概述

CSS語法

CSS引入方法

CSS選擇器-基本選擇器

CSS選擇器-組合選擇器

CSS選擇器-屬性選擇器

CSS選擇器-僞類選擇器

選擇器優先級

Day27正則表達式爬蟲應用，configparser模塊和subprocess模塊

DAY45 數據庫--MySQL2

DAY 49 HTML基礎2

DAY34 多態與多態性、綁定方法和非綁定方法

DAY49 CSS基礎1

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結