CSS選擇器優先級：從高到低

• 無條件優先的屬性只需要在屬性后面使用！important，但是IE6不支持。解決辦法，IE6是單個支持的。
  例如：
  在IE6中需要這樣寫

.className{color:gray!important}
.className{color:red;}這樣可以

color:gray !important;/*IE6將不會將文本顯示為灰色(gray)*/
color:red;這樣不支持

• 第二高位的是內聯樣式，在html標簽中添加style元素
• id選擇器，id名稱區分大小寫，并且不可以結合使用多個id選擇器詞組
• 類選擇器，類名不區分大小寫，可以結合使用多個類名詞組
• 標簽選擇器也叫元素選擇器，類型選擇器。

屬性選擇器
根據屬性名稱選擇
*[title] a[href] a[href][title]
根據具體屬性值選擇
a[href=”XXX”] a[href=”XXX”] [title=”XX”]
根據部分屬性值選擇
p[class~=”XX”]
子串匹配屬性選擇器
a[href^=”abc”] a[href$=”abc”] a[href*=”abc”]
特定屬性類型選擇器
*[lang|=”en”]{}值包含en或者以en開頭的元素。
結合后代選擇器和子選擇器
table.commen td>p{}
表示類名為commen的table元素中的td元素中的子元素p的樣式設置。
相鄰兄弟選擇器
p+h1{}
為緊著的p的h1元素設置樣式，h1和p為共同父元素的子元素。并且“+”只能選擇兩個相鄰兄弟元素中的第二個元素。

---

用CSS添加背景（背景顏色和圖片）

給body添加背景圖片
body{background-image:url(“image.gif”)}
背景圖片占據的元素的全部尺寸，包括內邊距和邊框，但是不包括外邊距。默認位于元素左上角，并能在水平和垂直方向上重復。
提示：請設置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可獲得良好的視覺效果。

添加背景顏色
background-color：yellow;
將所有的背景顏色背景圖片樣式寫在同一個聲明中
background: #ff0000 url(/i/eg_bg_03.gif) fixed center no-repeat ;

---

CSS文本

text-indent:第一行文本縮進，可以是負值。常用于段落的首行縮進。
注意：一般來說，text-indent屬性可以用在所有的塊元素上，行內元素不可應用，圖像之類的替換元素也無法應用。不過如果一個塊級元素比如段落的首行有個圖像，這個圖像也會隨著其余文本移動。
如果想把行內元素的首行縮進怎么辦？
提示：可以用左內邊距和外邊距來創造這種效果。
使用負值：
如果對一個段落設置了負值，那么首行的某些文本可能會超出瀏覽器窗口的左邊界。為了避免出現這種顯示問題，建議針對負縮進再設置一個外邊距或一些內邊距：
p {text-indent: -5em; padding-left: 5em;}
可以使用所有長度單位，包括百分比值
百分數相對于父元素寬度的百分之幾來縮進。在下例中，縮進值是父元素的 20%，即 100 個像素：
div {width: 500px;} p {text-indent: 20%;}
<div> <p>this is a paragragh</p> </div>
繼承：

div#outer {width: 500px;} div#inner {text-indent: 10%;} p {width: 200px;}
<div id="outer"> <div id="inner">some text. some text. some text. <p>this is a paragragh.</p>
</div> </div>

標記中的段落也會縮進 50 像素，這是因為這個段落繼承了 id 為 inner 的 div 元素的縮進值

line-height的應用：
1、把line-height設置成和height一樣大小便可實現文字垂直居中。
2、 line-height設置成百分數和數值的區別？？
例子html結構

設置成百分數，子元素會繼承父元素的line-height
body{font-size：10px; line-height:150%;}字體大小10px，行高15px;
p{font-size:20px;}字體大小20px，但是行高繼承了父元素body變成了15px，就會出現問題。
設置成數值，子元素單獨計算各自的行距
body{font-size：10px; line-height:1.5;} 字體大小10px，行高15px;
p{font-size:20px;}字體大小20px，行高30px.

