CSS的使用方法

時間 2019-12-08

標籤 css 使用方法欄目 CSS 简体版

原文原文鏈接

參考資料:http://css.cuishifeng.cn/css

1、CSS的四種引入方式

1.行內式

　　行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，不推薦使用（與連接式或者導入式同時控制同一標籤時，行內式優先顯示）。html

2.嵌入式

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

　　<head>瀏覽器

　　<style>ide

　　　　div{佈局

　　　　　　color:redpost

　　　　　　}學習

　　　　...此處寫CSS樣式字體

　　</style>ui

　　</head>

　　注意：此方法只能控制一個html文件

3.導入式

　　將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法以下：

　　　　@import"mystyle.css"; 此處要注意.css文件的路徑

　　</style>

　　注意：導入式使用時先加載所有html文件，而後加載css文件，網速差時，先出現未渲染的畫面，使用體驗差（避免使用）。

4.連接式

　　也是將一個.css文件引入到HTML文件中　　 <link href="mystyle.css" rel="stylesheet" type="text/css">

返回頂部

2、css的選擇器（Selector）

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

1 基礎選擇器：

　　* ：　　　　　　通用元素選擇器，匹配任何元素　　　 * { margin:0; padding:0; }

　　E ：　　　　　　標籤選擇器，匹配全部使用E標籤的元素　　　　　　　　　p { color:green; }

　　.info和E.info: 　　 class選擇器，匹配全部class屬性中包含info的元素　　 .info { background:#ff0; } p.info { background:blue; }

　　#info和E#info　　id選擇器，匹配全部id屬性等於footer的元素　　　　 #info { background:#ff0; } p#info { background:#ff0; }

2 組合選擇器

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

　　E F 後代選擇器，匹配全部屬於E元素後代的F元素，E和F之間用空格分隔(能夠多層選擇) 　 div p { font-weight:bold; } div .class1{color:red} 　　div div .class1{......}

　　E > F 子代選擇器，匹配全部E元素的子元素F（只判斷子代，不選擇多層關係） div > strong { color:yellow; }

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

        .div1>p{
            background-color: aqua;
            color: deeppink;
        }

        .main2>div{
            background-color: blueviolet;
            color: chartreuse;
        }
    </style>
</head>
<body>

      <div class="div1">hello1
          <div class="div2">hello2
              <div>hello4</div>
              <p>hello5</p>
          </div>
          <p>hello3</p>
      </div>
      <p>hello6</p>

<hr>

     <div class="main2">1
       <div>2
           <div>
           </div>
       </div>
       <div>
           </div>
     </div>
</body>
</html>

View Code

　　E + F 毗鄰元素選擇器，匹配全部緊隨E元素以後的同級元素F 　　 p + p { color:#f00; }

注意嵌套規則：

塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
塊級元素不能放在p裏面。
有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
li內能夠包含div
塊級元素與塊級元素並列、內聯元素與內聯元素並列。（錯誤的：<div><h2></h2><span></span></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>

View Code

3 、屬性選擇器

　　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[att|=val] 匹配全部att屬性具備多個連字號分隔（hyphen-separated）的值、其中一個值以「val」開頭的E元素，主要用於lang屬性，

好比「en」、「en-us」、「en-gb」等等　　　　　　p[lang|=en] { 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;}

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

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

4 僞類選擇器：

　　僞類選擇器：專用於控制連接的顯示效果，僞類選擇器：

　　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>

View Code

返回頂部

三、CSS的經常使用屬性

1 顏色屬性：

　　<div style="color:blueviolet">小帥帥呆了</div>

　　<div style="color:#ffee33">小帥帥呆了</div>

　　 <div style="color:rgb(255,0,0)">小帥帥呆了</div>

　　 <div style="color:rgba(255,0,0,0.5)">小帥帥呆了</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')">

　　注意：若是講背景屬性加在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>

View Code

4 文本屬性：

　　font-size: 10px;　　　　　　　　字體大小

　　text-align: center;　　　　　　橫向排列（經常使用）

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

　　p{ width: 200px;　　　　　　　　　　元素寬度

　　height: 200px;　　　　　　　　　　元素高度

　　text-align: center; 　　　　　　文本居中

　　background-color: aquamarine;　　　　背景顏色

　　line-height: 200px; }　　　　　　行高

　　text-indent: 150px; 　　　　　　首行縮進，50%：基於父元素（weight）的百分比

　　letter-spacing: 10px;　　　　　　字母間距

　　word-spacing: 20px;　　　　　　單詞空格間距

　　direction: rtl;

　　text-transform: capitalize;　　首字母大寫（通常標題用）

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; list-style: circle;

　　　　list-style: upper-alpha;

　　　　list-style: disc;

　　　　}

7 dispaly屬性

none
block
inline

8 盒子模型

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

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

　　內邊距會影響盒子的大小，外邊距不會影響盒子的大小,須要設置

　　練習： 300px*300px的盒子裝着100px*100px的盒子，分別經過margin和padding設置將小盒子移到大盒子的中間

　　注意1：

<!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;
　　　　}

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

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

兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下二者margin裏最大值做爲顯示值
父子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

解決方法：

border:1px solid transparent
padding:1px
over-flow:hidden;

9 float

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

　　能夠看出，即便div1的寬度很小，頁面中一行能夠容下div1和div2，div2也不會排在div1後邊，由於div元素是獨佔一行的。注意，以上這些理論，是指標準流中的div。

　　不管多麼複雜的佈局，其基本出發點均是：「如何在一行顯示多個div元素」。浮動能夠理解爲讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。

　　例如，假設上圖中的div2浮動，那麼它將脫離標準流，但div一、div三、div4仍然在標準流當中，因此div3會自動向上移動，佔據div2的位置，從新組成一個流。如圖：

從圖中能夠看出，因爲對div2設置浮動，所以它再也不屬於標準流，div3自動上移頂替div2的位置，div一、div三、div4依次排列，成爲一個新的流。又由於浮動是漂浮在標準流之上的，所以div2擋住了一部分div3，div3看起來變「矮」了

這裏div2用的是左浮動(float:left;)，能夠理解爲漂浮起來後靠左排列，右浮動(float:right;)固然就是靠右排列。這裏的靠左、靠右是說頁面的左、右邊緣。

若是咱們把div2採用右浮動，會是以下效果：

此時div2靠頁面右邊緣排列，再也不遮擋div3，讀者能夠清晰的看到上面所講的div一、div三、div4組成的流。

目前爲止咱們只浮動了一個div元素，多個呢？

下面咱們把div2和div3都加上左浮動，效果如圖：

同理，因爲div二、div3浮動，它們再也不屬於標準流，所以div4會自動上移，與div1組成一個「新」標準流，而浮動是漂浮在標準流之上，所以div2又擋住了div4。

咳咳，到重點了，當同時對div二、div3設置浮動以後，div3會跟隨在div2以後，不知道讀者有沒有發現，一直到如今，div2在每一個例子中都是浮動的，但並無跟隨到div1以後。所以，咱們能夠得出一個重要結論：

假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)；若是A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部老是和上一個元素的底部對齊。

div的順序是HTML代碼中div的順序決定的。

靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是後。

爲了幫助讀者理解，再舉幾個例子。

假如咱們把div二、div三、div4都設置成左浮動，效果以下：

根據上邊的結論，跟着小菜理解一遍：先從div4開始分析，它發現上邊的元素div3是浮動的，因此div4會跟隨在div3以後；div3發現上邊的元素div2也是浮動的，因此div3會跟隨在div2以後；而div2發現上邊的元素div1是標準流中的元素，所以div2的相對垂直位置不變，頂部仍然和div1元素的底部對齊。因爲是左浮動，左邊靠近頁面邊緣，因此左邊是前，所以div2在最左邊。

假如把div二、div三、div4都設置成右浮動，效果以下：

道理和左浮動基本同樣，只不過須要注意一下先後對應關係。因爲是右浮動，所以右邊靠近頁面邊緣，因此右邊是前，所以div2在最右邊。

假如咱們把div二、div4左浮動，效果圖以下：

