css的基礎用法之標簽選擇

本文轉載自查看原文 2018-03-18 20:16 1725 前端

一、css的4種引入方式

#1、內聯式
<p style="color: red;font-size: 50px;text-align: center">Egon是一個非常了不起的人</p>

#2、嵌入式
<head>
    <style>
        p {
            color: red;
            font-size: 50px;
            text-align: center
        }
    </style>
</head>

#3、導入式
<head>
    <style>
        /*形式一：*/
        /*@import "css/mystyle.css";*/
        /*形式二：*/
        @import url("css/mystyle.css");
    </style>
</head>

#4、外聯式（企業開發中使用這種方式）
<head>
    <link rel="stylesheet" href="css/mystyle.css">
</head>

View Code

注意：

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

二、css的基本選擇器

　1) id 選擇器

#1、作用：
根據指定的id名稱，在當前界面中找到對應的唯一一個的標簽，然后設置屬性

#2、格式
id名稱 {
    屬性：值;
}

#3、注意點：
  1、在企業開發中如果僅僅只是為了設置樣式，通常不會使用id，在前端開發中id通常是留給js使用的
  2、每個標簽都可以設置唯一一個id，id就相當於人/標簽的身份證，因此在同一界面內id絕不能重復
  3、引用id一定要加#
  4、id的命名只能由字符、數字、下划線組成，且不能以數字開頭，更不能是html關鍵字如p，a，img等

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id選擇器</title>
    <style>
        #p1 {
            color: red;
        }
        #p2 {
            color: green;
        }
        #p3 {
            color: blue;
        }
    </style>
</head>

<body>
<p id="p1">大多數人的帥，都是浮在表面的，是外表的帥</p>
<p id="p2">而EGON，不僅具備外表帥，內心更是帥了一逼</p>
<p id="p3">EGON就是我，我就是EGON</p>
</body>

</html>

View Code

　2、class ，類選擇器

#1、作用：根據指定的類名稱，在當前界面中找到對應的標簽，然后設置屬性

#2、格式：
    .類名稱 {
        屬性：值;
    }

#3、注意點：
    1、類名就是專門用來給某個特定的標簽設置樣式的
    2、每個標簽都可以設置一個或多個class（空格分隔），class就相當於人/標簽的名稱，因此同一界面內class可以重復
    3、引用class一定要加點.
    4、類名的命名規則與id的命名規則相同

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id選擇器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            color: green;
        }
        .p3 {
            color: blue;
        }
    </style>
</head>

<body>
<p class="p1">大多數人的帥，都是浮在表面的，是外表的帥</p>
<p class="p2">而EGON，不僅具備外表帥，內心更是帥了一逼</p>
<p class="p3">EGON就是我，我就是EGON</p>
</body>

</html>



#練習
第一行與第三行的顏色都是紅色
第一行與第二行的字體大小都是50px
第二行與第三行內容有個下划線

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id選擇器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            font-size: 50px;
        }
        .p3 {
            text-decoration: underline;
        }

    </style>
</head>

<body>
<p class="p1 p2">第一行內容</p>
<p class="p2 p3">第二行內容</p>
<p class="p1 p3">第三行內容</p>
</body>

</html>

示例

View Code

style中的class,class.rr的使用

3）標簽選擇器

#1、作用：根據指定的標簽名稱，在當前界面中找到所有該名稱的標簽，然后設置屬性

#2、格式：
    標簽名稱 {
        屬性：值;
    }

#3、注意點：
    1、只要是HTML的標簽都能當做標簽選擇器
    2、標簽選擇器選中的是當前界面中的所有標簽,而不能單獨選中某一標簽
    3、標簽選擇器，無論嵌套多少層都能選中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標簽選擇器</title>

    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>EGON美麗的外表下其實隱藏着一顆騷動的心</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>這顆心叫做七巧玲瓏心，男人吃了會流淚，女人吃了會懷孕</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>
</html>

示例

示例

4）通配符選擇器

