CSS

時間  2019-12-13
標籤 css 欄目 CSS 简体版
原文   原文鏈接

什麼是CSS?

  • CSS 指層疊樣式表 (Cascading Style Sheets)
  • 樣式定義如何顯示 HTML 元素
  • 樣式一般存儲在樣式表中
  • 把樣式添加到HTML中，是爲了解決內容與表現分離的問題
  • 外部樣式表能夠極大提升工做效率
  • 外部樣式表一般存儲在 CSS 文件中
  • 多個樣式定義可層疊爲一

CSS較爲重要的包括

  • 選擇器
  • 框模型
  • 背景和邊框
  • 文本效果
  • 2D/3D 轉換
  • 動畫
  • 多列布局
  • 用戶界面

CSS的四種引用

　　行內式css

　　嵌入式html

　　導入式python

　　連接式(推薦使用)api

CSS的選擇器(Selector)

選擇器 例子 例子描述
.class .intro 選擇 class="intro" 的全部元素。
#id #firstname 選擇 id="firstname" 的全部元素。
* * 選擇全部元素。
element p 選擇全部 <p> 元素。
element,element div,p 選擇全部 <div> 元素和全部 <p> 元素。
element element div p 選擇 <div> 元素內部的全部 <p> 元素。
element>element div>p 選擇父元素爲 <div> 元素的全部 <p> 元素。
element+element div+p 選擇緊接在 <div> 元素以後的全部 <p> 元素。
[attribute] [target] 選擇帶有 target 屬性全部元素。
[attribute=value] [target=_blank] 選擇 target="_blank" 的全部元素。
[attribute~=value] [title~=flower] 選擇 title 屬性包含單詞 "flower" 的全部元素。
[attribute|=value] [lang|=en] 選擇 lang 屬性值以 "en" 開頭的全部元素。
:link a:link 選擇全部未被訪問的連接。
:visited a:visited 選擇全部已被訪問的連接。
:active a:active 選擇活動連接。
:hover a:hover 選擇鼠標指針位於其上的連接。
:focus input:focus 選擇得到焦點的 input 元素。
:first-letter p:first-letter 選擇每一個 <p> 元素的首字母。
:first-line p:first-line 選擇每一個 <p> 元素的首行。
:first-child p:first-child 選擇屬於父元素的第一個子元素的每一個 <p> 元素。
:before p:before 在每一個 <p> 元素的內容以前插入內容。
:after p:after 在每一個 <p> 元素的內容以後插入內容。
:lang(language) p:lang(it) 選擇帶有以 "it" 開頭的 lang 屬性值的每一個 <p> 元素。
element1~element2 p~ul 選擇前面有 <p> 元素的每一個 <ul> 元素。
[attribute^=value] a[src^="https"] 選擇其 src 屬性值以 "https" 開頭的每一個 <a> 元素。
[attribute$=value] a[src$=".pdf"] 選擇其 src 屬性以 ".pdf" 結尾的全部 <a> 元素。
[attribute*=value] a[src*="abc"] 選擇其 src 屬性中包含 "abc" 子串的每一個 <a> 元素。
:first-of-type p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
:last-of-type p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
:only-of-type p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
:only-child p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
:nth-child(n) p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 同上，從最後一個子元素開始計數。
:nth-of-type(n) p:nth-of-type(2) 選擇屬於其父元素第二個 <p> 元素的每一個 <p> 元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，可是從最後一個子元素開始計數。
:last-child p:last-child 選擇屬於其父元素最後一個子元素每一個 <p> 元素。
:root :root 選擇文檔的根元素。
:empty p:empty 選擇沒有子元素的每一個 <p> 元素（包括文本節點）。
:target #news:target 選擇當前活動的 #news 元素。
:enabled input:enabled 選擇每一個啓用的 <input> 元素。
:disabled input:disabled 選擇每一個禁用的 <input> 元素
:checked input:checked 選擇每一個被選中的 <input> 元素。
:not(selector) :not(p) 選擇非 <p> 元素的每一個元素。
::selection ::selection 選擇被用戶選取的元素部分。

 以上選擇器涵蓋了下方的介紹,下面對它們作一個簡單的分類,標籤用法均有簡單的解釋瀏覽器

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

　　基本選擇器佈局

　　組合選擇器post

　　屬性選擇器字體

　　僞類(Pseudo-classes)動畫

　　css優先級和繼承

 

注意嵌套規則：

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

CSS的經常使用屬性

　　顏色屬性

　　字體屬性

　　背景屬性

　　文本屬性

　　思考  vertical-align(垂直高度)

<!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">11</div>
        <div class="item"></div>
    </div>
</body>
</html>
vertical-align

　　邊框屬性

　　列表屬性

　　display屬性

　　外邊距和內邊距

  • margin:            用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
  • padding:           用於控制內容與邊框之間的距離；   
  • Border(邊框)     圍繞在內邊距和內容外的邊框。
  • Content(內容)   盒子的內容，顯示文本和圖像。

元素的寬度和高度:

重要: 當您指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，徹底大小的元素，你還必須添加填充，邊框和邊距。.

margin:10px 5px 15px 20px;-----------上 右 下 左
margin:10px 5px 15px;----------------上 右左 下
margin:10px 5px;---------------------上下  右左
margin:10px;    ---------------------上右下左

下面的例子中的元素的總寬度爲300px：

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;   

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

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

思考1:

       邊框在默認狀況下會定位於瀏覽器窗口的左上角，可是並無緊貼着瀏覽器的窗口的邊框，這是由於body自己也是一個盒子（外層還有html），在默認狀況下，   body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，因此body中的盒子不會緊貼瀏覽器窗口的邊框了，爲了驗證這一點，加上：

