[19/06/05-星期三] CSS基礎_樣式表的位置(內聯、內部、外部樣式)、塊元素(div)、內聯元素(span)、經常使用的選擇器

時間 2019-11-16

標籤星期三 css 基礎樣式位置內聯內部外部元素 div span 經常使用選擇器欄目 CSS 简体版

原文原文鏈接

1、概念css

　　CSS(Cascading Style Sheets，層疊樣式表) 能夠用來爲網頁建立樣式表，經過樣式表能夠對網頁進行裝飾。html

所謂層疊，就是能夠將整個網頁想象成是一層一層的結構，層次高的將會覆蓋層次低的。而CSS能夠分別爲網頁的各個層次設置樣式。瀏覽器

書寫的位置：緩存

一、內聯樣式：能夠將css樣式表書寫到元素(標籤)的style屬性中，只對當前標籤中的內容起做用，不方便複用。屬於結構與表現耦合，不推薦使用。工具

二、內部樣式：能夠將css樣式編寫的head中style標籤中，而後經過css選擇器選中指定的元素，而後能夠同時爲這些元素設置一樣的樣式，提升樣式的複用性。佈局

三、外部樣式：能夠將css樣式表編寫到外部的css文件，而後經過link標籤引入外部的css文件到當前的HTML文件中，最大限度提升複用性，利用瀏覽器緩存，加快用戶開發工具

　　　　　　的訪問速度，提高用戶體驗。開發中推薦使用外部樣式。字體

語法：選擇器，經過選擇器能夠選擇頁面中的指定標籤，而且將聲明塊的樣式應用到對應的標籤中。網站

　　　聲明塊，緊跟選擇器的後邊，使用大括號括起來，聲明塊中就是一組名值對結構，這一組一組名值對稱爲聲明。一個聲明塊中可寫多種聲明，中間用分號隔開。聲明的ui

　　　　　　　樣式名和樣式值使用冒號鏈接。

IDE（Integrated Development Environment，集成開發工具）：Hbuilder ,Alt+/ 代碼提示 Ctrl+enter 換行 Ctrl+d 刪除當前行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css基礎</title>
        
        <!--一二、內部樣式：將css樣式設置到head標籤中，能夠同時給這些元素設置一樣的樣式，提升複用性。-->
        <style type="text/css"> /*這裏邊寫的全是css的代碼，不能出現HTML的代碼*/
            p{/*表示給body中的全部p標籤設置這種樣式*/
                color: greenyellow;
                font-size:20px ;
            }
        </style>
        
        <!-- 一三、外部樣式：引入外部的css文件中,按照代碼的執行順序這裏把上邊的樣式給替代了-->
        <link rel="stylesheet" type="text/css" href="../css/04-01 外部樣式.css"/>
        
        
    </head>
    <body>
        <!--一 一、內聯樣式：標籤內部的style屬性，只對當前標籤起做用
            這裏雖然在上邊設置了樣式，可是這裏對他個性化設置，按照代碼執行順序，使用個性設置
        -->
        <p style="color: red; font-size:30px ;"> 錦瑟無故五十弦，一弦一柱思華年。</p>
        
        <p>莊生曉夢迷蝴蝶，望帝春心託杜鵑。 </p>
        <p>滄海月明珠有淚，藍田日暖玉生煙。</p>
        <p>此情可待成追憶？只是當時已惘然。</p>


    </body>
</html>

2、塊元素(塊標籤)

　　就是能夠獨佔一行的標籤，無論它內容多少，寬度多窄，它都獨佔一行。

　　一、div元素：這個標籤沒有任何語義，就是個純粹的塊元素，它不會爲它裏邊的元素設置任何默認的樣式，主要用來對網頁進行佈局的。能夠表示一塊區域。

　　二、p元素：

　　三、h1-h6元素

　　四、hr 和 br 元素

3、內聯元素(內聯標籤，行內標籤)

　　所謂內聯元素，指的是隻佔自身大小的元素，不會獨佔一行。

　　一、span元素：沒有任何語義，專門用來選擇一段文字，爲它設置樣式。英文：範圍的意思

