Css的一些總結
1. CSS
1.1. 行內元素、塊級元素
1.1.1. 元素的類型
CSS中將元素分為行內元素和塊級元素，他們都各自有各自的特點和行為習慣。
div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”，也稱為塊級元素。在布局頁面時，塊級元素獨占一行。
與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”，也稱為行內元素。在布局頁面時，行內元素不會獨占一行。同時垂直內邊距、邊框和外邊距不影響行內框的高度。
可以通過display屬性修改框的類型。
1.2. CSS概述
1.2.1. CSS是什麽
CSS是層疊樣式表（Cascading Style Sheets）用來定義網頁的顯示效果。可以解決html代碼對樣式定義的重復，提高了後期樣式代碼的可維護性，並增強了網頁的顯示效果功能。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。
1.2.2. 組織網頁的兩種常用方式
組織網頁結構主要有兩種方式：
表格嵌套表格
DIV+CSS
早期的網頁都是表格套表格的方式實現的，這種方式對於比較簡單的頁面效果尚可，一旦頁面稍微復雜一些，使用起來就十分的麻煩，現階段的大部分網頁都主要使用DIV+CSS的方式，只在局部使用表格嵌套方式
1.3. 引入CSS的方式
1.3.1. Style屬性方式
利用標簽中style屬性來改變每個標簽的顯示樣式。
例：
<p style="background-color:#FF0000; color:#FFFFFF">
p標簽段落內容。
</p>
該方式比較靈活，但是對於多個相同標簽的同一樣式定義比較麻煩，適合局部修改。
1.3.2. Style標簽方式
在head標簽中加入style標簽，對多個標簽進行統一修改。
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>
該方式可以對單個頁面的樣式進行統一設置，但對於局部不夠靈活。
1.3.3. 鏈接方式
通過head標簽中link標簽來實現，前提也是先要有一個已定好的CSS文件。
例：
<link rel="stylesheet"type="text/css" href="css_3.css" media="screen" />
註：可以通過多個link標簽鏈接進來多個CSS文件。重復樣式以最後鏈接進來的CSS樣式為準。
1.3.4. 引入方式的優先級
由上到下，由外到內。優先級由低到高。
1.4. CSS代碼格式
1.4.1. css代碼格式
選擇器名稱 { 屬性名：屬性值1 ; 屬性值2 屬性值3 ；屬性名：屬性值；…….}
屬性與屬性之間用 分號 隔開
屬性與屬性值直接按用 冒號 連接
如果一個屬性有多個值的話，那麽多個值用 空格 隔開。
1.5. CSS基本選擇器
1.5.1. html標簽名選擇器
html標簽名選擇器。使用的就是html的標簽名
div｛
color:red;
｝
*{
Color:red;
}
1.5.2. class選擇器
class選擇器。其實使用的標簽中的class屬性。格式為 .class名
.aaa{
color:red;
}
<div class=”aaa”>hahahaha</div>
1.5.3. id選擇器
id選擇器。其實使用的是標簽的中的id屬性。格式為#id名
#bbb{
color:red;
}
<div id=”bbb”>hehehe</div>
1.6. CSS擴展選擇器
1.6.1. 後代選擇器
選擇父選擇器選中的元素中符合子選擇器的子孫元素，可以用此選擇器。
例：
p { color:#00FF00;}
p b { color:#FF000;}
<p>P標簽<b>劉德華</b><a href=”#”><b>段落</b>樣式</a></p>
<p>P標簽段落</p>
1.6.2. 子元素選擇器
選擇父選擇器選中的元素中符合子選擇器的子元素，可以用此選擇器。
與後代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。
h1 > strong {color:red;}
這個規則會把第一個 h1 下面的兩個 strong 元素變為紅色，但是第二個 h1 中的 strong 不受影響：
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>
This is <em>really <strong>very</strong></em> important.
</h1>
1.6.3. 分組選擇器
對多個不同選擇器進行相同樣式設置的時候應用此選擇器。
例：
p,div { color:#FF0000;}
<p>P標簽顯示段落。</p>
<div>DIV標簽顯示段落</div>
註：多個不同選擇器要用逗號分隔開。
1.6.4. 屬性選擇器
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
如果您希望把包含屬性（title）的所有元素變為紅色，可以寫作：
*[title] {color:red;}
與上面類似，可以只對有 href 屬性的錨（a 元素）應用樣式：
a[href] {color:red;}
為了將同時有 href 和 title 屬性的 HTML 超鏈接的文本設置為紅色，可以這樣寫：
a[href][title] {color:red;}
假設只希望選擇 moons 屬性值為 1 的那些 planet 元素：
planet[moons="1"] {color: red;}
上面的代碼會把以下標記中的第二個元素變成紅色，但第一個和第三個元素不受影響：
<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>
1.6.5. 相鄰兄弟選擇器
如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。
h1 + p {margin-top:50px;}
1.6.6. 偽元素選擇器
其實就在html中預先定義好的一些選擇器。稱為偽元素。是因為CSS的術語。
格式：標簽名：偽元素。類名 標簽名。類名：偽元素。都可以。
a:link 超鏈接未點擊狀態。
a:visited 被訪問後的狀態。
a:hover 光標移到超鏈接上的狀態（未點擊）。
a:active 點擊超鏈接時的狀態。
1.7. 盒子模型(了解)
1.7.1. 盒子模型概述
如果你了解盒子模型（box model）的概念，了解它是如何決定一個元素的最終尺寸的話，會有助於你理解一個元素如何在頁面上定位的，只有很好地掌握了盒子模型的概念，才能真正地控制好頁面中的各個元素的位置。
CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
如圖-2所示：
圖-2
在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置為 70 像素，如圖-3所示:
圖-3
1.7.2. padding
padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值，但不允許使用負值。
如果設置一個值，則上下左右內邊距都取該值。
如果設置兩個值，則第一個值為上下邊距，第二個值為左右邊距。
如果設置三個值，則第一個值為上邊距，第二個為左右邊距，第三個為下邊據。
如果設置四個值，則按照上右下左邊距取值，即按順時針方向取值。
可以為元素的內邊距設置百分數值。百分數值是相對於其父元素的 width 計算的。所以，如果父元素的 width 改變，它們也會改變。
也可以通過如下屬性單獨設置上右下左內邊距。
padding-top：上內邊距
padding-right：右內邊距
padding-bottom：下內邊距
padding-left：左內邊距
1.7.3. margin
圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的“空白”。
設置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。
屬性接受任何長度單位，可以是像素、英寸、毫米或 em。
可以設置為 auto。
百分數是相對於父元素的 width 計算的。
多值設置規則和Padding相同。
也可以通過如下屬性當杜設置上右下左外邊距。
margin-top：上外邊距
margin-right: 右外邊距
margin-bottom: 下外邊距
margin-left: 左外邊距
1.7.4. border
元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。
CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。
border-style:定義邊框樣式
border-top-style
border-right-style
border-bottom-style
border-left-style
邊框樣式的值可以設置為:dotted(點狀) solid(實線) double(雙線) dashed(虛線)
border-width：邊框寬度
border-top-width
border-right-width
border-bottom-width
border-left-width
border-color：邊框顏色
border-top-color
border-right-color
border-bottom-color
border-left-color
註意，如果邊框樣式設置為none，那麽無論設置多少寬度真實值都為0，即不可見也不占用空間。
1.8. Display
1.8.1. Display屬性詳解
設置元素的顯示方式。
我們知道元素分為行內元素和塊級元素，而display屬性可以修改元素的顯示方式。
如圖-1所示：
圖-1
*visibility也可以實現隱藏，不同的是display不顯示，也不占用空間，而visibility隱藏，但是空間仍然占用。
1.9. 其他CSS屬性
1.9.1. 其他CSS屬性
對齊方式
text-align
設置或檢索對象中文本的對齊方式。
取值:
left(左對齊,默認值) right(右對齊) center(居中對齊) justify(兩端對齊)
列表屬性
list-style
設置列表項目相關樣式
list-style-position
設置或檢索作為對象的列表項標記如何根據文本排列。
list-style-type
設置或檢索對象的列表項所使用的預設標記。
字體設置
font
字體設置, 這是一個復合屬性, 可以依次按序設置如下屬性,也可以單獨設置
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font-style
斜體設置
font-weight
字體粗細
font-size
字體大小
color
字體顏色
font-family
字體設置
text-decoration
字體下劃線
text-underline-position
下劃線位置
line-height
行高。即字體最底端與字體內部頂端之間的距離。
寬高設置
height
高度
width
寬度
背景設置
background,這是一個復合屬性, 可以依次設置如下屬性, 也可以單獨設置
background : background-color || background-image || background-repeat || background-attachment || background-position
背景設置
background-color
背景色設置
background-image
背景圖片設置
background-repeat
設置或檢索對象的背景圖像是否及如何鋪排
background-position
設置或檢索對象的背景圖像位置
Css的一些總結