>>>>解決方法：

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

 解決方法：

　　float屬性

先來了解一下block元素和inline元素在文檔流中的排列方式。

　　block元素一般被現實爲獨立的一塊，獨佔一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素能夠設置width、height、margin、padding屬性；

　　inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效。inline元素的margin和padding屬性。水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

  • 常見的塊級元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。
  • 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

     

所謂的文檔流，指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。

脫離文檔流，也就是將元素從普通的佈局排版中拿走，其餘盒子在定位的時候，會當作脫離文檔流的元素不存在而進行定位。

只有絕對定位absolute和浮動float纔會脫離文檔流。

     ---部分無視和徹底無視的區別？須要注意的是，使用float脫離文檔流時，其餘盒子會無視這個元素，但其餘盒子內的文本依然會爲這個元素讓出位置，環繞在周圍(能夠說是部分無視)。而對於使用absolute position脫離文檔流的元素，其餘盒子與其餘盒子內的文本都會無視它。(能夠說是徹底無視)

浮動的表現

      定義：浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流中的浮動框以後的塊框表現得就像浮動框不存在同樣。（注意這裏是塊框而不是內聯元素；浮動框只對它後面的元素形成影響）

注意 當初float被設計的時候就是用來完成文本環繞的效果，因此文本不會被擋住，這是float的特性，即float是一種不完全的脫離文檔流方式。不管多麼複雜的佈局，其基本出發點均是：「如何在一行顯示多個div元素」。

現象1:

      假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)；若是A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部老是和上一個元素的底部對齊。此外，浮動的框以後的block元素元素會認爲這個框不存在，但其中的文本依然會爲這個元素讓出位置。 浮動的框以後的inline元素，會爲這個框空出位置，而後按順序排列。

現象2:

(1)左右結構div盒子重疊現象，通常是因爲相鄰兩個DIV一個使用浮動一個沒有使用浮動。如上面的例1：相鄰的兩個盒子box2向左浮動、box3未浮動。一個使用浮動一個沒有致使DIV不是在同個「平面」上，但內容不會照成覆蓋現象，只有DIV造成覆蓋現象。

解決方法：要麼都不使用浮動；要麼都使用float浮動；要麼對沒有使用float浮動的DIV設置margin樣式。

(2)上下結構div盒子重疊現象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;padding:0;
         }
        .container{
            border:1px solid red;width:300px;
        }
        #box1{
            background-color:green;float:left;width:100px;height:100px;
        }
        #box2{
            background-color:deeppink; float:right;width:100px;height:100px; 
        }
         #box3{
             background-color:pink;height:40px;
         }
</style>
</head>
<body>

        <div class="container">
                <div id="box1">box1 向左浮動</div>
                <div id="box2">box2 向右浮動</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>
View Code

例子如上：.container和box3的佈局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個緣由是由於第一個大盒子裏的子元素使用了浮動，脫離了文檔流，致使.container沒有被撐開。box3認爲.container沒有高度（未被撐開），所以跑上去了。

解決方法：

一、要麼給.container設置固定高度，通常狀況下文字內容不肯定多少就不能設置固定高度，因此通常不能設置「.container」高度(固然能肯定內容多高，這種狀況下「.container是能夠設置一個高度便可解決覆蓋問題。

二、要麼清除浮動。

清除浮動：

在非IE瀏覽器（如Firefox）下，當容器的高度爲auto，且容器的內容中有浮動（float爲left或right）的元素，在這種狀況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）佈局的現象。這個現象叫浮動溢出，爲了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。

方式1(推薦):

整段代碼就至關於在浮動元素後面跟了個寬高爲0的空div，而後設定它clear:both來達到清除浮動的效果。 
之因此用它，是由於，你沒必要在html文件中寫入大量無心義的空標籤，又能清除浮動。 

話說回來，你這段代碼真是個累贅啊，這樣寫不利於維護。 
只要寫一個.clearfix就好了，而後在須要清浮動的元素中 添加clearfix類名就行了。 
如：

?
<div class = "head clearfix" >< / div>

方式2：

?
overflow:hidden;

overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，可是他是浮動在普通流之上的，能夠把普通流元素+浮動元素想象成一個立方體。若是沒有明確設定包含容器高度的狀況下，它要計算內容的所有高度才能肯定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。

　　position(定位)

1 static

static 默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的的。

2  position: relative／absolute

    relative 相對定位。相對定位是相對於該元素在文檔流中的原始位置，即以本身原始位置爲參照物。有趣的是，即便設定了元素的相對定位以及偏移值，元素還佔有着原來的位置，即佔據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。

注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

    absolute 絕對定位。

      定義：設置爲絕對定位的元素框從文檔流徹底刪除，並相對於最近的已定位祖先元素定位，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

重點：若是父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角爲原始點進行定位。這樣能很好的解決自適應網站的標籤偏離問題，即父級爲自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，而後Top、Right、Bottom、Left用百分比寬度表示。

      另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。

總結：參照物用相對定位，子元素用絕對定位，而且保證相對定位參照物不會偏移便可。

3  position:fixed

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

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

4 僅使用margin屬性佈局絕對定位元素

此狀況，margin-bottom 和margin-right的值再也不對文檔流中的元素產生影響，由於該元素已經脫離了文檔流。另外，無論它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。  
　　圖9中，使用margin屬性佈局相對定位元素。
　　層級關係爲：
　　<div ——————————— position:relative;
　　<div—————————-沒有設置爲定位元素，不是參照物
　　<div———————-沒有設置爲定位元素，不是參照物
　　<div box1
　　<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
　　<div box3
　　效果圖：

　　

CSS拾遺

　　inline-block的間隙

　　使用的補充

　　z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程