　　二、a元素、img元素、iframe元素：

區別：塊元素用來作頁面的佈局，內聯元素主要用來選中文本爲它設置樣式。通常只使用塊元素去包含內聯元素，不會用內聯去包含塊元素。

　　　　可是a元素能夠包含任何元素除了a元素，即a元素不能包含a元素。

　　　　p元素不能包含其餘任何的塊元素，儘管它是個塊元素。　

4、經常使用的選擇器

　　一、元素選擇器：經過元素選擇器選中頁面中全部的指定元素語法：元素名{ ....}

　　二、id選擇器：經過元素的id值選擇到惟一的一個元素。語法：#id號{.....}

　　三、類選擇器：經過元素的class值選擇一組元素，能夠同時爲一個元素設置多個class值，中間用空格隔開。語法： .class值{......}

　　四、分組選擇器(並集選擇器)：經過分組選擇器同時選擇多種選擇器對應的元素。語法：選擇器1，選擇器2....{.....} 中間逗號隔開

　　五、通配選擇器：選擇頁面中的全部元素。語法：*{.....}

　　六、複合選擇器(交集選擇器)：選中同時知足多個選擇器的元素。語法：選擇器1選擇器2..{....} 中間無空格。id選擇器不建議是複合選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>經常使用的選擇器</title>
        <style type="text/css">
            /*四 一、元素選擇器  */
            p{
                color: goldenrod;
            }
            h3{
                color: red;
            }
            /*四二、id選擇器*/
            #p3{
                color: green;
            }
            /*四三、類選擇器 class
             * class屬性和ids屬性相似，能夠同時給多個同一種元素設置樣式
               class值能夠相同，id值不能相同。
               
             * */
            .p1{
                color: blue;
            }
            .p2{
                font-size:30px ;
            }
            /*四四、分組選擇器(並集選擇器)*/
            .p1,h3{
                background: darkgrey;
            }
            /*四五、通配選擇器*/
            *{
                font-size: 35px;
            }
            /*四六、複合選擇器*/
            span.p4{
                background:gold ;
            }
        </style>
    </head>
    <body>
        <h3>錦瑟</h3>
        <p class="p1">錦瑟無故五十弦，一弦一柱思華年。</p>        
        <p class="p1 p2">莊生曉夢迷蝴蝶，望帝春心託杜鵑。 </p>
        <p id="p3">滄海月明珠有淚，藍田日暖玉生煙。</p>
        <p class="p4">此情可待成追憶？只是當時已惘然。</p>
        <span class="p4"> 《錦瑟》是唐代詩人李商隱的表明做之一。詩題「錦瑟」，但並不是詠物，
            不過是按古詩的慣例以篇首二字爲題，實是借瑟以隱題的一首無題詩。
            </span>
    </body>
</html>

5、元素之間的關係

　　父元素：直接包含子元素的元素

　　子元素：直接被父元素包含的元素

　　祖先元素：直接(如：父親元素)或間接(如：爺爺元素往上)包含後代的元素。

　　後代元素：直接(如：子元素)或間接(如：孫子輩元素往下)被祖先元素包含的元素。

　兄弟元素：擁有相同父元素的元素叫(親)兄弟元素。

　　7（上接四1-6）、後代元素選擇器：選中咱們指定元素的指定後代元素。語法：祖先元素後代元素 {.....}。中間是空格

　　八、子元素選擇器：選中父元素的指定子元素。語法：父元素 > 子元素{....} 。中間是空格，大於號，空格。IE6及如下的瀏覽器不兼容這種選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素之間的關係</title>
        <style type="text/css">
            /*後代元素選擇器*/
            div span{ /*包括子元素span和後代元素span。例子中2個div若是沒有id號，2個div都會選中*/
                color: red;
            }
            #d2 span{ /*給祖先元素加id*/
                color: green;
            }
            div > span{ /*沒有指定id的狀況*/
                background-color: yellow;
            } 
            
            #d2 > span { /*指定id的狀況*/
                background-color: blue;
            }
            
        </style>
    </head>
    
    <body>
        <div id="d1">
            <p>  <span > 我是第1個div中p標籤中的span標籤，是div的孫子，p的兒子 </span> </p>
            <span>    我是第1個div中的span標籤，是div的兒子</span>    
        </div>
        <div id="d2">
            <span> 我是第2個div元素中的span元素，是div的兒子 </span>
        </div>
        
        <span>
            我是body中的span元素，與div平輩
        </span>
        
    </body>
