csgo开箱_(wafotl.cn)茄子推荐的开箱子网站

企業(yè)官網(wǎng)建設(shè) 營銷型網(wǎng)站 微信分銷系統(tǒng) 微信小程序 企業(yè)郵局

了解css技術(shù)基礎(chǔ)之css代碼的編寫規(guī)范

一般網(wǎng)站都包含大量的源代碼,運(yùn)用div+css的頁面排版方式,制作出語義明確、結(jié)構(gòu)清晰的網(wǎng)頁還需要遵循編寫css代碼的規(guī)范。

css代碼的編寫規(guī)范
INTRODUCTION導(dǎo) 語

一個(gè)大型網(wǎng)站的每個(gè)網(wǎng)頁都包含大量的源代碼。以往設(shè)計(jì)師使用表格來進(jìn)行頁面布局,使網(wǎng)站的源代碼更加繁瑣,此時(shí)要對一個(gè)使用表格排版的大型網(wǎng)站進(jìn)行修改是非常困難的。自從出現(xiàn)了div+css的頁面排版方式后,網(wǎng)頁的源代碼量就大大減少了。但是要制作出語義明確、結(jié)構(gòu)清晰的網(wǎng)頁還需要遵循編寫css代碼的規(guī)范。Css代碼的規(guī)范并不是一些明文細(xì)則,而是網(wǎng)頁設(shè)計(jì)者在制作和修改網(wǎng)頁代碼時(shí)總結(jié)的經(jīng)驗(yàn)。

css代碼的編寫規(guī)范

01
使用語義,明確的標(biāo)記

傳統(tǒng)的HTML代碼本身也是一種容易理解的標(biāo)記語言。如p標(biāo)簽代表paragraph,就是段落的意思。b標(biāo)簽代表bold,就是粗體的意思。在編寫XHTML文檔時(shí),使用有意義的標(biāo)簽?zāi)茏尵W(wǎng)頁源代碼易懂易改,并且能防止代碼累贅。XHTML中常用的有語義的標(biāo)簽:

標(biāo)簽

語義

H1-h6

標(biāo)題h1-h6根據(jù)重要性依次遞減,h1為最重要的標(biāo)題

Ul、ol、dl

無序列表、有序列表和定義列表

Captain、summary

表格的標(biāo)題和描述,有利于概括表格的內(nèi)容

Tbody、thead、tfoot

表格的頭部中部和尾部

Blockquote、cite

引用

Strong、em

粗體和斜體

Fieldset、legend

用于嵌套表單

使用有語義的標(biāo)簽是符合web標(biāo)準(zhǔn)的首要條件。這樣構(gòu)架XHTML頁面才能達(dá)到形式與表現(xiàn)的合理化。

02
使用有意義的css命名

盡管XHTML提供了很多有語義的標(biāo)簽,仍然不能滿足實(shí)際運(yùn)用的需求。所以需要為不同功能的標(biāo)簽增加類選擇器或者ID選擇器。在進(jìn)行頁面排版時(shí)要為不同功能的標(biāo)簽設(shè)置相應(yīng)的css選擇器名稱。例如:網(wǎng)頁的頭部若用一個(gè)div標(biāo)簽來嵌套,那么這個(gè)div標(biāo)簽的類選擇器就應(yīng)該命名為header。

內(nèi)容

命名

內(nèi)容

命名

網(wǎng)頁頭部

header

標(biāo)志

logo

網(wǎng)頁內(nèi)容

Content/containe

廣告

banner

網(wǎng)頁尾部

footer

網(wǎng)頁主體

main

導(dǎo)航

Nav/navigation

熱點(diǎn)

hot

側(cè)欄

sidebar

新聞

news

欄目

Col/column

下載

download

頁面外圍控制整體布局寬度

wrapper

子導(dǎo)航

subnav

左右中

Left right center

搜索

search

登錄框

loginbox

滾動(dòng)

scroll

友情鏈接

links

標(biāo)簽頁

tab

菜單

menu

子菜單

submenu

提示信息

message

技巧

tips

欄目標(biāo)題

title

服務(wù)

service

注冊

regsiter

指南

guild

版權(quán)

copyright

列表

list

以上的css命名只是一般常用的命名,在網(wǎng)頁制作中會(huì)遇到更復(fù)雜的元素。例如:文章標(biāo)題的子標(biāo)題,命名為subtitle,為了使命名結(jié)構(gòu)更為清晰,常使用駝峰式的命名法,將subtitle寫為subTitle.駝峰式的命名方法就是把命名中的第一個(gè)單詞首字母記為小寫,其余單詞首字母記為大寫。例如:leftcolumnbar用駝峰式命名就是leftColumnBar。

03
css代碼的縮寫

之前有介紹過如何縮寫一些css屬性代碼。以下列出了可以縮寫的css屬性及其縮寫的方式。

可縮寫屬性

縮寫前的形式

縮寫后的形式

說明

顏色

#000000
? ? ?#224499

#000
? ? ?#249

16進(jìn)制的色彩值,如果每兩位的值相同,可以縮寫一半。

字體(font)

font-style:italic; font-variant:small-caps; font-weight:normal; font-size:14px; line-height:28px; font-family:'宋體';

font:italic small-caps normal 14px/28px '宋體'

縮寫字體定義,至少要定義font-size和font-family兩個(gè)值。

列表(list-style)

list-style-type:square; list-style-position:outside; list-style-image:url(picture.jpg);

