css通常稱為css樣式表或層疊樣式表（級聯樣式表），
主要用于設定html頁面中的文本内容（字型、大小、對齊方式等）、圖檔的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。
css以html為基礎，提供了豐富的功能，如字型、顔色、背景的控制及整體排版等，而且還可以針對不同的浏覽器設定不同的樣式。
css規則由兩個主要部分構成：選擇器以及一條或多條聲明。
每條聲明由一個屬性和一個值組成。屬性(property)是設定的樣式屬性，每個屬性有一個值，屬性和值被冒号分開。
選擇器通常是需要改變樣式的html元素。
注意：
如果定義不止一個聲明則需要用分号将每個聲明分開。例如：p{text-align:center;color:red}
如果值為若幹單詞，則要給值加引号： 例如：p {font-family: "sans serif";}
選擇器的分組
繼承及其問題：根據 css，子元素從父元素繼承屬性。
css 建立樣式表分為三種情況：
内部樣式表
行内式(内聯樣式)
外部樣式表(外鍊式)
樣式優先級：内聯樣式>内部樣式>外部樣式
三種樣式表差別：
id 選擇器可以為标有特定 id 的 html 元素指定特定的樣式，id 屬性和身份證一樣具有唯一性。
html元素以 id 屬性來設定 id 選擇器，css 中 id 選擇器以 "#" 來定義。
注意： id 屬性不能以數字開頭。
class 選擇器用于描述一組元素的樣式，也叫做類選擇器。
class 可以在多個元素中使用，并且一個元素也可以指定多個類名。
在 css 中，類選擇器以一個點 "." 号來定義。
同樣的類名的第一個字元也不能使用數字。
相同點：
都可以應用于任何元素
不同點：
id 選擇器隻能在文檔中使用一次，而類選擇器可以使用多次。
可以使用類選擇器詞清單方法為一個元素同時設定多個樣式(也就是一個元素可以制定多個類名)，而id隻能指定一個。
最常見的css選擇器就是元素選擇器，也就是标簽選擇器，也就是在html中元素的最基本的選擇器。
标簽選擇器最大的優點是能快速為頁面中同類型的标簽統一樣式，同時這也是他的缺點，不能設計差異化樣式。
background 屬性用于定義 html 元素的背景。
定義元素背景效果的 css 屬性有五種：
background-color 背景顔色 background-image 背景圖像 background-repeat 背景圖像設定水準或垂直平鋪或不平鋪 background-position 背景圖像設定定位 background-attachment 背景圖像設定固定或滾動
背景屬性簡寫：
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; 定義文本僅有小寫字母。
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%，可以顯示相同的文本大小，并允許所有浏覽器縮放文本的大小。
(2)font-style 屬性主要用于指定斜體文字。
屬性有三個值：
normal正常顯示文本
italic 定義斜體
oblique 定義傾斜的文字
連結的四種狀态是：
a:link - 正常，未通路過的連結。
a:visited - 已通路過的連結。
a:hover - 當滑鼠滑動到連結上時。
a:active - 連結被點選的那一刻。
作用：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;
表格邊框： border
表格寬度和高度：width 和 height
表格對齊:text-align 和 vertical-align
表格内邊距:tr,td的padding設定
分組選擇器，例如：
嵌套選擇器，例如：
通配符選擇器
屬性選擇器：屬性選擇器使用[attr]，例如：把所有帶有 title 屬性的元素的字型設定為紅色
屬性和值選擇器：屬性選擇器使用[attr=value]
屬性和多個值的選擇器：使用有兩種情況：屬性值用空格分隔使用<code>：[attr~=value]</code>
屬性值用連字元分隔則使用<code>：[attr|=value]</code>
例如：把包含 title='hello' 的元素的字型設定為綠色，使用 ~ 分隔屬性和值
表單樣式：屬性選擇器在為不帶有 class 或 id 的表單設定樣式時特别有用。例如：
後代選則器：又稱為包含選擇器，以空格分隔，子元素選擇器隻能選擇作為某元素子元素的元素。
子元素選擇器：子元素選擇器隻能選擇作為某元素子元素的元素，以 > 分隔，子元素選擇器隻能選擇作為某元素子元素的元素。
相鄰兄弟選擇器：可選擇緊接在另一進制素後的元素，且二者有相同父元素，以 + 分隔。
普通相鄰兄弟選擇器：選取所有指定元素的相鄰兄弟元素，以 ~ 分隔。
選擇器組合：多種選擇器可以結合起來使用。
css 僞類是用來向一些選擇器添加特殊的效果。
在浏覽器中，連結的不同狀态都可以以不同的方式顯示：
注意： 在 css 定義中，a:hover 必須被置于 a:link 和 a:visited 之後，
a:active 必須被置于 a:hover 之後，才是有效的。
選擇作為任何元素的第一個子元素 p。選擇器使用 p:first-child。
選擇所有 p 元素中的第一個子元素 b。選擇器使用 p>b:first-child。
選擇所有作為第一個子元素 p 中的所有 b 元素。選擇器使用 p:first-child b。
使用 :lang 僞類可以為不同的語言定義特殊的規則：
css 僞元素是用來為一些選擇器添加特殊的效果。
css 類也可以使用僞元素：選擇器.class:僞元素{attr:value;}
content 屬性與 :before 及 :after 僞元素配合使用，來插入生成内容，該屬性用于定義元素之前或之後放置的生成内容。
content 的内容一般可以為四種：
content:none 該值是預設值，不插入内容。
content:"string" 插入文本。
content:attr(屬性) 插入标簽屬性值。
content:url(路徑) 使用指定的絕對或相對位址插入一個外部資源，可以是圖像，音頻，視訊或浏覽器支援的其他任何資源。
塊級元素(block-level):每個塊元素通常都會獨自占據一整行或多整行，
可以對其設定寬度、高度、對齊等屬性，常用于網頁布局和網頁結構的搭建。
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标簽是最典型的塊元素。
總是從新行開始
高度，行高，外邊距以及内邊距都是可以控制的
寬度預設是容器的100%
可以容納内聯元素和其他塊元素
行内元素(inline-level):不占有獨立的區域，僅僅靠自身的字型大小和圖像尺寸來支撐結構，
一般不可以設定高度，寬度，對齊等屬性，常用于控制頁面中文本的樣式。
和相鄰行内元素在一行上。
高、寬無效，但水準方向的padding和margin可以設定，垂直方向的無效。
預設寬度就是它本身内容的寬度。
行内元素隻能容納文本或則其他行内元素。（a特殊）
隻有文字才能組成段落，是以p裡面不能放塊級元素，同理還有這些标簽h1,h2,h3,h4,h5,h6,dt，
它們都是文字類塊級标簽，裡面不能放其他塊級元素。
連結裡面不能再放連結。
在行内元素中有幾個特殊的标簽——<img />、<input />、<td>，
可以對它們設定寬高和對齊屬性，有些資料可能會稱它們為行内塊元素。
和相鄰行内元素（行内塊）在一行上,但是之間會有空白縫隙。
高度，行高、外邊距以及内邊距都可以控制。
css層疊性：是指多種css樣式的疊加。
css繼承性：是指書寫css樣式表時，子标簽會繼承父标簽的某些樣式，如文本顔色和字号。
想要設定一個可繼承的屬性，隻需将它應用于父元素即可。簡單了解就是： 子承父業。
css優先級：定義css樣式時，經常出現兩個或更多規則應用在同一進制素上，這時就會出現優先級的問題。
使用了 !important聲明的規則。
考慮權重時，需要注意的一些點：
繼承樣式的權重為0。
行内樣式優先。
權重相同時，css遵循就近原則。
盒子模型：就是把html頁面中的元素看作是一個矩形的盒子，也就是一個盛裝内容的容器。
每個矩形都由元素的内容、内邊距（padding）、邊框（border）和外邊距（margin）組成。
盒子邊框（border）
1 外邊距實作盒子居中
滿足兩個條件：
必須是塊級元素。
盒子必須指定了寬度（width）
然後給元素左右的外邊距都設定為auto。
2 文字盒子居中
文字水準居中是 text-align: center
盒子水準居中 左右margin 改為 auto
按照優先使用寬度 （width）、其次 使用内邊距（padding）、再次 外邊距（margin）。
width > padding > margin
原因：
margin 會有外邊距合并 還有 ie6下面margin 加倍的bug，是以最後使用。
padding 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。
width 沒有問題，我們經常使用寬度剩餘法 高度剩餘法來做。
浮動：是指設定了浮動屬性的元素會脫離标準普通流的控制，移動到其父元素中指定位置的過程。
文法：選擇器{float:屬性值;} 屬性值可以是left，right，both，none。
目的：為了讓多個塊級元素同一行上顯示。
-static：自動定位（預設定位方式），所謂靜态位置就是各個元素在html文檔流中預設的位置。
relative：相對定位，相對定位是将元素相對于它在标準流中的位置進行定位
absolute：絕對定位，相對于其上一個已經定位的父元素進行定位
fixed：固定定位，相對于浏覽器視窗進行定位。它的特點在于它的元素跟父親沒有任何關系，隻認浏覽器；
完全脫标，不占有位置，不随着滾動條滾動。
z-index的預設屬性值是0，取值越大，定位元素在層疊元素中越居上。
如果取值相同，則根據書寫順序，後來居上。
後面數字一定不能加機關。
隻有相對定位，絕對定位，固定定位有此屬性，其餘标準流，浮動，靜态定位都無此屬性，亦不可指定此屬性
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)