</html>

　　九、僞類選擇器：

專門用來表示元素的一種特殊的狀態。好比，訪問過的超連接、普通的超連接、獲取焦點的文本框當。咱們須要爲這些處於特殊狀態的元素設置樣式時

就可使用僞類。

定義連接的訪問狀態： a：link 正常連接（沒訪問過的連接）；

　　　　　　　　　　 a：visited 訪問過的連接；瀏覽器是根據歷史記錄看網站是否訪問過，因爲涉及用戶隱私，因此此設置只能設置字體的顏色。

　　　　　　　　　　 a：hover 鼠標滑過的連接；它和active不只能設置超連接也能夠設置其餘標籤，如p標籤。（但IE6不支持，其餘能夠）

　　　　　　　　　　 a：active 正在點擊的連接：

其餘狀態：標籤名：focus ，獲取焦點，指當鼠標在文本框中時。失去焦點，指鼠標在文本框以外。格式：標籤名冒號 focus{.....} (IE6不支持)

　　　　標籤名：：selection，選中的元素。中間2個冒號。可是在火狐中須要這樣寫，標籤：：-moz-selection{.....}不然用不了。若是要兼容，要寫2個。

　　十、僞元素選擇器

　　　　標籤名：first-letter{......} 給標籤中第一個字符設置樣式

　　　　標籤名：first-line{......} 給標籤中的第一行(是網頁顯示時的第1行，網頁變大變小，第1行的內容也會改變)設置樣式

　　　　標籤名： before，指定元素以前 <p>你好呀</p> 指的是開始標籤右邊的尖括號「>」和「你」之間的位置。通常before須要結合content這個樣式一塊兒使用，經過

content能夠向before或after的位置添加一些內容。

　　　　標籤名：after，指定元素後以後。結束標籤右邊的">"以後的位置。他們都不能選中。

　【代碼示例】　　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>僞類選擇器</title>
        <!-- 九、僞類選擇器：就是表示一種特殊的狀態  
        -->
        <style type="text/css">
            a:link{ /*正常連接； */
                color: yellowgreen;
            }
            a:visited{/*訪問過的連接；*/
                color: red;
            }
            a:hover{/*鼠標滑過的連接；*/
                color: blue;
            }
            a:active{/*正在點擊的連接,鼠標別鬆手*/
                color: black;
            }
            input:focus{/*當文本框獲取焦點時，改變文本框的顏色爲黃色*/
                background: yellow;
            }
            p::selection{/*爲p標籤中鼠標選中的文字設置樣式*/
                color: blue;
            }
            
            p:first-letter{/*十、僞元素選擇器*/
                color: blue;
                font-size:25px ;
            }
            p:before{
                content: "憫農";
            }
            P:after{
                content: "沙雕";
                color: orange;
            }
        </style>
    </head>
    <body>
        <a href="http://www.baidu.com">訪問過的連接</a> <br />
        <a href="http://www.iqiyi.com/">沒訪問過的連接</a> <br />
        用戶名：<input type="text" name="" id="" value="" />
        <p>鋤禾日當午，汗滴禾下土。</p>
        
        
    </body>
</html>

　　十一、子元素的僞類選擇器（child是在全部子元素中排，大排行,如全部子女一塊兒排（大姐、二哥、三姐）；type是在當前類型中排，小排行，如男的排男的(大兒子、

二兒子)，女的排女的（大女兒、二女兒））

　　　　first-child：能夠選中第一子元素；

　　　　last-child：能夠選中最後一個子元素；

　　　　nth-child(m)：能夠選中任意位置的子元素；n就是第n個的意思，m是自定義選中的行。

　　　　first-of-type ：選中指定類型的第一個

