CSS Naming conventions
Head: Header
Content: Content/containe
Tail: Footer
Navigation: Nav
Sidebar: Sidebar
Column: Column
Page perimeter control overall layout width: Wrapper
Middle: Left Right center
Login Strip: Loginbar
Logo: Logo
Ad: Banner
Page body: Main
Hotspot: Hot
Press: News
Download: Download
Sub-navigation: Subnav
Menus: Menu
Sub-menu: submenu
Searches: Search
Links: Friendlink
Footer: Footer
Copyrights: Copyright
Scrolling: Scroll
Contents: Content
Tabs page: Tab
Article List: List
Hint Message: MSG
Tip: Tips
Column Title: Title
Join: Joinus
Guide: Guild
Services: Service
Registration: Regsiter
State: Status
Vote: Vote
PARTNER: Partner
Naming of IDs in XHTML files
(1) Page structure
Container: Container
Page Header: Header
Content: Content/container
Page body: Main
Page End: Footer
Navigation: Nav
Sidebar: Sidebar
Column: Column
Page perimeter control overall layout width: Wrapper
Middle: 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
Menus: Menu
Sub-menu: submenu
Caption: Title
Abstract: Summary
(3) function
Logo: Logo
Ad: Banner
Login: Login
Login Strip: Loginbar
Registration: Regsiter
Searches: Search
Functional area: Shop
Caption: Title
Join: Joinus
State: Status
Button: BTN
Scrolling: Scroll
Tabs page: Tab
Article List: List
Hint Message: MSG
Present: Current
Tip: Tips
Icons: Icon
Note: note
Guide: Guild
Services: Service
Hotspot: Hot
Press: News
Download: Download
Vote: Vote
PARTNER: Partner
Links: Link
Copyrights: Copyright
Naming rules for Css+div:
Login Strip: Loginbar
Logo: Logo
Sidebar: SideBar
Ad: Banner
Navigation: Nav
Sub-navigation: Subnav
Menus: Menu
Sub-menu: submenu
Searches: Search
Scrolling: Scroll
Page body: Main
Contents: Content
Tabs page: Tab
Article List: List
Hint Message: MSG
Tip: Tips
Column Title: Title
Links: Friendlink
Footer: Footer
Join: Joinus
Guide: Guild
Services: Service
Hotspot: Hot
Press: News
Download: Download
Registration: Regsiter
State: Status
Button: BTN
Vote: Vote
PARTNER: Partner
Copyrights: Copyright
The naming of 1.CSSID
Jacket: Wrap
Main navigation: Mainnav
Sub-navigation: Subnav
Footer: Footer
Entire page: Content
Headers: Header
Footer: Footer
Trademark: Label
Caption: Title
Main navigation: Mainnav (GLOBALNAV)
Top Navigation: Topnav
Side navigation: Sidebar
Left navigation: Leftsidebar
Right navigation: Rightsidebar
Flag: Logo
Slogan: Banner
Menu Content 1:menu1content
Menu Capacity: Menucontainer
Sub-menu: submenu
Edge navigation icon: Sidebaricon
Note: note
Breadcrumbs: breadCrumb (i.e. navigation tips for page location)
Container: Container
Contents: Content
Searches: Search
Login: Login
Functional area: Shop (e.g. shopping cart, cashier)
The current
2. style file naming
Main: Master.css
Layout page: Layout.css
Rubric: Columns.css
Text: Font.css
Plot style: Print.css
Theme: Themes.css
Description: Both class and need to be expanded, the name is customized with the "_" (underscore) suffix within the current name.
I used to call the list page, the news list is newslist, the picture list is piclist,
The content page is view,
/**/
Overall Big frame: #wrapper
Inside the big frame: #inwrapper
/////////////////////////////////////////////////////////////////////////////////////////////////////////
Top and Banner:.top
Top and inside of banner:. Intop
Logo:.logo
Banner:.banner
Navigation:. Menu
Inside Navigation:. Inmenu
. Menuul
. Menuul Li
. Menuul Li A
Drop-down menu:. Inmenu_xiala
. Inmenu_xialaul
. Inmenu_xialaul Li
. Inmenu_xialaul Li A
///////////////////////////////////////////////////////////////////////////////////////////////////////////
Main content:. mainwrapper
Within the main content:. inmainwrapper
Left stop:. Sideleft
Inside left:. insideleft
Right column:. sideright
Right inside:. Insideright
Middle:. Sidecenter
In the middle:. Insidecenter
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
Bottom:. Foot
Bottom inside:. infoot
////////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Other names */
Search:. Search
Search within:. Insearch
Search bar:. Searchselect
Search button:. serachbuttom
Enter text box:. Input
. Select
/* Table Style */
Table Overall framework:. ListBox
Width of table:. listbox-table
Table Header Text style:. Listbox-header
Table Body Text style:. listbox-entry
/* Universal Type */
General:. gm/* This is a bit depressed, English is too poor ... * *
In general:. Ingm
Universal left float:. GMFL (GM FLOAT left)
Universal right float:. GMFR (GM FLOAT right)
/* General Picture Style */
Common picture styles:. img
/* Clear FLOAT */
Clear all floats:. Clear
Clear left float:. clearleft
Clear right float:. clearright
/* Text Style */
Text:. Font
/* News list */
News list:. fontnews
/*view page Font Total style */
View page font:. Fontview
Trademark: Label
Caption: Title
Main navigation: Mainbav (GLOBALNAV)
Top Navigation: Topnav
Side navigation: Sidebar
Left navigation: Leftsidebar
Right navigation: Rightsidebar
Flag: Logo
Slogan: Banner
Menu Contents 1:MENU1 Content
Menu Size: Container
Sub-menu: submenu
Edge navigation icon: Sidebaricon
Note: note
Breadcrumbs: breadcrumb (i.e. navigation tips for page location)
Container: Container
Contents: Content
Searches: Search
Login: Login
Functional area: Shop (e.g. shopping cart, cashier)
The current
Header: Masthead
Summary, summary summary or general
Floating photo on the left Photoleft
Floating picture on the right photoright
Titles Title
Entry Bottom Entrybottom
More extended or. more
Container background CONTAINERBG
Services Service
Service Link ServiceLink
Line lines
Textual text
Right Rightside
Copyright
Press News
Book Wrapper
Introduction Intro-part1
Columns column
Path pathways
Piece section
Modular Module
On the navigation Subnav
2. Also the annotations that are available when editing the stylesheet can be written like this:
<--Footer--
Content Area
<--End Footer--
3. style file naming
The main master.css
Layout, Layout layout.css
Column Columns.css
Text Font.css
Print style Print.css
Theme Themes.css
4. Annotation in the style sheet
Instance One
/* GLOBAL---------------------------*/
/* LINKS---------------------------*/
/* FORMS---------------------------*/
/* IDS---------------------------*/
/* HEADER---------------------------*/
/* COLUMN 1---------------------------*/
/* COLUMN 2---------------------------*/
/* CLASSES---------------------------*/
CSS, div naming rules for HTML pages