CSS基礎知識整理

時間 2019-11-26

標籤 css 基礎知識整理欄目 CSS 简体版

原文原文鏈接

1 什麼是CSS？

CSS一般稱爲CSS樣式表或層疊樣式表（級聯樣式表），主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。php

CSS以HTML爲基礎，提供了豐富的功能，如字體、顏色、背景的控制及總體排版等，並且還能夠針對不一樣的瀏覽器設置不一樣的樣式。css

2 CSS語法

CSS基礎語法html

CSS規則由兩個主要部分構成：選擇器以及一條或多條聲明。api

每條聲明由一個屬性和一個值組成。屬性(property)是設置的樣式屬性，每一個屬性有一個值，屬性和值被冒號分開。瀏覽器

好比 selector{property：value}選擇器一般是須要改變樣式的HTML元素。佈局

好比 h1{color:red; font-size:14px;} h1是選擇器，color和font-size是屬性，red和14px是值。字體

注意：
若是定義不止一個聲明則須要用分號將每一個聲明分開。例如：p{text-align:center;color:red}url

若是值爲若干單詞，則要給值加引號： 例如：p {font-family: "sans serif";} spa
CSS高級語法設計

選擇器的分組 h1,h2,h3,h4,h5,h6 { color: green; }

繼承及其問題：根據 CSS，子元素從父元素繼承屬性。 body { font-family: Verdana, sans-serif; }

3 建立CSS

CSS 建立樣式表分爲三種狀況：

內部樣式表

<head>
    <style type="text/CSS">
        選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
        div{width:200px; height:200px; border:1px solid red;}
    </style>
</head>

行內式(內聯樣式)

<div style="width:200px;height:100px;border:1px solid black;"></div>

外部樣式表(外鏈式)

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

樣式優先級：內聯樣式>內部樣式>外部樣式

三種樣式表區別：

行內樣式表：優勢書寫方便；缺點沒有實現樣式和結構相分離；使用狀況較少；控制範圍：控制一個標籤(少)。

內部樣式表：優勢部分結構和樣式相分離；缺點沒有完全分離；使用狀況較多；控制範圍：控制一個頁面(中)。

外部樣式表：優勢徹底實現結構和樣式相分離；缺點須要引入；使用狀況最多，推薦；控制範圍：控制整個站點(多)。

4 id和class選擇器

ID選擇器：

id 選擇器能夠爲標有特定 id 的 HTML 元素指定特定的樣式，id 屬性和身份證同樣具備惟一性。 HTML元素以 id 屬性來設置 id 選擇器，CSS 中 id 選擇器以 "#" 來定義。注意： id 屬性不能以數字開頭。

語法：
#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

class選擇器：

class 選擇器用於描述一組元素的樣式，也叫作類選擇器。 class 能夠在多個元素中使用，而且一個元素也能夠指定多個類名。在 CSS 中，類選擇器以一個點 "." 號來定義。一樣的類名的第一個字符也不能使用數字。

語法：
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

ID 選擇器和類（class）選擇器的區別：

相同點：均可以應用於任何元素

不一樣點：

ID 選擇器只能在文檔中使用一次，而類選擇器可使用屢次。
可使用類選擇器詞列表方法爲一個元素同時設置多個樣式(也就是一個元素能夠制定多個類名)，而ID只能指定一個。

5 CSS元素選擇器

最多見的CSS選擇器就是元素選擇器，也就是標籤選擇器，也就是在HTML中元素的最基本的選擇器。

語法：
標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }  或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標籤選擇器最大的優勢是能快速爲頁面中同類型的標籤統同樣式，同時這也是他的缺點，不能設計差別化樣式。

6 CSS背景(background)

background 屬性用於定義 HTML 元素的背景。

定義元素背景效果的 CSS 屬性有五種：

background-color 背景顏色

background-image 背景圖像

background-repeat 背景圖像設置水平或垂直平鋪或不平鋪

background-position 背景圖像設置定位

background-attachment 背景圖像設置固定或滾動

背景屬性簡寫：
body{
    background:green url('images/fix.gif') no-repeat fixed 12px 24px;
}
當使用簡寫屬性時，屬性值的順序依次爲：
background-color --> background-image --> background-repeat --> background-attachment --> background-position

7 CSS外觀屬性

