CSS基礎知識整理
1 什麼是CSS？
CSS一般稱爲CSS樣式表或層疊樣式表（級聯樣式表），
主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。
CSS以HTML爲基礎，提供了豐富的功能，如字體、顏色、背景的控制及總體排版等，並且還能夠針對不一樣的瀏覽器設置不一樣的樣式。php
2 CSS語法
CSS基礎語法
CSS規則由兩個主要部分構成：選擇器以及一條或多條聲明。
每條聲明由一個屬性和一個值組成。屬性(property)是設置的樣式屬性，每一個屬性有一個值，屬性和值被冒號分開。css
好比 selector{property：value}
選擇器一般是須要改變樣式的HTML元素。html
好比 h1{color:red; font-size:14px;} h1是選擇器，color和font-size是屬性，red和14px是值。
注意：
若是定義不止一個聲明則須要用分號將每一個聲明分開。例如：p{text-align:center;color:red}
若是值爲若干單詞，則要給值加引號： 例如：p {font-family: "sans serif";}api
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>
樣式優先級：內聯樣式>內部樣式>外部樣式url
三種樣式表區別：spa
樣式表 優勢 缺點 使用狀況 控制範圍 行內 書寫方便 沒有實現樣式和結構相分離 較少 控制一個標籤(少) 內部 部分結構和樣式相分離 沒有完全分離 較多 控制一個頁面(中) 外部 徹底實現結構和樣式相分離 須要引入 最多，推薦 控制整個站點(多)
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組合來設置。
- 使用px設置：經過像素設置文本大小是設置的整個頁面。
- 使用em設置：1em等於當前的字體尺寸，好比設置的默認字體是12px，所以1em的默認大小就是12px。像素轉換em：px/12 = em
- 使用%和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列表
做用：1 設置不一樣的列表項標記 2 設置列表項標記爲圖像
修改列表項標記使用 list-style-type，使用圖像做爲標記能夠利用 list-style-image 屬性完成。
無序列表：
無序列表常常用來作導航欄菜單，一般都須要隱藏無序列表項的標記，那麼就使用 list-style-type:none，表示無標記。
list-style-type 屬性的默認值爲 disc 實心圓，即小黑點。
除了無標記還能夠修改標記，例如circle空心圓，square實心方塊。
有序列表：
有序列表項標記默認使用數字樣式顯示，即 list-style-type:decimal。
圖像做爲列表項標記
要指定列表項標記的圖像，可使用 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 選擇器
分組和嵌套選擇器
- 分組選擇器，例如：
h1{color:gray;}
p{color:gray;}
能夠寫成：h1, p{color:gray;}
- 嵌套選擇器，例如：
.div1 p{
color:white;
}
.div1 p a{
color:yellow;
font-weight:bold;
}
<div class="div1">
<p>嵌套選擇器
<a href="#">深層嵌套選擇器</a>
</p>
</div>
- 通配符選擇器
*{
padding:0;
margin:0;
}
屬性選擇器
- 屬性選擇器：屬性選擇器使用[attr]，例如：把全部帶有 title 屬性的元素的字體設置爲紅色
<head>
<style>
[title]{
color:red;
}
</style>
</head>
<body>
<h1>h1 標題不帶有 title 屬性</h1>
<h2 title="標題">h2 能夠設置樣式</h2>
<a href="#" title="連接">超連接能夠設置樣式</a>
</body>
- 屬性和值選擇器：屬性選擇器使用[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>
- 屬性和多個值的選擇器：使用有兩種狀況：屬性值用空格分隔使用
：[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>
- 表單樣式：屬性選擇器在爲不帶有 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 組合選擇器：合選擇符是包括各類簡單選擇器的組合方式，組合選擇符說明了兩個選擇器直接的關係。
- 後代選則器：又稱爲包含選擇器，以空格分隔，子元素選擇器只能選擇做爲某元素子元素的元素。
- 子元素選擇器：子元素選擇器只能選擇做爲某元素子元素的元素，以 > 分隔，子元素選擇器只能選擇做爲某元素子元素的元素。
- 相鄰兄弟選擇器：可選擇緊接在另外一元素後的元素，且兩者有相同父元素，以 + 分隔。
- 普通相鄰兄弟選擇器：選取全部指定元素的相鄰兄弟元素，以 ~ 分隔。
- 選擇器組合：多種選擇器能夠結合起來使用。
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><i/>、<del/>、<s>、<ins>、<u>、<span>等， 其中<span>標籤最典型的行內元素。
行內元素的特色：
- 和相鄰行內元素在一行上。
- 高、寬無效，但水平方向的padding和margin能夠設置，垂直方向的無效。
- 默認寬度就是它自己內容的寬度。
- 行內元素只能容納文本或則其餘行內元素。（a特殊）
注意：
- 只有文字才能組成段落，所以p裏面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，
它們都是文字類塊級標籤，裏面不能放其餘塊級元素。
- 連接裏面不能再放連接。
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
緣由：
- margin 會有外邊距合併 還有 ie6下面margin 加倍的bug，因此最後使用。
- padding 會影響盒子大小， 須要進行加減計算（麻煩） 其次使用。
- 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，取值越大，定位元素在層疊元素中越居上。
- 若是取值相同，則根據書寫順序，後來居上。
- 後面數字必定不能加單位。
- 只有相對定位，絕對定位，固定定位有此屬性，其他標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性
- 1. CSS基礎知識整理
- 2. HTML&&CSS基礎知識點整理
- 3. CSS基礎知識點整理
- 4. css基礎知識整理篇
- 5. 前端基礎知識整理（css篇）
- 6. Babel基礎知識整理
- 7. SQL基礎知識整理
- 8. spring基礎知識整理
- 9. mysql 基礎知識整理
- 10. 基礎知識整理
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Docker 清理命令
- • Kotlin學習（二）基本類型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS基礎知識整理
- 2. HTML&&CSS基礎知識點整理
- 3. CSS基礎知識點整理
- 4. css基礎知識整理篇
- 5. 前端基礎知識整理（css篇）
- 6. Babel基礎知識整理
- 7. SQL基礎知識整理
- 8. spring基礎知識整理
- 9. mysql 基礎知識整理
- 10. 基礎知識整理