一．文件命名規(guī)范
我們提供的服務(wù)有：網(wǎng)站制作、成都做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、文安ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的文安網(wǎng)站制作公司
[b]樣式文件命名[/b]
[quote]主要的 master.css
布局，版面 layout.css
專(zhuān)欄 columns.css
文字 font.css
打印樣式 print.css
主題 themes.css [/quote]
[b]CSS ID 的命名[/b]
[quote]頁(yè)頭：header
登錄條：loginbar
標(biāo)志：logo
側(cè)欄：sidebar
廣告：banner
導(dǎo)航：nav
子導(dǎo)航：subnav
菜單：menu
子菜單：submenu
搜索：search
滾動(dòng)：scroll
頁(yè)面主體：main
內(nèi)容：content
標(biāo)簽頁(yè)：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標(biāo)題：title
加入：joinus
指南：guild
服務(wù)：service
熱點(diǎn)：hot
新聞：news
下載：download
注冊(cè)：regsiter
狀態(tài)：status
按鈕：btn
投票：vote
合作伙伴：partner
友情鏈接：friendlink
頁(yè)腳：footer
版權(quán)：copyright
外 套：wrap
主導(dǎo)航：mainnav
子導(dǎo)航：subnav
頁(yè) 腳：footer
整個(gè)頁(yè)面： content
頁(yè) 眉：header
頁(yè) 腳：footer
商 標(biāo)：label
標(biāo) 題：title
主導(dǎo)航：mainbav（globalnav）
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
旗 志：logo
標(biāo) 語(yǔ)：banner
菜單內(nèi)容1： menu1content
菜單容量： menucontainer
子菜單：submenu
邊導(dǎo)航圖標(biāo)：sidebarIcon
注釋?zhuān)骸ote
面包屑：breadcrumb(即頁(yè)面所處位置導(dǎo)航提示）
容器： container
內(nèi)容： content
搜索： search
登陸： Login
功能區(qū)：shop(如購(gòu)物車(chē)，收銀臺(tái))
當(dāng)前的 current[/quote]
[b]網(wǎng)站常用中英文對(duì)照表[/b]
[quote]網(wǎng)站導(dǎo)航 Site Map
公司簡(jiǎn)介 Profile or Company Profile or Company
公司設(shè)備 Equipment Equipment
公司榮譽(yù) Glories Glories
企業(yè)文化 Culture Culture
產(chǎn)品展示 Product Product
資質(zhì)認(rèn)證 Quality Certification
企業(yè)規(guī)模 Scale Scale
營(yíng)銷(xiāo)網(wǎng)絡(luò) Sales Network
組織機(jī)構(gòu) organization organization
合作加盟 Join In Cooperation
技術(shù)力量 Technology Technology
經(jīng)理致辭 Manager`s oration
發(fā)展歷程 Development History
工程案例 Engineering Projects
業(yè)務(wù)范圍 Business Scope
分支機(jī)構(gòu) Branches
供求信息 Supply Demand
經(jīng)營(yíng)理念 Operation Principle
產(chǎn)品銷(xiāo)售 Sales Sales
聯(lián)系我們 Contact Us Contact Us
信息發(fā)布 Information Information
返回首頁(yè) Homepage Homepage
產(chǎn)品定購(gòu) order order
分類(lèi)瀏覽 Browse By Category
電子商務(wù) E-business
公司實(shí)力 Strength Strength
版權(quán)所有 Copy Right
友情連結(jié) Hot Link
應(yīng)用領(lǐng)域 Application Fields
人力資源 Human Resource Hr
領(lǐng)導(dǎo)致辭 Leader`s oration
企業(yè)資質(zhì) Enterprise Qualification
行業(yè)新聞 Trade News
行業(yè)動(dòng)態(tài) Trends
客戶(hù)留言 Customer Message
客戶(hù)服務(wù) Customer Service
新聞動(dòng)態(tài) News Trends
公司名稱(chēng) Company Name
銷(xiāo)售熱線(xiàn) Sales Hot-Line
聯(lián)系人 Contact Person
您的要求 Your Requirements
建設(shè)中 In Construction
證書(shū) Certificate Certificate
地址 ADD Add
郵編 Postal Code Zipcode
電話(huà) TEL Tel
傳真 FAX Fax
產(chǎn)品名稱(chēng) Product Name
產(chǎn)品說(shuō)明 Description Description
價(jià)格 Price
品牌 Brand
規(guī)格 Specification
尺寸 Size
生產(chǎn)廠(chǎng)家 Manufacuturer Manufacturer
型號(hào) Model
產(chǎn)品標(biāo)號(hào) Item No.
技術(shù)指標(biāo) Technique Data
產(chǎn)品描述 Description
產(chǎn)地 Production Place
銷(xiāo)售信息 Sales Information
用途 Application
論壇 Forum
在線(xiàn)訂購(gòu) On-line order
招商 Enterprise-establishing
招標(biāo) Bid Inviting
綜述 General
業(yè)績(jī) Achievements
招聘 Join Us
求賢納士 Join Us
大事 Great Event
動(dòng)態(tài) Trends
服務(wù) Service
投資 Investment
行業(yè) Industry
規(guī)劃 Programming
環(huán)境 Environment
發(fā)送 Delivery
提交 Submit
重寫(xiě) Reset
登錄 Enter
注冊(cè) Login
中國(guó)企業(yè)網(wǎng)技術(shù)支持 Powered By Ce.Net.Cn
社區(qū) Community
業(yè)務(wù)介紹 Business Introduction
在線(xiàn)調(diào)查 Online Inquiry Inquiry
下載中心 Download
會(huì)員登陸 Member Entrance
意見(jiàn)反饋 Feedback
常見(jiàn)問(wèn)題 FAQ
中心概況 General Profile
教育培訓(xùn) Education Training
游樂(lè)園 Amusement Park
在線(xiàn)交流 Online Communication
專(zhuān)題報(bào)道 Special Report[/quote]
常用類(lèi)的命名應(yīng)盡量以常見(jiàn)英文單詞為準(zhǔn)，做到通俗易懂，并在適當(dāng)?shù)牡胤郊右宰⑨?。?duì)于二級(jí)類(lèi)/ID命名，則采用組合書(shū)寫(xiě)的模式，后一個(gè)單詞的首 字母應(yīng)大寫(xiě)：諸如“搜索框”則應(yīng)命名為“searchInput”、“搜索圖標(biāo)”命名這“searchIcon”、“搜索按鈕”命名為 “searchBtn”……
一. 常規(guī)書(shū)寫(xiě)規(guī)范及方法
1. 選擇DOCTYPE：
XHTML 1.0 提供了三種DTD聲明可供選擇：
過(guò)渡的(Transitional):要求非常寬松的DTD，它允許你繼續(xù)使用HTML4.01的標(biāo)識(shí)(但是要符合x(chóng)html的寫(xiě)法)。完整代碼如下：
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ““
嚴(yán)格的(Strict):要求嚴(yán)格的DTD，你不能使用任何表現(xiàn)層的標(biāo)識(shí)和屬性，例如br。完整代碼如下：
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” ““
框架的(Frameset):專(zhuān)門(mén)針對(duì)框架頁(yè)面設(shè)計(jì)使用的DTD，如果你的頁(yè)面中包含有框架，需要采用這種DTD。完整代碼如下：
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” ““
理想情況當(dāng)然是嚴(yán)格的DTD，但對(duì)于我們大多數(shù)剛接觸web標(biāo)準(zhǔn)的設(shè)計(jì)師來(lái)說(shuō)，過(guò)渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過(guò)渡型DTD)。因?yàn)檫@種DTD還允許我們使用表現(xiàn)層的標(biāo)識(shí)、元素和屬性，也比較容易通 過(guò)W3C的代碼校驗(yàn)。
2. 指定語(yǔ)言及字符集：
為文檔指定語(yǔ)言：
html xmlns=”” lang=”en”
為了被瀏覽器正確解釋和通過(guò)W3C代碼校驗(yàn)，所有的XHTML文檔都必須聲明它們所使用的編碼語(yǔ)言；如：
常用的語(yǔ)言定義：
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /
標(biāo)準(zhǔn)的XML文檔語(yǔ)言定義：
?xml version=”1.0″ encoding=” utf-8″?
針對(duì)老版本的瀏覽器的語(yǔ)言定義：
meta http-equiv=”Content-Language” content=” utf-8″ /
為提高字符集，建議采用“utf-8”。
3. 調(diào)用樣式表：
外部樣式表調(diào)用：
頁(yè)面內(nèi)嵌法：就是將樣式表直接寫(xiě)在頁(yè)面代碼的head區(qū)。如：
style type=”text/css”!– body { background : white ; color : black ; } – /style
外部調(diào)用法：將樣式表寫(xiě)在一個(gè)獨(dú)立的.css文件中，然后在頁(yè)面head區(qū)用類(lèi)似以下代碼調(diào)用。
link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” /
在符合web標(biāo)準(zhǔn)的設(shè)計(jì)中，推薦使用外部調(diào)用法，可以不修改頁(yè)面只修改.css文件而改變頁(yè)面的樣式。如果所有頁(yè)面都調(diào)用同一個(gè)樣式表文件，那么改一個(gè)樣式表文件，可以改變所有文件的樣式。
4、選用恰當(dāng)?shù)脑兀?/p>
根據(jù)文檔的結(jié)構(gòu)來(lái)選擇HTML元素，而不是根據(jù)HTML元素的樣式來(lái)選擇。例如，使用P元素來(lái)包含文字段落，而不是為了換行。如果在創(chuàng)建文檔時(shí)找不到適當(dāng)?shù)脑?，則可以考慮使用通用的div 或者是span；
避免過(guò)渡使用div和span。少量、適當(dāng)?shù)氖褂胐iv和span元素可以使文檔的結(jié)構(gòu)更加清晰合理并且易于使用樣式；
盡可能少地使用標(biāo)簽和結(jié)構(gòu)嵌套，這樣不但可以使文檔結(jié)構(gòu)清晰，同時(shí)也可以保持文件的小巧，在提高用戶(hù)下載速度的同時(shí)，也易于瀏覽器對(duì)文檔的解釋及呈視；
5、派生選擇器：
可以使用派生選擇器給一個(gè)元素里的子元素定義樣式，在簡(jiǎn)化命名的同時(shí)也使結(jié)構(gòu)更加的清晰化，如：
.mainMenu ul li {background:url(images/bg.gif;)}
6、輔助圖片用背影圖處理：
這里的”輔助圖片”是指那些不是作為頁(yè)面要表達(dá)的內(nèi)容的一部分，而僅僅用于修飾、間隔、提醒的圖片。將其做背影圖處理，可以在不改動(dòng)頁(yè)面的情況下通過(guò)CSS樣式來(lái)進(jìn)行改動(dòng)，如：
#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
7、結(jié)構(gòu)與樣式分離：
在頁(yè)面里只寫(xiě)入文檔的結(jié)構(gòu)，而將樣式寫(xiě)于css文件中，通過(guò)外部調(diào)用CSS樣式表來(lái)實(shí)現(xiàn)結(jié)構(gòu)與樣式的分離。
8、文檔的結(jié)構(gòu)化書(shū)寫(xiě)：
頁(yè)面CSS文檔都應(yīng)采用結(jié)構(gòu)化的書(shū)寫(xiě)方式，邏輯清晰易于閱讀。如：
div id=”mainMenu”
ul
lia href=”#” 首頁(yè)/a/li
lia href=”#” 介紹/a/li
lia href=”#” 服務(wù)/a/li
/ul
/div
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
*******************************************************************************************
命名參考(來(lái)源網(wǎng)絡(luò))
常用的CSS命名規(guī)則：
頭：header
內(nèi)容：content/container
尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁(yè)面外圍控制整體布局寬度：wrapper
左右中：left right center
命名全部使用小寫(xiě)字母，如果需要多個(gè)單詞，單詞間使用“-”分隔，比如user-list
常用代碼結(jié)構(gòu)：
div：主要用于布局，分割頁(yè)面的結(jié)構(gòu)
ul/ol：用于無(wú)序/有序列表
span：沒(méi)有特殊的意義，可以用作排版的輔助，
例如
lispan(4.23)/span天幻網(wǎng)六周年天幻網(wǎng)六周年天幻網(wǎng)六周年天幻網(wǎng)六/li
然后在css中定義span為右浮動(dòng)，實(shí)現(xiàn)了日期和標(biāo)題分兩側(cè)顯示的效果
h1-h6：標(biāo)題
h1-h6 根據(jù)重要性依次遞減
h1位最重要的標(biāo)題
label：為了使你的表單更有親和力而且還能輔助表單排版的好東西，
例如：
label for="user-password"密 碼/label
input type="password" name="password" id="user-password" /
fieldset legend：fildset套在表單外，legend用于描述表單內(nèi)容。
例如：form
fieldset
legendtitle/legend
label for="user-password"密 碼/label
input type="password" name="password" id="user-password" /
/fieldset
/form
dl,dt,dd：當(dāng)頁(yè)面中出現(xiàn)第一行為類(lèi)似標(biāo)題/簡(jiǎn)述，然后下面為詳細(xì)描述的內(nèi)容時(shí)應(yīng)該使用該標(biāo)簽，
例如dl
dt什么是CSS?/dt
ddCSS就是一種叫做樣式表（stylesheet）的技術(shù)。也有的人稱(chēng)之為層疊樣式表（Cascading Stylesheet）。dd
dt什么是XHTML？/dt
ddXHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言，看起來(lái)與HTML有些想像，只有一些小的但重要的區(qū)別?？梢赃@樣看，XHTML就是一個(gè)扮演 著類(lèi)似HTML的角色的XML。 本質(zhì)上說(shuō)，XHTML是一個(gè)橋接（過(guò)渡）技術(shù)，結(jié)合了XML（有幾分）的強(qiáng)大功能及HTML（大多數(shù)）的簡(jiǎn)單特性。/dd
/dl
C #content
S #subcol
M #maincol
X #xcol
這是縱向布局的XHTML結(jié)構(gòu)，c-smx表示網(wǎng)頁(yè)有三個(gè)縱欄, c-sm表示有兩個(gè)縱欄, c-mx表示有兩個(gè)縱欄其中一個(gè)是附屬的, c-m表示一個(gè)縱欄。
其中在三縱欄的布局需要分為兩層 第一層是#subcol與#main第二層是#main中的#maincol與#xcol。
自定義命名：
根據(jù)w3c網(wǎng)站上給出的,最好是用意義命名
比如：是重要的新聞高亮顯示（像紅色）
有兩種
.red{color:red}
.important-news{color:red}
很顯然第二種傳達(dá)的意義更加明確,所以盡量不要用意義不明確的作為自己自定義的名字
CSS命名規(guī)范
DIV CSS名稱(chēng) 說(shuō)明
網(wǎng)站公用相關(guān)
Container div #container 容器
Header or banner div #header 頁(yè)頭部分
Main or global navigation div #mainNav 主導(dǎo)航
Menu #menu 菜單
Sub Menu #submenu 子菜單
Left or right side columns #sidebarA, #sidebarB 左邊欄或右邊欄
Main div #main 頁(yè)面主體
Content div #content 內(nèi)容部分
The main content area #contentMain 主要內(nèi)容區(qū)域
Footer div #footer 頁(yè)腳部分
Tag #tag 標(biāo)簽
Message #msg #message 提示信息
Tips #tips 小技巧
Vote #vote 投票
Friend Link #friendlink 友情連接
Title #title 標(biāo)題
Summary #summary 摘要
Sub-navigation list #subNav 二級(jí)導(dǎo)航
Search input #searchInput 搜索輸入框
Search output #searchOutput 搜索輸出和搜索結(jié)果相似
Search #search 搜索
Search results #searchResults 搜索結(jié)果
Copyright information #copyright 版權(quán)信息
brand #branding 商標(biāo)
branding-logo #brandingLogo LOGO
Site information #siteinfo 網(wǎng)站信息
Copyright information etc. #siteinfoLegal 法律聲明
Designer or other credits #siteinfoCredits 信譽(yù)
Join us #joinus 加入我們
Partnership opportunities #partner 合作伙伴
Services #service 服務(wù)
Regsiter #regsiter 注冊(cè)
Status #status 狀態(tài)
9、鼠標(biāo)手勢(shì)：
在XHTML標(biāo)準(zhǔn)中，hand只被IE識(shí)別，當(dāng)需要將鼠標(biāo)手勢(shì)轉(zhuǎn)換為“手形”時(shí)，則將“hand”換為“pointer”，即“cursor:pointer;”
建議你去下載CSS參考手冊(cè)看一看。（另單詞好像你打錯(cuò)了，CSS里只有ultra ltr ）
font-stretch : normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
設(shè)置或檢索用于對(duì)象中文本的文字是否橫向的拉伸變形。
改變是相對(duì)于瀏覽器顯示的字體的正常寬度的。
normal : 默認(rèn)值。不應(yīng)用拉伸變形
narrower : 使用比當(dāng)前設(shè)置的值導(dǎo)致字體寬度更小的值
wider : 使用比當(dāng)前設(shè)置的值導(dǎo)致字體寬度更大的值
extra ：特
ultra : 極
condensed : 收縮的 窄的
expanded: 擴(kuò)展的 寬的 自己組合就知道意思了 指的各種拉伸的程度
不過(guò)font-stretch理論上來(lái)講是改變字體寬度的樣式(Style)。但實(shí)際上，暫時(shí)普遍適用的瀏覽器及版本，并不支持這個(gè)屬性，也就是說(shuō)，暫時(shí)看來(lái)這個(gè)屬性是無(wú)效的，也許某天某個(gè)瀏覽器會(huì)支持它吧。
direction : ltr | rtl | inherit
ltr : 默認(rèn)值。文本從左到右流入
rtl : 文本從右到左流入
inherit : 文本流入方向由繼承獲得
用于設(shè)置文本流入的方向。簡(jiǎn)單地說(shuō)，就是ltr(left to right) 文字從左寫(xiě)到右 , rtl(right to left)則是從右寫(xiě)到左
此屬性不會(huì)影響拉丁文的字母數(shù)字字符，它們總是以 ltr 值被呈遞。但是此屬性會(huì)作用于拉丁文的標(biāo)點(diǎn)符號(hào)。
假如您想應(yīng)用此屬性于內(nèi)聯(lián)文本，您必須設(shè)定 unicode-bidi 屬性為 embed 或 bidi-override 。
一、css是Cascading Style Sheets 的縮寫(xiě),即層疊式樣式表單，它是由W3C協(xié)會(huì)制定并發(fā)布的一個(gè)網(wǎng)頁(yè)排版式標(biāo)準(zhǔn),是對(duì)HTML語(yǔ)言功能的補(bǔ)充。
二、HTML和CSS的區(qū)別?
1、定義不同：
html是HyperTextMark-upLanguage的縮寫(xiě)，即超文本標(biāo)記語(yǔ)言；
css是Cascading Style Sheets 的縮寫(xiě),即層疊式樣式表單，它是由W3C協(xié)會(huì)制定并發(fā)布的一個(gè)網(wǎng)頁(yè)排版式標(biāo)準(zhǔn),是對(duì)HTML語(yǔ)言功能的補(bǔ)充。
2、用途不同：
html則是用于文本內(nèi)容，包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說(shuō)明的具體內(nèi)容。
css是多用于樣式，主要的用途是對(duì)網(wǎng)頁(yè)中字體、顏色、背景、圖像及其他各種元素的控制,使網(wǎng)頁(yè)能夠完全按照設(shè)計(jì)者的要求來(lái)顯示。
3、CSS語(yǔ)法與HTML語(yǔ)法完全不同：
HTML里代碼是功能標(biāo)簽，如DIV、SPAN、A鏈接、em標(biāo)簽、I斜體標(biāo)簽、u下劃線(xiàn)等，html代碼語(yǔ)法范例：div內(nèi)容/div
CSS樣式代碼語(yǔ)法是div{樣式單詞：值}
三、HTML和CSS聯(lián)系：
CSS與HTML相同之處在于，兩個(gè)共同作用讓網(wǎng)頁(yè)實(shí)現(xiàn)需要的布局樣式。
擴(kuò)展資料：
1、標(biāo)記符html,說(shuō)明該文件是用超文本標(biāo)記語(yǔ)言（本標(biāo)簽的中文全稱(chēng)）來(lái)描述的,它是文件的開(kāi)頭;而/html,則表示該文件的結(jié)尾，它們是超文本標(biāo)記語(yǔ)言文件的開(kāi)始標(biāo)記和結(jié)尾標(biāo)記。
2、CSS為HTML標(biāo)記語(yǔ)言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設(shè)計(jì)領(lǐng)域是一個(gè)突破。利用它可以實(shí)現(xiàn)修改一個(gè)小的樣式更新與之相關(guān)的所有頁(yè)面元素。
CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個(gè)專(zhuān)門(mén)的CSS文件中，以供HTML頁(yè)面引用。總之，CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。
參考資料：百度百科-HTML
百度百科-CSS
什么是CSS?
中文翻譯為樣式表! 它的作用簡(jiǎn)單的說(shuō)：就是可以使你在同一頁(yè)面里使用不同的超鏈接樣式。
更神奇的是，用CSS，僅僅改變一個(gè)文件就可以改變數(shù)百個(gè)網(wǎng)頁(yè)的外觀......個(gè)性化的表現(xiàn)而不損失訪(fǎng)問(wèn)者......所有這些都因?yàn)榫W(wǎng)頁(yè)樣式表的強(qiáng)大和靈活特性。
讓我們開(kāi)始吧！
CSS 速成
層疊樣式表的基礎(chǔ)入門(mén)。
CSS 結(jié)構(gòu)和規(guī)則
各種選擇符、偽類(lèi)、偽元素和層疊順序的入門(mén)。
CSS 屬性
各種層疊樣式表級(jí)別一有效的屬性的描述。
將樣式表加入到HTML中
各種將樣式表加入到HTML文本中的方法。
依賴(lài)樣式表
怎樣會(huì)是濫用樣式表和使你的網(wǎng)頁(yè)難以處理。
CSS 參考
連接到介紹CSS的規(guī)范和其它方面的文章。
CSS 速成
------------------------------------------------------------------------------
一個(gè)樣式表由樣式規(guī)則組成, 以告訴瀏覽器怎樣去呈現(xiàn)一個(gè)文檔. 有很多將樣式規(guī)則加入到你的HTML文檔中的方法, 但最簡(jiǎn)單的啟動(dòng)方法是使用HTML的STYLE組件. 這個(gè)元素放置于文檔的HEAD部分, 包含網(wǎng)頁(yè)的樣式規(guī)則.
要注意到盡管STYLE元素是試驗(yàn)樣式表的好方法, 它具有某些在用戶(hù)使用這種方法之前應(yīng)該考慮的缺點(diǎn). 不同方法的優(yōu)點(diǎn)和缺點(diǎn)在將樣式表加入到HTML中部分中有討論。
每個(gè)規(guī)則的組成包括一個(gè)選擇符--通常是一個(gè)HTML的元素, 例如BODY, P, 或EM--和該選擇符所接受的樣式.
有很多的屬性可以用于定義一個(gè)元素. 每個(gè)屬性帶一個(gè)值, 共同地描述選擇符應(yīng)該如何呈現(xiàn).
樣式規(guī)則組成如下:
選擇符 { 屬性: 值 }
單一選擇符的復(fù)合樣式聲明應(yīng)該用分號(hào)隔開(kāi):
選擇符 { 屬性1: 值1; 屬性2: 值2 }
以下是一段定義了H1和H2元素的顏色和字體大小屬性:
HEAD
TITLECSS例子/TITLE
STYLE TYPE="text/css"
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
/STYLE
/HEAD
上述的樣式表告訴瀏覽器用加大、紅色字體去顯示一級(jí)標(biāo)題, 用大、藍(lán)色字體去顯示二級(jí)標(biāo)題. CSS1 規(guī)格正式地定義了所有的有效屬性和值. 屬性和值在本網(wǎng)站的CSS 屬性部分也給出了.
本教程專(zhuān)門(mén)介紹了CSS非常基礎(chǔ)的知識(shí), 以提供足夠的信息去讓你試驗(yàn)自己的樣式. 要獲得CSS更深入的知識(shí), 閱讀繼續(xù)閱讀以下部分:
CSS 結(jié)構(gòu)和規(guī)則
CSS 屬性
將樣式表加入到HTML中
CSS 結(jié)構(gòu)和規(guī)則
基本語(yǔ)法
規(guī)則
選擇符
任何HTML元素都可以是一個(gè)CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如，
P { text-indent: 3em }
當(dāng)中的選擇符是P。
類(lèi)選擇符
單一個(gè)選擇符能有不同的CLASS(類(lèi))，因而允許同一元素有不同樣式。例如，一個(gè)網(wǎng)頁(yè)制作者也許希望視其語(yǔ)言而定，用不同的顏色顯示代碼 :
code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了兩個(gè)類(lèi)，css和html，供HTML的CODE元素使用。CLASS屬性是用于在HTML中以指明元素的類(lèi)，例如，
P CLASS=warning每個(gè)選擇符只允許有一個(gè)類(lèi)。
例如，code.html.proprietary是無(wú)效的。/p
類(lèi)的聲明也可以無(wú)須相關(guān)的元素:
.note { font-size: small }
在這個(gè)例子，名為note的類(lèi)可以被用于任何元素。
一個(gè)良好的習(xí)慣是在命名類(lèi)的時(shí)候，根據(jù)它們的功能而不是根據(jù)它們的外觀。上述例子中的note類(lèi)也可以命名為small，但如果網(wǎng)頁(yè)制作者決定改變這個(gè)類(lèi)的樣式，使得它不再是小字體的話(huà)，那么這個(gè)名字就變得毫無(wú)意義了。
ID 選擇符
ID 選擇符個(gè)別地定義每個(gè)元素的成分。這種選擇符應(yīng)該盡量少用，因?yàn)樗哂幸欢ǖ木窒?。一個(gè)ID選擇符的指定要有指示符"#"在名字前面。例如，ID選擇符可以指定如下:
#svp94O { text-indent: 3em }
這點(diǎn)可以參考HTML中的ID屬性:
P ID=svp94O文本縮進(jìn)3em/P
關(guān)聯(lián)選擇符
關(guān)聯(lián)選擇符只不過(guò)是一個(gè)用空格隔開(kāi)的兩個(gè)或更多的單一選擇符組成的字符串。這些選擇符可以指定一般屬性，而且因?yàn)閷盈B順序的規(guī)則，它們的優(yōu)先權(quán)比單一的選擇符大。例如，以下的上下文選擇符
P EM { background: yellow }
是P EM。這個(gè)值表示段落中的強(qiáng)調(diào)文本會(huì)是黃色背景；而標(biāo)題的強(qiáng)調(diào)文本則不受影響。
聲明
屬性
一個(gè)屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字體。
值
聲明的值是一個(gè)屬性接受的指定。例如，屬性顏色能接受值red。
組合
為了減少樣式表的重復(fù)聲明，組合的選擇符聲明是允許的。例如，文檔中所有的標(biāo)題可以通過(guò)組合給出相同的聲明:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
繼承
實(shí)際上，所有在選擇符中嵌套的選擇符都會(huì)繼承外層選擇符指定的屬性值，除非另外更改。例如，一個(gè)BODY定義了的顏色值也會(huì)應(yīng)用到段落的文本中。
有些情況是內(nèi)部選擇符不繼承周?chē)倪x擇符的值，但理論上這些都是特殊的。例如，上邊界屬性是不會(huì)繼承的；直覺(jué)上，一個(gè)段落不會(huì)有同文檔BODY一樣的上邊界值。
注解
樣式表里面的注解使用C語(yǔ)言編程中一樣的約定方法去指定。CSS1注解的例子如以下格式:
/* COMMENTS CANNOT BE NESTED */
偽類(lèi)和偽元素
偽類(lèi)和偽元素是特殊的類(lèi)和元素，能自動(dòng)地被支持CSS的瀏覽器所識(shí)別。偽類(lèi)區(qū)別開(kāi)不同種類(lèi)的元素(例如，visited links(已訪(fǎng)問(wèn)的連接)和active links(可激活連接)描述了兩個(gè)定位錨(anchors)的類(lèi)型)。偽元素指元素的一部分，例如段落的第一個(gè)字母。
偽類(lèi)或偽元素規(guī)則的形式如
選擇符:偽類(lèi) { 屬性: 值 }
或
選擇符:偽元素 { 屬性: 值 }
偽類(lèi)和偽元素不應(yīng)用HTML的CLASS屬性來(lái)指定。一般的類(lèi)可以與偽類(lèi)和偽元素一起使用，如下:
選擇符.類(lèi): 偽類(lèi) { 屬性: 值 }
或
選擇符.類(lèi): 偽元素 { 屬性: 值 }
定位錨偽類(lèi)
偽類(lèi)可以指定A元素以不同的方式顯示連接(links)、已訪(fǎng)問(wèn)連接(visited links)和可激活連接(active links)。定位錨元素可給出偽類(lèi)link、visited或active。一個(gè)已訪(fǎng)問(wèn)連接可以定義為不同顏色的顯示，甚至不同字體大小和風(fēng)格。
一個(gè)有趣的效果是使當(dāng)前(或“可激活”)連接以不同顏色、更大的字體顯示。然后，當(dāng)網(wǎng)頁(yè)的已訪(fǎng)問(wèn)連接被重選時(shí)，又以不同顏色、更小字體顯示。這個(gè)樣式表的示例如下:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
首行偽元素
通常在報(bào)紙上的文章，例如Wall Street Journal中的，文本的首行都會(huì)以粗印體而且全部大寫(xiě)地展示。CSS1包括了這個(gè)功能，將其作為一個(gè)偽元素。首行偽元素可以用于任何塊級(jí)元素(例如P、H1等等)。以下是一個(gè)首行偽元素的例子:
P:first-line {
font-variant: small-caps;
font-weight: bold }
首個(gè)字母?jìng)卧?/p>
首個(gè)字母?jìng)卧赜糜诩哟?drop caps)和其他效果。含有已指定值選擇符的文本的首個(gè)字母會(huì)按照指定的值展示。一個(gè)首個(gè)字母?jìng)卧乜梢杂糜谌魏螇K級(jí)元素。例如:
P:first-letter { font-size: 300%; float: left }
會(huì)比普通字體加大三倍。
層疊順序
當(dāng)使用了多個(gè)樣式表，樣式表需要爭(zhēng)奪特定選擇符的控制權(quán)。在這些情況下，總會(huì)有樣式表的規(guī)則能獲得控制權(quán)。以下的特性將決定互相對(duì)立的樣式表的結(jié)果。
! important
規(guī)則可以用指定的! important 特指為重要的。一個(gè)特指為重要的樣式會(huì)凌駕于與之對(duì)立的其它相同權(quán)重的樣式。同樣地，當(dāng)網(wǎng)頁(yè)制作者和讀者都指定了重要規(guī)則時(shí)，網(wǎng)頁(yè)制作者的規(guī)則會(huì)超越讀者的。以下是! important 聲明的例子:
BODY { background: url(bar.gif) white;
background-repeat: repeat-x ! important }
Origin of Rules (Author's vs. Reader's)
正如以前所提及的，網(wǎng)頁(yè)制作者和讀者都有能力去指定樣式表。當(dāng)兩者的規(guī)則發(fā)生沖突，網(wǎng)頁(yè)制作者的規(guī)則會(huì)凌駕于讀者的其它相同權(quán)重的規(guī)則。而網(wǎng)頁(yè)制作者和讀者的樣式表都超越瀏覽器的內(nèi)置樣式表。
網(wǎng)頁(yè)制作者應(yīng)該小心地使用! important 規(guī)則，因?yàn)樗鼈儠?huì)超越用戶(hù)任何的! important 規(guī)則。例如，一個(gè)用戶(hù)由于視覺(jué)關(guān)系，會(huì)要求大字體或指定的顏色，而且這樣的用戶(hù)會(huì)有可能聲明確定的樣式規(guī)則為! important，因?yàn)檫@些樣式對(duì)于用戶(hù)閱讀網(wǎng)頁(yè)是極為重要的。任何的! important 規(guī)則會(huì)超越一般的規(guī)則，所以建議網(wǎng)頁(yè)制作者使用一般的規(guī)則以確保有特殊樣式需要的用戶(hù)能閱讀網(wǎng)頁(yè)。
選擇符規(guī)則: 計(jì)算特性
基于它們的特性級(jí)別，樣式表也可以超越與之沖突的樣式表，一個(gè)較高特性的樣式永遠(yuǎn)都凌駕于一個(gè)較低特性的樣式。這只不過(guò)是計(jì)算選擇符的指定個(gè)數(shù)的一個(gè)統(tǒng)計(jì)游戲。
統(tǒng)計(jì)選擇符中的ID屬性個(gè)數(shù)。
統(tǒng)計(jì)選擇符中的CLASS屬性個(gè)數(shù)。
統(tǒng)計(jì)選擇符中的HTML標(biāo)記名格式。
最后，按正確的順序?qū)懗鋈齻€(gè)數(shù)字，不要加空格或逗號(hào)，得到一個(gè)三位數(shù)。( 注意，你需要將數(shù)字轉(zhuǎn)換成一個(gè)以三個(gè)數(shù)字結(jié)尾的更大的數(shù)。)相應(yīng)于選擇符的最終數(shù)字列表可以很容易確定較高數(shù)字特性凌駕于較低數(shù)字的。以下是一個(gè)按特性分類(lèi)的選擇符的列表:
#id1 {xxx} /* a=1 b=0 c=0 -- 特性 = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 -- 特性 = 013 */
LI.red {xxx} /* a=0 b=1 c=1 -- 特性 = 011 */
LI {xxx} /* a=0 b=0 c=1 -- 特性 = 001 */
特性的順序
為了方便使用，當(dāng)兩個(gè)規(guī)則具同樣權(quán)重時(shí)，取后面的那個(gè)。
重慶分公司
重慶分公司
