CSS Classic Practical Tips 18 strokes _css/html

Source: Internet
Author: User
Tags all definition
This article summarizes all the tricks and compatibility scenarios I've started using CSS layout methods, and I'd like to share them with you, and I'll focus on explaining some of the mistakes that beginners make (including what I've done myself), and if you're already a CSS whiz, these experience tips may already be known if you have more, Hope can help me to add.

Translation: Ateptsevo

Original Author: Roger Johansson

Author profile: Living in Gothenburg, Sweden, in 1994 began to contact and participate in web design, 456 Berea Street is his address, so use this name as his personal home page domain name

Recently, my friends often ask me some CSS questions I have encountered in my work. They are always unable to control CSS very well, affecting the efficiency of CSS play. Let me analyze and summarize the mistakes and make it easier for you to use CSS.

I. Using CSS Abbreviations

Using abbreviations can help reduce the size of your CSS files and make them easier to read. The main rules of CSS abbreviations are described in the summary of common CSS abbreviations, which do not unfold.

Two. Explicitly define the unit, unless the value is 0

Forgetting to define the size of the unit is a common mistake for CSS beginners. In HTML you can write only width= "100", but in CSS you have to give an exact unit, for example: width:100px width:100em. Only two exceptions can be undefined units: Row heights and 0 values. In addition, the other values must be followed by the unit, note, do not add a space between the value and the unit.

Three. Case-sensitive

When using CSS,CSS in XHTML, the element names defined 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, and if you must write in mixed case, please be sure that your CSS definitions and XHTML tags are consistent.

Four. Remove the element qualification before class and ID

When you write an element to define class or ID, you can omit the preceding element qualification, because the ID is unique on a page, and Clas s can be used multiple times in the page. You have no meaning in qualifying an element. For example:

div#content {/* declarations *}

Fieldset.details {/* declarations *}

can be written

#content {/* declarations */}

. details {/* declarations */}

This can save some bytes.

Five. Default value

The default value for padding, usually 0,background-color, is transparent. However, the default values for different browsers may be different. If you are afraid of conflict, you can define all the elements ' margin and padding values to be 0 at the beginning of the style sheet, like this:

* {

margin:0;

padding:0;

}


Six. You do not need to define inheritable values repeatedly

In CSS, child elements automatically inherit the parent element's property values, such as color, font, and so on, which have been defined in the parent element, can be inherited directly in the child elements, and do not require duplicate definitions. Note, however, that the browser may overwrite your definition with some default values.

Seven. Recent priority principles

If there are multiple definitions for the same element, the closest (minimum) definition is the highest priority, such as having a piece of code

Update:lorem ipsum dolor Set

In the CSS file, you have defined the element p and defined a class "update"

p {

Margin:1em 0;

Font-size:1em;

Color: #333;

}

. Update {

Font-weight:bold;

Color: #600;

}

Of these two definitions, class= "Update" will be used because the class is closer than P. You can check out the calculating a selector's specificity for more information.

Eight. Multiple class definitions

A label can define more than one class at a time. For example: We define two styles first, the first style background is #666, and the second style has a ten px border.

