⑴ 如何命名CSS文件及樣式規范更利於SEO優化
堅持使用統一的CSS命名規則並養成習慣,可以讓你更容易維護、修改以前編寫過的CSS代碼,進而提高自己的工作效率,而且還能加強搜索引擎的SEO優化,方便記憶,那麼,我們如何才能將CSS的命名做得井井有條呢?
1、CSS文件及樣式命名
首先,先為大家展示一些CSS文件及樣式的命名樣例,因為這些名稱能使大家立馬明白定義的文件,具體如下所示:
(1)、CSS文件命名規范
全局樣式:global.css
框架布局:layout.css
字體樣式:font.css
鏈接樣式:link.css
列印樣式:print.css
主要的:master.css
專欄:columns.css
主題:themes.css
(2)、CSS樣式命名規范
對於CSS樣式的命名規則,建議用字母、_號工、-號、數字組成,必須以字母開頭,不能為純數字,為了開發後樣式名管理方便,大家請用有意義的單詞或縮寫組合來命名,讓同事一看就明白這樣式大概是哪一塊的,這樣就節省了查找樣式的時間。
例如:頭部樣式用header,頭部左邊,可以用header_left或header_l,還有如果是列結構的可以這樣——box_1of3 (三列中的第一列),box_2of3 (三列中的第二列)、box_3of3 (三列中的第三列),其它的我就不一一舉例了,大家按以上規律去命名就好。
下面列出一些常用的命名單詞方便大家使用(以後大家工作過程中慢慢把自己積累的單詞都共享出來,那大家的命就會更加統一了,就不會有一義多詞的情況了):
容器:container/box
頭部:header
主導航:mainNav
子導航:subNav
頂導航:topNav
邊導航:sidebar
左導航:leftsideBar
右導航:rightsideBar
網站標志:logo
大廣告:banner
頁面中部:mainBody
整個頁面:content
底部:footer
菜單:menu
菜單內容:menuContent
子菜單:subMenu
子菜單內容:subMenuContent
搜索:search
搜索關鍵字:keyword
搜索范圍:range
標簽文字:tagTitle
標簽內容:tagContent
當前標簽:tagCurrent/currentTag
標題:title
內容:content
列表:list
當前位置:currentPath
側邊欄:sidebar
圖標:icon
注釋:note
登錄:login
注冊:register
麵包屑:breadCrumb(即頁面所處位置導航提示)
列定義:column_1of3 (三列中的第一列)、column_2of3 (三列中的第二列)、column_3of3 (三列中的第三列)
2、CSS的優先順序
行內樣式(inline style) > ID選擇符 > 樣式(class)、偽類(pseudo-class)和屬性(attribute)選擇符 > 類別(type),偽對象(pseudo-element)。
博客註解:
*內聯樣式(inline style):元素的style屬性,比如 <div style="color:red;"></div>,其中的color:red;就是行內樣式。
*ID選擇符:元素的id屬性,比如<div></div>可以用ID選擇符#content
*偽類(pseudo-class):最常見的是錨(a)偽類,比如a:link,a:visited.
*屬性選擇符(attribute selectors):比如div[class=demo],含有class為demo的div元素。
*類別選擇器(type selector):HTML標簽選擇,比如div .demo,div元素下含有class為demo的元素。
*偽對象選擇器(pseudo-element selector):比如div:first-letter,div元素下的第一個單詞。
3、默認值
通常padding和margin的默認值為0,background-color的默認值是transparent,但是在不同的瀏覽器默認值可能不同。
如果怕有沖突,可以在樣式表一開始就先定義所有元素的margin和padding值都為0,例如:
* {
padding:0;
margin:0
}
或者是針對某元素來定義:
ul,li,div,span {
padding:0;
margin:0
}
4、不要重復定義可繼承的值
CSS中,子元素自動繼承父元素的屬性值,象顏色、字體等,已經在父元素中定義過的,在子元素中可以直接繼承,不需要重復定義。
除非是為了更變當前元素樣式不使用父元素的屬性值,但是要注意,瀏覽器可能用一些默認值覆蓋你的定義。
5、CSS代碼書寫樣式
在寫CSS代碼的時候,對於縮進、斷行、空格,每個人有每個人的書寫習慣,在經過不斷實踐後,我決定採用下面這樣的書寫樣式:
.classname {
width:100px;
}
當使用聯合定義時,我通常將每個選擇器單獨寫一行,這樣方便在CSS文件中找到它們,在最後一個選擇器和大括弧之間加一個空格,每個定義也單獨寫一行,分號直接在屬性值後,不要加空格。
我習慣在每個屬性值後面都加分號,雖然規則上允許最後一個屬性值後面可以不寫分號,但是如果你要加新樣式時容易忘記補上分號而產生錯誤,所以還是都加比較好,最後,關閉的大括弧單獨寫一行,這樣的空格和換行有助與閱讀
6、使用css縮寫
使用縮寫可以幫助減少你CSS文件的大小,更加容易閱讀,常用的css縮寫的主要規則有:
(1)、顏色
16進制的色彩值,如果每兩位的值相同,可以縮寫一半,例如:
#000000可以縮寫為#000;#336699可以縮寫為#369;
(2)、盒尺寸
通常有下面四種書寫方法:
property:value1; 表示所有邊都是一個值value1
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
property:value1 value2 value3 value4; 四個值依次表示top,right,bottom,left
方便的記憶方法是順時針,上右下左,具體應用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;
(3)、邊框(border)
邊框的屬性如下:
border-width:1px;
border-style:solid;
border-color:#000;
可以縮寫為一句:border:1px solid #000;
語法是:border:width style color;
(4)、背景(Backgrounds)
背景的屬性如下:
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以縮寫為一句:background:#f00 url(background.gif) no-repeat fixed 0 0;
語法是:background:color image repeat attachment position;
你可以省略其中一個或多個屬性值,如果省略,該屬性值將用瀏覽器默認值,默認值為:
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
(5)、字體(fonts)
字體的屬性如下:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以縮寫為一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
提示:如果你縮寫字體定義,至少要定義font-size和font-family兩個值。
(6)、列表(lists)
取消默認的圓點和序號可以這樣寫list-style:none;
list的屬性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以縮寫為一句:list-style:square inside url(image.gif);
7、多重CSS樣式定義,屬性追加重復最後優先原則
一個標簽可以同時定義多個class,也可以是同一個class中重復定義屬性,例如:
我們先定義兩個樣式:
.one{width:200px;background:url(http://www.mahaixiang.cn/1.jpg) no-repeat left top;}
.two{border:10px solid #000; background:url(http://www.mahaixiang.cn/2.jpg) no-repeat left top;}
在頁面代碼中,我們可以這樣調用:
<div class="one" two></div>
這樣最終的顯示效果是這個div樣式是什麼呢?重復的是以哪一個為准呢?
<div class="one" two></div>應用到的樣式如下:
width:200px;
border:10px solid #000;
background:url(http://www.mahaixiang.cn/2.jpg) no-repeat left top;
因為,當應用兩個或多個樣式時,瀏覽器所應用的樣式根據是屬性追加重復最後優先原則。
就是說兩個或多個或重復的樣式名定義,瀏覽器所應用的樣式是按先後順序的,如果定義了重復的屬性值,以最後定義的為准,如果應用了兩個或多個樣式名,裡面不重復定義的屬性值就追加上去,重復的屬性值就以最後一個為准。
這里要注意的是,樣式的先後不是根據頁面上應用的名字順序,而是樣式表裡的樣式順序。
8、導入(Import)和隱藏CSS
因為老版本瀏覽器不支持CSS,一個通常的做法是使用@import技巧來把CSS隱藏起來,例如:
@import url(main.css);
然而,這個方法對IE4不起作用,這讓我很是頭疼了一陣子,後來我用這樣的寫法:
@import main.css;
這樣就可以在IE中也隱藏CSS了,呵呵,還節省了5個位元組呢!
9、CSS hack
有些時候,你需要對IE瀏覽器的bug定義一些特別的規則,這里有太多的CSS技巧(hacks),我只使用其中的兩種方法,不管微軟在即將發布的IE版里是否更好的支持CSS,這兩種方法都是最安全的。
(1)、注釋的方法
a、在IE中隱藏一個CSS定義,你可以使用子選擇器(child selector):
html>body p {
}
b、下面這個寫法只有IE瀏覽器可以理解(對其他瀏覽器都隱藏)
* html p {
}
c、還有些時候,你希望IE/Win有效而IE/Mac隱藏,你可以使用反斜線技巧:
* html p {
declarations
}
d、下面這個寫法只有IE7瀏覽器可以理解(對其他瀏覽器都隱藏)
*+ html p {
}
(2)、條件注釋(conditional comments)的方法
另外一種方法,我認為比CSS Hacks更加經得起考驗就是採用微軟的私有屬性條件注釋,用這個方法你可以給IE單獨定義一些樣式,而不影響主樣式表的定義,就像這樣:
<!--[if IE]>
<link rel=stylesheet/css href="http://www.mahaixiang.cn/style/ie.css" />
<![endif]-->
還有更多的CSS hack大家可以通過網上找找,但是有很多hack都是不符合w3c標準的,根據以上的hack寫了一個能區分IE6、IE7、FF的樣式,而且可以符合w3c標准,代碼如下:
.classname {width:90px!important;width:100px;}
*+html .classname {width:95px!important;}
這樣寫後在IE6下寬是100px,IE7下是95px,火狐下是90px。
10、明確定義單位,除非值為0
忘記定義尺寸的單位是CSS新手普遍的錯誤,在HTML中你可以只寫width=100,但是在CSS中,你必須給一個准確的單位,比如:width:100px width:100em。
只有兩個例外情況可以不定義單位:行高和0值,除此以外,其他值都必須緊跟單位,注意,不要在數值和單位之間加空格。
11、區分大小寫
當在XHTML中使用CSS,CSS里定義的元素名稱是區分大小寫的,為了避免這種錯誤,建議大家將所有的定義名稱都採用小寫。
class和id的值在HTML和XHTML中也是區分大小寫的,如果你一定要大小寫混合寫,請仔細確認你在CSS的定義和XHTML里的標簽是一致的。
12、id和class的使用及區別
我們知道在樣式表定義一個樣式的時候,可以定義id,也可以定義class,例如:
ID方法:#test{color:#333333},在頁面中調用<div>內容<div>
CLASS方法:.test{color:#333333},在頁面中調用<div class="test">內容<div>
一般來說,id是一個頁面只可以使用一次,class是可以多次引用的。
可我在頁面中用了多個相同id在IE中顯示也正常,id和class好象沒什麼區別,用多個相同id有什麼影響嗎?
頁面存在多個相同的ID影響就是不能通過W3的校驗,在頁面顯示上,目前的瀏覽器還都允許你犯這個錯誤,用多個相同ID「一般情況下」也能正常顯示,但是當你需要用JavaScript通過id來控制這個div,那就會出現錯誤。
id是一個標簽,用於區分不同的結構和內容,就象你的名字,如果一個屋子有2個人同名,就會出現混淆。
class是一個樣式,可以套在任何結構和內容上,就象一件衣服。
從概念上來說:id是先找到結構/內容,再給它定義樣式;class是先定義好一種樣式,再套給多個結構/內容。
對此,建議大家在寫XHML+CSS時如果是維一的結構定位的就用id,否則就用class吧(這樣讓出非結構定位的div塊的id讓程序員自己定義使用)!
13、取消class和id前的元素限定
當你寫給一個元素定義class或者id,你可以省略前面的元素限定,因為ID在一個頁面里是唯一的,class可以在頁面中多次使用,在看來,你限定某個元素是毫無意義的,例如:
div#id1{}可以寫成#id1{}
這樣可以節省一些位元組。
14、使用子選擇器(descendant selectors)
使用子選擇器是影響他們效率的原因之一,子選擇器可以幫助你節約大量的class定義,我們來看下面這段代碼:
<div>
<ul>
<li class="subnavitem"> <a href="http://www.mahaixiang.cn/seo/#" class="subnavitem">SEO</a></li>>
<li class="subnavitemselected"> <a href="http://www.mahaixiang.cn/seo/#" class="subnavitemselected">SEO</a> </li>
<li class="subnavitem"> <a href="http://www.mahaixiang.cn/seo/#" class="subnavitem">SEO</a> </li>
</ul>
</div>
這段代碼的CSS定義是:
div#subnav ul { }
div#subnav ul li.subnavitem { }
div#subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemselected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
你可以用下面的方法替代上面的代碼:
<ul id=」subnav」>
<li> <a href="http://www.mahaixiang.cn/seo/#">SEO</a> </li>
<li class="sel"> <a href="http://www.mahaixiang.cn/seo/#">SEO</a> </li>
<li> <a href="http://www.mahaixiang.cn/seo/#">SEO</a> </li>
</ul>
樣式定義是:
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
用子選擇器可以使你的代碼和CSS更加簡潔、更加容易閱讀。
如果一個容器里有多個同樣的元素,而且這些元素樣式都不一樣,請避免用這個方式,建以大家可以採用不同的class如:
<ul class=」one」><li></li></ul>
<ul class=」tow」><li></li></ul>
15、不需要給背景圖片路徑加引號
為了節省位元組,建議不要給背景圖片路徑加引號,因為引號不是必須的,例如:
background-image:url(images
margin:0 auto;
}
但是IE5/Win不能正確顯示這個定義,我們採用一個非常有用的技巧來解決:用text-align屬性,就像這樣:
body {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
第一個body的text-align:center;規則定義IE5/Win中body的所有元素居中(其他瀏覽器只是將文字居中) ,第二個text-align:left;是將#warp中的文字居左。
16、層占據的空間
當調試CSS發生錯誤,你就要像排版工人,逐行分析CSS代碼,我通常在出問題的層上定義一個背景顏色,這樣就能很明顯看到層占據多大空間?
有些人建議用border,一般情況也是可以的,但問題是,有時候border會增加元素的尺寸,border-top和boeder-bottom破壞縱向margin的值,所以使用background更加安全些(更多的介紹,
⑵ 合並相同域名下的CSS後,引用的CSS文件名稱是什麼
命名是隨便你的啊,如果是各個頁面公用一個css,建議起一個自己記得住的名字,不如public.css或者common.css表示他是公共css文件。你文件合並了當然要重新引用css了
⑶ 網頁css樣式文件夾的名字一般都是以什麼名字來命名的
用字母或者數字。最好不要用漢字
命名規則 要自己寫CSS人員的習慣。
比如 一個主CSS 名字一般命名為main.css或者 index.css
其他比如 頂部 就是top.css
主要還是看個人的習慣。
⑷ 應如何給css樣式表規范的命名
你不如Bai或Google一下,網上的教程及資源多得是。
在這里問,回答也是有限的。
1.CSS ID 的命名
外 套: wrap
主導航: mainnav
子導航: subnav
頁 腳: footet
整個頁面: content
頁 眉: header
頁 腳: footer
商 標: label
標 題: title
主導航: mainbav(globalnav)
頂導航: topnav
邊導航: sidebar
左導航: leftsidebar
右導航: rightsidebar
旗 志: logo
標 語: banner
菜單內容1: menu1 content
菜單容量: menu container
子菜單: submenu
邊導航圖標:sidebarIcon
注釋: note
麵包屑: breadcrumb(即頁面所處位置導航提示)
容器: container
內容: content
搜索: search
登陸: Login
功能區: shop(如購物車,收銀台)
當前的 current
2.另外在編輯樣式表時可用的注釋可這樣寫:
<-- Footer -->
內容區
<-- End Footer -->
3.樣式文件命名
主要的 master.css
布局,版面 layout.css
專欄 columns.css
文字 font.css
列印樣式 print.css
主題 themes.css
⑸ 網頁DIV+CSS怎麼規范命名.詳細一定把。比如id、css、div、文件名、不要復制的。謝謝!
命名規則主要是要求在同一維度,讓同一個團隊的成員都能明白的。當然,也有公共命名方式的,例如head,body等等的。
例如,我們做一個DIV+CSS,就板塊而言,先劃分好:頭部,通欄,左欄,右欄,內容區,底部等的大區塊。然後,採用統一的命名。
CSS的命名,劃分為:排版性區塊,功能性區塊,列表性區塊等
即:排版性:main_head,main_body,main_left,main_right,main_footer;
功能性區塊:FL(float-left),FR,將常用的建立類;方便調用;
還有就是列表:list_x(左右排列),list_y(上下排列的);
而div的命名也是按上述方式,先排版,再到功能性的;
比如,頭部的<div id="main_head"></div>,如果頭部裡面的logo,那麼main_head_logo等等;
多用類,因為一個div可以同時接受多個類,所以,命名的規則就是需要簡單,明確,可讀。
⑹ 有一個前端面試題,多人項目中你將如何規劃css文件,樣式命名
馬克一記,等大神來回答,學習學習。。。
我的話可能會用文檔定義css樣式的作用和命名,然後所有成員都按文檔寫。。。
如果有成員需要加入或者修改css樣式,就需要修改文檔,同時通知所有成員。。。
⑺ 怎麼重新命名css而不影響網頁調用它的設置
ctrl+f 查找和替換 如圖
替換完,再去改網站文件夾里改css.css的文件名
清理緩存,刷新就齊活了。
⑻ 文件名的命名規則是什麼
文件,廣義的指公文書信或指有關政策、理論等方面的文章。文件的范疇很廣泛,電腦上運行的如殺毒、游戲等軟體或程序都可以叫文件。
狹義的「文件」一般特指文書,或者叫做公文。 文件是人們在各種社會活動中產生的記錄。狹義的"文件"並不能等同於」檔案「,它們的主要區別在於是否具有保存價值以及是否具備原始記錄的性質。如果兩者都具備,則可以稱之為」檔案「,否則只能算作文件。雖然兩者有很大的交集,但絕不能等同。
一、文件的命名規則
由於文件的范疇很廣,規范命名非常重要。一般來說文件包含兩個部分,文件名和文件後綴名,後綴名也就是常說的擴展名。一般後綴名是由3-4個字母組成的,比如在word上寫了一篇關於文件命名格式規范的文章,那可以命名文件的文件名前面為關於文件命名格式規范相關的詞語,後綴名為doc的格式。這個文件的文件名就是關於文件命名格式規范.doc。 文件的命名規則是文件名不能超過255個英文字元,漢字不能超過127個。鍵盤輸入的英文字母、符號、空格等都可以作為文件名的字元來使用,但是,還是有幾個特殊字元由系統保留不能使用的,對一般辦公文件來言,規範文件、文件夾命名如下:
(1)文件命名的結構:項目命名詞(或項目編號)_文件命名詞_日期_V版本號.文件後綴 例如:Doc_PCPIS Proposal_20101112_V1.0.doc
(2)文件名稱由四部分組成:第一部分為項目名稱或編號,第二部分為文件的描述,第三部分為當前文件的日期,第四部分為文件階段標識加文件後綴。
(3)如果是同一版本同一階段的文件修改過兩次以上,則在版本標識後面加以數字標識,每次修改數字加1; 當有多人同時提交同一份文件時,可以在版本標識的後面加入人名或縮寫來區別。
二、文件夾的命名規范 1、標準的文件夾命名結構:項目命名詞(或項目編號)--文件夾名--日期。
(1)首先通過建立文件夾,把文件進行整理和分類,便於查找和使用;
(2)在使用Windows的查找或者其他查詢工具(如Everything)搜索的時候,會比較方便容易的查詢出想要的文件;
(3)培養自己整理文件的良好習慣;
(4)可以知道文件的操作日期,這個日期可以是創建日期、修改日期。
2、為了更好的整理自己的文件,可增加了幾個特殊的符號,用於標識不同狀態的文件:
(1) !(嘆號)——標注重要的文件或者文件夾 ;
(2)、#(井號)——標注等待處理的文件或者文件夾 ;
(3)@(@號)——標注正在處理的文件或者文件夾對那些處理完畢的文件,應該放在合適的文件夾當中,因此不作特殊符號的標注。這些符號的使用,是作為文件命名的首字應用,如此一個文件夾中,標注特殊符號的文件會排列在一塊,查找和使用起來會比較方便。