Novice note CSS Pseudo class names cannot begin with numbers-css how to scientifically name

You cannot name a CSS class at the beginning of a number

Please do not use the Arabic 1, 2, 3, 4 to name the CSS pseudo class, or it will cause the browser can not explain the interpretation of the number at the beginning of the CSS class name, resulting in a similar CSS hack-like, or directly to the beginning of the number of CSS classes invalid (browser cannot explain) However, it can be named with a number of letters, and remember that you cannot name a CSS selector in alphanumeric or numeric terms.

Novice in DIV+CSS development, need to name the CSS pseudo class name, such as. ABC, #bcd, such a format, many people do not know how to name CSS names. Even use 1, 2, 3, 4, and so on to name the mixed use of the English alphabet. It is possible to use English letters in combination with numbers, but beginners can name them simply by name, or by naming CSS at the beginning of a number.

The following is a screenshot and description of the case

The following is the correct CSS selection pseudo class naming method (pure English letter naming Select Pseudo class name, English letter and number mixing correct way)

The CSS naming rules that begin with the English letter or the Pure English letter in this way are correct and do not result in invalid method rules for CSS properties.

The following is the wrong CSS selection pseudo class naming method (pure number name Select Pseudo class name, digit beginning and English alphabet mixed wrong way)

The CSS selection attribute class, which is named in this way, will cause the browser to not interpret and invalidate the CSS.

Through the div CSS description of the above two screenshot cases show that I believe you have a certain understanding of the CSS naming rules.

DIV+CSS Specification naming Encyclopedia Collection

Description of the naming rules:

1), all the best names are lowercase

2), the value of the property must be enclosed in double quotes (""), and must have values such as class= "DIVCSS5", id= "DIVCSS5"

3, each label must have the beginning and the end, and to have the correct level, layout has a regular neat

4), empty elements to have the end of the tag or after the start of the tag plus "/"

5, performance and structure completely separated, the code does not involve any performance elements, such as style, font, bgcolor, border, etc.

6, <H1> to <H5> definition, should follow the principle from big to small, reflect the structure of the document, and conducive to search engine queries.

7), each table and form plus a unique, structural tag ID

8), add alt label to picture

9. Use English naming principles as far as possible

10), as far as possible, not abbreviations, unless a look at the words understood

DIVCSS5 to introduce common CSS naming and div CSS naming methods.

Second, relative to the outer part of the page CSS style name:

Coat Wrap------------------for outermost

Head Header----------------for head

Primary content main------------for main content (middle)

Left Main-left-------------left layout

Right Main-right-----------Right layout

Navigation Bar Nav-----------------Page Menu navigation bar

Contents content---------------used in the middle of a Web page body

Bottom footer-----------------for bottom

Third, Div+css named reference table:

The following is a CSS style naming and CSS file naming reference table, DIV CSS naming collection:

CSS style naming descriptions

Web page public naming

#wrapper页面外围控制整体布局宽度

#container或 #content Container for outermost

#layout布局

#head, #header页头部分

#foot, #footer页脚部分

#nav主导航

#subnav二级导航

#menu菜单

#submenu子菜单

#sideBar侧栏

#sidebar_a, #sidebar_b左边栏或右边栏

#main页面主体

#tag标签

#msg #message提示信息

#tips小技巧

#vote投票

#friendlink友情连接

#title标题

#summary摘要

#loginbar登录条

#searchInput搜索输入框

#hot热门热点

#search搜索

#search_output搜索输出和搜索结果相似

#searchBar搜索条

#search_results搜索结果

#copyright版权信息

#branding商标

#logo网站LOGO标志

#siteinfo网站信息

#siteinfoLegal法律声明

#siteinfoCredits信誉

#joinus加入我们

#partner合作伙伴

#service服务

#regsiter注册

Arr/arrow Arrow

#guild指南

#sitemap网站地图

#list列表

#homepage首页

#subpage二级页面子页面

#tool, #toolbar工具条

#drop下拉

#dorpmenu下拉菜单

#status状态

#scroll滚动

. tab label page

. Left, right. Center

. News Press

. download Download

. Banner Banner (top advertising strip)

e-Trade-related

. Products

. Products_prices Product Price

. Products_description Product Description

. Products_review Product Reviews

. Editor_review Editorial Reviews

. news_release Latest Product

. Publisher manufacturer

. Screenshot thumbnails

. FAQs FAQ

. Keyword Keywords

. Blog Blog

. Forum Forum

CSS file naming instructions

Master.css,style.css the main

MODULE.CSS Module

BASE.CSS Basic Common use

Layout.css layouts, Suites

THEMES.CSS Theme

COLUMNS.CSS column

Font.css text, Font

Forms.css form

MEND.CSS Patch

PRINT.CSS Printing

CSS name Other Description:

DIV+CSS Naming Summary: either use the "." (Lowercase period) Select the beginning of the symbol name, it doesn't matter if you use the "#" (well number) to select the beginning of the symbol, but we'd better follow, the main, important, special, outermost box is named after the "#" ("#") selection symbol, all others are "." (Lowercase period) Select the beginning of the symbol name and consider the named CSS selector reusing the call in HTML.

Usually our most commonly used main name is: Wrap (coat, outermost), header (header, head), NAV (navigation bar), menu (menu), Title (column title, General with H1H2H3H4 tag use)

, Content (contents area), footer (footer, bottom), logo (logo, can be used with H1 label), Banner (banner, general at the top), Copyright (copyrights). Others can be used selectively according to their own needs.

DIVCSS5 suggests: The main, important, outermost box is named after the "#" (well) selection symbol, and the other uses "." (Lowercase period) Select the beginning of the symbol name.

The 2.CSS style files are named as follows

The main master.css

layouts, Layout layout.css

Column Columns.css

Text Font.css

Print style Print.css

Theme Themes.css

Four, English naming skills:

If you encounter an unusual, you can use the translation tool to translate the name in English.

Recommended use Google translation tool: http://translate.google.cn/