CSS字體
font：將所有字體屬性寫在同一個聲明之內
例如：font:italic bold 12px/20px arial,sans-serif;
順序：
font-style, font-variant, font-weight, font-size/line-height,font-family

font-style:
值：normal，italic,oblique,inherit(繼承)
其中italic和oblique都是斜體，italic是改變字母結構的傾斜，oblique是單純的把直立的字體斜過來。
font-weight:
值：lighter，normal，bold，bolder,100-900(細—粗)
font-size:
值為：smaller，larger，length，%
設置font-size值為像素值，如font-size：60px;在IE中無法調節文本的大小。
于是，用em單位來代替像素px單位，推薦。
如果一個元素的font-size為16px，那么1em就等于16px.em的值會相對父元素字體的大小而改變。瀏覽器默認文本16px，默認1em為16px。px/16=em.
使用em單位，可以在所有瀏覽器中調整文本大小，但是在IE中仍存在問題，在重設文本時，會比正常的尺寸更大或者更小。
解決方案：綜合使用百分比和em
為body元素（父元素）以百分比設置默認的font-size值：
例如：body{font-size：100%；}
p{font-size:2.5em;}
font-family:
5 種通用字體系列：
Serif 字體
Sans-serif 字體
Monospace 字體
Cursive 字體
Fantasy 字體
使用引號
只有當字體名中有一個或多個空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號，才需要在 font-family 聲明中加引號。
font-family 可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。
提示：使用逗號分割每個值，并始終提供一個類族名稱作為最后的選擇
注意：使用某種特定的字體系列（Geneva）完全取決于用戶機器上該字體系列是否可用；這個屬性沒有指示任何字體下載。因此，強烈推薦使用一個通用字體系列名作為后路。
display: inline、block、inline-block的區別
inline,轉化為行內元素，和其他元素在一行上，高，行高，頂底邊距不可變，水平方向可變。
Block，轉化為塊元素，從新行開始，高度，行高，頂底邊距可以控制。
需要轉換的情況：讓一個inline元素從新行開始；控制inline元素的寬度（導航條的應用）和高度；讓塊元素在同一行；無需設置寬度即可為一個塊元素設定與文字同寬的背景色。
Inline-block：將對象呈現為內聯對象在同一行但是可以設置寬高等塊元素的屬性。

CSS鏈接
鏈接的四種狀態以及書寫順序：
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標指針位于鏈接的上方
a:active - 鏈接被點擊的時刻
CSS列表
List-style屬性
List-style-type，列表項的標記類型
值：none，disc(默認，實心圓)，circle（空心圓），square（方塊），decimal（數字），以及各種數字羅馬拉丁字母等。
ul.circle {list-style-type:circle;}
List-style-image，用圖片做列表項標記
值：URL圖片的路徑。Ul{list-style-image:url("/i/arrow.gif");}
List-style-position
值：inside，outside，inherit。
CSS表格
表格邊框：設置border屬性
table，th，td{border：1px solid blue;}
顯示雙線條邊框
如何顯示單線條邊框？
使用折疊邊框border-collapse屬性
table{border-collapse：collapse；}
表格寬度和高度width：100%；height：50px;
表格文本對齊
td{text-align：top,buttom,center；vertical-align:left,center,right ;}
表格內邊距：為td,th設置padding值
td{padding:5px;}
表格設置顏色：
th,td{background-color:green;color:white;}

CSS框模型
外邊距經常是透明的，可以看到父元素的背景。元素的背景是內容、內邊距和邊框區的背景， 也就是內容的背景會應用到內邊距，邊框如果沒有設置顏色，邊框將取元素內容的前景色，例如，段落的文本是白色，那么段落的所有邊框都是白色。
內邊距和邊框不能是負值，但是外邊距可以是負值。
塊元素在正常的文檔流中時，會在其框之前和之后形成換行，所以正常文檔流中的塊元素會垂直擺放。
行內元素不會在之前或者之后生成行分隔符。

