示：點擊上方"藍(lán)色字體"↑ 可以訂閱噢！

摘要 51RGB官方微信

網(wǎng)頁制作中規(guī)范使用DIV+CSS命名規(guī)則，可以改善優(yōu)化功效特別是團(tuán)隊合作時候可以提供合作制作效率，具體DIV CSS命名規(guī)則CSS命名大全內(nèi)容篇。

常用DIV+CSS命名大全集合，即CSS命名規(guī)則

我們開發(fā)CSS+DIV網(wǎng)頁（Xhtml）時候,比較困惑和糾結(jié)的事就是CSS命名，特別是新手不知道什么地方該如何命名，怎樣命名才是好的方法。

一、命名規(guī)則說明

1、所有的命名最好都小寫

2、屬性的值一定要用雙引號("")括起來，且一定要有值如 class="helloweb" , id="helloweb"

3、每個標(biāo)簽都要有開始和結(jié)束，且要有正確的層次，排版有規(guī)律工整

4、空元素要有結(jié)束的tag或于開始的tag后加上"/"

5、表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及任何的表現(xiàn)元素，如：style、font、bgColor、border 等

6、<h1>到<h6>的定義，應(yīng)遵循從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有利于搜索引擎的查詢。

7、給每一個表格和表單加上一個唯一的、結(jié)構(gòu)標(biāo)記 id

8、給圖片加上alt 標(biāo)簽，優(yōu)點是在于在圖片發(fā)生錯誤時，alt 可以體現(xiàn)給用戶

9、盡量使用英文命名原則

10、盡量不縮寫，除非一看就明白的單詞

下面給大家介紹常見CSS命名和DIV CSS命名方法。

二、相對網(wǎng)頁外層重要部分CSS樣式命名

外套 wrap ------------------用于最外層

頭部 header ---------------用于頭部

主要內(nèi)容 main ------------用于主體內(nèi)容（中部）

左側(cè) main-left -------------左側(cè)布局

右側(cè) main-right -----------右側(cè)布局

導(dǎo)航條 nav -----------------網(wǎng)頁菜單導(dǎo)航條

內(nèi)容 content --------------用于網(wǎng)頁中部主體

底部 footer -----------------用于底部

三、DIV+CSS命名參考表

以下為CSS樣式命名與CSS文件命名參考表，DIV CSS命名集合：

CSS命名其它說明：

DIV+CSS命名小結(jié)：無論是使用“.”（小寫句號）選擇符號開頭命名，還是使用“#”(井號)選擇符號開頭命名都無所謂，但我們最好遵循，主要的、重要的、特殊的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名，同時考慮命名的CSS選擇器在HTML中重復(fù)使用調(diào)用。

通常我們最常用主要命名有：wrap（外套、最外層）、header（頁眉、頭部）、nav(導(dǎo)航條)、menu(菜單)、title(欄目標(biāo)題、一般配合h1\h2\h3\h4標(biāo)簽使用)、content (內(nèi)容區(qū))、footer(頁腳、底部)、logo（標(biāo)志、可以配合h1標(biāo)簽使用）、banner（廣告條，一般在頂部）、copyRight（版權(quán)）。其它可根據(jù)自己需要選擇性使用。

建議：主要的、重要的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名。

2.CSS樣式文件命名如下：

主要的 master.css

布局，版面 layout.css

專欄 columns.css

文字 font.css

打印樣式 print.css

主題 themes.css

四、英文命名技巧

如果遇到不常用的，可以借助翻譯工具進(jìn)行翻譯取其英文命名。

以上為DIV+CSS的命名規(guī)則總結(jié)，相信通過規(guī)范的CSS 命名會給你以后做網(wǎng)站網(wǎng)頁的維護(hù)帶來方便。

想認(rèn)識志同道合的朋友一起學(xué)習(xí)web

加入我們的學(xué)習(xí)QQ群 190166743

豐富的學(xué)習(xí)資源，周一到周四免費(fèi)直播公開課

長按圖片，識別二維碼即可入群

你可能感興趣的精彩內(nèi)容

微信：UI設(shè)計自學(xué)平臺加關(guān)注

長按關(guān)注：《UI設(shè)計自學(xué)平臺》

↓↓↓

.標(biāo)題

標(biāo)題可能是最容易學(xué)習(xí)的代碼之一，并考慮到 它們對您的SEO至關(guān)重要，這是一件好事。共有六種不同類型，如下所示。要創(chuàng)建標(biāo)題，只需將文本包裝在所選的標(biāo)題標(biāo)簽中：