　　　　last-of-type：選中指定類型的最後一個

　　　　nth-of-type：選中指定類型的第n個

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子元素的僞類選擇器</title>
        <style type="text/css">
            p:first-child{/*first-child：選中第一個子元素，爲第一個p標籤設置樣式
                這句話的意思，既要符合p標籤又要是父元素第一個子元素(p是body的子元素)
                若是把p標籤去掉，則就是默認的是*  選中一個子元素便可
                若是要指定子元素須要：
                body > p:first-child{
                    .....
                }表示選中body的第一個p標籤子元素
                
                * */
                color: blue;
            }
            div > p:last-child{/*表示給div中最後一個子元素設置樣式*/
                color: yellow;
            }
            body >p:nth-child(3){/*自定義位置，意思是把3換成1根first-child相同
                括號中能夠設置爲  even：表示選中偶數行
                              odd:表示選中奇數行 
                      表格中隔行變色能夠用
                * */
                background: yellowgreen;
            }
            div >p:nth-child(2){
                background: green;
            }
        </style>
    </head>
    <body>
        <!--若是這行加個p以外的標籤，則上述設置不會生效，由於不是p標籤。下一行也不會生效由於不是否是第一個子元素-->
        <p>一別都門三改火，天涯踏盡紅塵。</p> <!--這行即便p標籤又是body的第一個子元素-->
        <p>依然一笑做春溫。無波真古井，有節是秋筠。</p>
        <p>惆悵孤帆連夜發，送行淡月微雲。</p>
        <p>尊前不用翠眉顰。人生如逆旅，我亦是行人。</p>
        
        <div> <p> 蘇軾，北宋詞人</p><!--這行也會生效，由於他2項符合條件都符合  p是div的子元素-->
              <p>這首詞是公元1091年（宋哲宗元祐六年）蘇軾知杭州時</p>
              <p>爲送別自越州（今浙江紹興）北徙途經杭州的老友錢穆父而做</p>
        </div> 
        
        <span> </span>
        
    </body>
</html>

　　十二、兄弟元素選擇器

　　後一個兄弟選擇器：能夠選中一個元素後邊緊挨着的一個兄弟元素。語法：前一個元素(哥哥)+緊挨的後一個元素(弟弟){.......}，中間是空格加號空格

　　全部兄弟元素選擇器：能夠選中一個元素後邊的全部兄弟。語法：前一個元素 ~ 後邊元素{.....}，中間是空格波浪號空格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>兄弟元素選擇器</title>
        <style type="text/css">
            /*後一個兄弟元素*/
            span + p{
                color: blue;
            }
            /*全部兄弟選擇器*/
            div ~ p{
                color: cyan;
            }
        </style>
    </head>
    <body>
        <span>白居易的詩詞</span>
        <p> 綠蟻新醅酒，紅泥小火爐。</p> <!--span+p 這行會生效-->
        <p> 晚來天欲雪，能飲一杯無？</p> 
        
        <span>蘇軾的詩詞 </span>
        <p>寒食後，酒醒卻諮嗟。</p><!--span+p 這行也會生效-->
        <p>休對故人思故國，且將新火試新茶。詩酒趁年華。</p>
        
        <div id=""> 李清照的詩詞改編</div>
        <p> 一朝花開傍柳, 尋香誤覓亭侯。</p><!--這2行都會生效-->
        <p> 縱飲朝霞半日暉, 風雨着不透。</p>
    </body>
</html>

　　1三、否認僞類選擇器

　　能夠從已經選中的元素中剔除某些元素。語法：標籤：not(選擇器){........}，中間只有冒號，沒有空格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>否認僞類選擇器</title>
        <style type="text/css">
            /*否認僞類選擇器*/
            p:not(.p5){
                color: blue;
            }
        </style>
    </head>
    <body>
        <p>一朝花開傍柳, 尋香誤覓亭侯。</p>
        <p>縱飲朝霞半日暉, 風雨着不透。</p>
        <p class="p5">一任宮長驍瘦, 臺高冰淚難流。</p>
        <p>錦書送罷驀回首, 無餘歲可偷。</p>
        
    </body>
