18-27

時間 2020-02-02

原文原文鏈接

1-18 CSS選擇器

行內樣式css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: cornflowerblue;">head</div>
    <div>body</div>
    <div>foot</div>
</body>
</html>

代碼：
通常網頁分爲3個部分，頭部，中間，尾部
在標籤內些 style叫作行內樣式，只對所在的標籤設計起做用。html

上圖：能夠爲其編輯背景顏色，這樣能更方便的設計樣式，好比能更好的觀察期高度、寬度等。chrome

上圖：該顏色能夠在chrome瀏覽器中，來調色。瀏覽器

RGB顏色表：https://tool.oschina.net/commons?type=3ide

上圖：在上面的網址中，能夠查看相應的顏色，而後經過顏色表格上面的工具來調整顏色。工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: cornflowerblue; height: 48px; width: 100px">head</div>
    <div>body</div>
    <div>foot</div>
</body>
</html>

代碼：設計高度、寬度字體

上圖：圖中看到的背景色寬度和高度與代碼中的設計相同spa

頁內樣式.net

id選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color: cornflowerblue;
        }
        #i2{
            background-color: goldenrod;
        }
        #i3{
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="i1">head</div>
    <div id="i2">body</div>
    <div id="i3">foot</div>
</body>
</html>

代碼：
在head中使用style設計叫作業內樣式，能夠針對當前頁面的代碼進行樣式設計。
id是惟一的，不可重複。設計

上圖：選擇不一樣的id設計了不一樣的背景顏色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color: cornflowerblue;
        }

    </style>
</head>
<body>
    <div id="i1">head</div>
    <div id="i2">body</div>
    <div id="i3">foot</div>
</body>
</html>

代碼：將3個id使用逗號組合起來，一塊兒設計其樣式。

類選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: cornflowerblue;
        }

    </style>
</head>
<body>
    <div class="c1">head</div>
    <div class="c1">body</div>
    <div class="c1">foot</div>
</body>
</html>

代碼：多個標籤能夠設計成一類標籤，針對這一類標籤進行樣式設計。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1,.c2,.c3{
            background-color: cornflowerblue;
        }

    </style>
</head>
<body>
    <div class="c1">head</div>
    <div class="c2">body</div>
    <div class="c3">foot</div>
</body>
</html>

代碼：使用逗號將不一樣類的標籤組合起來設計樣式。

層級標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div span{
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="c1">
        <span>head</span>
    </div>
    <div class="c2">body</div>
    <div class="c3">foot</div>
</body>
</html>

代碼：使用div加span的關聯方式，來關聯這兩個標籤，而後對其設計樣式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 span{
            background-color: green;
        }

    </style>
</head>
<body>
    <div class="c1">
        <span>head</span>
    </div>
    <div class="c2">body</div>
    <div class="c3">foot</div>
</body>
</html>

代碼：使用.c1加span的方式關聯

屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type='text']{
            background-color: cornflowerblue;
        }

    </style>
</head>
<body>
    <input type="text">
    <input type="password">
</body>
</html>

代碼：設計input標籤且其中屬性是type='text'的標籤

1-19

CSS的選擇優先級

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background: red;
            color: white;
        }
        .c2{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="c1 c2">testtest</div>
</body>
</html>

代碼：當針對同一個標籤進行多個樣式設計時，如過沒有衝突，就會疊加效果。

上圖：兩個樣式的設計，體如今了同一個標籤上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background: red;
            color: white;
        }
        .c2{
            font-size: 50px;
            color: black;
        }
    </style>
</head>
<body>
    <div class="c1 c2">testtest</div>
</body>
</html>

代碼：樣式設計衝突時，使用離標籤最近的設計樣式（也就是使用.c2的設計）

上圖：能夠看到字體是黑色，使用了.c2的設計樣式。

行內設計>頁面設計（頁面比較最近的設計）>外部設計

外部設計

<!--html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="c1 c2">testtest</div>
</body>
</html>

代碼：使用link rel="stylesheet" href="index.css" 引入外部css文件的設計樣式

<!--css文件-->
.c1{
    background: red;
    color: white;
}
.c2{
    font-size: 50px;
    color: black;
}

代碼：該css文件中的設計樣式，能夠同時被多個html引用。

1-20

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 4px  dotted red;
        }
    </style>
</head>
<body>
    <div>123123123</div>
</body>
</html>

代碼：border: 4px dotted red; 邊框寬度樣式顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 48px;
            width: 80%;
            border: 1px solid red
        }
    </style>
</head>
<body>
    <div>123123123</div>
</body>
</html>

代碼：
寬度設計爲80%，這樣會根據屏幕的寬度自動縮進80%；
高度不建議直接使用百分比，由於高度是能夠無窮高的，會有滾動條，因此高度使用百分比是不合理的；能夠寫兩個層級標籤，父集標籤設計好高度和寬度之後，在子標籤中設計百分比時，是根據父集標籤高度寬度來自動縮進的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 48px;
            width: 80%;
            border: 1px solid red;
            font-size: 16px;  /*設計字體大小*/
            text-align: center;  /*水平居中*/
            line-height: 48px;  /*與height相同，就是垂直居中*/
            font-weight: bold;  /*字體加粗*/
        }
    </style>
</head>
<body>
    <div>123123123</div>
</body>
</html>

1-21

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            width: 20%;
            background-color: red;
        }
        #i2{
            width: 80%;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div id="i1">123</div>
    <div id="i2">abc</div>
</body>
</html>

代碼：設計兩個div標籤一個寬度爲20%，一個爲80%。

上圖：兩個標籤個佔一行，這是由於他們是塊級標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            width: 20%;
            background-color: red;
            float: left;
        }
        #i2{
            width: 60%;
            background-color: cornflowerblue;
            float: left;
        }
    </style>
</head>
<body>
    <div id="i1">123</div>
    <div id="i2">abc</div>
</body>
</html>

代碼：使用float能夠讓div標籤浮動，浮動起來的話就不會再佔用整行了。

上圖：紅色佔20%，藍色佔60%；都向左浮動。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            width: 20%;
            background-color: red;
            float: left;
        }
        #i2{
            width: 60%;
            background-color: cornflowerblue;
            float: right;
        }
    </style>
</head>
<body>
    <div id="i1">123</div>
    <div id="i2">abc</div>
</body>
</html>

代碼：藍色向右浮動；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            width: 20%;
            background-color: red;
            float: left;
        }
        #i2{
            width: 80%;
            background-color: cornflowerblue;
            float: right;
        }
    </style>
</head>
<body>
    <div id="i1">123</div>
    <div id="i2">abc</div>
</body>
</html>

代碼：藍色佔80%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            width: 20%;
            background-color: red;
            float: left;
        }
        #i2{
            width: 81%;
            background-color: cornflowerblue;
            float: right;
        }
    </style>
</head>
<body>
    <div id="i1">123</div>
    <div id="i2">abc</div>
</body>
</html>

代碼：藍色佔81%

上圖：紅色20%+藍色81%，超出100%，就不會再同一行顯示。

1-23

display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{

            background-color: red;
            display: inline;
        }
        #i2{

            background-color: cornflowerblue;
            display: inline;
        }
    </style>
</head>
<body>
    <div id="i1">123</div>
    <div id="i2">abc</div>
</body>
</html>

代碼：display: inline;將塊級標籤改成行內標籤

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。