CSS文本格式主要分爲：文本顏色(color)、文本對齊方式、文本修飾、文本陰影、文本縮進、文本間距、字間距、文本空白處理、文本轉換。

文本對齊方式:text-align屬性有四個值：left,center,right,justify(兩端對齊)。屬性默認值爲auto。

文本修飾：text-decoration 屬性用來設置或刪除文本的修飾。主要是用來刪除超連接的下劃線，也可使用其餘值來設置文本的修飾，

text-decoration:overline，設置文本上劃線。

text-decoration:line-through，設置文本中間劃線。

text-decoration:underline; 設置文本下劃線。

文本陰影：text-shadow: x y shadow color;其中 x 是水平陰影的偏移值，y 是垂直陰影的偏移值，shadow 用於指定陰影的模糊值，即模糊效果的做用距離，不容許負值。color 指定陰影的顏色。該屬性有兩個做用，產生陰影和模糊主體。

文本縮進：用來指定文本的首行縮進，容許爲負值，若是值是負數，第一行則向左縮進。CSS表示爲：text-indent:2em，em 是相對文字大小的單位，1em 就是1個文字大小，2em 就是兩個文字大小。

文本間距：行高，也就是文本行的高度。例如：line-height：22px;

字間距：letter-spacing 和 word-spacing 這兩個屬性均可用來增長或減小文本間的空白，即字間距。

不一樣的是：letter-spacing 屬性設置字符間距，而 word-spacing 屬性設置單詞間距。

注意：word-spacing 屬性對中文無效，所以在設置中文的字間距時請使用 letter-spacing 屬性。

letter-spacing 和 text-align:justify 是兩個衝突的屬性，不能同時使用，

 text-align:justify 是設置內容根據寬度自動調整字間距，使各行的長度剛好相等，實現文本兩端對齊效果，

 而 letter-spacing 是指定一個固定的字間距。

文本空白處理：white-space 屬性指定元素內的空白如何處理，默認值爲 normal 空白會被瀏覽器忽略。該屬性還有4個值：nowrap 文本不會換行，禁止換行，文本會在同一行上繼續，直到遇到 <br> 標籤爲止。 pre 空白會被瀏覽器保留，這種方式相似 HTML 中的 <pre> 標籤，用於定義預格式文本。

pre-wrap 指定保留空白符序列，可是正常地進行換行。

          pre-line 指定合併空白符序列，可是保留換行符，並容許自動換行。

文本轉換：text-transform 屬性控制文本中的字母。是用來指定在一個文本中的大寫和小寫字母，可用於將全部字句變成大寫或小寫字母，或每一個單詞的首字母大寫。 text-transform:capitalize; 定義文本中的每一個單詞以大寫字母開頭。

text-transform:uppercase; 定義文本僅有大寫字母。

        text-transform:lowercase; 定義文本僅有小寫字母。

8 CSS字體 (font)

font 屬性可用於設置文本字體，定義樣式，如加粗，大小等，屬於複合屬性，也叫作簡寫屬性。

簡寫順序：

font-style(字體樣式) --> font-variant(字體變形) --> font-weight(字體加粗) --> font-size(字體大小)/line-height --> font-family(設置文本字體)

注意，font-size 和 font-family 的值是必需的，不然無效。

(1)是絕對或相對大小，可使用px、em、%和em組合來設置。

1 使用px設置：經過像素設置文本大小是設置的整個頁面。

2 使用em設置：1em等於當前的字體尺寸，好比設置的默認字體是12px，所以1em的默認大小就是12px。像素轉換em：px/12 = em

3 使用%和em組合設置：在全部瀏覽器的解決方案中，設置 <body> 元素的默認字體大小是 100%，能夠顯示相同的文本大小，並容許全部瀏覽器縮放文本的大小。

<head>
    <style>
        body{font-size:100%}
        p{font-size:2.5em; }   /* 2.5\*16=40px \*/
    </style>
</head>
<body>
    <p>使用%和em組合設置</p>
</body>

(2)font-style 屬性主要用於指定斜體文字。

屬性有三個值：

normal正常顯示文本
italic 定義斜體
oblique 定義傾斜的文字

9 CSS連接

連接的四種狀態是：

a:link - 正常，未訪問過的連接。

a:visited - 已訪問過的連接。

