CSS
一、CSS概述
CSS是Cascading Style Sheets的簡稱，中文稱為層疊式樣式表，用來控制網頁數據的表現，可以使網頁的表現與數據內容分離。
學CSS后我們需要掌握的技能：
1、怎么找到標簽(選擇器)
2、如何操作標簽對象(element)
二、CSS的四種引入方式
2.1 行內式
>hello simon
2.2 嵌入式
嵌入式是將CSS樣式集中寫在網頁的標簽對的 標簽對中。格式如下：
Title
2.3 鏈接式
將style.css文件引入到HTML文件中
Title
2.4 導入式
將獨立的style.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，
?注意：
導入式會使整個網頁加載完后再裝載CSS文件，因此會導致一個問題，如果網頁比較大則會出現先顯示無樣式的頁面，閃爍一下之后，在出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時會與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果，它不會像導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點所在。
三、CSS的選擇器(selector)
3.1 基礎選擇器
＊ ： 通用元素選擇器，匹配任何元素 * { margin:0; padding:0; }
E ： 標簽選擇器，匹配所有使用E標簽的元素 p { color:green; }
.info和E.info: class選擇器，匹配所有class屬性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }
#info和E#info id選擇器，匹配所有id屬性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; }
代碼如下：
Title
hello zhurui
hello div
pppp
ppppp
pppppp
ppppppp
aaaa
3.2 組合選擇器
E,F 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔 div,p { color:#f00; }
E F 后代元素選擇器，匹配所有屬于E元素后代的F元素，E和F之間用空格分隔 li a { font-weight:bold;
E > F 子元素選擇器，匹配所有E元素的子元素F div > p { color:#f00; }
E + F 毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F div + p { color:#f00; }
Title
hello zhurui
hello div
pppp
ppppp
朱銳是帥哥
朱銳是simon
ppppppp
aaaa
simon div before
after div1
after div1 p
效果展示：
?注意嵌套規則：
1、塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其他內聯元素。
2、有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,
3、li內可以包含div
4、塊級元素與塊級元素并列、內聯元素與內聯元素并列。
3.3 屬性選擇器
E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att屬性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素 td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配屬性值以指定值開頭的每個元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}
?
Title
zhurui
zhurui
zhurui
zhurui
3.4 偽類(Pseudo-classes)
?CSS偽類是用來給選擇器添加一些特殊效果
author偽類:專用于控制鏈接的顯示效果
a:link（沒有接觸過的鏈接）,用于定義了鏈接的常規狀態。
a:hover（鼠標放在鏈接上的狀態）,用于產生視覺效果。
a:visited（訪問過的鏈接）,用于閱讀文章，能清楚的判斷已經訪問過的鏈接。
a:active（在鏈接上按下鼠標時的狀態）,用于表現鼠標按下時的鏈接狀態。
偽類選擇器 : 偽類指的是標簽的不同狀態:
a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; }
?代碼如下：
Title
hello-world
hello simon
補充：
.outer:hover .right{color: red}
before after 偽類 ：
:before p:before 在每個
元素之前插入內容
:after p:after 在每個
元素之后插入內容
p:before 在每個
元素的內容之前插入內容 p:before{content:"hello";color:red}
p:after 在每個
元素的內容之前插入內容 p:after{ content:"hello"；color:red}
3.5 CSS優先級和繼承
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 style=""------------------- 1000；
2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－ 100
3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－ 10
4 統計選擇符中的HTML標簽名個數。 p －－－－－－－－－－－－－- 1
按這些規則將數字符串逐位相加，就得到最終的權重，然后在比較取舍時按照從左到右的順序逐位比較。
Title
嵌套優先級
繼承是CSS的一個主要特征，它是依賴于祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的后代。例如一個BODY定義了的顏色值也會應用到段落的文本中。
body{color:red;}
helloyuan
這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。
p{color:green}
發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式。
? ? ? 此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
?附加說明：
1、文內的樣式優先級為1,0,0,0，所以始終高于外部定義。這里文內樣式指形如
ppppp
ppppp
ppppp
ppppp
4.2 字體屬性
font-size: 20px/50%/larger
font-family:'Lucida Bright'
font-weight: lighter/bold/border/
朱銳
4.3 背景屬性
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平鋪滿)
background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)
簡寫：
注意：如果將背景屬性加在body上，要記得給body加上一個height，否則結果異常，這是因為body為空，無法撐起背景圖片；另外，如果此時要設置一個width＝100px，你也看不出效果，除非你設置出html。
?
Title
Title
4.4 文本屬性
font-size: 10px;
text-align: center; 橫向排列
line-height: 200px; 文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基于字體大小的百分比
vertical-align:－4px 設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效
text-indent: 150px; 首行縮進
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;
范例：
Title
文本屬性文本屬性文本屬性文本屬性文本屬性文本屬性本屬性文本屬性文本屬性文本屬性本屬性文本屬性文本屬性文本屬性本屬性文本屬性文本屬性文本屬性
hello zhurui hellosimon hello zhurui hellosimonhello zhurui hellosimonhello zhurui hellosimon
4.5 邊框屬性
border-style: solid;
border-color: chartreuse;
border-width: 20px;
簡寫：border: 30px rebeccapurple solid;
代碼如下：
Title
4.6 列表屬性
ul,ol{ list-style: decimal-leading-zero;
list-style: none;
list-style: circle;
list-style: upper-alpha;
list-style: disc; }
代碼展示：
Title
-
111
-
222
-
333
-
111
-
222
-
333
-
江蘇省
-
南京
-
蘇州
-
無錫
效果展示：
4.7 display屬性
none
block
inline
display:inline-block可做列表布局，其中的類似于圖片間的間隙小bug可以通過如下設置解決：
樣式代碼如下：
4.8 外邊距和內邊距
1、margin:? ? 用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
2、
padding:? 用于控制內容與邊框之間的距離；? ?
3、
Border(邊框) ? ? 圍繞在內邊距和內容外的邊框。
4、
Content(內容) ? 盒子的內容，顯示文本和圖像。
元素的寬度和高度:
重要:
?當您指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，完全大小的元素，你還必須添加填充，邊框和邊距。
margin:10px 5px 15px 20px;-----------上 右 下 左
margin:10px 5px 15px;----------------上 右左 下
margin:10px 5px;---------------------上下 右左
margin:10px; ---------------------上右下左
下面的例子中的元素的總寬度為300px：
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Title
hello div1
hello div2
?
思考1:
? ? ? ?邊框在默認情況下會定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因為body本身也是一個盒子（外層還有html），在默認情況下， ? body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器窗口的邊框了，為了驗證這一點，加上：
body{
border: 1px solid;
background-color: cadetblue;
}
>>>>解決方法：
body{
margin: 0;
}
思考2：
? ? ? ?margin collapse（邊界塌陷或者說邊界重疊）
? ? ? ?外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段 ? ? 落P）時，那么塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。又比如停車場
? ? ? ?1兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值
? ? ? ?2父子div ???
? ? ? ? ? ? ? ?
if ?父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content? ?中的其中一個，然后按此div 進行margin?；
?
Title
解決方法：
1: border:1px solid transparent
2: padding:1px
3: over-flow:hidden;
五、float屬性
先來了解一下block元素和inline元素在文檔流中的排列方式。
block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效。inline元素的margin和padding屬性。水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
- 常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
? ?? ?
所謂的文檔流 ，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
脫離文檔流 ，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候， 會當做脫離文檔流的元素不存在而進行定位 。
只有絕對定位absolute和浮動float才會脫離文檔流。
? ???---部分無視和完全無視的區別？需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍(可以說是部分無視)。而對于使用absolute position脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。(可以說是完全無視)
浮動的表現
? ? ? 定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的浮動框之后的塊框表現得就像浮動框不存在一樣。（注意這里是塊框而不是內聯元素；浮動框只對它后面的元素造成影響）
注意 當初float被設計的時候就是用來完成文本環繞的效果，所以文本不會被擋住，這是float的特性，即float是一種不徹底的脫離文檔流方式。 無論多么復雜的布局，其基本出發點均是：“ 如何在一行顯示多個div元素 ”。
現象1:
? ? ? 假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之后的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。?浮動的框之后的inline元素，會為這個框空出位置，然后按順序排列。
現象2:
(1)左右結構div盒子重疊現象，一般是由于相鄰兩個DIV一個使用浮動一個沒有使用浮動。如上面的例1：相鄰的兩個盒子box2向左浮動、box3未浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內容不會照成覆蓋現象，只有DIV形成覆蓋現象。
解決方法：要么都不使用浮動；要么都使用float浮動；要么對沒有使用float浮動的DIV設置margin樣式。
(2)上下結構div盒子重疊現象
Title
box1 向左浮動
box2 向右浮動
box3
例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第一個大盒子里的子元素使用了浮動，脫離了文檔流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。
解決方法：
1、要么給.container設置固定高度，一般情況下文字內容不確定多少就不能設置固定高度，所以一般不能設置“.container”高度(當然能確定內容多高，這種情況下“.container是可以設置一個高度即可解決覆蓋問題。
2、要么清除浮動。
清除浮動：
在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
clear語法：
clear : none | left | right | both
取值：
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素。如果一個元素的右側有一浮動對象，而這個元素設置了不允許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。
方式1(推薦):
.clearfix:after { <----在類名為“clearfix”的元素內最后面加入內容；
content: "."; <----內容為“.”就是一個英文的句號而已。也可以不寫。
display: block; <----加入的這個元素轉換為塊級元素。
clear: both; <----清除左右兩邊浮動。
visibility: hidden; <----可見度設為隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然占據空間，只是看不到而已；
line-height: 0; <----行高為0；
height: 0; <----高度為0；
font-size:0; <----字體大小為0；
}
.clearfix { *zoom:1;} <----這是針對于IE6的，因為IE6不支持:after偽類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹內部元素。
整段代碼就相當于在浮動元素后面跟了個寬高為0的空div，然后設定它clear:both來達到清除浮動的效果。?
之所以用它，是因為，你不必在html文件中寫入大量無意義的空標簽，又能清除浮動。?
話說回來，你這段代碼真是個累贅啊，這樣寫不利于維護。?
只要寫一個.clearfix就行了，然后在需要清浮動的元素中 添加clearfix類名就好了。?
如：
方式2：
overflow:hidden;
overflow ：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什么位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
?六、position(定位)
1 static
static 默認值，無定位，不能當作絕對定位的參照物，并且設置標簽對象的left、top等值是不起作用的的。
2 ?position: relative／absolute
? ?? relative ?相對定位。相對定位是相對于該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據文檔流空間 。對象遵循正常文檔流， 但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
? ? absolute? 絕對定位。
? ? ? 定義：設置為絕對定位的元素框從文檔流完全刪除，并相對于最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。
? ? ? 另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
總結：參照物用相對定位，子元素用絕對定位，并且保證相對定位參照物不會偏移即可。
3 ?position:fixed
? ? ? ? fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
? ? ? ?在理論上，被設置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。
4? 僅使用margin屬性布局絕對定位元素
此情況，margin-bottom 和margin-right的值不再對文檔流中的元素產生影響，因為該元素已經脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。??
圖9中，使用margin屬性布局相對定位元素。
層級關系為：
Title
>
>
返回頂部
七、總結
7.1?inline-block 的間隙
inline-block默認的空格符就是標簽與標簽之間的空隙造成的。
(1) 我們可以通過margin:-3px來解決，但是
1.我們布局肯定很多元素，不可能每個都添加margin負這樣維護成本太大了
2.我們線上代碼如果壓縮，那么我們就不存在哪個4px的問題了，那么我們的margin負就回造成布局混亂！
(2)我們可以給幾個標簽加一個父級div，然后：
div{word-spacing: -5px;}
7.2 快捷鍵
div tab
a tab
div.main>ul>li.c*4 tab
div.div*4 tab
?
?
你可能感興趣的
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