#1、作用：選擇所有標簽

#2、格式：
    * {
        屬性：值；
    }

#3、注意點：
1、在企業開發中一般不會使用通配符選擇器。理由是：
     由於通配符選擇器是設置界面上所有的標簽的屬性，
     所以在設置之前會遍歷所有的標簽
     如果當前界面上的標簽比較多，那么性能就會比較差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符選擇器</title>

    <style type="text/css">

        * {
            color: red;
        }

    </style>
</head>
<body>
    <h1 >我是標題</h1>
    <p >我是段落</p>
    <a href="#">我是超鏈接</a>
</body>
</html>

示例

三、css的組合選擇器

　1、后代選擇器

#1、作用：找到指定標簽的所有后代（兒子，孫子，重孫子、、、）標簽，設置屬性

#2、格式：
    標簽名1 xxx {
        屬性：值;
    }

#3、注意：
    1、后代選擇器必須用空格隔開
    2、后代不僅僅是兒子，也包括孫子、重孫子
    3、后代選擇器不僅僅可以使用標簽名稱，還可以使用其他選擇器比如id或class
    4、后代選擇器可以通過空格一直延續下去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style type="text/css">
        div p {
            color: red;
        }
        #id1 li p {
            font-size: 50px;
        }

        div ul li a {
            font-size: 100px;
            color: green;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--如果想為div內所有標簽都設置屬性，無論用id還是class都不合理，因為當div內的標簽過多，我們無法加那么多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落</p>
                <a href="">點我啊1</a>
            </li>
            <li>
                <a href="#">點我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>

示例

　2、style里面的css，空格 .r1>p。子代選擇器也叫子元素選擇器

#1、作用：找到制定標簽的所有特定的直接子元素，然后設置屬性

#2、格式：
    標簽名1>標簽名2 {
        屬性：值;
    }
    先找到名稱叫做"標簽名稱1"的標簽，然后在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素

#3、注意：
    1、子元素選擇器之間需要用>符號鏈接，並且不能有空格
        比如div >p會找div標簽的所有后代標簽，標簽名為">p"
    2、子元素選擇器只會查找兒子，不會查找其他嵌套的標簽
    3、子元素選擇器不僅可以用標簽名稱，還可以使用其他選擇器,比如id或class
    4、子元素選擇器可以通過>符號一直延續下去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style type="text/css">
        body>p {
            color: green;
        }

        div>p {
            color: red;
        }

        .aaa>a {
            font-size: 100px;
        }

        div>ul>li>.ddd {
            color: blue;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--如果想為div內所有標簽都設置屬性，無論用id還是class都不合理，因為當div內的標簽過多，我們無法加那么多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落2</p>
                <a href="">點我啊1</a>
            </li>
            <li>
                <a href="#">點我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>

示例一

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="Refresh" content="2">
 6     <title>調整頁</title>
 7     <style>
 8         .r1>p{
 9             font-size: 30px;
10             color: pink;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="r1">hello 1
16         <div class="r2">hello 2
17             <p>hello 3</p>
18         </div>
19         <p>hello4</p>
20     </div>
21 </body>
22 </html>

示例二

子元素選擇器的容錯點，p標簽不能嵌套其他標簽，否則css樣式選擇會出錯

<div class="r1">hello 1
    <p class="r2">hello 2
        <div>hello 3</div>
    </p>
    <div>hello4</div>
</div>

p>div，錯誤展示

　3、style里面的css，空格 .r2+div。兄弟選擇器，同級選擇器

相鄰兄弟選擇器
#1、作用：選定緊跟其后的那個標簽

#2、格式
    選擇器1+選擇器2 {
        屬性：值;
    }

#3、注意點：
    1、毗鄰選擇器必須通過+號鏈接
    2、毗鄰選擇器只能選中緊跟其后的那個標簽，不能選中被隔開的標簽
--------------------------------------------------------------------
兄弟選擇器
#1、作用：給指定選擇器后面的所有選擇器中的所有標簽設置屬性

#2、格式：
選擇器1~選擇器2 {
        屬性：值;
    }

#3、注意點：
    1、通用兄弟選擇器必須用~來鏈接
    2、通用兄弟選擇器選中的是指選擇器后面的某個選擇器選中的所有標簽
    無論有沒有被隔開，都可以被選中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="Refresh" content="2">
 6     <title>調整頁</title>
 7     <style>
 8         .r2+div{
 9             font-size: 30px;
10             color: pink;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="r1">hello 1
16         <div class="r2">hello 2
17             <p>hello 3</p>
18         </div>
19         <div>hello4</div>
20     </div>
21 </body>
22 </html>

.r2+div

相鄰兄弟與通用兄弟選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style type="text/css">
        /*相鄰兄弟選擇器*/
        /*h1+p {*/
           /*color: red;*/
        /*}*/
        /*通用兄弟選擇器*/
        h1~p {
           color: red;
        }

    </style>
</head>
<body>
    <h1>我是標題1</h1>
    <a href="">有了這個標簽，p就不再是緊跟h1標簽了,但通用兄弟選擇器仍然能選中</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <h1>我是標題2</h1>
    <p>我是段落</p>

</body>
</html>

相鄰兄弟與兄弟選擇器

四、並集選擇器與交集選擇器

1）並集選擇器

#1、作用：給所有滿足條件的標簽設置屬性

#2、格式：
    選擇器1,選擇器2 {
        屬性：值;
    }

#3、注意：
    1、選擇器與選擇器之間必須用逗號來鏈接
    2、選擇器可以使用標簽名稱、id、class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p,a {
            color: red;
        }
    </style>
</head>
<body>
    <h1>哈哈啊</h1>
    <p class="part1">我是段落1</p>
    <p class="part2">我是段落2</p>
    <p class="part1">我是段落3</p>
    <a href="#" class="part2">a標簽</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
</body>
</html>

示例

2）交集選擇器。不常用

#1、作用：給所有選擇器選中的標簽中，相交的那部分標簽設置屬性

#2、格式：
    選擇器1選擇器2 {
        屬性：值;
    }

#3、注意：
    1、選擇器與選擇器之間沒有任何鏈接符號
    2、選擇器可以使用標簽名稱、id、class
    3、交集選擇器在企業開發中並不多見，了解即可
       因為：p.part1 完全可以用.part1取代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style type="text/css">
        p.part1 {
            color: red;
        }
        p#p1{
            font-size: 100px;
        }
    </style>
</head>
<body>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>

View Code

五、序列選擇器

#1、作用：
    css3中新推出的選擇器中，最具代表性的的9個，又稱為序列選擇器，過去的選擇器中要選中某個必須加id或class，

#2、格式
#2.1 同級別
    :first-child    p:first-child    同級別的第一個
    :last-child    p:last-child      同級別的最后一個
    :nth-child(n)                    同級別的第n個
    :nth-last-child(n)               同級別的倒數第n個

#2.2 同級別同類型
    :first-of-type                   同級別同類型的第一個
    :last-of-type                    同級別同類型的最后一個
    :nth-of-type(n)                  同級別同類型的第n個
    :nth-last-of-type(n)             同級別同類型的倒數第n個

#2.3 其他
    :only-of-type                    同類型的唯一一個
    :only-child                      同級別的唯一一個

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p:first-child {*/
            /*color: red;*/
        /*}*/
        /*p:last-child {*/
            /*color: red;*/
        /*}*/
        /*p:nth-child(3) {*/
            /*color: red;*/
        /*}*/

        /*p:nth-last-child(3) {*/
            /*color: red;*/
        /*}*/
    </style>
</head>
<body>
<h1>我是標題1</h1>
<p>我是段落1</p>
<a href="">aaaaa</a>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <p>我是段落6</p>
    <a href="">我是a標簽</a>
    <h1>我是標題2</h1>
</div>
</body>
</html>

同級別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p:first-of-type {*/
            /*color: red;*/
        /*}*/
        /*p:last-of-type {*/
            /*color: red;*/
        /*}*/
        /*p:nth-of-type(3) {*/
            /*color: red;*/
        /*}*/
        /*p:nth-last-of-type(3) {*/
            /*color: red;*/
        /*}*/
        /*p:only-child {*/
            /*color: red;*/
        /*}*/
        p:only-of-type {
            color: red;
        }
    </style>
</head>
<body>
<!--<h1>我是標題1</h1>-->
<p>我是段落1</p>
<a href="">aaaaa</a>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
    <a href="">我是a標簽</a>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
    <h1>我是標題2</h1>
</div>
<div>
    <p>我是獨生子</p>
    <p>我是獨生子</p>
    <a href="">我是二胎</a>
    <a href="">我是二胎</a>
</div>
</body>
</html>

同級別同類型的

六、屬性選擇器

1）屬性選擇器的概念

#1、作用：根據指定的屬性名稱找到對應的標簽，然后設置屬性
       該選擇器，最常用於input標簽
 
#2、格式與具體用法：
    [屬性名]
    其他選擇器[屬性名]
    [屬性名=值]
    [屬性名^=值]
    [屬性名$=值]
    [屬性名*=值]


    例1：找到所有包含id屬性的標簽
        [id]
    
    例2：找到所有包含id屬性的p標簽
        p[id]
    
    例3：找到所有class屬性值為part1的p標簽
        p[class="part1"]
    
    例4：找到所有href屬性值以https開頭的a標簽
        a[href^="https"]
        
    例5：找到所有src屬性值以png結果的img標簽
        img[src$="png"]
        
    例6：找到所有class屬性值中包含part2的標簽
        [class*="part"]

屬性選擇器的念和用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style type="text/css">
        [id] {
            color: red;
        }
        p[id] {
            font-size: 30px;
        }
        p[class="part1"] {
            color: green;
        }
        a[href^="https"] {
            font-size: 50px;
        }
        img[src$="png"] {
            width: 100px;
        }
        [class*="part"] {
            text-decoration: line-through;
        }

    </style>
</head>
<body>
    <h1 id="id1">哈哈啊</h1>
    <p id="id2">我是段落</p>
    <p class="part1">我是段落</p>
    <p class="xxx part2 yyy">我是段落</p>
    <a href="#">我是我</a>
    <a href="http://www.baidu.com">http://www.baidu.com</a>
    <a href="https://www.baidu.com">https://www.baidu.com</a>
    <img src="1.png" alt="">
    <img src="2.jpg" alt="">
    <p>我是段落</p>
    <p>我是段落</p>

</body>
</html>

示例

2、自定義屬性[]，也可以[user="girl"]

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="Refresh" content="2">
 6     <title>調整頁</title>
 7     <style>
 8         [user]{
 9             font-size: 30px;
10             color: pink;
11         }
12     </style>
13 </head>
14 <body>
15     <div user="boy">boy</div>
16     <div user="girl">girl</div>
17 </body>
18 </html>

[user]

　3、[user~="girl"]。屬性名必須有一個是girl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Refresh" content="2">
    <title>調整頁</title>
    <style>
        [user~="girl"]{
            font-size: 30px;
            color: pink;
        }
    </style>
</head>
<body>
    <div user="boy girl">boy</div>
</body>
</html>

View Code

　4、[user|="boy"]，如果屬性名很長，開頭必須為boy,對應的是boy-xxxx

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Refresh" content="2">
    <title>調整頁</title>
    <style>
        [user|="boy"]{
            font-size: 30px;
            color: pink;
        }
    </style>
</head>
<body>
    <div user="boy-girl-boygirl">boy</div>
</body>
</html>

View Code

　5、[user^="bo"]，開頭是bo,不需要有 - 。應用范圍比 | 廣

　6、[user$="bo"]，結尾是bo

　7、[user*="bo"]，只要里面有就可以

　8、特殊選取器，before,after.在標簽內容前后加入有屬性的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Refresh" content="2">
    <title>調整頁</title>
    <style>
        p{
            background-color: aliceblue;
            color: blueviolet;
        }
        p:before{
            content: "開始";
            color: red;
        }
        p:after{
            content: "結束";
            color: red;
        }
    </style>
</head>
<body>
    <p>hello1</p>
    <p>hello2</p>
</body>
</html>

View Code

七、偽類選擇器

偽類選擇器： 專用於控制鏈接的顯示效果，偽類選擇器：
    a:link（沒有接觸過的鏈接）,用於定義了鏈接的常規狀態。
    a:hover（鼠標放在鏈接上的狀態）,用於產生視覺效果。
    a:visited（訪問過的鏈接）,用於閱讀文章，能清楚的判斷已經訪問過的鏈接。
    a:active（在鏈接上按下鼠標時的狀態）,用於表現鼠標按下時的鏈接狀態。
偽類選擇器 : 偽類指的是標簽的不同狀態:
    a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
    a:link {color: #FF0000} /* 未訪問的鏈接 */
    a:visited {color: #00FF00} /* 已訪問的鏈接 */
    a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
    a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; }

#1、作用：常用的幾種偽類選擇器。

#1.1 沒有訪問的超鏈接a標簽樣式：
    a:link {
      color: blue;
    }

#1.2 訪問過的超鏈接a標簽樣式：
    a:visited {
      color: gray;
    }

#1.3 鼠標懸浮在元素上應用樣式：
    a:hover {
      background-color: #eee; 
    }

#1.4 鼠標點擊瞬間的樣式：
    a:active {
      color: green;
    }

#1.5 input輸入框獲取焦點時樣式：
    input:focus {
      outline: none;
      background-color: #eee;
    }

#2 注意：
    1 a標簽的偽類選擇器可以單獨出現，也可以一起出現
    2 a標簽的偽類選擇器如果一起出現，有嚴格的順序要求，否則失效
        link，visited，hover，active
    3 hover是所有其他標簽都可以使用的
    4 focus只給input標簽使用

偽類選擇器詳細用法

<style type="text/css">
    a:link{
        color: red;
    }
    a:visited {
        color: blue;
    }
    a:hover {
        color: green;
    }
    a:active {
        color: yellow;
    }
</style>
</head>
<body>
    <a href="01-hello-world.html">hello-world</a>
</body>
</html>

示例

八、偽元素選擇器

#1、常用的偽元素。
#1.1 first-letter：雜志類文章首字母樣式調整
    例如：
    p:first-letter {
      font-size: 48px;
    }

#1.2 before
    用於在元素的內容前面插入新內容。
    例如：

    p:before {
      content: "*";
      color: red;
    }
    在所有p標簽的內容前面加上一個紅色的*。

#1.3 after
    用於在元素的內容后面插入新內容。
    例如：

    p:after {
      content: "?";
      color: red;
    }
    在所有p標簽的內容后面加上一個藍色的?。

偽元素詳細用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style type="text/css">
        p:first-letter {
            font-size: 50px;
        }
        /*兩個冒號與一個是一樣的，老版本用的是一個冒號，考慮到兼容性推薦使用一個冒號*/
        a::after {
            content: "?";
            color: red;
        }
        a:before {
            content: "-";
            color: green;
        }

    </style>
</head>
<body>
<p>英雄不問出處，流氓不論歲數</p>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
<a href="#" class="help">老男孩是干什么的</a>
</body>
</html>

示例

九、css的三大特性

1）繼承性

1、定義：給某一個元素設置一些屬性，該元素的后代也可以使用，這個我們就稱之為繼承性

2、注意：
    1、只有以color、font-、text-、line-開頭的屬性才可以繼承
    2、a標簽的文字顏色和下划線是不能繼承別人的
    3、h標簽的文字大小是不能繼承別人的，會變大，但是會在原來字體大小的基礎上變大
    
    打開瀏覽器審查元素可以看到一些inherited from。。。的屬性
3、應用場景：
    通常基於繼承性統一設置網頁的文字顏色，字體，文字大小等樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style type="text/css">

        div {
            color: red;
            font-size: 50px;
        }


    </style>
</head>
<body>

<div>
    <h1>我是標題</h1>
    <p><a href="#">偶的博愛</a></p>
    <ul>
        <li>導航1</li>
        <li>導航2</li>
        <li>導航2</li>
    </ul>
</div>

<div>
    <div>
        <p>aaaa</p>
    </div>
    <div>
        <p>bbbb</p>
    </div>
</div>


</body>
</html>

示例

2）層疊性

1、定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理沖突的一種能力，即如果有多個選擇器選中了同一個標簽那么會有覆蓋效果

2、注意：
    層疊性只有在多個選擇器選中了同一個標簽，然后設置了相同的屬性，才會發生層疊性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>

    <style type="text/css">
        p {
            color: red;
        }
        .ppp {
            color: green;
        }
    </style>
</head>
<body>
    <p class="ppp">我是段落</p>
</body>
</html>

示例

3）優先級

1、定義：當多個選擇器選中同一個標簽，並且給同一個標簽設置相同的屬性時，如何層疊就由優先級來確定

2、優先級
    整體優先級從高到底：行內樣式>嵌入樣式>外部樣式

    行內樣式並不推薦使用，所以我們以嵌入為例來介紹優先級
    1、大前提：直接選中 > 間接選中(即繼承而來的)
    2、如果都是間接選中，那么誰離目標標簽比較近，就聽誰的
    3、如果都是直接選中，並且都是同類型的選擇器，那么就是誰寫的在后面就聽誰的
    4、如果都是直接選中，並且是不同類型的選擇器，那么就會按照選擇器的優先級來層疊
        id > 類 > 標簽 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認（即沒有設置任何屬性）
    5、優先級之!important
        作用：還有一種不講道理的!import方式來強制指定的屬性的優先級提升為最高，
        但是不推薦使用。因為大量使用!import的代碼是無法維護的
        注意：
        1、!important只能用於直接選中，不能用於間接選中
        2、!important只能用於提升被指定的屬性的優先級，其他屬性的優先級不會被提升
        3、!important必須寫在屬性值分號的前面
    6、優先級之權重計算
    1、強調：如果都是直接選中，並且混雜了一系列其他的選擇器一起使用時，則需要通過計算機權重來判定優先級
    2、計算方式
        1、id數多的優先級高
        2、id數相同，則判定類數多的優先級高
        3、id數、class數均相同，則判定標簽數多的優先級高
        4、若id數、class數、標簽數均相同，則無需繼續往下計算了，誰寫在后面誰的優先級高

　6 列表屬性

　　ul,ol{ list-style: decimal-leading-zero;

list-style: none; list-style: circle;

list-style: upper-alpha;

list-style: disc; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Refresh" content="2">
    <title>調整頁</title>
<style>
    ul{
        list-style: none;
    }
    p{
        background-color: yellow;
        display: inline;
    }
</style>
</head>
<body>

    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <p>user</p>
</body>
</html>

View Code

　7 dispaly屬性

none
block
inline

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Refresh" content="2">
    <title>調整頁</title>
<style>
    span{
        background-color: aqua;
        /*display: block;*/
        display: none;
    }
</style>
</head>
<body>
    <span>hello</span>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="Refresh" content="10000">-->
    <title>Title</title>
    <style>
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
    <h1>輪播圖</h1>
    <ul>
        <li><img src="1.png"></li>
        <li><img src="2.jpg"></li>
    </ul>
</body>
</html>

輪播圖

　8 盒子模型

　padding:用於控制內容與邊框之間的距離；

　margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。

　內邊距會影響盒子的大小，外邊距不會影響盒子的大小,需要設置練習： 300px*300px的盒子裝着100px*100px的盒子，分別通過margin和padding設置將小盒子移到大盒子的中間

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

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
           <div class="div2"></div>
       </div>
</body>
</html>

View Code

　　邊框在默認情況下會定位於瀏覽器窗口的左上角，但是並沒有緊貼着瀏覽器的窗口的邊框，這是因為body本身也是一個盒子（外層還有html），在默認情況下， body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器窗口的邊框了，為了驗證這一點

body{
    border: 1px solid;
    background-color: cadetblue;
}

>>>>解決方法：

body{
    margin: 0;

View Code

注意2：margin collapse（邊界塌陷或者說邊界重疊）

外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段落P）時，那么塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。又比如停車場

1兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值

2父子div

if 父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content 中的其中一個，然后按此div 進行margin ；

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            margin: 0px;
        }

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            margin: 20px;

        }
    </style>
</head>
<body>

<div style="background-color: cadetblue;width: 300px;height: 300px"></div>

       <div class="div1">
           <div class="div2"></div>
           <div class="div2"></div>
       </div>

</body>
</html>

View Code

解決方法：

1: border:1px solid transparent
2:  padding:1px
3: over-flow:hidden;
自行測試：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Refresh" content="2">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
            border: solid red 3px;
        }
        .outer{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            /*border: 1px solid transparent;*/
            /*padding: 100px;*/
            /*padding-top: 100px;*/
            /*padding-left: 100px;*/
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: rebeccapurple;
            /*margin-top: 20px;*/
            /*margin-left: 100px;*/
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
</body>
</html>

View Code

9、float和position

　　1）float

　　首先要知道，div是塊級元素，在頁面中獨占一行，自上而下排列，也就是傳說中的流。

　　float也就是浮動標簽。div用的是左浮動(float:left;)，可以理解為漂浮起來后靠左排列，右浮動(float:right;)當然就是靠右排列。這里的靠左、靠右是說頁面的左、右邊緣。

　　清除浮動可以理解為打破橫向排列。

　　clear : none | left | right | both

　　　　none : 默認值。允許兩邊都可以有浮動對象

　　　　left : 不允許左邊有浮動對象

　　　　right : 不允許右邊有浮動對象

　　　　both : 不允許有浮動對象

　　2）position

　　static，默認值 static：無特殊定位，對象遵循正常文檔流。

　　屬性　position:relative

　　　　 relative：對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。

　　屬性 position:fixed

　　　　在理論上，被設置為fixed的元素會被定位於瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。

　　　fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊通過z-index屬性　　　定義。注意點：一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="Refresh" content="2">
 6     <title>Title</title>
 7     <style>
 8         .div1{
 9             width: 300px;
10             height: 100px;
11             background-color: bisque;
12             /*position: fixed;*/
13 
14             position: relative;
15             left: 200px;
16         }
17         .div2{
18             width: 250px;
19             height:150px;
20             background-color: royalblue;
21             float: left;
22             clear: left;
23         }
24         .div3{
25             width: 400px;
26             height: 220px;
27             background-color: blueviolet;
28             float: left;
29         }
30         .div4{
31             width: 300px;
32             height: 2000px;
33             background-color: gold;
34         }
35     </style>
36 </head>
37 <body>
38     <div class="div1"></div>
39     <div class="div2"></div>
40     <div class="div3"></div>
41     <div class="div4"></div>
42 </body>
43 </html>

View Code

原文出處：http://www.cnblogs.com/linhaifeng/articles/9005117.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS各類標簽用法——選擇器 html+css 基礎（標簽選擇，分頁，行和塊元素）【css】a標簽的用法 css標簽屬性及用法 Form標簽+Css基礎 CSS—選擇器選擇標簽 Html+CSS基礎之標簽 CSS的標簽選擇器的介紹 Scrapy基礎(五) ------css選擇器基礎 CSS標簽選擇器&類選擇器