DIV+CSS standard named collection

When we develop CSS+p web pages (Xhtml), the most confusing and tangled thing is CSS naming. Especially newbies don’t know how to name places and what is the best way to name them.

Naming rule description:

1) All names should be lowercase

2) The value of the attribute must be enclosed in double quotes (""), and must have a value such as class="pcss5", id="pcss5"

3). Each tag must have a beginning and an end, and must have the correct level, and the layout must be regular and neat

4) Empty elements must have an ending tag or add "/"

after the starting tag. 5). Performance and structure are completely separated. The code does not involve any performance elements, such as style, font, bgColor, border, etc.

6) The definition should follow the principle from large to small, 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 alt tag

to the picture 9) Try to use English naming principles

10) Try not to abbreviate words unless they are easy to understand at a glance

Relative to the CSS style naming of important parts of the outer layer of the web page:

Coat wrap-----------------used for the outermost header header----------------used for the main content of the header main------------used for main content (middle) left main-left-------------left layout right main-right---- -------Right layout navigation bar nav-----------------Web page menu navigation bar content-------------- -Used for the bottom footer of the middle body of the web page-----------------Used for the bottom

p+CSS naming reference table:

The following is a reference table for CSS style naming and CSS file naming, p CSS naming set:

CSS style naming	illustrate
Public naming of web page
#wrapper	Page peripheral control overall layout width
#container or #content	Container, used for the outermost layer
#layout	Layout
#head,#header	Header part
#foot,#footer	Footer section
#nav	Main Navigation
#subnav	Secondary navigation
#menu	menu
#submenu	Submenu
#sideBar	Sidebar
#sidebar_a,#sidebar_b	Left column or right column
#main	Page body
#tag	Label
#msg#message	Prompt message
#tips	Tips
#vote	Vote
#friendlink	Friendly connection
#title	Title
#summary	Summary
#loginbar	Login strip
#searchInput	Search input box
#hot	Popular Hotspot
#search	search
#search_output	Search output is similar to search results
#searchBar	Search bar
#search_results	search results
#copyright	Copyright Information
#branding	Trademark
#logo	Website LOGO
#siteinfo	Website information
#siteinfoLegal	Legal Notices
#siteinfoCredits	Reputation
#joinus	join us
#partner	Partner
#service	Serve
#regsiter	register
arr/arrow	Arrow
#guild	Guide
#sitemap	Sitemap
#list	List
#homepage	front page
#subpage	Secondary page subpage
#tool,#toolbar	Toolbar
#drop	drop down
#dorpmenu	Drop-down menu
#status	state
#scroll	scroll
.tab	Bookmark page
.left.right.center	Left, center, right
.news	news
.download	download
.banner	Advertising banner (top advertising banner)
Electronic trade related
.products	product
.products_prices	product price
.products_description	Product Description
.products_review	Product Review
.editor_review	Editorial Comment
.news_release	Latest Products
.publisher	manufacturer
.screenshot	Thumbnail
.faqs	common problem
.keyword	Key words
.blog	blog
.forum	Forum

CSS file naming	illustrate
master.css,style.css	Main
module.css	Module
base.css	Basic sharing
layout.css	Layout, layout
themes.css	theme
columns.css	Column
font.css	Text, font
forms.css	Form
mend.css	Patch
print.css	Print

The above is the detailed content of DIV+CSS standard named collection. For more information, please follow other related articles on the PHP Chinese website!