DIV + CSS standardized naming Daquan set, divcss standardized Daquan

DIV + CSS standardized naming Daquan set, divcss standardized Daquan

The standardized use of DIV + CSS naming rules in Webpage creation can improve the efficiency of optimization, especially the efficiency of Cooperative Production during team collaboration. The content of CSS naming rules for specific div css is described in this document.

Common DIV + CSS naming Daquan set, that is, CSS naming rules

Div css naming directory

When we develop CSS + DIV web pages (Xhtml), what is confusing and tangled?CSS namingIn particular, new users do not know where to name or how to name.

I. Description of naming rules :- TOP

1) It is recommended that all names be in lower case.
2) attribute values must be enclosed in double quotation marks ("") and must have values such as class = "divcss5", id = "divcss5"
3) Each label must have a start and end, a correct level, and regular layout.
4) The empty element must have an ending tag or add "/" after the starting tag "/"
5) the representation and structure are completely separated. The Code does not contain any presentation elements, such as style, font, bgColor, and border.
6) The definitions from 7) Add a unique structure tag id to each table and form.
8) Add the alt tag to the image.
9) Use naming rules in English as much as possible
10) Try not to be abbreviated, except words that can be understood without looking at them.

DIVCSS5 introduces common CSS naming and div css naming methods.

Ii. Name the CSS style of an important part of the outer part of the webpage :- TOP

Coat wrap ------------------ used for the outermost layer
Header -------------- used for the header
Main Content main ------------ used for subject content (central part)
Left-side main-left ----------- left-side layout
Right-side main-right --------- right-side layout
Navigation bar nav ----------------- web menu navigation bar
Content --------------- used by the subject in the central part of the webpage
Bottom footer ----------------- used for bottom

Iii. Reference Table for DIV + CSS naming :- TOP

The following is a reference table for CSS style naming and CSS file naming, and a set of div css naming:

CSS style naming	Description
Public name of webpage
# Wrapper	Overall Layout width of the page peripheral control
# Container or # content	Container for the outermost layer
# Layout	Layout
# Head, # header	Page header
# Foot, # footer	Footer
# Nav	Main navigation
# Subnav	Level 2 navigation
# Menu	Menu
# Submenu	Sub-menu
# SideBar	Sidebar
# Sidebar_a, # sidebar_ B	Left or right sidebar
# Main	Page subject
# Tag	Tag
# Msg # message	Prompt information
# Tips	Tips
# Vote	Vote
# Friendlink	Friendship
# Title	Title
# Summary	Summary
# Loginbar	Logon entry
# SearchInput	Search input box
# Hot	Hot spots
# Search	Search
# Search_output	The search output is similar to the search result.
# SearchBar	Search entries
# Search_results	Search results
# Copyright	Copyright information
# Branding	Trademark
# Logo	Website LOGO
# Siteinfo	Website Information
# SiteinfoLegal	Legal disclaimer
# SiteinfoCredits	Credit
# Joinus	Join us
# Partner	Partner
# Service	Service
# Regsiter	Register
Arr/arrow	Arrow
# Guild	Guide
# Sitemap	Website Map
# List	List
# Homepage	Homepage
# Subpage	Second-level page subpage
# Tool, # toolbar	Tool bar
# Drop	Drop-down list
# Dorpmenu	Drop-down menu
# Status	Status
# Scroll	Scroll
. Tab	Tab
. Left. right. center	Center left, center, right
. News	News
. Download	Download
. Banner	Advertisement bar (top advertisement bar)
Electronic trade problems
. Products	Product
. Products_prices	Product Price
. Products_description	Product Description
. Products_review	Product reviews
. Editor_review	Edit comment
. News_release	Latest Product
. Publisher	Manufacturer
. Screenshot	Thumbnail
. Faqs	FAQs
. Keyword	Keywords
. Blog	Blog
. Forum	Forum

CSS file name	Description
Master.css,style.css	Main
Module.css	Module
Base.css	Basic sharing
Layout.css	Layout
Themes.css	Topic
Columns.css	Column
Font.css	Text, font
Forms.css	Form
Mend.css	Patch
Print.css	Print

Other descriptions of CSS naming:

DIV + CSS naming Summary: It doesn't matter whether you use "." (lower-case periods) to select a name starting with a symbol or use "#" (well number) to select a name starting with a symbol, but we 'd better follow it,Main,Important,Special,The outermost layerThe box is named after the start of the symbol with "#" (well number), and the rest are named after the start of the symbol with "." (lower-case period), and the CSS selector with the name is considered to be called repeatedly in HTML.

Generally, the most common names are: wrap (coat, outermost layer), header (header, header), nav (navigation bar), menu (menu) title (topic title, generally used with the h1 \ h2 \ h3 \ h4 label)
, Content (content area), footer (footer, bottom), logo (logo, can be used with the h1 label), banner (advertisement bar, usually on the top), copyRight (copyRight ). Others can be used as needed.

DIVCSS5 suggestions:The main, important, and outermost boxes are named at the beginning of the "#" (well number) Selection symbol, and the others are named at the beginning of the "." (lower-case periods) Selection symbol.

2. Name the CSS style file as follows:

Main master.css
Layout.css
Columns.css
Text font.css
Print Style print.css
Themes.css

Iv. Naming skills in English :- TOP

If it is not commonly used, you can use the translation tool to translate it into English.
Google online translation tools are recommended:Http://translate.google.cn/
Google translation toolsIntroduction:Http://www.divcss5.com/css-tool/t346.shtml

You may need to know the html method referenced by css.

The above is a summary of the naming rules for DIV + CSS. We believe that the standardized CSS naming makes it easy for you to maintain web pages in the future.

If you need to reprint, please indicate the source of the article and source URL: http://www.divcss5.com/jiqiao/j4.shtml