list-style:square outside url(picture.jpg)

取消默認(rèn)的圓點(diǎn)和序號(hào)的方法:list-style:none

背景(background)

background-color:#FFF; background-image:url(picture.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:center left;

background:#FFF url(picture.jpg) no-repeat fixed center left;

語法是background:color image repeat attachment position;

盒模型

margin:5px 5px 5px 5px

margin:10px 5px 10px 5px

margin:10px 5px 30px 5px

margin:1px 2px 3px 4px

margin:5px;

margin:10px 5px;

margin:10px 5px 30px;

不能縮寫

方便的記憶方法是順時(shí)針,上右下左。Property:valueA;表示所有邊都是一個(gè)值valueA;Property:valueA valueB 表示top和bottom的值是valueA;left和right的值是valueB;Property:valueA valueB valueC;表示top的值是valueA,right和left的值是valueB;bottom的值是valueC;Property:valueA valueB valueC valueD;四個(gè)值依次表示top,right,bottom,left

邊框(border)

border-width:2px; border-style:solid; border-color:#F00

border:2px solid #F00

Border:width style color


04
合理的css注釋

在制作標(biāo)準(zhǔn)網(wǎng)頁的過程中合理使用注釋能給文檔創(chuàng)建者和修改者提供很大的幫助,文檔創(chuàng)建者在編寫css文檔時(shí)可能非常清楚各個(gè)代碼的意義,但是半年或者一年后再次修改該文檔就不會(huì)那么清晰了。當(dāng)別的設(shè)計(jì)師要修改這個(gè)文檔,若沒有注釋的話,修改起來非常困難。常見使用css注釋的地方有以下幾個(gè):
1、解釋某個(gè)css樣式的作用。這種注釋是文檔創(chuàng)建者和修改者留下的提示信息,避免后期引起的困惑和麻煩。代碼如下: *{ margin:0px; padding:0px; }/*設(shè)置整個(gè)網(wǎng)頁的邊距和補(bǔ)白都為0*/ 沒有必要為每一個(gè)css樣式都加上注釋,只需要為某些重要的css樣式標(biāo)明注釋即可。如用用于布局的css樣式就應(yīng)該添加注釋。?

2、文檔的作者和創(chuàng)建文檔的時(shí)間。一般在css文件的頭部會(huì)添加該文件的作者、時(shí)間等信息。這些信息對于日后查找文件和修改文件有很大幫助。 /*文檔創(chuàng)建者:張明 文檔創(chuàng)建時(shí)間:2018-7-25 文檔關(guān)聯(lián)XHTML頁面:index.html*/?

3、使用div+css的布局方式制作XHTML頁面常會(huì)用到不同的區(qū)塊。在css文檔中,最好是將每個(gè)區(qū)塊所有用到的css代碼放在一起,然后注釋指明其區(qū)塊名稱。例如:網(wǎng)頁頭部的區(qū)塊名稱為header,則可以把header中用到的css代碼集中到一起,然后用注釋指明,代碼: /*--header--*/ .header { width:150px;background:#ffffff; } .header h2{font-size:14px;} .header p{ line-height:20px;} /*--header--*/ 在header代碼塊的開始和結(jié)束都加上一行注釋,指示注釋之間的代碼都屬于網(wǎng)頁頭部header區(qū)塊。

注釋不要使用特別多,要合理使用注釋才能提高效率。注釋過多,會(huì)使css文件過大,影響載入速度。

!
相關(guān)專題

了解css技術(shù)基礎(chǔ)之用css控制樣式

CSS有助于實(shí)現(xiàn)負(fù)責(zé)任的Web設(shè)計(jì),CSS能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制,支持幾乎所有的字體字號(hào)樣式,擁有對網(wǎng)頁對象和模型樣式編輯的能力。

01

了解css技術(shù)基礎(chǔ)之css設(shè)置背景

CSS提供了控制背景顏色和背景圖片的多個(gè)屬性,用于產(chǎn)生表現(xiàn)豐富的網(wǎng)頁背景。這樣能使單調(diào)的頁面變得豐富多彩。

02

了解css技術(shù)基礎(chǔ)之css設(shè)置圖片的樣式

圖片在網(wǎng)頁設(shè)計(jì)中占據(jù)相當(dāng)重要的位置。使用css樣式可以設(shè)置圖片的大小和邊框等屬性。恰當(dāng)?shù)氖褂胏ss其他屬性和配合頁面排布也能創(chuàng)造出很精美的圖片效果。

03

了解css技術(shù)基礎(chǔ)之css控制文本樣式

在網(wǎng)頁中包含大量的文字信息,統(tǒng)稱為文本。文本的樣式由文字樣式和段落樣式構(gòu)成。css提供了豐富的屬性來控制文字樣式和段落樣式。

04



!

新聞資訊


關(guān)于我們


浙江網(wǎng)盛生意寶股份有限公司(股票代碼:002095,以下簡稱生意寶)是一家專業(yè)從事互聯(lián)網(wǎng)信息服務(wù)、電子商務(wù)、專業(yè)搜索引擎和企業(yè)應(yīng)用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務(wù)之都”杭州,從化工行業(yè)B2B起家,目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務(wù)運(yùn)營商和綜合B2B運(yùn)營商。
聯(lián)系人:王經(jīng)理
電話:024-83959235
郵箱:wy@netsun.com


浙江網(wǎng)盛生意寶股份有限公司 版權(quán)所有 浙ICP證 浙B2-20080131