a:hover - 當鼠標滑動到連接上時。

a:active - 連接被點擊的那一刻。

10 CSS列表

做用：

設置不一樣的列表項標記
設置列表項標記爲圖像

修改列表項標記使用 list-style-type，使用圖像做爲標記能夠利用 list-style-image 屬性完成。

1 無序列表：無序列表常常用來作導航欄菜單，一般都須要隱藏無序列表項的標記，那麼就使用 list-style-type:none，表示無標記。list-style-type 屬性的默認值爲 disc 實心圓，即小黑點。除了無標記還能夠修改標記，例如circle空心圓，square實心方塊。

2 有序列表：有序列表項標記默認使用數字樣式顯示，即 list-style-type:decimal。

3 圖像做爲列表項標記要指定列表項標記的圖像，可使用 list-style-image 屬性，只須要簡單地設置一個 url() 值，就能夠將圖像做爲標記類型。

列表屬性簡寫：list-style：list-style-type，list-style-position，list-style-image;

11 CSS表格

表格邊框： border

表格寬度和高度：width 和 height

表格對齊:text-align 和 vertical-align

表格內邊距:tr,td的padding設置

<head>
<style>
#tab{
    width:50%;
     font-family:"微軟雅黑";
       /*設置是否將表格邊框合併爲單一線條的邊框*/
     border-collapse:collapse;
 }
 #tab th,#tab td{
       /*表格邊框*/
     border:1px solid #7AC942;
       /*表格內邊距*/
     padding:5px 10px;
 }
 #tab th{
     color:white;
     background-color:#9C3;
     font-size:1.125em;
       /*左對齊*/
     text-align:left;
     padding-top:4px;
     padding-bottom:8px;
 }
 #tab .list td{
       /*邊顏色*/
     color:#000;
       /*背景顏色*/
     background-color:#FFC;
 }
 caption{
     margin-bottom:10px;
     font-weight:bold;
 }
</style>
</head>
<body>
 <table id="tab">
     <caption>食物類別</caption>
     <thead>
         <tr class="list">
             <th>粗糧</th>
             <th>蔬菜</th>
             <th>水果</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>大豆</td>
             <td>黃瓜</td>
             <td>香蕉</td>
         </tr>
         <tr class="list">
             <td>高粱</td>
             <td>菠菜</td>
             <td>檸檬</td>
         </tr>
         <tr class="list">
             <td>燕麥片</td>
             <td>白菜</td>
             <td>西瓜</td>
         </tr>
     </tbody>
 </table>
</body>

12 CSS 選擇器

1 分組和嵌套選擇器

(1)分組選擇器，例如：

h1{color:gray;}
     p{color:gray;}
能夠寫成：h1, p{color:gray;}

(2)嵌套選擇器，例如：

.div1 p{
     color:white;
}
.div1 p a{
     color:yellow;
     font-weight:bold;
}
<div class="div1">
     <p>嵌套選擇器
         <a href="#">深層嵌套選擇器</a>
     </p>
</div>

(3)通配符選擇器

  *{
      padding:0;
      margin:0;
  }

2 屬性選擇器

(4)屬性選擇器：屬性選擇器使用[attr]

例如：把全部帶有 title 屬性的元素的字體設置爲紅色

<head>
    <style>
        \[title\]{
            color:red;
        }
    </style>
</head>
<body>
    <h1>h1 標題不帶有 title 屬性</h1>
    <h2 title="標題">h2 能夠設置樣式</h2>
    <a href="#" title="連接">超連接能夠設置樣式</a>
</body>

(5)屬性和值選擇器：屬性選擇器使用[attr=value]

<head>
    <style>
        \[title=Hello\]{
            color:blue;
        }
    </style>
</head>
<body>
    <h1 title="Hello world">h1 標題 title="Hello world"</h1>
    <h2 title="Hello">h2 能夠設置樣式</h2>
    <a href="#" title="Hello">超連接能夠設置樣式</a>
</body>

(6)屬性和多個值的選擇器：使用有兩種狀況：屬性值用空格分隔使用：[attr~=value] 屬性值用連字符分隔則使用：[attr|=value] 例如：把包含 title='Hello' 的元素的字體設置爲綠色，使用 ~ 分隔屬性和值

