Home > Article > Web Front-end > Summary of DIV CSS specifications that are beneficial to SEO_html/css_WEB-ITnose
Summary of DIV CSS specifications that are beneficial to SEO_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:27:501041browse
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. 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 the three columns), I won’t give examples of the others one by one, just name them according to the above rules.
Listed below are some commonly used named words for everyone’s convenience: (In the future, everyone will slowly share the words they have accumulated during their work. Then everyone’s life will be more unified, and there will be no more than one word with one meaning. )
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
Sub menu: 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 location: currentPath
Sidebar: sidebar
Icon: icon
Note: note
Login: login
Register: register
Column definition: column_1of3 (the first of three columns)
column_2of3 (the second of three columns)
column_3of3 (the third column of three columns)
2. The use and difference of id and class
We know that in the style sheet definition For a style, you can define an id or a class, for example:
ID method: #test{color:#333333}, and call the
CLASS method on the page: . test{color:#333333}, call
id can only be used once on a page in the page, and 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, and 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 in a room with the same name, confusion will occur;
class is a style that can be applied to any structure and In terms of content, it is like a piece of clothing;
is conceptually different:
id first finds the structure/content and then defines a style for it; class defines a style first and then applies it to multiple structure/content.
That is to say, 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 programmers to define and use by themselves)
Web standards hope that everyone will use strict habits to write code.
3. Use css abbreviation
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。常用的css缩写的主要规则：
颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
边框(border)
边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;
语法是border:width style color;
背景(Backgrounds)
背景的属性如下：
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);
四、明确定义单位，除非值为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属性，比如
[*]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(1.jpg) no-repeat left top;}
.two{border:10px solid #000; background:url(2.jpg) no-repeat left top;}
在页面代码中，我们可以这样调用:
这样最终的显示效果是这个div样式是什么呢？？重复的是以哪一个为准呢？？
应用到的样式如下：
width:200px;
border:10px solid #000;
background:url(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 can use the following method to replace the above code
The style definition is:
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
Using subselectors can make your code and CSS more concise 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:
- < ;li>
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 text -align attribute. Like this:
body {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
The text-align:center; rule of the first body 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 align the text in #warp to the left.
13. Import and hide CSS
because of the old version. The browser does not support CSS. A common approach is to use the @import technique to hide the CSS. For example:
However, this method does not work for IE4, which makes I had a headache for a while. Then I wrote it like this:
@import main.css;
This way I can hide the CSS in IE4, haha, I think it saved 5 bytes. For a detailed explanation of @import syntax, you can see here "centricle's css filter chart"
14. CSS hack
Sometimes, you Some special rules need to be defined for IE browser bugs. There are too many CSS techniques (hacks) here. I only use two of them. Regardless of whether Microsoft supports CSS better in the upcoming IE7 beta version, Both methods are the safest.
(a) To hide a CSS definition in IE, you can use the child selector:
html>body p {
}
(b) The following writing method can only be understood by IE browser (hidden from other browsers)
[*] html p {
}
(c) There are still times , you want IE/Win to be valid but IE/Mac to be hidden, you can use the backslash technique:
[*] html p {
declarations
}
(d) The following writing method is only accessible by IE7 The browser can understand (hidden from other browsers)
[*] html p {
}
2. Method of conditional comments
Another method , I think it is more testable than CSS Hacks 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 many of them 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:
[*] html .classname {width:95px!important;}
After writing like this, the width is 100px under IE6, 95px under IE7, and 90px under Firefox.
15. Debugging skills: How big is the layer?
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 the element, 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.
16. CSS code writing style
When writing CSS code, everyone has their own preferences for indentation, line breaks, and spaces. Personal writing habits. After constant practice, I decided to adopt the following writing style:
.classname {
width:100px;
}
When using union definitions, I usually write each selector separately One line so 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 not to write a semicolon after the last attribute value, it is easy to forget to add a semicolon if you want to add a new style. No. will cause errors, so it is better to add them all.
Finally, the closing brace} is written on a line by itself. Spaces and line breaks aid reading.