DIV + CSS standard naming set, divcss standard set

DIV + CSS standard naming set, divcss standard set

When we develop CSS + DIV web pages (Xhtml), the confusing and tangled thing is CSS naming. In particular, it is a good way for new users to know where to name and how to name them.

Naming rules:

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 definition should follow the principle of size to size, reflect the structure of the document, and facilitate search engine queries.

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.

Naming the CSS styles that are important to the outer part of a webpage:

Coat wrap ------------------ used for the outermost header ---------------- used for the main content of the header main ------------ used for the body content (Central) left-side main-left ----------- left-side layout right-side main-right ----------- right-side layout navigation bar nav ----------------- webpage menu navigation bar content --------------- used for the bottom of the main body in the middle of the page

DIV + CSS naming reference table:

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