<head>
    <style>
        \[title~=Hello\]{
            color:green;
        }
        \[lang|=zh\]{
            color:gray;
        }
    </style>
</head>
<body>
    <h1 title="world">h1 標題 title="world"</h1>
    <h2 title="Hello">h2 能夠設置樣式</h2>
    <h3 title="Hello Web">h3 能夠設置樣式</h2>
    <a href="#" title="Hello world">超連接能夠設置樣式</a>
    <a href="#" lang="zh-TW">超連接能夠設置樣式</a>
</body>

(7)表單樣式：屬性選擇器在爲不帶有 class 或 id 的表單設置樣式時特別有用。例如：

<head>
    <style>
        input\[type="text"\]{
            width:150px;
            display:block;
            margin-bottom:5px;
            background-color:yellow;
        }
        input\[type="button"\]{
            width:120px;
            margin-top:5px;
            background-color:green;
        }
    </style>
</head>
<body>
    <form name="input" action="demo.php" method="get">
        用戶名：<input type="text" name="user" placeholder="請輸入登陸名">
        暱　稱：<input type="text" name="name" placeholder="請輸入角色名">
        <input type="button" value="查詢">
    </form>
</body>

3 組合選擇器：合選擇符是包括各類簡單選擇器的組合方式，組合選擇符說明了兩個選擇器直接的關係。

(8)後代選則器:又稱爲包含選擇器，以空格分隔，子元素選擇器只能選擇做爲某元素子元素的元素。

(9)子元素選擇器:子元素選擇器只能選擇做爲某元素子元素的元素，以 > 分隔，子元素選擇器只能選擇做爲某元素子元素的元素。

(10)相鄰兄弟選擇器：可選擇緊接在另外一元素後的元素，且兩者有相同父元素，以 + 分隔。

(11)普通相鄰兄弟選擇器：選取全部指定元素的相鄰兄弟元素，以 ~ 分隔。

(12)選擇器組合：多種選擇器能夠結合起來使用。

13 CSS僞類(不區分大小寫)

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

語法：選擇器:僞類{attr:value;}
CSS 類也可使用僞類：選擇器.class:僞類{attr:value;}

(1)超連接僞類在瀏覽器中，連接的不一樣狀態均可以以不一樣的方式顯示：

