Home >Web Front-end >HTML Tutorial >Summary of DIV CSS naming rules that are beneficial to SEO_html/css_WEB-ITnose
Summary of DIV CSS naming rules that are beneficial to SEO_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:30:19992browse
1. CSS file and style naming
1. CSS file naming convention
Global style: global.css;
Frame layout: layout.css ;
Font style: font.css;
Link style: link.css;
Print style: print.css;
2. CSS style Naming convention
My suggestion: use letters, _ numbers, - numbers, and numbers. It must start with a letter and cannot be pure numbers. In order to facilitate the management of style names after development, please use meaningful words or abbreviation combinations to name them so that colleagues can understand at a glance which part of the style it belongs to. This saves time in searching for styles, for example:
Use header for the header style. For the left side of the header, you can use header_left or header_l. Also, if it is a column structure, it can be like this??box_1of3 (the first column of three columns), box_2of3 (the second column of three columns) ), box _3of3 (the third column of three columns), I won’t give examples of the others one by one, just name them according to the above rules.
Here are some commonly used named words for everyone’s convenience: (In the future, everyone will slowly share all the words they have accumulated during their work, then everyone’s lives will be more unified and there will be no one meaning. Multi-word situation. )
Container: container/box
Header: header
Main navigation: mainNav
Sub navigation: subNav
Top navigation: topNav
Website logo: logo
Large advertisement: banner
Middle of the page: mainBody
Bottom: footer
Menu: menu
Menu content: menuContent
Submenu: subMenu
Submenu content: subMenuContent
Search: search
Search keyword: keyword
Search range: range
Tag text: tagTitle
Tag content: tagContent
Current tag: tagCurrent/currentTag
Title: title
Content: content
List: list
Current position: currentPath
Sidebar: sidebar
Icon: icon
Note: note
Login: login
Register: register
Column definition: column_1of3 (the first of three columns Column)
column_2of3 (the second column of three columns)
column_3of3 (the third column of three columns)
2. The use and difference of id and class
We know that when defining a style in the style sheet, you can define an id or a class, for example:
ID method: #test{color:#333333}, call < div>Content
CLASS method: .test{color:#333333}, call
in the page The id can only be used once on a page, and the class can be referenced multiple times.
I used multiple identical IDs on the page and it was displayed normally in IE. There seems to be no difference between ID and class. Is there any impact of using multiple identical IDs?
The presence of multiple identical IDs on a page means that it cannot pass W3 verification.
In terms of page display, current browsers still allow you to make this mistake. Using multiple identical IDs can "generally" display normally. But when you need to use JavaScript to control this div through id, an error will occur.
id is a tag used to distinguish different structures and contents, just like your name. If there are two people with the same name in a room, confusion will occur;
class is a style, It can be applied to any structure and content, just like a piece of clothing;
Conceptually speaking, it is different:
id finds the structure/content first, and then defines the style for it; class It is to define a style first and then apply it to multiple structures/contents.
In other words, it is recommended that when writing XHML CSS, if it is a one-dimensional structural positioning, use id, otherwise use class (this leaves the id of the non-structural positioning div block for the programmer to define by himself) Use)
Web standards hope that everyone uses strict habits to write code.
3. Use CSS abbreviations
Using abbreviations can help reduce the size of your CSS file and make it easier to read. The main rules for commonly used CSS abbreviations:
Color
Hexadecimal color value, if the value of each two digits is the same, you can abbreviate half of it, for example:
#000000 It can be abbreviated to #000; is a value value1;
property:value1 value2; means the value of top and bottom is value1, the value of right and left is value2
property:value1 value2 value3; means the value of top is value1 , the values of right and left are value2, and the value of bottom is value3
property:value1 value2 value3 value4; The four values represent top, right, bottom, left in turn
The convenient memory method is Clockwise, up right, down left. Examples of specific applications in margin and padding are as follows:
margin:1em 0 2em 0.5em;
Border (border)
The properties of the border are as follows:
border-width:1px;
border-style:solid;
border-color:#000;
can be abbreviated to one sentence: border:1px solid #000;
The syntax is border:width style color;
Backgrounds
The properties of the background are as follows:
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
字体的属性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
列表(lists)
取消默认的圆点和序号可以这样写list-style:none;
list的属性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句：list-style:square inside url(image.gif);
更多属性写法请参考《CSS样式手册》，在线手册地址：http://www.jb51.net/css/
四、明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
五、区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
六、取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#id1{}可以写成#id1{}
这样可以节省一些字节。
七、默认值
通常padding和margin的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：
* {
padding:0;
margin:0
}
或者是针对某元素来定义：
ul,li,div,span {
padding:0;
margin:0
}
八、CSS的优先级
行内样式(inline style) > ID选择符 > 样式(class),伪类(pseudo-class)和属性(attribute)选择符 > 类别(type)，伪对象(pseudo-element)
解释:
*内联样式(inline style)：元素的style属性，比如
,其中的color:red;就是行内样式*ID选择符：元素的id属性，比如
可以用ID选择符#content*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.
*属性选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素
*类别选择器(type selector)：HTML标签选择，比如div .demo,div元素下含有class为demo的元素
*伪对象选择器(pseudo-element selector)：比如div:first-letter,div元素下的第一个单词。
九、不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义，除非是为了更变当前元素样式不使用父元素的属性值，但是要注意，浏览器可能用一些默认值覆盖你的定义。
十.多重CSS样式定义，属性追加重复最后优先原则
一个标签可以同时定义多个class，也可以是同一个class中重复定义属性。例如：
我们先定义两个样式
.one{width:200px;background:url(http://www.jb51.net/1.jpg) no-repeat left top;}
.two{border:10px solid #000; background:url(http://www.jb51.net/2.jpg) no-repeat left top;}
在页面代码中，我们可以这样调用:
这样最终的显示效果是这个div样式是什么呢？？重复的是以哪一个为准呢？？
应用到的样式如下：width:200px;
border:10px solid #000;
background:url(http://www.jb51.net/2.jpg) no-repeat left top;
因为，当应用两个或多个样式时，浏览器所应用的样式根据是属性追加重复最后优先原则
就是说两个或多个或重复的样式名定义，浏览器所应用的样式是按先后顺序的，如果定义了重复的属性值，以最后定义的为准，如果应用了两个或多个样式名，里面不重复定义的属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。
十一、使用子选择器(descendant selectors)
使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：
- >
The CSS definition of this code is:
div#subnav ul { }
div#subnav ul li.subnavitem { }
div# subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemselected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
you You can use the following method to replace the above code
The style definition is:
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
You can use the sub selector Your code and CSS are cleaner and easier to read.
If there are multiple identical elements in a container, and the styles of these elements are different, please avoid using this method and use different classes, such as:
12. There is no need to add quotes to the background image path
In order to save bytes, I recommend not to add quotes to the background image path, because the quotes are not necessary. For example:
background-image:url(“images
margin:0 auto;
}
But IE5/Win cannot display this definition correctly, We use a very useful trick to solve it: use the text-align attribute, like this:
body {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
The first body’s text-align:center; rule defines that all elements of the body in IE5/Win are centered (other browsers just center the text), and the second text-align:left; is to #warp the text Left.
17. Import and hide CSS
Because older browsers do not support CSS, a common approach is to use the @import technique to hide CSS. For example:
@import url(main.css);
However, this method does not work for IE4, which gave me a headache for a while. Later I wrote it like this:
@import main.css;
This way you can hide CSS in IE4, haha, it also saves 5 bytes. If you want to know the detailed description of @import syntax, you can read here. "centricle's css filter chart"
18. CSS hack
Sometimes, you need to define some special rules for IE browser bugs. There are too many CSS tricks (hacks) here , I only use two of them. Regardless of whether Microsoft supports CSS better in the upcoming IE7 beta version, these two methods are the safest.
1. Annotation method
(a) To hide a CSS definition in IE, you can use a child selector:html>body p {
}
(b) The following writing method can only be understood by IE browser (hidden from other browsers)
* html p {
}
(c) Sometimes, you want IE/Win to be active but IE/Mac to be hidden, you can use the backslash trick:
* html p {
declarations
}
(d) The following writing method can only be understood by IE7 browser (hidden from other browsers)
* html p {
}
2. Method of conditional comments
Another method, I think is more useful than CSS Hacks The only way to stand the test is to use Microsoft's private attribute conditional comments (conditional comments). Using this method you can define some styles separately for IE without affecting the definition of the main style sheet. Like this:
There are more CSS hacks that you can find online, but there are many hacks that are not To comply with w3c standards, I wrote a style based on the above hack that can distinguish IE6, IE7, and FF, and can comply with w3c standards. The code is as follows:
.classname {width:90px!important;width:100px ;}
* html .classname {width:95px!important;}
After writing like this, the width is 100px under IE6, 95px under IE7, and 90px under Firefox.
19. Debugging skills: How big are the layers?
When an error occurs when debugging CSS, you have to be like a typewriter and analyze the CSS code line by line. I usually define a background color on the layer in question so it's obvious how much space the layer takes up. Some people suggest using border, which is generally possible, but the problem is that sometimes border will increase the size of elements, and border-top and boeder-bottom will destroy the vertical margin value, so it is safer to use background.
Another attribute that often causes problems is outline. Outline looks like boeder, but does not affect the size or position of the element. Only a few browsers support the outline attribute, the only ones I know of are Safari, OmniWeb, and Opera.
20. CSS code writing style
When writing CSS code, everyone has their own writing habits for indentation, line breaks, and spaces. After constant practice, I decided to use the following writing style:
.classname {
width:100px;
}
When using unions When defining, I usually write each selector on its own line so that they are easier to find in the CSS file. Add a space between the last selector and the curly braces {. Also write each definition on its own line. The semicolon should be placed directly after the attribute value. Do not add spaces.
I am used to adding a semicolon after each attribute value. Although the rules allow you to leave out the semicolon after the last attribute value, it is easy to forget to add the semicolon when you want to add a new style. Error, so it’s better to add them all.
Finally, the closing brace} is written on a line by itself. Spaces and line breaks aid reading
Content from: Script House www.jb51.net