CSS

本文轉載自查看原文 2016-06-25 08:49 4061

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

一 css的四種引入方式

1.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。

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

<head>

...此處寫CSS樣式

</style>

</head>

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

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

</style>

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

注意：

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

二 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:#f00; }

E F 后代元素選擇器，匹配所有屬於E元素后代的F元素，E和F之間用空格分隔 #nav li { display:inline; } li a { font-weight:bold; }

E > F 子元素選擇器，匹配所有E元素的子元素F div > strong { color:#f00; }

<!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>
               4
           </div>
       </div>
       <div>
               3
           </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">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/

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%:基於字體大小的百分比

{ 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）時，那么塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。又比如停車場

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;

9 float

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

可以看出，即使div1的寬度很小，頁面中一行可以容下div1和div2，div2也不會排在div1后邊，因為div元素是獨占一行的。注意，以上這些理論，是指標准流中的div。

無論多么復雜的布局，其基本出發點均是：“如何在一行顯示多個div元素”。浮動可以理解為讓某個div元素脫離標准流，漂浮在標准流之上，和標准流不是一個層次。

例如，假設上圖中的div2浮動，那么它將脫離標准流，但div1、div3、div4仍然在標准流當中，所以div3會自動向上移動，占據div2的位置，重新組成一個流。如圖：

從圖中可以看出，由於對div2設置浮動，因此它不再屬於標准流，div3自動上移頂替div2的位置，div1、div3、div4依次排列，成為一個新的流。又因為浮動是漂浮在標准流之上的，因此div2擋住了一部分div3，div3看起來變“矮”了

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

如果我們把div2采用右浮動，會是如下效果：

此時div2靠頁面右邊緣排列，不再遮擋div3，讀者可以清晰的看到上面所講的div1、div3、div4組成的流。

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

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

同理，由於div2、div3浮動，它們不再屬於標准流，因此div4會自動上移，與div1組成一個“新”標准流，而浮動是漂浮在標准流之上，因此div2又擋住了div4。

咳咳，到重點了，當同時對div2、div3設置浮動之后，div3會跟隨在div2之后，不知道讀者有沒有發現，一直到現在，div2在每個例子中都是浮動的，但並沒有跟隨到div1之后。因此，我們可以得出一個重要結論：

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

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

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

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

假如我們把div2、div3、div4都設置成左浮動，效果如下：

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

假如把div2、div3、div4都設置成右浮動，效果如下：

道理和左浮動基本一樣，只不過需要注意一下前后對應關系。由於是右浮動，因此右邊靠近頁面邊緣，所以右邊是前，因此div2在最右邊。

假如我們把div2、div4左浮動，效果圖如下：

依然是根據結論，div2、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 : 不允許有浮動對象

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

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

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

此時div1、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就被迫下移一行。

那么假如頁面中只有兩個元素div1、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屬性定義。

absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。如果設定 position:relative，就可以使用 top,bottom,left和 right 來相對於元素在文檔中應該出現的位置來移動這個元素。[意思是元素實際上依然占據文檔中的原有位置，只是視覺上相對於它在文檔中的原有位置移動了] 當指定 position:absolute 時，元素就脫離了文檔[即在文檔中已經不占據位置了]，可以准確的按照設置的 top,bottom,left 和 right 來定位了。如果一個元素絕對定位后，其參照物是以離自身最近元素是否設置了相對定位，如果有設置將以離自己最近元素定位，如果沒有將往其祖先元素尋找相對定位元素，一直找到html為止。

3 position:fixed

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

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

免責聲明！

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

猜您在找 CSS：如何學習 CSS？ CSS 基本樣式 CSS之旋轉引入CSS css /deep/ 純CSS箭頭我所了解的CSS 什么是CSS?它的特點有哪些？ CSS float CSS折線