a:link{color:#FF0000;}         /* 未訪問的連接顯示爲紅色 */
a:visited{color:#00FF00;}      /* 已訪問的連接顯示爲綠色 */
a:hover{color:#FF00FF;}        /* 鼠標劃過連接顯示爲紫紅色 */
a:active{color:#0000FF;}       /* 已選中的連接顯示爲藍色 */

注意：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 以後，a:active 必須被置於 a:hover 以後，纔是有效的。

(2)僞類和 CSS 類(僞類能夠與 CSS 類配合使用)

(3)CSS2 - :first - child 僞類 <body> <p>第一個 p 元素</p> <p>第二個 p 元素</p> <p>第三個 p 元素</p> </body> 選擇做爲任何元素的第一個子元素 p。選擇器使用 p:first-child。選擇全部 p 元素中的第一個子元素 b。選擇器使用 p>b:first-child。選擇全部做爲第一個子元素 p 中的全部 b 元素。選擇器使用 p:first-child b。

(4)CSS2 - :lang 僞類使用 :lang 僞類能夠爲不一樣的語言定義特殊的規則： html:lang(zh-CN){ color:blue; } :lang(en)>p{ color:gray; }

14 CSS 僞元素

CSS 僞元素是用來爲一些選擇器添加特殊的效果。

語法：選擇器:僞元素{attr:value;}
CSS 類也可使用僞元素：選擇器.class:僞元素{attr:value;}

(1)CSS2 - :before 僞元素

h1:before{
     content:url(images/logo.gif);
}

(2)CSS2 - :after 僞元素

h1:after{
     content:url(images/logo.gif);
}

content 屬性與 :before 及 :after 僞元素配合使用，來插入生成內容，該屬性用於定義元素以前或以後放置的生成內容。

content 的內容通常能夠爲四種： content:none 該值是默認值，不插入內容。

content:"string" 插入文本。

content:attr(屬性) 插入標籤屬性值。

content:url(路徑) 使用指定的絕對或相對地址插入一個外部資源，能夠是圖像，音頻，視頻或瀏覽器支持的其餘任何資源。

15 塊級元素和行內元素

塊級元素(block-level)：每一個塊元素一般都會獨自佔據一整行或多整行，能夠對其設置寬度、高度、對齊等屬性，經常使用於網頁佈局和網頁結構的搭建。常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。

塊級元素特色：

老是重新行開始
高度，行高，外邊距以及內邊距都是能夠控制的
寬度默認是容器的100%
能夠容納內聯元素和其餘塊元素

行內元素(inline-level)：不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，通常不能夠設置高度，寬度，對齊等屬性，經常使用於控制頁面中文本的樣式。常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。

行內元素的特色：

和相鄰行內元素在一行上。
高、寬無效，但水平方向的padding和margin能夠設置，垂直方向的無效。
默認寬度就是它自己內容的寬度。
行內元素只能容納文本或則其餘行內元素。（a特殊）

注意：

1.只有文字才能組成段落，所以p裏面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裏面不能放其餘塊級元素。

2. 連接裏面不能再放連接。

16 行內塊元素(inline-block)

在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，能夠對它們設置寬高和對齊屬性，有些資料可能會稱它們爲行內塊元素。

行內塊元素的特色：

和相鄰行內元素（行內塊）在一行上,可是之間會有空白縫隙。
默認寬度就是它自己內容的寬度。
高度，行高、外邊距以及內邊距均可以控制。

17 CSS 三大特性

層疊、繼承、優先級

CSS層疊性：是指多種CSS樣式的疊加。

CSS繼承性：是指書寫CSS樣式表時，子標籤會繼承父標籤的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用於父元素便可。簡單理解就是：子承父業。

CSS優先級：定義CSS樣式時，常常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題。使用了 !important聲明的規則。

考慮權重時，須要注意的一些點：

繼承樣式的權重爲0。
行內樣式優先。
權重相同時，CSS遵循就近原則。

18 盒子模型（CSS重點）

CSS三大模塊：盒子模型、浮動、定位。

盒子模型：就是把HTML頁面中的元素看做是一個矩形的盒子，也就是一個盛裝內容的容器。每一個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。

盒子邊框（border）

語法：border : border-width || border-style || border-color 
經常使用屬性值：none：沒有邊框即忽略全部邊框的寬度（默認值）、solid線(單實線)、dashed(虛線)、dotted(點線)、double(雙實線)

19 實現居中

1 外邊距實現盒子居中知足兩個條件：

必須是塊級元素。
盒子必須指定了寬度（width）

而後給元素左右的外邊距都設置爲auto。

例如：.header{ width:960px; margin:0 auto;}

2 文字盒子居中

文字水平居中是 text-align: center
盒子水平居中左右margin 改成 auto

20 盒子模型佈局穩定性

按照優先使用寬度（width）、其次使用內邊距（padding）、再次外邊距（margin）。

width > padding > margin

緣由：

1. margin 會有外邊距合併還有 ie6下面margin 加倍的bug，因此最後使用。

2. padding 會影響盒子大小，須要進行加減計算（麻煩）其次使用。

3. width 沒有問題，咱們常用寬度剩餘法高度剩餘法來作。

21 盒子陰影

語法： box-shadow:水平陰影垂直陰影模糊距離陰影尺寸陰影顏色內/外陰影；

22 浮動(float)

CSS的定位機制有3種：普通流（標準流）、浮動和定位。

浮動：是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
語法：選擇器{float:屬性值;} 屬性值能夠是left，right，both，none。
目的：爲了讓多個塊級元素同一行上顯示。

23 定位(position)

position 屬性值分爲四種：

static：自動定位（默認定位方式），所謂靜態位置就是各個元素在HTML文檔流中默認的位置。
relative：相對定位，相對定位是將元素相對於它在標準流中的位置進行定位
absolute：絕對定位，相對於其上一個已經定位的父元素進行定位
fixed：固定定位，相對於瀏覽器窗口進行定位。它的特色在於它的元素跟父親沒有任何關係，只認瀏覽器；徹底脫標，不佔有位置，不隨着滾動條滾動。

疊放次序z-index的特色：

z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上。
若是取值相同，則根據書寫順序，後來居上。
後面數字必定不能加單位。
只有相對定位，絕對定位，固定定位有此屬性，其他標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性

相關標籤/搜索

每日一句

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