. One{width:200px;background: #666;}

. two{border:10px solid #F00;}

In the page code, we can call this

The final result is that the DIV has both a #666 background and a 10px border. Yes, it's OK, you can try it.
Nine. Using the sub-selector (descendant selectors)

CSS beginners do not know that using sub-selectors is one of the reasons that affect their efficiency. A sub-selector 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 piece of code is:

Div#subnav UL {/* Some styling */}

Div#subnav ul Li.subnavitem {/* Some styling */}

Div#subnav ul Li.subnavitem A.subnavitem {/* Some styling */}

Div#subnav ul li.subnavitemselected {/* Some styling */}

Div#subnav ul li.subnavitemselected a.subnavitemselected {/* Some styling */}

You can replace the above code with the following method

    • Item 1
    • Item 1
    • Item 1

The style definition is:

#subnav {/* Some styling */}

#subnav Li {/* Some styling */}

#subnav a {/* Some styling */}

#subnav. Sel {/* Some styling */}

#subnav. SEL a {/* Some styling */}

Use a sub-selector to make your code and CSS more concise and easier to read.

10. No need to add quotation marks to the background image path

In order to save bytes, I recommend not quoting the background image path because the quotation marks are not required. For example:

Background:url ("Images/***.gif") #333;

can be written as

Background:url (images/***.gif) #333;

If you add quotation marks, it will cause some browser errors.

11. Group Selector (selectors)

When some element types, classes, or IDs have some properties in common, you can use group selectors to avoid repeating definitions multiple times. This can save a lot of bytes.

For example: Define the font, color, and margin for all headings, as you can write:

H1,h2,h3,h4,h5,h6 {

font-family: "Lucida Grande", Lucida,arial,helvetica,sans-serif;

Color: #333;

Margin:1em 0;

}

If you have an individual element that needs to define a separate style when you use it, you can add a new definition that overrides the old definition, for example:

h1 {font-size:2em;}

h2 {Font-size:1.6em;}

12. Specify the style of the link in the correct order

When you use CSS to define multiple state styles for a link, be aware of the order in which they are written, in the correct order: link:visited:hover:active. Extracting the first letter is "LVHA" and you can remember it as "Love HAte" (like annoying). Why this is defined, you can refer to Eric Meyer's "Link specificity".

If your users need keyboard control and need to know the focus of the current link, you can also define: Focus properties. : The effect of the focus property depends on where you write, if you want the focus element to display: hover effect, you put: Focus in front of: hover, if you want the focus effect instead: hover effect, you put: focus on: hover behind.

13. Clear Floating

A very common CSS problem, when positioning the use of floating, the following layer is covered by a floating layer, or the layer of nested sub-layers outside the outer range.

The usual solution is to add an extra element behind the floating layer, such as a div or a BR, and define its style as Clear:both. This method is a bit far-fetched, fortunately there is a good way to solve, see this article "How to Clear floats without Structural Markup" (Note: This site will be translated as soon as possible).

The above 2 methods can solve the problem of floating exceeding, but what if you really need to clear the layer or the object in the layer? A simple method is to use the overflow attribute, which was originally published in "Simple clearing of floats", Also in the "clearance" and "Super simple clearing floats" is widely discussed.

The above clear method is more suitable for you, to see the specific situation, here no longer discuss. In addition to the application of Float, some excellent articles have been very clear, recommended you read: "Floatutorial", "containing floats" and "Float Layouts"

14. Centering horizontally (centering)

It's a simple trick, but it's worth repeating, because I see too many novice questions to ask this: how does css align horizontally? You need to define the width of the element and define the horizontal margin, if your layout is contained in a layer (container), like this:

You can define this so that it is centered horizontally:

#wrap {

width:760px; /* Modify the width of your layer */

margin:0 Auto;

}

But Ie5/win does not display this definition correctly, and we use a very useful technique to solve it: Use the Text-align property. Just like this:

Body {

Text-align:center;

}

#wrap {

width:760px; /* Modify the width of your layer */

margin:0 Auto;

Text-align:left;

}

The first body of the text-align:center; The rule defines the center of all the elements of the body in Ie5/win (other browsers just center the text), and the second text-align:left the text in the #warp to the left.

15. Importing (import) and hiding CSS

Because the old version of the browser does not support CSS, a common practice is to use the @import technique to hide the CSS. For example:

@import url ("Main.css");

However, this method does not work for IE4, which gives me a headache for a while. Then I used the following notation:

@import "Main.css";

This can also hide the CSS in the IE4, hehe, but also save 5 bytes of it. For a detailed explanation of the @import syntax, you can see the centricle's CSS filter chart here.

16. Optimized for IE

Sometimes, you need to define some special rules for IE bug, there are too many CSS tricks (hacks), I only use two of these methods, regardless of whether Microsoft in the upcoming release of IE7 beta version of the better support CSS, both methods are the safest.

1. Methods of annotations

(a) to hide a CSS definition in IE, you can use the child selector (selector):

Html>body p {

/* Define content */

}

(b) The following wording is only accessible by IE browser (hidden from other browsers)

* HTML P {

/* declarations */

}

(c) There are times when you want Ie/win to be effective and ie/mac hidden, and you can use the "backslash" technique:

/* \*/

* HTML P {

Declarations

}

/* */

2. Method of conditional annotations (conditional comments)

Another way, I think, is more resilient than csshacks is the use of Microsoft's private attribute condition annotation (conditional comments). In this way you can define some styles for IE, without affecting the definition of the main style sheet. Just like this:

17. Debugging tips: How big is the layer?

When debugging a CSS error, you'll want to parse the CSS code step by step like a typeset worker. I usually define a background color on the problematic layer so that you can see clearly how much space the layer occupies. Some people suggest using border, the general situation is also possible, but the problem is that sometimes border will increase the size of elements, Border-top and Boeder-bottom will destroy the value of vertical margin, so use background more secure.

Another frequently problematic attribute is outline. Outline looks like Boeder, but does not affect the size or position of the element. Only a handful of browsers support outline properties, and all I know is Safari, OmniWeb, and opera.

18. CSS Code writing style

When writing CSS code, for indentation, line breaks, spaces, everyone has a writing habit. After continuous practice, I decided to use the following writing style:

Selector1,

Selector2 {

Property:value;

}

When using union definitions, I usually write a single line for each selector so that it is easy to find them in the CSS file. A space is added between the last selector and the curly brace {, and each definition is also written in a separate line, and the semicolon is directly behind the property value without a space.

I'm used to adding semicolons after each attribute value, although the last property value on the rule allows you to not write a semicolon, but if you want to add a new style easily forget to fill in the semicolon and create an error, so it is better.

Finally, close the curly braces} and write a separate line.

Spaces and line breaks help with reading.

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.