CSS_引入方式

時間 2019-12-08

標籤 css 引入方式欄目 CSS 简体版

原文原文鏈接

　一 CSS的引入方式

CSS是Cascading Style Sheets的簡稱，中文稱爲層疊樣式表，用來控制網頁數據的表現，可使網頁的表現與數據內容分離

　　1.行內式行內式是在標記的style屬性中設定CSS樣式,不推薦使用。

<p style="background-color: red">Hello Word</p>


2.嵌入式
  嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中. 格式以下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: red;
        }
    </style>
</head>



3.連接式
經過HTML規範引入,次數不限
講CSS代碼單獨寫入一個文件

<link href="text.css" rel="stylesheet" type="text/css"/>



4.導入式

次數有限
將文件導入

style type="text/css">
 
          @import"text.css"; 此處要注意.css文件的路徑
 
</style>

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

二 CSS的選擇器

　　　　選擇器」指明瞭{}中的「樣式」的做用對象，也就是「樣式」做用於網頁中的哪些元素css

　1 基礎選擇器

＊ ：           通用元素選擇器，匹配任何元素                    * { margin:0; padding:0; }       //all標籤
 
E  ：          標籤選擇器，匹配全部使用E標籤的元素               p { color:green; }                                                  
 
.info和E.info: class選擇器，匹配全部class屬性中包含info的元素   .info { background:#ff0; }    p.info { background:blue; }    // .class {color:red}
 
#info和E#info  id選擇器，匹配全部id屬性等於footer的元素         #info { background:#ff0; }   p#info { background:#ff0; }     // <p id="litleP">Hello p</p>     #litleP {color:red}

id是惟一,class可相同html

// div.class div標籤中 class類{} *注意空格java

2 組合選擇器

 E,F         多元素選擇器，同時匹配全部E元素或F元素，E和F之間用逗號分隔         div,p { color:#f00; }      

 E F         後代元素選擇器，匹配全部屬於E元素後代的F元素，E和F之間用空格分隔    li a { font-weight:bold;   //空格是後代顯示器,
 E > F       子元素選擇器，匹配全部E元素的子元素F                            div > p { color:#f00; }
 
 E + F       毗鄰元素選擇器，匹配全部緊隨E元素以後的同級元素F                  div + p { color:#f00; }

注意嵌套規則：python

塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
li內能夠包含div
塊級元素與塊級元素並列、內聯元素與內聯元素並列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [suoning]{
            color: blueviolet;
        }
        .he>div{
            color: bisque;
        }

    </style>
</head>
<body>

<div class="he">111
    <p class="fr">222
        <div>333</div>
    </p>
    <div>444</div>
</div>


***************************

<div suoning="sb">ddd
         <p>pppp</p>
     </div>
     <p suoning="sb2">ddd2
         <p>pppp2</p>
     </p>
</body>
</html>

三屬性選擇器

E[att]         匹配全部具備att屬性的E元素，不考慮它的值。（注意：E在此處能夠省略，好比「[cheacked]」。如下同。）   p[title] { color:#f00; }

 
 E[att=val]     匹配全部att屬性等於「val」的E元素                                 div[class=」error」] { color:#f00; }

 
 E[att~=val]    匹配全部att屬性具備多個空格分隔的值、其中一個值等於「val」的E元素      td[class~=」name」] { color:#f00; }

 E[attr^=val]    匹配屬性值以指定值開頭的每一個元素                     div[class^="test"]{background:#ffff00;}

 E[attr$=val]    匹配屬性值以指定值結尾的每一個元素                     div[class$="test"]{background:#ffff00;}

 E[attr*=val]    匹配屬性值中包含指定值的每一個元素                     div[class*="test"]{background:#ffff00;}

//待續web

4 僞類(Pseudo-classes)

CSS僞類是用來給選擇器添加一些特殊效果。api

anchor僞類：專用於控制連接的顯示效果瀏覽器


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代碼; }

<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>

補充：ide

 
           .outer:hover .right{color: red}

before after僞類：佈局

:before    p:before       在每一個<p>元素以前插入內容
:after     p:after        在每一個<p>元素以後插入內容

 p:before        在每一個 <p> 元素的內容以前插入內容                    p:before{content:"hello";color:red} p:after 在每一個 <p> 元素的內容以前插入內容 p:after{ content:"hello"；color:red}

5 css優先級和繼承

CSS優先級:

所謂CSS優先級，便是指CSS樣式在瀏覽器中被解析的前後順序。

樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：
      1 內聯樣式表的權值最高       style=""-------------------1000；
　　 2 統計選擇符中的ID屬性個數。    #id    －－－－－－－－－－－－－100
　　3 統計選擇符中的CLASS屬性個數。 .class  －－－－－－－－－－－－－10
 4 統計選擇符中的HTML標籤名個數。     p     －－－－－－－－－－－－－-1

按這些規則將數字符串逐位相加，就獲得最終的權重，而後在比較取捨時按照從左到右的順序逐位比較。

<style>
        #p{
            color: rebeccapurple;
        }
        .p{
            color: #2459a2;
        }
        p{
            color: yellow;
        }
    </style>
<p id="p" class="p" style="color: deeppink">hello yuan</p>

CSS的繼承性:

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。

 
           body{color:red;}       <p>helloyuan</p>

這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0。

 
           p{color:green}

發現只須要給加個顏色值就能覆蓋掉它繼承的樣式顏色。因而可知：任何顯示申明的規則均可以覆蓋其繼承樣式。　

此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

div{
  border:1px solid #222
}

<div>hello <p>yuan</p> </div>

附加說明:

一、文內的樣式優先級爲1,0,0,0，因此始終高於外部定義。這裏文內樣式指形如<div style="color:red>blah</div>的樣式，而外部定義指經由<link>或<style>卷標定義的規則。

　　二、有!important聲明的規則高於一切。

　　三、若是!important聲明衝突，則比較優先權。

　　四、若是優先權同樣，則按照在源碼中出現的順序決定，後來者居上。

　　五、由繼承而獲得的樣式沒有specificity的計算，它低於一切其它規則(好比全局選擇符*定義的規則)。

三 CSS的經常使用屬性

1 顏色屬性

 
           <div style 
           = 
           "color:blueviolet" 
           >ppppp< 
           / 
           div> 
          
           <div style 
           = 
           "color:#ffee33" 
           >ppppp< 
           / 
           div> 
          
           <div style 
           = 
           "color:rgb(255,0,0)" 
           >ppppp< 
           / 
           div> 
          
           <div style 
           = 
           "color:rgba(255,0,0,0.5)" 
           >ppppp< 
           / 
           div>

2 字體屬性

 
           font 
           - 
           size:  
           20px 
           / 
           50 
           % 
           / 
           larger 
          
           font 
           - 
           family: 
           'Lucida Bright' 
          
           font 
           - 
           weight: lighter 
           / 
           bold 
           / 
           border 
           / 
          
           <h1 style 
           = 
           "font-style: oblique" 
           >老男孩< 
           / 
           h1>

3 背景屬性

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平鋪滿)

background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)

      簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

              <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

注意：若是將背景屬性加在body上，要記得給body加上一個height，不然結果異常，這是由於body爲空，沒法撐起背景圖片；另外，若是此時要設置一個width＝100px，你也看不出效果，除非你設置出html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            background-color: antiquewhite;
            
        }
        body{
            width: 100px;
            height: 600px;
            background-color: deeppink;
            background-image: url(1.jpg);
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>

</body>
</html>

eg:

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

    <style>

        span{
            display: inline-block;
            width: 18px;
            height: 20px;
            background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
            background-position: 0 -100px;
        }
    </style>
</head>
<body>


    <span></span>

</body>
</html>

4 文本屬性

font-size: 10px;

text-align: center;   橫向排列

line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比

vertical-align:－4px  設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效


text-indent: 150px;   首行縮進
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;

思考：

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



        .outer .item {
            width: 300px;
            height: 200px;
            background-color: chartreuse;
            display: inline-block;
        }


    </style>
</head>
<body>
    <div class="outer">
        <div class="item" style="vertical-align: top">ll
        </div>
        <div class="item">
        </div>
    </div>

    <script>

    </script>
</body>
</html>

5 邊框屬性

 
           border 
           - 
           style: solid; 
          
           border 
           - 
           color: chartreuse; 
          
           border 
           - 
           width:  
           20px 
           ; 
          
           簡寫：border:  
           30px  
           rebeccapurple solid;

6 列表屬性

 
           ul,ol{    
           list 
           - 
           style: decimal 
           - 
           leading 
           - 
           zero; 
          
           list 
           - 
           style: none; <br>          
           list 
           - 
           style: circle; 
          
           list 
           - 
           style: upper 
           - 
           alpha; 
          
           list 
           - 
           style: disc; }

7 dispaly屬性

display:inline-block可作列表佈局，其中的相似於圖片間的間隙小bug能夠經過以下設置解決：

 
           #outer{ 
          
           border: 3px dashed; 
          
           word-spacing: -5px; 
          
           }

參考文獻：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.jianshu.com/p/a3da5e27d22b

4 僞類(Pseudo-classes)

CSS僞類是用來給選擇器添加一些特殊效果。

anchor僞類：專用於控制連接的顯示效果


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代碼; }

View Code

補充：

 
          .outer:hover .right{color: red}

before after僞類：

:before    p:before       在每一個<p>元素以前插入內容
:after     p:after        在每一個<p>元素以後插入內容

 p:before        在每一個 <p> 元素的內容以前插入內容                    p:before{content:"hello";color:red} p:after 在每一個 <p> 元素的內容以前插入內容 p:after{ content:"hello"；color:red}

5 css優先級和繼承

CSS優先級:

所謂CSS優先級，便是指CSS樣式在瀏覽器中被解析的前後順序。

樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：
      1 內聯樣式表的權值最高       style=""-------------------1000；
　　 2 統計選擇符中的ID屬性個數。    #id    －－－－－－－－－－－－－100
　　3 統計選擇符中的CLASS屬性個數。 .class  －－－－－－－－－－－－－10
 4 統計選擇符中的HTML標籤名個數。     p     －－－－－－－－－－－－－-1

按這些規則將數字符串逐位相加，就獲得最終的權重，而後在比較取捨時按照從左到右的順序逐位比較。

View Code

CSS的繼承性:

 
          body{color:red;}       <p>helloyuan</p>

這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0。

 
          p{color:green}

發現只須要給加個顏色值就能覆蓋掉它繼承的樣式顏色。因而可知：任何顯示申明的規則均可以覆蓋其繼承樣式。　

View Code

附加說明:

View Code

三 CSS的經常使用屬性

1 顏色屬性

 
          <div style 
          = 
          "color:blueviolet" 
          >ppppp< 
          / 
          div> 
         
          <div style 
          = 
          "color:#ffee33" 
          >ppppp< 
          / 
          div> 
         
          <div style 
          = 
          "color:rgb(255,0,0)" 
          >ppppp< 
          / 
          div> 
         
          <div style 
          = 
          "color:rgba(255,0,0,0.5)" 
          >ppppp< 
          / 
          div>

2 字體屬性

 
          font 
          - 
          size:  
          20px 
          / 
          50 
          % 
          / 
          larger 
         
          font 
          - 
          family: 
          'Lucida Bright' 
         
          font 
          - 
          weight: lighter 
          / 
          bold 
          / 
          border 
          / 
         
          <h1 style 
          = 
          "font-style: oblique" 
          >老男孩< 
          / 
          h1>

3 背景屬性

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平鋪滿)

background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)

      簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

              <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

View Code

eg:

View Code

4 文本屬性

font-size: 10px;

text-align: center;   橫向排列

line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比

vertical-align:－4px  設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效


text-indent: 150px;   首行縮進
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;

思考：

vertical-align

5 邊框屬性

 
          border 
          - 
          style: solid; 
         
          border 
          - 
          color: chartreuse; 
         
          border 
          - 
          width:  
          20px 
          ; 
         
          簡寫：border:  
          30px  
          rebeccapurple solid;

6 列表屬性

 
          ul,ol{    
          list 
          - 
          style: decimal 
          - 
          leading 
          - 
          zero; 
         
          list 
          - 
          style: none; <br>          
          list 
          - 
          style: circle; 
         
          list 
          - 
          style: upper 
          - 
          alpha; 
         
          list 
          - 
          style: disc; }

7 dispaly屬性

 
          none 
         
          block 
         
          inline

display:inline-block可作列表佈局，其中的相似於圖片間的間隙小bug能夠經過以下設置解決：

 
          #outer{ 
         
          border: 3px dashed; 
         
          word-spacing: -5px; 
         
          }

1. CSS_頁面引用
2. iconfont引入方式
3. CSS引入方式
4. CSS_控制表格樣式
5. 5.CSS的引入方式
6. CSS的引入方式
7. JavaScript之引入方式
8. 【JavaScript的引入方式】
9. CSS 三種引入方式
10. 01-css的引入方式
更多相關文章...
• Maven 引入外部依賴 - Maven教程
• Spring DI（依賴注入）的實現方式：屬性注入和構造注入 - Spring教程
• 常用的分佈式事務解決方案
• YAML 入門教程

相關標籤/搜索

每日一句

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

CSS_引入方式

一 CSS的引入方式

二 CSS的選擇器

1 基礎選擇器

2 組合選擇器

三 屬性選擇器

4 僞類(Pseudo-classes)

5 css優先級和繼承

三 CSS的經常使用屬性

1 顏色屬性

2 字體屬性

3 背景屬性

eg:

4 文本屬性

思考：

5 邊框屬性

6 列表屬性

7 dispaly屬性

4 僞類(Pseudo-classes)

5 css優先級和繼承

三 CSS的經常使用屬性

1 顏色屬性

2 字體屬性

3 背景屬性

eg:

4 文本屬性

思考：

5 邊框屬性

6 列表屬性

7 dispaly屬性

　一 CSS的引入方式

　1 基礎選擇器

三屬性選擇器