Shulou(Shulou.com)06/01 Report--

As there are many people who write document structure and CSS in the project, and work with programmers, it is necessary to unify the development specification. According to the weaving specifications of XHTMl and CSS and the habits of most people, the following simple development specification for this project is sorted out.

I. naming of CSS files and styles

1. CSS file naming convention

Global style: global.css

Frame layout: layout.css

Font style: font.css

Link style: link.css

Plot style: print.css

2. Naming convention of CSS style

I suggest that it should be composed of letters, _ numbers,-signs and numbers, which must start with a letter and not be a pure number. In order to facilitate the management of style names after development, please name them with meaningful words or abbreviations, so that colleagues can see which part of this style is. This saves time in finding styles, such as:

Head style with header, the left side of the head, you can use header_left or header_l, and if it is a column structure can be like this-box_ 1of3 (the first column of the three columns), box_2of3 (the second column of the three columns), box_ 3of3 (the third column of the three columns), I will not give examples of the others, just name them according to the above rules.

Here are some commonly used naming words for everyone to use: (in the future, if you slowly share the words you have accumulated in the course of your work, your life will be more unified, and there will be no case of multiple words with one meaning. )

Capacitor: container/box

Head: header

Main navigation: mainNav

Sub-navigation: subNav

Top navigation: topNav

Website logo: logo

Big announcement: 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 scope: range

Label text: tagTitle

Tag content: tagContent

Current tag: tagCurrent/currentTag

Title: title

Content: content

List: list

Current location: currentPath

Sidebar: sidebar

Icon: icon

Note: note

Log in: login

Note book: register

Column definition: column_1of3 (the first of the three columns)

Column_2of3 (the second of the three columns)

Column_3of3 (the third of the three columns)

II. The use and difference between id and class

We know that when a stylesheet defines a style, you can define either id or class, for example:

ID method: # test {color:#333333} to call the content in the page