依然是根據結論，div二、div4浮動，脫離了標準流，所以div3將會自動上移，與div1組成標準流。div2發現上一個元素div1是標準流中的元素，所以div2相對垂直位置不變，與div1底部對齊。div4發現上一個元素div3是標準流中的元素，所以div4的頂部和div3的底部對齊，而且老是成立的，由於從圖中能夠看出，div3上移後，div4也跟着上移，div4老是保證本身的頂部和上一個元素div3(標準流中的元素)的底部對齊。

至此，恭喜讀者已經掌握了添加浮動，但還有清除浮動，有上邊的基礎清除浮動很是容易理解。

通過上邊的學習，能夠看出：元素浮動以前，也就是在標準流中，是豎向排列的，而浮動以後能夠理解爲橫向排列。

清除浮動能夠理解爲打破橫向排列。

清除浮動的關鍵字是clear，官方定義以下：

語法：

　　clear : none | left | right | both

取值：

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

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

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

　　both : 不容許有浮動對象

定義很是容易理解，可是讀者實際使用時可能會發現不是這麼回事。

定義沒有錯，只不過它描述的太模糊，讓咱們不知所措。

根據上邊的基礎，假如頁面中只有兩個元素div一、div2，它們都是左浮動，場景以下：

此時div一、div2都浮動，根據規則，div2會跟隨在div1後邊，但咱們仍然但願div2能排列在div1下邊，就像div1沒有浮動，div2左浮動那樣。

這時候就要用到清除浮動（clear），若是單純根據官方定義，讀者可能會嘗試這樣寫：在div1的CSS樣式中添加clear:right;，理解爲不容許div1的右邊有浮動元素，因爲div2是浮動元素，所以會自動下移一行來知足規則。

其實這種理解是不正確的，這樣作沒有任何效果。

對於CSS的清除浮動(clear)，必定要牢記：這個規則只能影響使用清除的元素自己，不能影響其餘元素。

怎麼理解呢？就拿上邊的例子來講，咱們是想讓div2移動，但咱們倒是在div1元素的CSS樣式中使用了清除浮動，試圖經過清除div1右邊的浮動元素(clear:right;)來強迫div2下移，這是不可行的，由於這個清除浮動是在div1中調用的，它只能影響div1，不能影響div2。

根據小菜定論，要想讓div2下移，就必須在div2的CSS樣式中使用浮動。本例中div2的左邊有浮動元素div1，所以只要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不容許出現浮動元素，這樣div2就被迫下移一行。

那麼假如頁面中只有兩個元素div一、div2，它們都是右浮動呢？讀者此時應該已經能本身推測場景，以下：

此時若是要讓div2下移到div1下邊，要如何作呢？

一樣根據小菜定論，咱們但願移動的是div2，就必須在div2的CSS樣式中調用浮動，由於浮動只能影響調用它的元素。

能夠看出div2的右邊有一個浮動元素div1，那麼咱們能夠在div2的CSS樣式中使用clear:right;來指定div2的右邊不容許出現浮動元素，這樣div2就被迫下移一行，排到div1下邊。

10 position

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

　　　　top，right，bottom，left等屬性不會被應用。說到這裏咱們不得不提一下一個定義——文檔流，文檔流其實就是文檔的輸出順序，也就是咱們一般看到的由左到右、由上而下的輸出形式，在網頁中每一個元素都是按照這個順序進行排序和顯示的，而float和position兩個屬性能夠將元素從文檔流脫離出來顯示。默認值就是讓元素繼續按照文檔流顯示，不做出任何改變。

　　2 position:relative

　　　　relative：對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。若是設定 position:relative，就可使用 top,bottom,left和 right 來相對於元素在文檔中應該出現的位置來移動這個元素。[意思是元素實際上依然佔據文檔中的原有位置，只是視覺上相對於它在文檔中的原有位置移動了]

　　absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。當指定 position:absolute 時，元素就脫離了文檔[即在文檔中已經不佔據位置了]，能夠準確的按照設置的 top,bottom,left 和 right 來定位了。若是一個元素絕對定位後，其參照物是以離自身最近元素是否設置了相對定位，若是有設置將以離本身最近元素定位，若是沒有將往其祖先元素尋找相對定位元素，一直找到html爲止。（相對父元素或者父父元素。。。。）

　　3 position:fixed

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

　　　　fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性定義。

　　　　注意點：一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。