Creating web pages - CSS broadcast of the commonly used techniques
Related Tags:
CSS broadcast of the commonly used techniques (2)
10. Background images do not need to quote path
In order to save bytes, I propose not to quote the background picture path, because quotes are not necessary. For example:
Background: url (gif images /***.) # 333;
Can be written as
Background: url (gif images /***.) # 333;
If you add quotes, but will lead to some browser errors.
11. Select group (Group selectors)
When some Element type, class or id have some common attributes, you can use Group selector to avoid duplication of a number of definitions. This can save many bytes.
For example: the definition of all title font, Color and margin, you can write:
H1, h2, h3, h4, h5, h6 (
Font-family: Lucida Grande, Lucida, Arial, Helvetica, sans-serif;
Color: # 333;
Margin: 1em 0;
)
If used, some elements need to define independent format, and you can Moreover, the new definition could cover the definition of the old, such as:
h1 (font-size: 2em;)
H2 (font-size: 1.6em;)
12. Specified in the order with the correct style links
When you use css links to a number of state definition of the pattern, it is necessary to pay attention to their written order, the order is correct:: link: visited: hover: active. The first letter is from LVHA, you can LoVe HAte into memory (like hate). Why are so defined, can refer to Eric Meyer's "Link Specificity."
If your users need to use the keyboard to control, the need to know the focus of the current link, you also can be defined: focus attributes. : Focus attributes and the results depend on the location of your writing, if you want to show focusing elements: hover effect, you hear: focus in the writing: hover in front if you want to focus effects alternative: hover effect, you hear: focus release in: hover behind.
13. Remove floating
CSS a very common problem, positioning the use of floating, floating below the layer was covered by the layer or layers of nested in the outer layer beyond the scope.
The usual solution is to add a floating layer behind the additional elements, such as a div or a br, and define it for the style clear: both. This approach it is far-fetched, and fortunately there is a good way to be solved, see the article "How To Clear Floats Without Structural Markup" (Note: this site will soon translate this article).
The above two kinds of ways to properly resolve the issue of floating beyond, but if you really need to layer or layers of the objects in the clear when how? A simple method is to use overflow attributes, this method was first published in the "Simple Clearing of Floats" and "Clearance" and "Super simple clearing floats" were extensively discussed.
A clear that the above method is more suitable for you depends on the specific circumstances, no longer start here on. Another Float on the application of some excellent articles have made it very clear that recommend that you read: "Floatutorial", "Containing Floats" and "Float Layouts"
14. Horizontal center (centering)
This is a simple technique, but it is worth repeat, because I see too many novice questions asked this: How CSS horizontal center? You need a wide definition of elements, and define the lateral margin, if you included in the layout of a layer (containers), such as:
<! - Your layout here ->
You can define it horizontal center:
# Wrap (
Width: 760px; / * adapted to the Width of your layer * /
Margin: 0 auto;
)
But IE5/Win not correct to suggest that the definition, we have adopted a very useful skills to solve: text-align attribute. Like this:
body (
Text-align: center;
)
# Wrap (
Width: 760px; / * adapted to the width of your layer * /
Margin: 0 auto;
Text-align: left;
)
The first body of the text-align: center; Rules defined in the body IE5/Win all the elements of the middle (Other browsers will only text middle), the second text-align: left; # warp is the text Habitat left.
15. Import (Import), and hidden CSS
Because the old version of the browser does not support CSS, a common practice is to use the @ import skills to CSS hidden. For example:
@ Import url (main.css);
However, this method does not work on the IE4, which I am a headache for quite a while. Later, I used this wording:
@ Import main.css;
This can also hide in IE4 CSS, huh, while also saving five bytes it. @ Import would like to know a detailed explanation of grammar, can be seen here, "centricle's css filter chart"
16. Against IE Optimization
Sometimes, you need the IE browser bug some special definition of the rules, there are too many CSS skills (hacks), I can only use one of two methods, whether in the upcoming release of Microsoft IE7 beta version is better, CSS support, these two methods are the most safe.
1. Method Notes
(A) hidden in a CSS in IE definition of options you can use (child selector):
Html> body p (
/ * Definition of contents * /
)
(B) Below the only way IE browser can understand (other browsers hide)
* html p (
/ * Declarations * /
)
(C) Other times, you want IE / Win effective and IE / Mac hide, you can use the backslash skills:
/ * * /
* Html p (
Declarations
)
/ * * /
2. Conditions of the Notes (conditional comments) method
Another way, I think more than CSS Hacks stand the test is the adoption of Microsoft's private property conditions Note (conditional comments). You can use this method to separate definition of some form of IE, without affecting the definition of the style sheet. Like this:
<!--[ If IE]>
<link Rel=stylesheet type=text/css href=ie.css />
<! [Endif] ->
17. Debugging skills:-how?
When debugging CSS wrong, you must like typesetting workers, progressive analysis of CSS code. I usually layer on the problem in the definition of a background color, in this way we can see very clearly how much of the occupied space. Some suggested using border, the general situation is possible, but the problem is that sometimes Border element would increase the size, border-top - and Bottom boeder vertical Margin would undermine the value, so use more secure some background.
Another frequent problem is the outline of the property. Boeder outline looks like, but will not affect the size or location of the elements. Only a few browsers support outline attributes, I know only Safari, OmniWeb, and Opera.
18. css code writing style
Write CSS code, the indentation, and break, space, everyone has everyone's writing habits. After continual practice, I decided to adopt Below this writing style:
Selector1,
Selector2 (
Property: value;
)
When using the joint definition, I usually write separately with each of his choice, in order to facilitate CSS document find them. In the last one-and the choice between the brackets (a space, each individually write his definition, the semicolon directly in property values, not spaces.
I used the back of each attribute values have been added to the semicolon, although the rules allow a final attribute values can not write semicolon behind, but if you have to add new styles, easy to forget that fill the semicolon and a wrong, and they still are better.
Finally, the closure of the Individual brackets) write his entourage.
And spaces for reading and will help.
A total of two. 9 1 2
- Dreamweaver image rendering techniques
- Worthy of the respect of an article on the CSS techniques
- Ajax tools and techniques of
- Painting techniques: Flash painting pen
- Web-based framework of the optimization techniques
- You may not know that 10 of the CSS techniques
- CSS broadcast of the commonly used techniques
- CSS code-writing techniques commonly used
- Web site promotion techniques 8
- CSS techniques commonly used
- CSS2.0 of the 18 most commonly used techniques
- Dreamweaver use of fast techniques
- 13 Dreamweaver use of fast techniques
- JavaScript methods and techniques Daquan
- Flash techniques used in the pixel fonts
- You may not know that the CSS techniques
- Google ranking - Search engine registration techniques
- CSS style sheet document and optimization techniques
- Optimization and CSS techniques
- 16 Dreamweaver use of fast techniques
Web effects small pool code
1. Right ignored <body Oncontextmenu="return false"> Or <body style = "overflow-y: hidden"> 2. By adding background music IE: <bgsound src="*.mid" loop=infinite>&...
Keywords choose skills
Key words is not limited to a single word, phrase and should include the phrase. We know that in search engines to retrieve information by entering keywords are achieved. Therefore, as its name indicates, Key words indeed very crucial. It is the whole p...
Set up tables and text modules on the format and location
In the pages click the right mouse button in the pop-up menu, choose Cell Property, the property unit will form the pop-up dialog box. Form modules dialog box form and the content of the contents of roughly similar distinction lies in dialogue form module card modules from a for...
Dreamweaver MX 2004 Video Collection Guide (4)
Article 04 sets: page layout Curriculum objectives: to understand and master a basic elements of the page Curriculum points: Web site is the type of layout design, and different sites have different styles, but some of the basic layout elements is essential. ...
FW MX 2004 Guide (9): Image Transform
Image Transform technology in the website frequently used, that is, when the mouse to move to a certain image or button, it will trigger another graphic display. In Fireworks, Image Transform principle is to enable the production of "frame" in the frame of a panel of gr...