CLASS method: .test {color:#333333}, which calls the content in the page

Id can only be used once per page, and class can be referenced multiple times.

I used more than one same id on the page to display normally in IE, but there seems to be no difference between id and class. What is the effect of using more than one same id?

The page has multiple identical ID effects, but it cannot pass the W3 check.

In the page display, current browsers also allow you to make this mistake, using multiple of the same ID "under normal circumstances" can also display normally. But when you need to use Javascript to control the div through id, there will be an error.

Id is a tag that distinguishes different structures and contents, just like your name. If there are two people with the same name in a room, there will be confusion.

Class is a style that can be attached to any structure or content, just like a piece of clothing

Conceptually, it's different:

Id first finds the structure / content, and then defines the style for it; class defines a style first, and then sets it to multiple structures / content.

In other words, people are advised to use id when writing XHML+CSS, otherwise use class (so that the id of non-structurally positioned div blocks can be defined and used by programmers)

The web standard requires people to write code with strict habits.

three。 Use css abbreviations

Using abbreviations can help reduce the size of your CSS files and make them easier to read. The main rules for commonly used css abbreviations are:

Color

A hexadecimal color value that can be abbreviated by half if every two bits are the same, for example:

# 000000 can be abbreviated to # 000 position 336699 or abbreviated to # 369

Box size

There are usually four ways to write:

Property:value1; means that all edges are one value value1

Property:value1 value2; indicates that the values of top and bottom are value1,right and left are value2

Property:value1 value2 value3; indicates that the value of top is value1,right and the value of left is value2,bottom. The value is value3.

The four values of property:value1 value2 value3 value4; represent top,right,bottom,left in turn.

The convenient way to remember is clockwise, up, right, down, and 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 # 000000

The syntax is border:width style color

Background (Backgrounds)

The properties of the background are as follows:

Background-color:#f00

Background-p_w_picpath:url (background.gif)

Background-repeat:no-repeat

Background-p_w_upload:fixed

Background-position:0 0

It can be abbreviated to one sentence: background:#f00 url (background.gif) no-repeat fixed 00

The syntax is background:color p_w_picpath repeat p_w_upload position

You can omit one or more of the property values. If omitted, the property value will use the browser default value, which is:

Color: transparent

P_w_picpath: none

Repeat: repeat

P_w_upload: scroll

Position: 0%

Font (fonts)

The properties of the font are as follows:

Font-style:italic

Font-variant:small-caps

Font-weight:bold

Font-size:1em

Line-height:140%

Font-family: "Lucida Grande", sans-serif

It can be abbreviated to one sentence: font:italic small-caps bold 1emcompany140% "Lucida Grande", sans-serif

Note that if you abbreviate the font definition, you should define at least two values, font-size and font-family.

List (lists)

Cancel the default dot and sequence number to write list-style:none like this

The attributes of list are:

List-style-type:square

List-style-position:inside

List-style-p_w_picpath:url (p_w_picpath.gif)

Can be abbreviated to one sentence: list-style:square inside url (p_w_picpath.gif)

For more attribute writing, please refer to the CSS style Manual, online manual address: http://www.jb51.net/css/

4. Clearly defined units, unless the value is 0

Forgetting to define the unit of size is a common mistake for beginners in CSS. In HTML you can only write width=100, but in CSS, you have to give an exact unit, such as width:100px width:100em. There are only two exceptions that do not define units: the row height and the 0 value. In addition, all other values must follow the units, and be careful not to add spaces between the values and the units.

Case-sensitive

When using element names defined in CSS,CSS in XHTML, they are case-sensitive. To avoid this error, I recommend that all definition names be lowercase.

The values of class and id are also case-sensitive in HTML and XHTML. If you must mix case, please make sure that your definition in CSS is consistent with the tag in XHTML.

Remove the element restrictions before class and id

When you define class or id for an element, you can omit the previous element qualification, because ID is unique on a page and class can be used multiple times on the page. It makes no sense for you to define an element. For example:

Div#id1 {} can be written as # id1 {}

This saves some bytes.

7. Default value

Usually, the default value for padding and margin is 0reginal backgroundcolor, and the default value is transparent. However, the default values may vary from browser to browser. If you are afraid of conflicts, you can define all elements with margin and padding values of 0 at the beginning of the stylesheet, like this:

* {

Padding:0

Margin:0

}

Or define it for an element:

Ul,li,div,span {

Padding:0

Margin:0

}

VIII. Priority of CSS

Inline style (inline style) > ID selector > style (class), pseudo class (pseudo-class) and attribute (attribute) selector > category (type), pseudo object (pseudo-element)

Explanation:

* inline style (inline style): the style attribute of the element, for example, the color:red; is the inline style

* ID selector: the id attribute of the element, for example, you can use the ID selector # content

* pseudo-class: the most common ones are anchor (a) pseudo-classes, such as aRL Linkage aRu visible.

* attribute selector (attribute selectors): for example, div [class=demo] contains div elements whose class is demo

* Category selector (type selector): select the HTML tag, such as div .demo. The div element contains the element whose class is demo.

* pseudo-object selector (pseudo-element selector): such as the first word under the div:first-letter,div element.

IX. There is no need to redefine inheritable values

CSS, the child element automatically inherits the parent element attribute values, such as color, font, etc., has been defined in the parent element, in the child element can be inherited directly, do not need to repeat the definition, unless it is to change the current element style does not use the parent element attribute values, but to note that the browser may override your definition with some default values.

ten。 Multiple CSS style definitions, attribute appends and repeats the last priority principle

A tag can define multiple class at the same time, or it can define attributes repeatedly in the same class. For example:

Let's define two styles first

.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;})

In the page code, we can call:

So the final display effect is what is the div style? Which one shall prevail in repetition?

The styles applied are as follows:

Width:200px

Border:10px solid # 000

Background:url (http://www.jb51.net/2.jpg) no-repeat left top

Because, when two or more styles are applied, the style applied by the browser is based on the last priority principle of attribute appendage

That is to say, two or more or duplicate style name definitions, the style applied by the browser is in order, if the duplicate attribute values are defined, the last definition shall prevail, if two or more style names are applied, the attribute values that are not repeatedly defined will be appended, and the duplicate attribute values will prevail. It should be noted here that the order of styles is not based on the order of names applied on the page, but in the order of styles in the stylesheet.

11. Use sub-selector (descendant selectors)

The use of sub-selectors is one of the reasons that affect their efficiency. Sub-selectors can help you save a lot of class definitions. Let's look at the following code:

Item 1 >

Item 1

Item 1

The CSS definition for 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 replace the above code with the following methods

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.