div css naming rules_html/css_WEB-ITnose

div css naming rules

2009-04-15 11:48

Common code structure:

div: mainly used for layout, dividing the structure of the page
ul/ol: used for unordered/ordered lists
span: has no special meaning and can be used as an auxiliary for typesetting, for example:

<li> The effect of displaying the title on both sides

h1-h6: title

h1-h6 in descending order according to importance

h1 most important title

label: In order to make your Good things that make the form more friendly and can also assist in form layout, such as:

<label for="user-password">password</label> <input type ="password" name="password" id="user-password" /> fieldset & legend: fildset is set outside the form, and legend is used to describe the form content. For example: <form> <fieldset> <legend>title</legend> <label for="user-password">password</label> <input type="password" name="password" id="user-password" /> </fieldset> </form>

dl,dt,dd: When the first line appears on the page, it will be similar to the title/brief description, and then the detailed description will This tag should be used when viewing content, for example:

<dl> <dt>What is CSS?</dt> <dd>CSS is a technology called a stylesheet. Some people also call it Cascading Stylesheet. <dd> <dt>What is XHTML? </dt> < dd>XHTML is an XML-based markup language that looks somewhat similar to HTML, with only some small but important differences. You can look at it this way, XHTML is XML that plays a role similar to HTML. In essence, XHTML is a bridging (transition) technology that combines the power of XML (somewhat) with the simplicity of HTML (mostly). </dd> </dl>

C #content

S #subcol

M #maincol

X #xcol

This is the XHTML structure of vertical layout. c-smx means that the web page has three columns, c-sm means there are two columns, c-mx means there are two columns, one of which is attached, and c-m means one column. .

The three-column layout needs to be divided into two layers. The first layer is #subcol and #main. The second layer is #maincol and #xcol in #main.

Custom naming:

According to the w3c website, it is best to name with meaning

For example: important news is highlighted (like red)
There are two kinds

.red{color:red} .important-news{color:red}

Obviously the meaning conveyed by the second type is more clear, so try not to use unclear meaning as your own definition Name

Commonly used CSS naming rules:

Header: header Content: content/container Tail: footer Navigation: nav Sidebar: sidebar

Column: column Page peripheral control Overall layout width: wrapper Left and right center: left right center

Login bar: login bar Logo: logo Advertising: banner Page body: main Hotspot: hot

News: news Download: download Sub-navigation: subnav Menu: menu

Submenu: submenu Search: search Friendly link: friendlink Footer: footer

Copyright: copyright Scroll: scroll Content: content Tab: tab

Article List: list Prompt message: msg Tips: tips Column title: title

Join: joinus Guide: guild Service: service Registration: regsiter

Status: status Vote: vote Partner: partner

(2) Comment writing:

/* Footer */

Content area

/* End Footer */

( 3) Naming of id:

(1) Page structure

Container: container Header: header Content: content/container

Page body: main Page footer: footer Navigation ：nav

Sidebar: sidebar Column: column Page peripheral control overall layout width: wrapper

Left and right center: left right center

(2) Navigation

Navigation: nav Main navigation: mainbav Sub-navigation: subnav

Top navigation: topnav Side navigation: sidebar Left navigation: leftsidebar

Right navigation: rightsidebar Menu: menu Submenu: submenu

Title: title Summary: summary

(3) Functions

Logo: logo Advertising: banner Login: login Login bar: loginbar

Registration: regsiter Search: search Ribbon: shop

Title: title Join: joinus Status: status Button: btn

Scroll: scroll Tab: tab Article list: list Prompt message: msg

Current: current Tips: tips Icon: icon Comments: note

Guide: guild Service: service Hotspot: hot News: news

Download: download Vote: vote Partner: partner

Friendly link: link Copyright: copyright

(4) Class naming:

(1) Color: Use the color name or hexadecimal code, such as

　.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) Font size, directly use 'font font size' as the name, such as

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3) Alignment style, use the English name of the alignment target , such as

　.left { float:left; }

　.bottom { float:bottom; }

(4) Title bar style, using the 'category function' method Naming, such as

.barnews { }

.barproduct { }

Notes::

1. Always lowercase;

2. Use English as much as possible;

3. Do not add dashes and underlines;

4. Try not to abbreviate words unless they are words that are easy to understand at a glance.

Main master .css Module module.css Basic shared base.css

Layout, layout.css themes.css Columns columns.css

Text font.css Forms.css Patch mend.css Print print.css