</html>

　　6、樣式的繼承（兒子能夠繼承父親的遺產，在css中祖先元素的樣式也能夠被後代元素繼承）

　　利用繼承能夠把一些基本樣式設置給祖先元素或父元素，這樣全部的後代元素會自動繼承這些樣式，可是並非全部樣式都會被子元素繼承。好比全部背景相關的樣式，

如背景顏色。實際中p標籤的默認背景顏色是透明的，若是在父標籤中設置個顏色，好比黃色，則顏色能夠透過來，網頁也會顯現出黃色，可是原理是顏色透過來，而不是被繼承

過來的。全部背景相關的樣式都不能被繼承，切記！邊框相關的樣式、定位相關的樣式都不會被繼承。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>樣式的繼承</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p style="font-size: 25px;"> <!--全部p元素中的都會生效,包括span.這就是繼承-->
            我是p標籤 <br />
            <span>我是p標籤的兒子span標籤</span>
        </p>
        <span>我是與p標籤平輩的span</span>
    </body>
</html>

　　7、選擇器的優先級

　　當使用不一樣的選擇器選中同一個元素時，而且相同的樣式時（如都設置背景顏色），這時樣式之間產生衝突，由選擇器的優先級決定，高的優先顯示。

　　優先級規則：內聯樣式優先級：1000；

　　　　　　　　id選擇器優先級：100；

　　　　　　　　類和僞類選擇器優先級：10；

　　　　　　　　元素選擇器優先級：1

　　　　　　　　通配選擇器優先級：0

　　　　　　　　繼承的樣式優先級：沒有優先級

【注意】一、樣式越具體，優先級越高。

　　二、當選擇器中有多個優先級時，須要將多個優先級的權重加起來比較，而後設置樣式。選擇器的累加計算不會超過它的最大數量級。

　　　　三、選擇器的優先級的權重同樣時，則使用靠後的樣式。

　　　　四、並集選擇器的是單獨計算的。

　　　　五、能夠在樣式的最後加個！important 表示優先級最高，比內聯樣式都高。在開發中儘可能避免使用important。

【引伸】a的僞類選擇器，優先級的是同樣的。因此寫的順序就是下邊的順序，比較好。L-V-H-A

a：link；未訪問過的連接狀態。link和visited沒有順序要求。

a：visited；訪問過的連接狀態。可是把link和visited寫在hover和active的下邊，hover和active等於無效代碼

a：hover；鼠標滑過的連接狀態。不能寫在active下邊，不然設置無效。他們優先級同樣，執行下邊的，寫在下邊，hover等於無效代碼。

a：active；鼠標點擊的連接狀態。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>選擇器的優先級</title>
        <style type="text/css">
            .p3{/*類選擇器  10*/
                color: red;
            }
            p{/*元素選擇器  1 */
                color: blue;
            }
            #d3{/*id選擇器 100*/
                color:greenyellow; /*color:greenyellow !important 優先級比內聯樣式都高*/
            }
            /*a僞類選擇器*/
            a:link{
                color: yellowgreen;
            }
            a:visited{
                color: blue;
            }
            a:hover{
                color: orange;
            }
            a:active{
                color: green;
            }
        </style>
    </head>
    <body>
        <p>一朝花開傍柳, 尋香誤覓亭侯。</p>
        <p>縱飲朝霞半日暉, 風雨着不透。</p>
        <!--style="color: grey; 是內聯樣式 優先級1000-->
        <p class="p3" id="d3" style="color: grey;">一任宮長驍瘦, 臺高冰淚難流。</p>
        <p >錦書送罷驀回首, 無餘歲可偷。</p>
        <p>昨夜雨疏風驟 濃睡不消殘酒</p>
        <p>試問卷簾人 卻道海棠依舊</p>
        <p>知否 知否 應是綠肥紅瘦</p>
        
        <a href="http://www.baidu.com">訪問過的連接:百度</a> <br />
        <a href="http://www.iqiyi.com/">沒訪問過的連接：愛奇藝</a> <br />
        
    </body>
</html>

相關標籤/搜索

每日一句

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