CSS abbreviations and naming rules

Http://www.blog.ce.cn/sp1/zhangnan/14493583725.shtml

CSS naming Rules use English letters, numbers, and underscores (usually in lower case.

I. Short

The abbreviation is mainly used to simplify writing and reduce Code to increase the download speed of webpages. Not all CSS can be abbreviated as below.

(1) font

Font-weight: bold;
Font-style: italic;
Font-varient: Small-caps;
Font-size: 1em;
Line-Height: 1.5em;
Font-family: verdana, sans-serif;
Can be abbreviated
Font: bold italic small-caps 1em/1.5em verdana, sans-serif;

Note that the order cannot be changed. This shorthand method takes effect only when both the font-size and font-family attributes are specified. Moreover, if you do not set font-weight, font-style, and font-varient, they will use the default value.

(2) Border

Border-width: 1px;
Border-style: solid;
Border-color: #000;
It can be abbreviated as border: 1px sollid #000

Note that the order cannot be changed. (abbreviation of color value: if the color value is repeated from the first two digits, it can be abbreviated as one. for example: #335566 can be abbreviated as #356 #000000 can be abbreviated as #000)

(3) margin & padding

The abbreviated rules for margin and padding are the same. Only margin is used as an example.

Margin-top: 10px;
Margin-Right: 10px;
Margin-bottom: 10px;
Margin-left: 10px;
In the above case, values in the four directions are the same and can be directly written as margin: 10px.

Margin-top: 10px;
Margin-Right: 20px;
Margin-bottom: 30px;
Margin-left: 40px;
In the above case, the values in the four directions can be abbreviated as margin: 10px 20px 30px 40px, that is, the first value is margin_top, And the last value is the clockwise order of margin_bottom.

Margin-top: 10px;
Margin-Right: 20px;
Margin-bottom: 10px;
Margin-left: 20px;
In the above case, we want to have the same two direction values in the four directions. It can be abbreviated as margin: 10px 20px. Note that we need to put 10px in front.

If the numeric value is 0, the unit is not allowed. Otherwise, the Unit must be added to all numeric values. For example, 10px.

(4) Background

Background-color: # FFF;
Background-image: url(bg.gif );
Background-repeat: No-Repeat;
Background-Attachment: fixed;
Background-position: Left top;
Can be abbreviated

background:#fff url(bg.gif) no-repeat fixed left top;

Note that the order cannot be changed.

(5)list-style

List-style-type: Square;
List-style-position: outside;
List-style-image: url(bullet.gif );
Can be abbreviated as list-style: Square outside url(bullet.gif );

Note that the order cannot be changed.

Ii. Naming rules

In the Web standard, the CSS naming convention is to make it easier to find the CSS we define,
Because the pages we make may be visible to programmers and other producers, we need to standardize
Cooperation and future modification

Lowercase letters are used for naming. If multiple words are required, separate words "-".

Common Code structure:

Div: Mainly used for layout and page splitting.
Ul/OL: used for unordered/ordered lists
Span: it has no special meaning and can be used as an aid in typographical editing.
H1-h6: Title
H1-h6 decreases in order of importance
H1 most important title

Common CSS naming rules:
 
Outer cover: Wrap (the overall layout width is controlled at the perimeter of the page)
Main navigation: mainnav
Subnavigation: subnav
Footer: footet
Entire page: Content
Webpage: Header
Footer: footer
Standard: Label
Title: Title
Main navigation: mainbav (globalnav)
Top navigation: topnav
Side navigation: sidebar
Left Navigation: leftsidebar
Right navigation: rightsidebar
Flag: logo
Banner
Menu content 1: menu1 content
Menu capacity: menu container
Sub menu: submenu
Navigation icon: sidebaricon
Note: Note
Breadcrumb)
Container: Container
Content: Content
Search: Search
Login: Login
Functional Area: Shop (such as shopping cart and cashier)
Current

 
Iii. Style File naming
Main master.css
Layout.css
Columns.css
Text font.css
Print Style print.css
Themes.css

Bytes

An article I wrote two days ago said that to improve website execution efficiency, we should start with various details. The abbreviation of CSS is not as objective as table layout is changed to Div in terms of saving code, but it cannot be ignored. Below are some shorthand methods for CSS:

Short for external patch (margin:
For example: margin-top: 10px; margin-left: 20px; margin-Right: 20px; margin-bottom: 10px;
Can be written as: margin: 10px 20px;
Or: margin: 10px 20px 10px 20px;
Or: margin: 10px 20px 10px;
Note: The abbreviated order is "top-left-bottom", "Top-right-bottom-left", and "Up-down-left"

Short for inner patch (padding): Same as above

Abbreviated color:
For example, color: # ffffff
Can be written as: Color: # fff
Or: Color: white

Border Abbreviation:
For example, border-width: 1px; border-style: solid; border-color: # ffffff;
It can be written as: Border: 1px solid: # ffffff;
Or write it as: Border: 1px solid: # FFF;

Short for background: Background-color: # ffffff; Background-image: url(background.gif); background-repeat: No-Repeat; Background-Attachment: fixed; Background-position: 0;
Can be written as: Background: # fff url(background.gif) No-repeat fixed 0 0;

Abbreviation of Font:
Font-style: normal; font-weight: bold; font-size: 12px; line-Height: 120%; font-family: "", "Arial ";
Can be written as: Font: normal bold 12px/120% "", "Arial ";

Unified link definition:
To avoid CSS definition for each link, you can use this pseudo class to define it:
A: link {color: #666666; text-Decoration: none ;}
A: visited {color: #666666; text-Decoration: none ;}
A: hover {color: #000099; text-Decoration: underline ;}
A: active {color: #000000; text-Decoration: none ;}

Use the body to define the webpage:
Body {
Margin: 0 auto;
Padding: 0; Border: 0;
Font-size: 12px; text-align: center;
Font-family: "", "Arial", "lucida Grande", "lucida sans Unicode", "verdana", "Sans-serif ";
}
Margin: 0 auto; indicates that the webpage is centered. Many beginners do not know how to center the webpage by using Div + CSS.
Padding: 0; Border: 0; defines all inner patches and borders as 0, unless otherwise stated.
Font-family: "", "Arial", "lucida Grande", "lucida sans Unicode", "verdana", "Sans-serif"; the font that defines Web text, it is displayed in this order by default. The default English font is Arial.

Do not ignore this code. If you do not pay attention to it, it will make the CSS file much larger .. For example, if the simplified CSS is 15 kb, the simplified CSS file may only have 13 KB. Never underestimate the 2 K. Remember ~

Http://w1w1.blogchina.com/w1w1/6003319.html

CSS abbreviations

After using CSS for so many years (rich experience), I always feel that I should write something. The theory is too strong for the time being, so we have to start with simple and straightforward. CSS shorthand meets this condition.

To put it simply, CSS abbreviation is to simplify multiple CSS codes into one sentence on the premise of being equivalent. In my opinion, CSS has three advantages: one is easy to write (just like a keyboard shortcut), the other is simplified code, and the third is to help you understand CSS.

Let's talk less, and the book goes to the beginning. The following CSS attributes can be abbreviated:

Font Abbreviation:

Font: italic small-caps bold 12px/1.5em Arial, verdana;

It is equivalent:

Font-style: italic;

Font-variant: Small-caps;

Font-weight: bold;

Font-size: 12px;

Line-Height: 1.5em;

Font-family: Arial, verdana;

Sequence: font-style | font-variant | font-weight | font-size | Line-height | font-family

(Note: in short, font-size and line-height can only form one value through a slash/, and cannot be written separately .)

However, you must pay attention to the following points when using this shorthand: to make the shorthand definition valid, you must provide at least the font-size and font-family attributes, and font-weight, if the font-style and font-varient attributes are not set, the default value is normal.

Abbreviated as background:

Background: # fff url(bg.gif) No-repeat fixed Left top;

It is equivalent:

Background-color: # FFF;

Background-image: url(bg.gif );

Background-repeat: No-Repeat;

Background-Attachment: fixed;

Background-position: Left top;

Sequence: Background-color | background-image | background-repeat | background-attachment |

Background-Position

Short for margin & amppadding:

Margin: 1px 0 2em-20px;

It is equivalent:

Margin-top: 1px;

Margin-Right: 0;

Margin-bottom: 2em;

Margin-left:-20px;

Sequence: margin-top | margin-Right | margin-bottom | margin-left

The abbreviation of padding is exactly the same as that of margin.

Border Abbreviation:

Border: 1px solid #000;

It is equivalent:

Border-width: 1px;

Border-style: solid;

Border-color: #000;

Border-top/border-Right/border-bottom/border-left Abbreviation:

Border-top: 1px solid #000;

It is equivalent:

Border-top-width: 1px;

Border-top-style: solid;

Border-top-color: #000;

List-style Abbreviation:

List-style: Square outside url(bullet.gif );

It is equivalent:

List-style-type: Square;

List-style-position: outside;

List-style-image: url(bullet.gif );

Sequence: List-style-type | list-style-position | list-style-Image

Use two classes at the same time

Generally, we only specify a class for the content block. In fact, as long as you want to, you can assign any number of classes to a part of content at the same time. For example: [P class = "text side"]... [/P]

Separate multiple classes with spaces. When the attributes of multiple classes overlap, the class will be defined in the CSS definition file according to the position of each class, the class attributes defined later automatically overwrite the previously defined class attributes (instead of overwriting based on the order you arranged in class = "text side)

Default Value of CSS border

Generally, we define the border attribute to provide the attributes of color, width, and style. For example, border: 3px solid #000. However, in reality, only the style attribute must be provided. If you only write border: solid, the default value is automatically used for other attributes. If the default value meets your requirements, you can omit these two attributes.

! Important will be ignored by IE

In CSS, any one is marked! The important statement will obtain absolute priority, for example:

Margin-top: 3.5em! Important; margin-top: 2em

The top boundary of all browsers except IE is 3.5em, While IE is 2em. Sometimes this is useful, especially when using relative boundary values, the differences between IE and other browsers are displayed.

Image replacement skills

For example, if you want to use the "Buy widgets" title on the top of each page, you have to use an image to display the title to make it look nice if you use a rare Font:

[H1] [img src = "widget-image.gif" alt = "buy widgets"] [/H1]

This is certainly true, but there is evidence that the search engine attaches more importance to the real text than the alt text, so we have to use another method: [H1] [SPAN] Buy widgets [/SPAN] [/H1]. What about your beautiful font? The following CSS can help:

H1 {Background: url(widget-image.gif) No-Repeat ;}

H1 & nbspspan {position: absolute; left:-2000px ;}

Now you have used both beautiful images and hidden real text-with CSS, the text is positioned at the left-side of the screen-2000 pixels.

CSS skills

1. Unit that forgets to define the size is a common mistake. In HTML, you can write only width = 100, but in CSS, you must give an accurate unit, for example, width: 100px width: 100em. There are only two exceptions. The unit is not defined: the Row Height and the 0 value. 2. When CSS is used in XHTML, the element names defined in CSS are case sensitive. To avoid this error, we recommend that all definition names be in lower case. 3. Cancel the element restriction before the class and ID. Div # Content {/* declarations */} fieldset. details {/* declarations */}, which can be written as # Content {/* declarations */}. details {/* declarations */} can save some space. 4. Generally, the default value of padding is 0, but the default value may be different in different browsers. You can first define the margin and padding values of all elements as 0 at the beginning of the style sheet, as shown in the following example: * {margin: 0; padding: 0 ;}. 5. A tag can define multiple classes at the same time. For example, we first define two styles. The first style background is #666, and the second style has a border of 10 PX .. One {width: 200px; Background: #666 ;}. two {border: 10px solid # f00;}. In the Page code, we can call [Div class = one two] [/Div] in this way, in this way, the final display effect is that the DIV has both a background of #666 and a border of 10 PX. Yes. You can try it. 6. Font deformation command. The text-transform command is very useful. It has three values: Text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first half converts all texts into uppercase letters, the second half into lowercase letters, and the second half into uppercase letters. This is very useful for pinyin text, even if the input is case-insensitive, it cannot be seen on the web page.

Use the same navigation code on different pages

Many Web pages have navigation menus. when you enter a page, the corresponding menu items should be dimmed while other pages will be highlighted. To achieve this effect, you need to write a program or design each page specifically. Now you can achieve this effect by using CSS.

First, use the CSS class in the navigation code:

• Home
• About us
• Contact us

Then, specify an ID for the body of each page, with the same name as the class above. For example.

Then design CSS as follows:

# Home. Home, # About. About, # About. About

{

Commands for highlighted navigation go here

}

Here, when the ID is set to home,. Home will take effect, that is, the navigation bar of the class set to home will display a special effect. This is also true for other pages.

We will write down the CSS abbreviation here first. If you have any questions, please contact me.

 

 

Http://wyk.net.ru/blog/article.asp? Id = 628

CSS abbreviationsAuthor: Kai Date: font size:

To put it simply, CSS abbreviation is to simplify multiple CSS codes into one sentence on the premise of being equivalent. In my opinion, CSS has three advantages: one is easy to write (just like a keyboard shortcut), the other is simplified code, and the third is to help you understand CSS.

Let's talk less, and the book goes to the beginning. The following CSS attributes can be abbreviated:

Font

Program code

Abbreviation:
[Code]
Font: italic small-caps bold 12px/1.5em Arial, verdana;

Equivalent to: program code font-style: italic;
Font-variant: Small-caps;
Font-weight: bold;
Font-size: 12px;
Line-Height: 1.5em;
Font-family: Arial, verdana;

Sequence: font-style | font-variant | font-weight | font-size | Line-height | font-family

(Note: in short, font-size and line-height can only form one value through a slash/, and cannot be written separately .)

Background

Abbreviation: program code Background: # fff url(bg.gif) No-repeat fixed Left top;

Equivalent to: program code background-color: # FFF;
Background-image: url(bg.gif );
Background-repeat: No-Repeat;
Background-Attachment: fixed;
Background-position: Left top;

Sequence: Background-color | background-image | background-repeat | background-attachment | background-Position

Margin & padding

Abbreviation: program code margin: 1px 0 2em-20px;

Equivalent to: program code margin-top: 1px;
Margin-Right: 0;
Margin-bottom: 2em;
Margin-left:-20px;

Sequence: margin-top | margin-Right | margin-bottom | margin-left

The abbreviation of padding is exactly the same as that of margin.

Border
Abbreviation: program code border: 1px solid #000;

It is equivalent:

Program code border-width: 1px;
Border-style: solid;
Border-color: #000;

Sequence: border-width | border-style | border-color

These three sentences are also short words, so they combine the four sides of the style into one. (The problem of four sides is described in detail below)
Border-top/border-Right/border-bottom/border-left

Abbreviation: program code border-top: 1px solid #000;

Equivalent to: program code border-top-width: 1px;
Border-top-style: solid;
Border-top-color: #000;

(Same as border)

List-style

Abbreviation:

Program code list-style: Square outside url(bullet.gif );

Equivalent to: program code list-style-type: Square;
List-style-position: outside;
List-style-image: url(bullet.gif );

Sequence: List-style-type | list-style-position | list-style-Image

About four sides

There are many styles that involve the four sides, which are described here.
The abbreviation of the four sides is as follows: program code padding: 1px 2px 3px 4px;

Equivalent to: program code padding-top: 1px;
Padding-Right: 2px;
Padding-bottom: 3px;
Padding-left: 4px;

Sequence: Top | right | bottom | left

Whether it is the Border width, border color, margin, etc., as long as the CSS style involves four sides, the order is "Top right bottom left" (clockwise direction ).

If the value of the four sides is omitted, write only three: program code padding: 1px 2px 3px;

It is equivalent to: program code padding-top: 1px;
Padding-Right: 2px;
Padding-bottom: 3px;
Padding-left: 2px;

(The omitted "Left" value is equal to "right ")

If two values on the four sides are omitted: program code padding: 1px 2px;

It is equivalent to: program code padding-top: 1px;
Padding-Right: 2px;
Padding-bottom: 1px;
Padding-left: 2px;

(The omitted "bottom" value is equal to "TOP ")

If there is only one value: program code padding: 1px;

It is equivalent to: program code padding-top: 1px;
Padding-Right: 1px;
Padding-bottom: 1px;
Padding-left: 1px;

We will write down the CSS abbreviation here first. If you have any questions, please contact me.