2.段落

沒有一段要詳細(xì)說明該消息的標(biāo)題會是什么？要獲得類似于您現(xiàn)在正在閱讀的段落，只需將文本包裝在<p>標(biāo)記中，如下例所示，并且別忘了用</ p>標(biāo)記將其關(guān)閉！

<p>嘿，我是一個段落！</ p>

嘿，我是一段！

3.鏈接

如果不將您本已豐富的內(nèi)容鏈接到其他相關(guān)文章和網(wǎng)站文章，則入站營銷就算什么。嘗試使用以下<a>代碼在段落中鏈接單詞或短語：

<a href="http://www.impactbnd.com">讓我們訪問IMPACT的真棒網(wǎng)站！</a>

奇跡般地變成：讓我們訪問IMPACT的真棒網(wǎng)站！

代碼語句的href部分指定了您要鏈接訪問的目標(biāo)網(wǎng)站地址。

4.圖片

這很有趣。圖像使一切變得更好，它們使您的內(nèi)容對讀者更具吸引力。插入這樣的圖像：

<img class =“ lazy” data-src =“ http://cdn2.hubspot.net/hubfs/145335/Cute-Puppy.jpg” alt =“ Cute-Puppy” style =“ width：500px; height：333px; “>

image標(biāo)簽為空，因為它僅包含屬性，因此不需要關(guān)閉。上面列出的屬性包括“ class =“ lazy” data-src“或圖像URL。我還包括了圖像替代文本（對于SEO而言很重要），以及一些樣式屬性（寬度和高度）。

您可以根據(jù)需要自定義圖像。哦，對于你們那里所有的小狗愛好者-像我一樣-這是我上面編碼的實際圖像：

5.換行

換行符也是一個空元素，因此不需要將其關(guān)閉。換行符基本上是用<br>創(chuàng)建的兩行文本之間的有意空格。

<p>在此句子下放置換行符。
<br>
在此句子上方放置換行符。</ p>

在此句子下放置換行符

在此句子上方放置換行符。

轉(zhuǎn)換完上述HTML后，與使用<p>標(biāo)記分隔兩個段落相比，您可以說第一行和第二行之間的空間較小。添加換行符有助于使句子位于同一段落的不同行中。

6.大膽而堅強(qiáng)

為了使內(nèi)容醒目，有兩個有效的代碼元素。但是，我的開發(fā)人員告訴我<strong>的使用量遠(yuǎn)超過<b>。不要忘記關(guān)閉<strong>標(biāo)簽！</ strong>

<strong>將整個句子加粗！</ strong>
或僅<strong>加粗</ strong>一個字！

大膽的整句話！
或只加粗一個字！

7.斜體和強(qiáng)調(diào)

斜體和強(qiáng)調(diào)文本與粗體和強(qiáng)文本相似。有兩個代碼元素，但一個元素比另一個元素使用更多。在這種情況下，<i>將起作用，但是<em>更常用。

<em>這句話很漂亮</ em>

這句話很漂亮。

8.下劃線

粗體，斜體，并加下劃線。這一個和其他兩個一樣容易。只需將要加下劃線的文本包裝在<u>標(biāo)記中，例如。

<u>看，我們可以加下劃線！</ u>

看，我們可以強(qiáng)調(diào)！

9.有序列表

有序列表和無序列表之間有區(qū)別。有序列表包含數(shù)字，而無序列表包含項目符號。它們都遵循相同的結(jié)構(gòu)，但是一個字母會發(fā)生變化。

這是有序列表的代碼語句。<ol>是整個“有序列表”，而<li>是一個“列表項”。您可以根據(jù)需要包括任意數(shù)量的列表項。

10.無序列表

從一個有序列表切換到一個無序列表，只需要更改一個字母即可。

11.上標(biāo)

要在文本中插入上標(biāo)格式，請將要顯示為上標(biāo)的文本包裝在<sup>標(biāo)記中。</ sup>您將得到類似這樣的結(jié)果。

商標(biāo)應(yīng)使用上標(biāo)<sup> TM </ sup>書寫。

商標(biāo)應(yīng)使用上標(biāo)TM書寫。

12.下標(biāo)

如果您知道如何上標(biāo)，那么您應(yīng)該知道如何下標(biāo)。只需使用<sub>標(biāo)記</ sub>即可獲得這樣的文本。

有時，引文用下標(biāo)寫成。

