Python Day 47 前端、CSS高級選擇器、僞類選擇器、a標籤四大僞類、CSS文本樣式、CSS背景樣式、CSS邊界圓角、CSS顯示方式、block顯示規則、overflow屬性、CSS盒模型、

時間 2019-12-13

標籤 python day 前端 css 高級選擇器標籤四大文本樣式背景邊界圓角顯示方式 block 規則 overflow 屬性模型欄目 Python 简体版

原文原文鏈接

　　##CSS高級選擇器css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-size: 30px;
        }

        /*選擇器高級：基礎選擇器的各類組合*/

        /*一、羣組選擇器：控制多個*/
        /*注：每個選擇器位，能夠爲id、class、標籤、選擇器組合*/
        #h1, .p, .a {
            color: red;
        }

        /*二、後代選擇器：控制一個標籤，前方的都是修飾*/
　　　　  /* 鏈接標識符 空格( ) */
　　　　　<!-- 標籤的嵌套結構造成父子代標籤，後代選擇器能夠匹配直接父子關係或間距父子關係造成的層次，因此兩個i標籤均能被匹配 -->
        body .div2 .p2 {  /*後代 空格，父子(孫)*/
            color: orange;
        }

　　　　  /*三、 子代選擇器：鏈接標識符 大於號(>) */
 /* 子代選擇器控制的是最後置的選擇器位匹配到目標標籤(們)，前置位的全部選擇器都是修飾 若是不是直接父子關係 將不能被匹配*/
        .div2 > div > .p2 {  /*子代 >，父子*/
            color: pink;
        }
        /*高級選擇器經過權重（個數）區別優先級:*/
        /*
        無限大於：id > class > 標籤
        種類相同：比個數
        個數相同：比順序
        高級選擇器種類不影響優先級
        */


        /*四、兄弟(相鄰)選擇器：控制一個標籤，前方的都是修飾*/
        .p3 ~ .i3 {   /*兄弟 ~，可相鄰也可不相鄰，但必須經過上方修飾下方*/
            color: greenyellow;
        }
        .div3 + .i3 {   /*相鄰 +，必須相鄰，但必須經過上方修飾下方*，不相鄰不能被匹配/
            color: green;
        }

    ul{
        list-style: none;
    }
    </style>
</head>
<body>
<ul type="" style="">
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>
    <i class="i3">iiii1</i>
    <p class="p3">pppp</p>
    <div class="div3">dddd</div>
    <i class="i3">iiii2</i>

    <hr>

    <p class="p2">
        單獨的p
    </p>
    <div class="div2">
        <div class="div22" id="div22">
            <p class="p2">div的p</p>
        </div>
    </div>


    <hr>
    <h1 class="h1" id="h1">標題</h1>
    <p class="p">段落</p>
    <div>
        <a class="a" href="">連接</a>
    </div>
</body>
</html>

總結：

/* 高級選擇器優先級
前提：多個選擇器控制同一個標籤

無限大於：id > class > 標籤 eg：一個id選擇器高於 n層類與標籤選擇器的組合
種類相同：比個數 eg：兩個先比較id的個數，誰多誰優先級高，相同再比較類，以此類推
個數相同：比順序 eg：全部類型全部個數(id、類、標籤)都相同，下方的起做用
高級選擇器種類不影響優先級 eg：後代選擇器、子代選擇器、兄弟選擇器...不會影響優先級
*/

　　##CSS僞類選擇器html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            /*()內填的是編號，因此從1開始*/
            /*1.僞類選擇器能夠單獨出現，至關於省略了統配*/
            /*2.:nth-child先匹配層級位置（下面案例即會匹配到div層裏面的i，body中全局i不會匹配到），再匹配標籤*/
            /*3.:nth-of-type先匹配標籤類型，再匹配層級位置 （即要跳出每一層的類型，而後找位置。下面案例中會先找出i，而後匹配位置）*/
　　　　　　　/*僞類選擇器影響優先級，僞類就至關於class*/

            i:nth-child(1) {
                 color: orange;
            }
            i:nth-child(4) {
                 color: red;
            }

            i:nth-of-type(1) {
                color: brown;
            }
            i:nth-of-type(2) {
                color: blue;
            }
        </style>

        <style>
            .box {
                width: 150px;
            }
            .pp {
                width: 50px;
                height: 50px;
                background-color: red;
                border-radius: 50%;
                float: left;
                text-align: center;
                line-height: 50px;
            }

            /* 2n偶數  2n-1|2n+1奇數  3n最後一列  3n+1|3n-2第一列 3n-1中間列*/
            .pp:nth-child(3n-1) {
                color: orange;
            }

            /*僞類選擇器影響優先級，僞類就至關於class*/
            .a1.a2 {
                color: red;
            }
            .a1:nth-child(1) {
                color: orange;
            }
            /*id > class=:nth- > 標籤*/
        </style>

        <style>
            /*屬性選擇器（瞭解 能夠自定義屬性 a ）*/
            p[a] {
                color: crimson;
            }
        </style>
    </head>
    <body>

        <a class="a1 a2" href="">aaaaaaaaaaaaaa</a>

        <hr>
        <!--p.pp.p${p$}*9-->
        <div class="box">
            <p class="pp p1" a>p1</p>
            <p class="pp p2" b>p2</p>
            <p class="pp p3">p3</p>
            <p class="pp p4">p4</p>
            <p class="pp p5">p5</p>
            <p class="pp p6">p6</p>
            <p class="pp p7">p7</p>
            <p class="pp p8">p8</p>
            <p class="pp p9">p9</p>
        </div>

        <hr>

        <i class="i3">iiii1</i>
        <p class="p3">pppp</p>
        <div class="div3">dddd</div>
        <i class="i3">iiii2</i>
        <hr>
        <div>
            <i class="i3">iiii1</i>
            <p class="p3">pppp</p>
            <div class="div3">dddd</div>
            <i class="i3">iiii2</i>
        </div>
    </body>
</html>

　　##a標籤四大僞類架構

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*連接的初始狀態*/
        a:link {
            color: deepskyblue;
        }
        /*連接的懸浮狀態*/
        a:hover {
            /*cursor: wait;*/
            /*cursor: col-resize;*/
            cursor: pointer;
            color: blue;
        }
        /*連接的激活狀態*/
        a:active {
            color: deeppink;
        }

        /**連接的已訪問狀態*/
        a:visited {
            color: yellow;
        }

    </style>

    <style>
        body {
            /*文本不能選擇*/
            user-select: none;
        }
        /*普通標籤均可以去使用 :hover :active */
        .btn {
            width: 80px;
            height: 38px;
            background-color: cornflowerblue;

            border-radius: 5px;
            text-align: center;
            line-height: 38px;
            color: white;
        }
        .btn:hover {
            cursor: pointer;
            background-color: deepskyblue;
        }
        .btn:active {
            background-color: blue;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">aaaaaaaaaaaaaaaaaa</a>

<div class="btn">按鈕</div>


</body>
</html>

　　##CSS文本樣式併發

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本樣式</title>
    <style>
        .div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        .div {
            /*字體大小: 最小12px，還須要更小就更換字體庫*/
            font-size: 30px;

            /*字體庫(字族)：字體, 備用1, ..., 備用n*/
            /*font-family: "STSong", "微軟雅黑";*/

            /*字重: 100~900  bold normal lighter*/
            font-weight: lighter;

            /*字體顏色*/
            color: tomato;

            /*水平位置: left center right*/
            text-align: center;

            /*行高(垂直位置)：默認文本在所在行高中垂直居中，要實現文本的垂直居中，讓行高 = 容器高*/
            line-height: 200px;

            /*文本劃線: underline line-through overline none*/
            text-decoration: underline;
        }
        a {
            text-decoration: none;
        }
        i {
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class="div">文本</div>
    <a href="">aaaa</a>
    <i>dasdassad</i>
</body>
</html>

　　##CSS背景樣式佈局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg {
            width: 300px;
            height: 300px;
            background-color: tomato;
        }

        .bg {
            /*背景顏色*/
            background-color: red;
            /*背景圖片*/
            background-image: url("img/001.png");
            /*平鋪: no-repeat repeat repeat-x repeat-y */
            background-repeat: no-repeat;
            /*背景定位: x軸(left center right) y軸(top center默認 bottom)*/
            /*background-position: right top;*/
            /*指定尺寸移動*/
            /*background-position: 100px 100px;*/
            /*反向移動:向右下角移動*/
            background-position: 10px -10px;
        }
    </style>
</head>
<body>
    <div class="bg">12345</div>
</body>
</html>

　　##CSS背景樣式案例字體

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: cornflowerblue;
        }
        .h1 {
            /*width: 1300px;*/
            /*height: 900px;*/
            width: 500px;
            height: 100px;
            background-color: tomato;
        }
        .h1 {
            background-image: url("img/bg.png");
            background-position: 0 -150px;
        }
        .h1:hover {
            background-position: 0 -250px;
        }
    </style>
    <style>
        .p1 {
            width: 155px;
            height: 48px;
            background-color: green;
            background-image: url("img/bg.png");
        }
        .p2 {
            width: 157px;
            height: 48px;
            background-color: green;
            background-image: url("img/bg.png");
            background-position-x: -155px;
        }
        .p1:hover, .p2:hover {
            background-position-y: -48px;
            cursor: pointer;
        }
        /*背景圖片操做：就是更換背景圖片的位置*/
    </style>
</head>
<body>
    <div class="h1">

    </div>

    <p class="p1"></p>

    <p class="p2"></p>
</body>
</html>

　　##CSS邊界圓角url

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 400px;
            height: 200px;
            background-color: red;
        }
        .box {
            /*border-radius: 50%;*/

            /*左上是第一個角，順時針編號，不足找對角，只有一個值同時控制4個角*/
            /*border-radius: 10px 20px 30px 40px;*/
            /*border-radius: 10px 50px 100px;*/
            /*border-radius: 10px 100px;*/
            /*border-radius: 100px;*/

            /*橫向 / 縱向*/
            /*border-radius: 50% / 50px;*/

            /*橫向1,2,3,4 / 縱向13,24*/
            /*border-radius: 10px 30px 50px 100px / 50px 100px;*/

            border-radius: 200px 200px 0 0 / 200px 200px 0 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

　　##CSS顯示方式spa

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        /*
        block：1.能夠手動設置寬高 2.自帶換行 3.支持全部css樣式
        inline：1.寬高只能由文本內容撐開，不能手動設置 2.不帶換行 3.支持部分css樣式
        inline-block：1.能夠手動設置寬高 2.不帶換行 3.支持全部css樣式
        */
        /*
        嵌套關係
        block：能夠嵌套block、inline、inline-block
            div、li搭架構的，能夠任意嵌套     h1~h六、p 建議只嵌套inline，就是用來轉文本的
        inline：只用來嵌套inline
            span、i、b、em、strong     a通常都會修改其display爲block
        inline-block：不建議嵌套任何
            img input系統都設計成了單標籤
        none：沒有顯示方式，就會在頁面中隱藏
        */
        /*
        開發是：修改display的狀況 - 要支持寬高，要更改位置(水平排列仍是垂直排列)
        */
        div {
            display: block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        span {
            display: inline;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        owen {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <style>
        a {
            display: block;
            width: 100px;
            /*height: 100px;*/
            /*透明色：transparent*/
            background-color: brown;
            border: 1px solid black;
        }
        img {
            width: 100px;
        }
        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <!--div{divdivdiv}*2+span{spanspanspan}*2-->
    <div>divdivdiv</div>
    <div>divdivdiv</div>
    <span>spanspanspan</span>
    <span>spanspanspan</span>
    <owen>owenowenowen</owen>
    <owen>owenowenowen</owen>

    <a href="https://www.baidu.com">
        <img src="img/bd_logo.png" alt="">
        <p>前往百度</p>
    </a>
</body>
</html>

　　##CSS block顯示規則設計

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*display：
        不一樣的標籤在頁面中有不一樣的顯示規則
        若有些是自帶換行、有些同行顯示、有些同行顯示還支持寬高，這些不是標籤的特性，而是標籤的display屬性值決定的

        完成複雜的佈局和樣式，標籤的顯示方式都採用 block
        a {
            display: block;
        }
        a能夠任意嵌套其餘標籤，還能夠設置寬高，還支持全部css樣式，可是a再也不同行顯示了(block自帶換行)

        若是解決block同行顯示 => css佈局

        */

        /*
        inline: 同行顯示，不用去關寬高，不用額外操做
        inline-block: 同行顯示, 通常會主動設置寬或高、設置寬，高會等比縮放，反之亦然
        有inline特性的標籤，同行顯示，可是有默認垂直對其方式vertical-align
        */

        /*
        block：默認顯示規則

        寬繼承父級，高由內容撐開
        */
        img {
            border: 1px solid black;
        }
        .img1 {
            width: 200px;
        }
        .img2 {
            height: 200px;
        }
        span, img {
            /*baseline基線 middle中線 top頂線*/
            vertical-align: middle;
        }
    </style>
    <style>
        div {
            height: 100px;
            border: 1px solid black;
            display: inline-block;
        }
        .d1 {
            width: 200px;
        }
        .d2 {
            width: 500px;
        }
        .d3 {
            width: 200px;
        }
    </style>
</head>
<body>
<span>123</span>
<span>456</span>
<img class="img1" src="img/bd_logo.png" alt="">
<img class="img2" src="img/bd_logo.png" alt="">
<hr>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>

</body>
</html>

　　##CSS overflow屬性code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        一、規定了標籤的寬高，標籤的內容超出範圍
        二、規定了標籤的寬高，標籤內的子標籤顯示區域更大，超出範圍
        若是讓父級寬高限制內容和子集
        */
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
            /*內容超出，都會以 hidden 處理影藏，若是想顯示全內容，採用子頁面*/
            /*hidden：影藏超出內容  scroll：以滾動顯示超出內容  auto：有超出內容才滾動顯示*/
            overflow: scroll;
        }
        .sup {
            width: 200px;
            height: 200px;
            background-color: red;
            /*overflow: hidden;*/
        }
        .sub {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字</div>
    <div class="sup">
        <div class="sub"></div>
    </div>
</body>
</html>

　　##CSS盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        /*盒模型：
        什麼是盒模型：頁面中的每個標籤均可以稱之爲一個盒子
        盒子的組成併發：外邊距、邊框、內邊距、內容四部分組成，每部分都有獨立區域

        外邊距 - margin - 控制位置
        邊框 - border - 控制邊框
        內邊距 - padding - 控制內容與邊框的間距
        內容 - content(width*height) - 文本內容或子標籤顯示的區域
        */
        .box {
            /*padding: 50px;*/
        }
        .box {
            /*上右下左*/
            /*當要保證顯示區域不變，內容往裏偏移，增長padding、相應減小content*/
            padding: 20px 0 0 20px;
            width: 180px;
            height: 180px;
        }
        .box {
            /*border邊框：寬度 、 樣式 solid實現 dashed虛線 dotted點狀線、 顏色*/
            border: 10px dotted black;
        }
        /*margin參考系：自身原有位置
        margin的left和top控制自身位置
        margin的right和bottom控制兄弟位置
        */
        .box {
            margin-left: 100px;
            margin-top: 100px;
        }
        .abc {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-top: 10px;
            margin-left: -1px;
        }
        .top, .bottom {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .top {
            margin-bottom: -50px;
        }
        .bottom {
            background-color: tan;
        }
        /*盒模型佈局的地位：盒模型用來完成超簡單的佈局要求，通常都是用來輔助其餘佈局，完成佈局的微調*/

        .abc {
            /*上右下左*/
            /*margin: 10px 20px 30px 40px;*/
            /*快速居右*/
            /*margin-left: auto;*/
            /*快速居中*/
            /*margin-left: auto;*/
            /*margin-right: auto;*/
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box">12345</div>
    <div class="abc"></div>

    <div class="top"></div>
    <div class="bottom"></div>
</body>
</html>

　　##CSS浮動佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap {
            width: 150px;
            background-color: cornflowerblue;
            /*height: 200px;*/
        }
        .d {
            width: 50px;
            height: 50px;
            background-color: orange;
            border-radius: 50%;
        }
        /*浮動佈局：再也不撐開父級高度，但浮動受父級寬度影響*/
        .d {
            float: right;
        }
        /*如何讓父級剛恰好包含全部子標籤：清浮動 - 不是清除子標籤的浮動效果，而是讓父級得到一個恰好的高度*/
        .wrap:after {
            display: block;
            content: "";
            /*清浮動的關鍵*/
            clear: both;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="d d1">1</div>
        <div class="d d2">2</div>
        <div class="d d3">3</div>
        <div class="d d4"></div>
        <div class="d d5"></div>
        <div class="d d6"></div>
        <div class="d d7"></div>
        <div class="d d8"></div>
        <div class="d d9"></div>

    </div>
</body>
</html>