其中，width代表的是整個內容區的寬度，而不是整個可見框的寬度。可見框的寬度=內容區寬度（width）+padding2。整個元素框的寬度=內容區寬度（width）+padding2+border2+margin2.
Padding，border，margin的值是按照上右下左的順序設置的；設置兩個值，上下、右左；設置三個值，上、右左、下。
padding:
可以按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
如果將內邊距的值設置為百分比值，那么其數值是相當于其父元素的width值計算的。
例如：如果一個段落的父元素是 div 元素，那么它的內邊距要根據 div 的 width 計算。
<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>
注意：上下內邊距與左右內邊距一致；即上下內邊距的百分數會相對于父元素寬度設置，而不是相對于高度。
border:
默認的邊框顏色是元素本身的前景色。如果沒有為邊框聲明顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設它是一個表格，其中只包含圖像，那么該表的邊框顏色就是其父元素的文本顏色（因為 color 可以繼承）。這個父元素很可能是 body、div 或另一個 table。
把所有的邊框屬性寫在同一個聲明之內，如：
p{border:5px solid red;} border-width，border-style，border-color
border-style，設置邊框樣式
值：none（無），dotted(點)，dashed（虛線），solid（實線），double(雙線)，groove（3D凹槽），ridge（3D壟斷框），inset（3Dinset邊框），outset（3Doutside邊框）。
border-width,設置邊框寬度
值：thin，medium，thick，length，inherit。
border-color:設置邊框顏色
值：color_name,rgb,十六進制，transparent透明，inherit。
同樣，border-top,border-right,border-bottom,border-left也可以同樣設置style，width，color三種屬性，如border-top-style：solid；
margin：外邊距
值：auto length % inherit
其中百分數的設置是基于父元素的寬度設置的百分比
外邊距的合并疊加：
第一種情況：當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并；

第二種情況：當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并，合并的外邊距為高度中的較大者。

注釋：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并、

CSS定位
position屬性
值：
static：默認值，正常文檔流，不受top, bottom, left, right 或者 z-index 限制。
absolute:生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位，脫離正常文檔流。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定
絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊
提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index 屬性來控制這些框的堆放次序。

relative：生成相對定位元素，相對于正常文檔流位置進行定位，沒有脫離正常文檔流。
注意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。

fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
inherit：繼承父元素的定位屬性。
left right top buttom屬性(略)
overflow屬性：
值：
visible：默認值，元素內容不會被修剪，會呈現在元素之外。
hidden：元素內容會被修剪，修剪內容不可見。
scroll：內容會被修剪，并以滾動條形式顯示,內容沒有超出也會顯示滾動條。
auto，如果有內容被修剪，便會以滾動條形式顯示，沒有超出便正常顯示
inherit：繼承父元素的overflow屬性。
clip vertical-align屬性(略)
z-index屬性：設置元素的堆疊順序，值為正數在上離用戶更近，負數在下離用戶更遠。
CSS浮動
浮動的框可以向左或向右浮動，脫離正常的文檔流，直到它的外邊緣遇到包含框或者另一個浮動框的邊框為止停止浮動。由于脫離了文檔流，正常文檔流中的框會取代它原始的位置。
第一種：當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：

第二種，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

第三種，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：

行框和清理：
一個div中包含兩個浮動的塊元素，由于塊元素浮動脫離了文檔流，所以兩個塊元素并不能包含到div中，那么怎么樣使一個div包含兩個浮動元素？？。
法一：再在div中添加一個div用于清除浮動
.news { background-color: gray; border: solid 1px black; }
.news img { float: left; }
.news p { float: right; }
.clear { clear: both; }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

法二：就是對最外層的div也設置左浮動。推薦。
.news { background-color: gray; border: solid 1px black; float: left; }
.news img { float: left; }
.news p { float: right; }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

轉載于:https://www.cnblogs.com/this-xiaoming/p/5688465.html

總結

以上是生活随笔為你收集整理的CSS基本的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。