有時，引文用下標(biāo)寫成。

13.水平線

是否要拆分頁面或文章的各個部分？嘗試一條水平線！只需使用空元素（無需關(guān)閉它）<hr>。

在我和句子2之間插入一條水平線。
<hr>
嗨，我是句子2。

在我和句子2之間插入一條水平線。

嗨，我的句子是2。

14.標(biāo)記或突出顯示的文本

我敢打賭，您不知道可以通過HTML代碼突出顯示文本，是嗎？太酷了，太容易了。將要在<mark>標(biāo)記</ mark>中突出顯示的文本換行，以便獲得酷炫的突出功能。

僅突出顯示<mark>最重要的注釋</ mark>。

僅突出顯示 最重要的注意事項。

15.刪除（貫穿）文本

如果您想在文本上顯示穿越效果（也許您創(chuàng)建了一個任務(wù)列表，并希望在執(zhí)行過程中對每個任務(wù)進(jìn)行劃線），則有相應(yīng)的代碼。嘗試使用<del>標(biāo)記刪除完整的句子甚至一個單詞。</ del>

<del>喂狗。</ del>
<del>寫我的博客文章。</ del>
做飯。

喂狗。
寫我的博客文章。
做晚飯。

16.短期和長期報價

到目前為止，您可能想知道我如何將所有示例都放在文本框中。好吧，驚喜！也有一個代碼。它實際上稱為塊引用或長引號。您可以在下面看到長引號和短引號（普通引號）之間的區(qū)別。

<blockquote>與其余示例一樣，所有這些文本都將以blockquote出現(xiàn)。</ blockquote>
<q>之所以引用這是因為我是大聲說出來。</ q>

與其余示例一樣，所有這些文本都將以大括號顯示。
我引用此內(nèi)容是因為我要大聲說出來。

17.設(shè)置特定字體

接下來的幾個會變得有些棘手，所以請嘗試和我在一起。現(xiàn)在，您知道如何創(chuàng)建標(biāo)題，段落和樣式化的文本，這對您知道可以使用元素“字體家族”輕松更改字體很有用。

不要忘記所有小的細(xì)節(jié)，例如等號，引號和分號。查看以下示例。

<h4 style =“ font-family：Georgia;”>我想將此標(biāo)題更改為Georgia字體。</ h4>

<p style =“ font-family：Verdana;”>我想將此段落更改為Verdana字體。</ p>

我想將此標(biāo)題更改為Georgia字體。

我想將此段落更改為Verdana字體。

18.設(shè)置特定的文本顏色

該代碼使用與上一個示例相同的代碼類型，但是使用“顏色”代替使用字體家族。您可以嘗試使用實際的顏色（藍(lán)色，紅色，橙色等），也可以插入十六進(jìn)制顏色以自定義品牌的文字。

<p style =“ color：blue;”>今天的天空真的是藍(lán)色。</ p>
<p style =“ color：＃ff471a;”>火是橘紅色的</ p>

今天的天空真的很藍(lán)。

火是橘紅色的。

19.設(shè)置特定的文字大小

同樣，此代碼使用相同的基本代碼邏輯，但使用元素“ font-size”。將字體大小設(shè)置為像素或px。

<p style =“ font-size：36px;”>將此段落設(shè)置為36字體。</ p>
<p style =“ font-size：12px;”>將此段落設(shè)置為12字體。</ p>

使此段落大小為36字體。

使此段落大小為12字體。

20.設(shè)置特定的文本對齊方式

左，居中，右或?qū)R。您如何看待您的文字？使用“文本對齊”以任何方式進(jìn)行設(shè)置。

<p style =“ text = align：center;”>此段落應(yīng)居中。</ p>
<p style =“ text-align：right;”>此段落應(yīng)右對齊。</ p>

本段應(yīng)居中。

本段應(yīng)右對齊。

21.桌子

我把最好的留在了最后！好吧，我不知道這是否是最好的，但我認(rèn)為這很酷。用于創(chuàng)建表的HTML代碼可能會變得非常復(fù)雜，但是如果您掌握了基本知識，那么您應(yīng)該不會有太大的問題。

我將在下面顯示如何創(chuàng)建一個簡單表。

為了易于理解，<tr>代表表行，而<td>代表表數(shù)據(jù)。請記住，您可以更改字體，文本大小，文本顏色，文本對齊方式等。

開始編碼！

您剛剛閱讀的21個代碼非常不錯，可以開始練習(xí)來增強(qiáng)HTML技能。