CSS心得
<pre>
最近對CSS的使用有一些小心得，在此寫下來給大家分享分享 喉前。最后附上選擇器的實例代碼。
------DanlV
</pre>
CSS是什么
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應(yīng)用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁续扔，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化昧识。
百度百科
CSS三種使用方式
1.style屬性 如： <div style="width:300px">
2.style標簽 如：
#id .class html {
color: red;
}
3.link標簽引入外部單獨的css文件
TIPS：在實際的開發(fā)中钠四，推薦使用第三種方式，能夠很好的實現(xiàn)結(jié)構(gòu)與樣式分離跪楞。
CSS選擇器
css分為基礎(chǔ)選擇器和綜合選擇器
基礎(chǔ)選擇器
- html 標簽選擇器 如
p { .....}
1.通過標簽名當(dāng)做選擇器來使用
2.無論標簽藏的多深缀去，都可以被選中
3.選擇的是所有的標簽，而不是具體某個標簽甸祭，通常情況下缕碎，通過標簽選擇器設(shè)置的是共性的問題 - id選擇器 #id名 如
#div1 {....}
1.id的名字是唯一的
2.任何的標簽都可以具有id屬性(id是全局屬性)。大小寫敏感(#test 和 #TEST 是兩個完全不同的id) - class選擇器 .class名 如
.class {...}
1.class屬性名可以重復(fù)使用
2.任何的標簽都可以具有class屬性(class也是全局屬性)
3.class的值可以有多個<h1 class="test logo h1"></h1> - 通配符 * 如
*{....}選擇所有標簽池户，能少用就少用咏雌，會拖慢網(wǎng)頁的速度
命名法：給元素設(shè)置id(設(shè)置class也可以使用)的時候，可以采用駝峰命名法 :
1.小駝峰命名法,首單詞不大寫校焦，后面的單詞首字母都大寫 如 testHeaderLogImage
2.大駝峰命名法赊抖，所有單詞首字母都大寫
綜合選擇器
- 后代選擇器 div p 選中的是div 里面的p標簽，如
div p {...} - 交集選擇器 div.d1
- 子元素選擇器 div>p ,這是css3新出現(xiàn)的寨典。
- 并集選擇器 div熏迹，p使用‘，’隔離
- 序列選擇器：first-child :last-child
- 相鄰兄弟選擇器 div + p,選取緊挨著的后面的兄弟節(jié)點
- 普通兄弟選擇器 div ` p(使用反引號),選取div元素后面出現(xiàn)的所有p兄弟節(jié)點
繼承和層疊
繼承和層疊是css極為重要的內(nèi)容凝赛。
繼承
父元素擁有了某個css屬性注暗，子元素在不需要任何條件的情況下都會擁有父元素的屬性坛缕。
子元素并不能夠全部繼承父元素的css，可以繼承的css屬性具有以下特點：
color text- line- font- 都是跟文字屬性相關(guān) 這些關(guān)于文字樣式的捆昏，都能夠繼承赚楚； 所有關(guān)于盒子的、定位的骗卜、布局的屬性都不能繼承宠页。
層疊
層疊是CSS處理沖突的一種解決方案。需要通過計算權(quán)重來解決層疊的問題寇仓。
解決層疊問題通過權(quán)重由選擇器中id class html 的出現(xiàn)次數(shù)來判斷權(quán)重,如：
#b1 .h2 p {
color:red;
}
div div #b3 p {
color: blue;
}
s
div.h1 div.h2 dov.h3 p {
color: yellow;
}
第一個選擇器id class html出現(xiàn)的次數(shù)分別為1 1 1
第一個選擇器id class html出現(xiàn)的次數(shù)分別為1 0 3
第一個選擇器id class html出現(xiàn)的次數(shù)分別為0 3 4
計算權(quán)重的步驟：
1.先比較id次數(shù)的大小举户，相同比較class次數(shù)的大小，若相同則比較html次數(shù)的大小
2.如果權(quán)重一樣遍烦，name后出現(xiàn)的會覆蓋先前出現(xiàn)的
3.看看一下是否直接選中目標元素俭嘁，如果沒有直接選中目標元素，name他的權(quán)重為0
4.如果都沒有選中服猪，那么誰離目標元素近就聽誰的
總結(jié)：
- 先看有沒有選中目標元素供填，如果選中，比權(quán)重罢猪，誰大聽誰的近她。如果權(quán)重一樣，誰寫在后面聽誰的
- 如果沒有選中膳帕，權(quán)重為0.如果所有的選擇器權(quán)重都為0粘捎，就近原則
TIPS:!important 能夠把權(quán)重變?yōu)闊o限大。但是存在缺點：只能夠作用在單個屬性上危彩。盡量少用攒磨。
p {
color: red !important;
font-size: 100px;
}
.lv {
color: green;
font-size: 10px;
}
.lan {
color: blue;
font-size: 20px;
}
只能作用在單個屬性，p{...}中只有color屬性能起作用恬砂，而font-size則不起作用咧纠。但是不推薦使用此方法來改變權(quán)重蓬痒，會引起權(quán)重計算失效和不方便維護泻骤。
行內(nèi)元素和塊級元素
- 塊級元素的特性：
- 自己霸占一行 ，不能與其他元素并列顯示
- 可以設(shè)置寬度和高度
- 如果不設(shè)置寬度梧奢，塊級元素會默認沾滿整個父元素的寬
- 行內(nèi)元素的特性：
- 能夠與其他的行內(nèi)元素并排顯示
- 不能夠設(shè)置寬度和高度狱掂，寬度是內(nèi)容的寬度与柑，高度是內(nèi)容的高度旅急。
