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

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>
相關文章
相關標籤/搜索