DIV+CSS規(guī)則整理
在焦作等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),成都營銷網(wǎng)站建設(shè),外貿(mào)營銷網(wǎng)站建設(shè),焦作網(wǎng)站建設(shè)費用合理。
一、善用css縮寫規(guī)則
/*注意上、右、下、左的書寫順序*/
1. 關(guān)于邊距（4邊）：
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px （省略的左等于右）
1px 2px (省略的上等于下)
1px （四邊都相同）
2. 簡化所有：
*/ body{margin:0}------------表示網(wǎng)頁內(nèi)所有元素的margin為0
#menu{ margin:0}------------表示menu盒子下的所有元素的margin為0
3. 縮寫（border）特定樣式：
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;
4. 關(guān)于文字的縮寫規(guī)則：
Font-style:italic; 斜體形式
Font-variant:small-caps/normal; 變體樣式：小型大寫字母/正常
Font-weight:bold;
Font-size:12px;
Line-height:1.2em(120%)/1.5em(150%);
Font-family:arrial,sans-serif,verdana;
縮寫成：
Font:italic small-caps bold 12px/1.5emarrial,sans-serif;
注意：Font-size和Line-height用斜杠組合在一起不能分開寫。
5. 關(guān)于背景圖片的：
Background:#FFF url(log.gif) no-repeatfixed top left;
6. 關(guān)于列表：
List-style-type:square/none;
List-style-position:inside;
List-style-image:url(filename.gif);
縮寫成：
List-style:none inside url(filename.gif)
二、運(yùn)用4種方法來引入CSS樣式
1.link
link rel=”stylesheet” type=”text/css”href=”a.css”
rel 關(guān)系
type 數(shù)據(jù)類型,有多種
href 路徑
部分瀏覽器支持候選樣式,關(guān)鍵字:alternate:
link rel=”stylesheet” type=”text/css”href=”a.css”
link rel=”alternate stylesheet”type=”text/css” href=”b.css”
link rel=”alternate stylesheet”type=”text/css” href=”c.css”
2.內(nèi)部樣式塊
style
!–
h1{color:red;}
–
/style
3.@import
@import url{a.css}
注意:此指令必須放在style容器中,并且在所有樣式之前
建議放在一個html注釋中,!– –瀏覽器會不顯示注釋內(nèi)的內(nèi)容,而import等css代碼能正常工作
4.內(nèi)聯(lián)樣式
p style=”color:red;”
選擇器是css的一個基本概念，基本規(guī)則如下：
1.規(guī)則結(jié)構(gòu)：
h1 {color:red;}
選擇器 {屬性:值;}
這類是元素選擇器，基本可以包括所有html的元素
屬性值可以包括多個元素，如：border：1px solid red;
常用語法
1)分組：
選擇器和聲明都可以分組:
h1,h2,h3{color:red;background:#fff;} ,選擇器用“,”分割開,屬性用”;”分割
2)類選擇器,即通過class=”stylename”應(yīng)用的聲明
定義:
.stylename{color:red;}
注意:
在html中可以使用多類選擇:如class=”cn1 cn2 cn3″
3)ID選擇器,即與id屬性對應(yīng)的樣式
定義:
#a{color:red;} -這個定義對用id=”a”的元素
2.這部分都是我們常見的css語法，下面談一下我們不常見的選擇器語法
1)父子結(jié)構(gòu),跟文檔結(jié)構(gòu)圖對應(yīng)
如p span{border:1px solidred;}對應(yīng)的是p下面的li標(biāo)簽,這個很用用途,可以準(zhǔn)確定位.
一些特殊應(yīng)用(IE7支持):
(1) p span{},匹配所有p下所有的span
(2) p + span{} ,匹配緊接著p元素后出現(xiàn)的第一個span標(biāo)簽,2者要有相同的父標(biāo)簽
2)屬性選擇器:(注意:屬性選擇器ie7才開始支持,以下版本并不支持,其他的瀏覽器基本可以)
語法:img[alt]{border:1pxsolid;}
表示對應(yīng)有alt屬性的img標(biāo)簽,當(dāng)然可以支持多個屬性對應(yīng),如img[alt][title]{};表示這個2個屬性都有的img標(biāo)簽,
也可以與具體值對應(yīng):如:img[alt=”攝影”]{};
屬性選擇器中的高級應(yīng)用,特殊匹配:
(1)img[class~=”b”], ~= : 與屬性中的一個值對應(yīng)的,即與img class=”a b c”對應(yīng)
(2)[class^=”a”],以a開頭的
(3)[class$=”a”],以a結(jié)束的
(4)[class*=”a”],包含a的
(5)[class|=”a”],等于a或以a開頭的
3)偽類和偽元素
日常使用中主要是a標(biāo)簽的幾個偽類:link:hover:active:visited
以及:first-child:first:before:left:right:lang:focus:fist-line等等
注意:動態(tài)偽類可以應(yīng)用到任何元素,如,input:focus{background:red;}當(dāng)input標(biāo)簽獲得焦點時背景變紅
以上語法組合使用,就能實現(xiàn)定位準(zhǔn)確、簡單間接的樣式了。
三、選擇器分類整合
優(yōu)先級別遵循：行內(nèi)樣式 ID Class 標(biāo)記
基本選擇器標(biāo)記選擇器（eg:p/p）
類別選擇器(eg:class)
ID選擇器
復(fù)合選擇器
“交集”復(fù)合選擇器(eg:p.menu{color:red})必須是
標(biāo)記+類別/ID組合
“并集”復(fù)合選擇器(eg:h1,h2,h3{color:red})
“后代”復(fù)合選擇器(eg: #menu.menulist{ ... })
“子”復(fù)合選擇器(eg: #menu.menulist .selectit {... })
四、使用子選擇器減少id和class的定義
示例結(jié)構(gòu)：
div id="menu"
div class="menulist"
divclass="selectit"content/div
/div
/div
示例CSS：
#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
五、使用組選擇器為不同元素應(yīng)用相同的樣式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
則h1,h2,h3,div元素的樣式都為字體16像素，字體粗體
六、偽類和選擇符的配合使用
將偽類和類組合起來用，就可以在同一個頁面中做幾組不同的鏈接效果了，例如，我們定義一組鏈接為紅色，
訪問后為藍(lán)色；另一組為綠色，訪問后為黃色：
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
現(xiàn)在應(yīng)用在不同的鏈接上：
a class="red"href="..."這是第一組鏈接/a
a class="blue" href="..."這是第二組鏈接/a
七、CSS的最近優(yōu)先原則
/*如果對一個元素定義了多次樣式，則以最近的一級優(yōu)先，最近一級的樣式將覆蓋其他行內(nèi)樣式 ID Class標(biāo)記*/
以下是引用片段：
CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
p此處顯示為紅色/p
p class="blue"此處顯示為藍(lán)色/p
p class="blue"style="color:green"此處顯示為綠色/p
p class="blue yellow"此處顯示為黃色/p
注意：
（1）注意樣式的幾個優(yōu)先順序(優(yōu)先級由上至下遞減，下面的樣式覆蓋上面的樣式)：
--元素style設(shè)定
--head區(qū)style/style中的設(shè)定
--外部引用css文件
（2）優(yōu)先級不是按訪問順序來設(shè)定的，而是又css中的聲明順序來設(shè)的。
如上例中pclass="yellow blue"此處顯示為黃色/p也顯示為黃色，因為在css定義中.yellow在.blue
的后面。
八、書寫正確的鏈接樣式
當(dāng)用css定義鏈接的各種狀態(tài)時，要注意書寫的順序即：:link :visited :hover :active利用首字母：L V H A，
你可以通過記憶LoVe,Hate,兩個單詞來記住其順序。
:link --------鏈接的顏色
:visited -----鼠標(biāo)點擊后的顏色
:hover -------鼠標(biāo)放上去未點的顏色（懸停）
:active-------鼠標(biāo)點擊瞬間的顏色
九、:hover的靈活運(yùn)用
IE6不支持除a標(biāo)簽以外的:hover屬性，我們了解:hover屬性是鼠標(biāo)懸停效果。在IE7和FF中，對幾乎任意元素
都可以設(shè)置:hover屬性效果。這對我們做不同的訪問效果很好。
如：
p {
width : 360px;
height : 80px;
padding : 20px;
margin : 50px auto 0 auto;
border : 1px solid #ccc;
line-height : 25px;
background : #fff;
}
p:hover {
border : 1px solid #000;
background : #ddd;
}
----------------此效果針對IE7和FF
p a {
color : #00f;
text-decoration : none;
font-size : 13px;
}
p a:hover {
color : #036;
text-decoration : underline;
}
-----------------此效果針對IE6
十、定義A標(biāo)簽要注意的小問題
當(dāng)我們定義a{color:red;}時，它代表了A的四種狀態(tài)的樣式，如果此時要定義一個鼠標(biāo)放上的狀態(tài)只要定義
a:hover就可以了，其它三種狀態(tài)就是A中所定義的樣式。
只定義了一個a:link時，一定要記得把其它三種狀態(tài)定義出來！
十一、禁止內(nèi)容換行與強(qiáng)制內(nèi)容換行
在表格或?qū)又形覀兛赡芟Ｍ麅?nèi)容不換行或強(qiáng)制換行，我們可以通過一些css屬性來達(dá)到這些要求。
禁止換行：white-space:nowrap
強(qiáng)制換行：word-break:break-all; white-space: normal;
十二、區(qū)別relative和absolute
Absolute---CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合
TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進(jìn)行定位，在沒有設(shè)定TRBL，默認(rèn)依據(jù)父級的做標(biāo)原始點為
原始點。如果設(shè)定TRBL并且父級沒有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點進(jìn)行
定位，位置將由TRBL決定。
Relative---CSS中的寫法是：position:relative;他的意思是絕對相對定位，他是參照父級的原始點為原始點，
無父級則以BODY的原始點為原始點，配合TRBL進(jìn)行定位，當(dāng)父級內(nèi)有padding等CSS屬性時，當(dāng)前級的原始
點則參照父級內(nèi)容區(qū)的原始點進(jìn)行定位。
十三、區(qū)別塊級元素block和內(nèi)聯(lián)元素inline
塊級---可定義寬高，另起獨占一行（如：divul）
內(nèi)聯(lián)---不可定義寬高，如文本元素（如a span）
十四、區(qū)別display和visibility
display:none和visibility:hidden都可以隱藏一個元素,但visibility:hidden只是隱藏了元素的內(nèi)容，但其使用的
位置空間仍然被保留。而display:none則相當(dāng)把元素從頁面中去除，其占用位置也將被刪除。
十五、背景background的一些語法
background-image:url(背景圖案.jpg,gif,bmp);
background-color:#FFFFFF; （背景顏色）
background-color : transparent; --設(shè)定背景為透明色–
background-repeat 改變背景圖片的重復(fù)并排的設(shè)定
說明
repeat 背景圖片并排
repeat-x 背景圖片以X方向 并排
repeat-y 背景圖片以Y方向 并排
no-repeat 背景圖片不 以并排的方式處理
background-attachment是否固定圖片位置
說明
scroll 拉動卷軸時，背景圖片會跟著移動（缺省值）
fixed 拉動卷軸時，背景圖片不會跟著移動
以長度定位background-position:x y
使用百分比定位background-position: x% y%
說明
x% 往右移
y% 往下移
backgroud-position: 0% 0%; 左邊上方
backgroud-position: 0% 50%; 左邊中間
backgroud-position: 50% 0%; 中間上方
backgroud-position: 50% 50%; 正中間
backgroud-position:100% 0%; 右邊上方
backgroud-position: 0% 100%; 左邊下方
backgroud-position: 100% 50%; 右邊中間
backgroud-position: 50% 100%; 中間下方
backgroud-position: 100% 100%; 右邊下方
以關(guān)鍵字定位
關(guān)鍵字說明
top 上 ( y = 0 )
center 中 ( x = 50, y = 50 )
bottom 下 ( y = 100 )
left 左 ( x= 0 )
Exp:
background-position:center;
圖片在指定背景中央X=50% Y=50%位置
background-position: 200px 30px
十六、注釋的寫法
在Html中：
!-- footer --
content
!-- end footer --
在CSS中：
/* ---------- header ----------------- */
Style
十七、CSS的命名規(guī)范
1. id的命名
(1)頁面結(jié)構(gòu)
容器: Container
頁頭：header
內(nèi)容：content/container
頁面主體：main
頁尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
(2)導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainnav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu
子菜單：submenu
標(biāo)題: title
摘要: summary
(3)功能
標(biāo)志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
2. class的命名
(1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字體大小,直接使用"font+字體大小"作為名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)對齊樣式,使用對齊目標(biāo)的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
(4)標(biāo)題欄樣式,使用"類別+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事項::
u 一律小寫;
u 盡量用英文;
u 不加中杠和下劃線;
u 2個組合的單詞不用中杠和下劃線可以將第二個單詞的首字母大寫（eg:mainContent）；
u 盡量不縮寫，除非一看就明白的單詞.
3. 主要的站點css文件
主要的 master.css
模塊 module.css
基本共用 base.css（root.css）
布局，版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補(bǔ)丁 mend.css
打印 print.css
十八、Padding影響寬度問題
如果一組要嵌套的標(biāo)簽之間需要些間距的話，那就留給位于里面的標(biāo)簽的margin屬性吧，而不要去定義位
于外面的標(biāo)簽的padding
十九、完美的單象素外框線表格
table{border-collapse:collapse;}
td{border:1px solid #000;}
二十、如果文字過長,則將過長的部分變成省略號顯示
style=”width:120px;height:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap”
二十一、并不是所有樣式都要簡寫
當(dāng)樣式表前定義了如p{padding:1px2px 3px 4px}時，在后續(xù)工程中又增加了一個樣式上補(bǔ)白5px，下補(bǔ)白
6px。我們并不一定要寫成p.style1{padding:5px 6px 3px 4px}?？梢詫懗蓀.style1{paddingtop:5px;padding-right:6px;},你可能會感覺這樣寫還不如原來那樣好，但你想沒想過，你的那種寫法重復(fù)定義
了樣式，另外你可以不必去找原來的下補(bǔ)白與左補(bǔ)白的值是多少！如果以后前一個樣式P變了話，你定義的
p.style1的樣式也要變。(此種方法對后期修改樣式很重要)
二十二、幾個常用到的CSS細(xì)節(jié)處理上的樣式
1）中文字兩端對齊：text-align:justify;text-justify:inter-ideograph;
2）固定寬度漢字截斷：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不讓其換行，不過只能
處理文字在一行上的截斷，不能處理多行。)（IE5以上）FF不能，它只隱藏。
***萬能強(qiáng)制換行：white-space:normal;word-break:break-all
禁止換行：white-space:nowrap
強(qiáng)制換行：word-wrap:break-word; word-break: normal;
.AutoNewline
{
/*word-break: break-all; 方法一必須*/
/*word-wrap:break-word;overflow:hidden; 方法二*/
/*word-wrap:break-word; word-break: normal;方法三 */
word-wrap:break-word; word-break:break-all;}
.NoNewline
{
/*word-break: keep-all; 方法一必須*/
white-space:nowrap;
}
3）固定寬度漢字（詞）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。
4）acronym title=”輸入要提示的文字”style=”cursor:help;”文字/acronym用鼠標(biāo)放在前面的文
字上看效果。這個效果在國外的很多網(wǎng)站都可以看到，而國內(nèi)的少又少。
5）圖片設(shè)為半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5測試通
過，F(xiàn)F未通過，這是因為這個樣式是IE私有的東西；
6）FLASH透明：選中swf,打開原代碼窗口，在/object前輸入paramname=”wmode”
value=”transparent” 以上是針對IE的代碼。
針對FIREFOX 給embed 標(biāo)簽也增加類似參數(shù)wmode=”transparent”
7）在做網(wǎng)頁時常用到把鼠標(biāo)放在圖片上會出現(xiàn)圖片變亮的效果，可以用圖片替換的技巧，也可以用如下的濾
鏡：
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }
8）層在瀏覽器中居中對齊問題
body { text-align: center }
#content { text-align: left; width: 700px;margin: 0 auto }
1、基本樣式 的寫法
style type="text/css"
h1{
font-family:黑體;
}
/style
直接些標(biāo)簽名進(jìn)行定義屬性，這個也比較常見。但是它的定義通常放在style標(biāo)簽中聲明。
2、類class鏈接樣式
定義也通常在style標(biāo)簽中聲明
style type="text/css"
.style1{
color:red;
font-size:16px;
}
/style
引用時候直接在標(biāo)簽的屬性中使用class="style1" 記住是class屬性
h1 /h1
3、id鏈接樣式
style type="text/css"
#style1{
color:blue;
font-size:16px;
}
/style
引用的時候就用標(biāo)簽屬性中的id屬性 ，要區(qū)別于類屬性
h1 id="style1"/h1
區(qū)別：類class鏈接樣式和id鏈接樣式
類連接樣式可以適用于多個對象設(shè)置同樣的屬性中，
而id鏈接樣式只能用于一個對象標(biāo)簽中，其他標(biāo)簽則會失效
4、html選擇器：
直接用標(biāo)簽進(jìn)行聲明，跟上面的第一個一樣
2）派生選擇器：
style type="text/css"
h1 h2{
color:red;
font-size:1em;
font-family:黑體;
}
/style
h1 h2的寫法意思是代表著該css樣式只能之h1h2 /h2/h1同時出現(xiàn)，且是嵌套使用的時候才能生效
3）id選擇器
id選擇器的作用是通過id選擇器將css樣式作用到頁面的對象上。寫法：
style type="text/css"
#text p{
font-size:1em;
}
/style
將該樣式綁定到html上，就要這樣寫
h1 id=#"text"這個是不要p的寫法
要p的寫法
表明該對象只能作用在text對象上的所有p標(biāo)簽中
4）class選擇器
style type="text/css"
.fancy{
color:red;
background:#666;
}
/style
使用的時候也是
h1/h1
也可以像上面的一樣用派生選擇器
style type="text/css"
.fancy td{
color:red;
background:#666;
}
/style
說明生效只能在td中
5）分組選擇器
h1{color:bule;}
#text{color:bule;}
.play{color:bule;}
這種寫法太繁瑣了
我們可以使用
h1,#text,.paly{
color:bule;}
這樣來定義
6）偽類和偽類選擇器
用關(guān)鍵字:lang來定義
html
head
style type="text/css"
q:lang(smile){
quotes:"∞"
}
/style
/head
body
好吧，展示一下
p請看q祝你愉快/q/p
/body
/html
“css的樣式規(guī)則是:由選擇器和聲明塊兩個基本部分組成的。選擇器決定為哪些元素應(yīng)用樣式;聲明塊定義相應(yīng)的樣式,它包含在一對花括號內(nèi),有一條或多條聲明組成,而每一條聲明則由一個屬性和一個值組成,中間用冒號隔開
在制作一個網(wǎng)頁的時候，Css樣式的添加一共有四種方式，一起來看看這四種方式：
一、使用STYLE屬性： 將STYLE屬性直接加在個別的元件標(biāo)簽里。
元件(標(biāo)簽) STYLE="性質(zhì)(屬性)1: 設(shè)定值1; 性質(zhì)(屬性)2: 設(shè)定值2; ...}
例如：
TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"標(biāo)楷體"; line-height:150%
這種用法的優(yōu)點 是可靈巧應(yīng)用樣式於各標(biāo)簽中，但是缺點則是沒有整篇文件的『統(tǒng)一性』。
二、使用STYLE標(biāo)簽： 將樣式規(guī)則寫在STYLE.../STYLE標(biāo)簽之中。
通常是將整個的 STYLE.../STYLE結(jié)構(gòu)寫在網(wǎng)頁的HEAD /HEAD部份之中。這種用法的優(yōu)點就是在於整篇文件的統(tǒng)一性，只要是有聲明的的元件即會套用該樣式規(guī)則。缺點就是在個別元件的靈活度不足。
三、使用 LINK標(biāo)簽： 將樣式規(guī)則寫在.css的樣式檔案中，再以LINK標(biāo)簽引入。
假設(shè)我們把樣式規(guī)則存成一個example.css的檔案，我們只要在網(wǎng)頁中加入
LINK REL=STYLESHEET TYPE="text/css" HREF="example.css"
即可套用該樣式檔案中所制定好的樣式了。 通常是將LINK標(biāo)簽寫在網(wǎng)頁的head/head部份之中。這種用法的優(yōu)點就是在於可以把要套用相同樣式規(guī)則的數(shù)篇文件都指定到同一個樣式檔案即可。缺點也是在個別文件或元件的靈活度不足。
四、使用@import引入： 跟LINK用法很像，但必 放在STYLE.../STYLE 中。
要注意的是，行末的分號是絕對不可少的！這種方式也可以把
一、Css書寫順序：
1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、Css語法：
命名一般為小寫英文字母。
為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。
每條聲明語句的?:?后應(yīng)該插入一個空格。
所有聲明語句都應(yīng)當(dāng)以分號結(jié)尾。最后一條聲明語句后面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。
對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如，.5?代替?0.5；-.5px?代替?-0.5px）。
十六進(jìn)制值應(yīng)該全部小寫，例如，#fff。
盡量使用簡寫形式的十六進(jìn)制值，例如，用?#fff?代替?#ffffff。
避免為 0 值指定單位，例如，用?margin: 0;?代替?margin: 0px;。
Css常用的一些命名：
可參考：CSS 常用命名 - 彼岸時光 - 博客園。
三、Css的引入：
Css的引入一般有兩種，link和@import,一般建議使用link引入。這樣可以避免考慮@import的語法規(guī)則和注意事項，避免產(chǎn)生資源文件下載順序混亂和http請求過多的煩惱。
四、Css的命名規(guī)范(BEM,OOCSS)：
什么是BEM：BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團(tuán)隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其他開發(fā)者來說更加透明而且更有意義。
命名約定如下：
.block{} // 塊即是通常所說的 Web 應(yīng)用開發(fā)中的組件或模塊。每個塊在邏輯上和功能上都是相互獨立的。
.block__element{} // 元素是塊中的組成部分。元素不能離開塊來使用。BEM 不推薦在元素中嵌套其他元素。
.block--modifier{} // 修飾符用來定義塊或元素的外觀和行為。同樣的塊在應(yīng)用不同的修飾符之后，會有不同的外觀。
優(yōu)點：
BEM 的優(yōu)點在于所產(chǎn)生的 CSS 類名都只使用一個類別選擇器，可以避免傳統(tǒng)做法中由于多個類別選擇器嵌套帶來的復(fù)雜的屬性級聯(lián)問題。在 BEM 命名規(guī)則中，所有的 CSS 樣式規(guī)則都只用一個類別選擇器。因此所有樣式規(guī)則的特異性（specificity）都是相同的，也就不存在復(fù)雜的優(yōu)先級問題。這可以簡化屬性值的層疊規(guī)則。代碼清單中的命名規(guī)則的好處在于每個 CSS 類名都很簡單明了，而且類名的層次關(guān)系可以與 DOM 節(jié)點的樹型結(jié)構(gòu)相對應(yīng)。
缺點：
這樣類名過于長，且復(fù)雜。
什么是OOCSS（面向?qū)ο驝SS）：
OOCSS 表示的是面向?qū)ο?CSS（Object Oriented CSS），是一種把面向?qū)ο蠓椒▽W(xué)應(yīng)用到 CSS 代碼組織和管理中的實踐。 OOCSS最關(guān)鍵的一點就是：提高他的靈活性和可重用性。這個也是OOCSS最重要的一點。OOCSS主張是通過在基礎(chǔ)組件中添加更多的類，從而擴(kuò)展基礎(chǔ)組件的CSS規(guī)則，從而使CSS有更好的擴(kuò)展性。
OOCSS的優(yōu)點：
減少CSS代碼。
具有清潔的HTML標(biāo)記，有語義的類名，邏輯性強(qiáng)的層次關(guān)系。
語義標(biāo)記，有助于SEO。
更好的頁面優(yōu)化，更快的加載時間（因為有很多組件重用）。
可擴(kuò)展的標(biāo)記和CSS樣式，有更多的組件可以放到庫中，而不影響其他的組件。
能輕松構(gòu)造新的頁面布局，或制作新的頁面風(fēng)格。
OOCSS的缺點：
OOCSS適合真正的大型網(wǎng)站開發(fā)，因為大型網(wǎng)站用到的可重用性組件特別的多，如果運(yùn)用在小型項目中可能見不到什么成效。所以用不用OOCSS應(yīng)該根據(jù)你的項目來決定。如果沒用巧妙的使用，創(chuàng)建組件可能對于你來說是一堆沒用的東西，成為一爛攤子，給你的維護(hù)帶來意想不到的杯具，說不定還是個維護(hù)的噩夢。
歡迎到優(yōu)就業(yè)來了解
css樣式采取的就近樣式原則。
行內(nèi)樣式div style=""/div優(yōu)先級最高，沒有行內(nèi)樣式那么會回在頁答面找style/style內(nèi)嵌樣式。
名稱CSS中的“層疊（cascading）”表示樣式單規(guī)則應(yīng)用于HTML文檔元素的方式。具體地說，CSS樣式單中的樣式形成一個層次結(jié)構(gòu)，更具體的樣式覆蓋通用樣式。樣式規(guī)則的優(yōu)先級由CSS根據(jù)這個層次結(jié)構(gòu)決定，從而實現(xiàn)級聯(lián)效果。
擴(kuò)展資料：
易于使用和修改：
CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用?？傊?，CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。
另外，可以將相同樣式的元素進(jìn)行歸類，使用同一個樣式進(jìn)行定義，也可以將某個樣式應(yīng)用到所有同名的HTML標(biāo)簽中。
參考資料來源：百度百科-CSS
重慶分公司
重慶分公司
