Web page Standardized production: CSS Super skill big Broadcast

css| Standard | skills | Web page

In the previous CSS description has been explained #m_blog Div.tit is the blog article title code so we just add > Picture code added to the later {}.

Add the following code:

Line-height: how many px; Set the height of the caption, in fact, this is set to the height of the picture can be

Text-indent: how many px; Set the text before the title of how much width, here can fill the width of the picture, for the sake of beauty, can be more +5, 6px, because the picture and title is not good-looking, this is mainly to see personal feelings and preferences set

Background:url (picture address) no-repeat; Set add the picture address, no-repeat is not repeated, be sure to set up, otherwise the picture will cover the entire title bar, in fact, in my latest comments, each message name in front of a small paw, the code set method and this is the same, as long as the set in #m_comment Div.item {} It's OK.

If you like, you can also in other templates to do settings, each module code ID please see the Baidu CSS description, detailed

Have a friend said can't understand, want me to say more detailed point, I think I said full detail, I put the code of my relevant settings to show you, perhaps can let everybody see more understand point

#m_blog Div.tit{font-size:14px;font-weight:bold;

line-height:90px;

text-indent:120px;

Background:url (459fd6ca87470c46f21fe79d.gif) no-repeat;}

This section of the red is their own add in the setting, we simply put the URL behind () to change the address of their own pictures, and then the Line-height and text-indent after the value of their own to change the image of the high and wide on it-Tianya book

People should see the title of my Space a little different

You may not find it if you don't look carefully.

The pattern of my title and the general spatial title pattern is not the same as the title and introduction is left and right arrangement rather than up and down, hehe ~ ~ ~

Let's take a look at my setup code.

#header div.tit{top:5px;left:20px;line-height:60px;font-size:60px;font-family: Official Script}

#header div.tit a.titlink{color: #813533; Text-decoration:none}

#header div.tit a.titlink:visited{color: #813533; Text-decoration:none}

#header div.tit a.titlink:hover{color: #FFFFFF; Text-decoration:none}

#header div.desc{top:27px;left:320px;color: #813533; font-size:16px}

That's my space. Header Settings Code

Here's a detailed explanation.

#header div.tit{} This is the setting of the title

#header Div.tit a.titlink{} This is the setting for the title hyperlink

#header Div.tit a.titlink:visited{} This is the setting where the title hyperlink has been accessed

#header Div.tit a.titlink:hover{} This is the property that appears when you move the mouse over the title hyperlink

#header div.desc{} This is the content setting for the profile after the space title

And then explain the attributes and the detailed parameters.

top:5px distance between the top of the template is 5px

left:20px distance to the left of the template is 20px

line-height:60px Set total height to 60px

font-size:60px set the font size to 60px, this can not be set to larger than the Line-height, otherwise the title font part of the will be obscured

font-family: XXFarEastFont-Arial Set the font model

Color: #813533 Set the font colour code for #813533, here you can also write the color of the English name, such as Black,white,red,green

Text-decoration:none the underlined properties of the font, none is no underline, and the specific arguments about text-decoration can see the article I wrote earlier about defining hyperlinks

I have explained the properties used here, as for the parameter setting depends on the preferences of everyone.

Finally suggestions: We have seen the code of my space after the tutorial do not copy the past will be done, in fact, you can use the specific to analyze the role of the code, so you can also set up your own style of Baidu space

--Network resources

A. Use CSS abbreviations

Using abbreviations can help reduce the size of your CSS files and make it easier to read. The main rules for CSS abbreviations refer to the common CSS abbreviation syntax summary, which does not expand the description.

Two. Define units clearly, unless the value is 0

Forgetting to define the size of the unit is a common error for CSS Novice. In HTML you can write only width=100, but in CSS you have to give an exact unit, such as: width:100px width:100em. Only two exceptions can be defined without a unit: row height and 0 value. In addition, other values must follow the unit, note, do not add a space between the number and the unit.

Three. Case sensitive

The element names defined in CSS,CSS are case-sensitive when used in XHTML. To avoid this error, I recommend that all defined names be lowercase.

The values of class and ID are case-sensitive in HTML and XHTML, and if you have to mix the case, carefully verify that your definition of CSS is consistent with the tags in XHTML.

Four. To cancel the element qualification before class and ID

When you write an element to define class or ID, you can omit the previous element qualification because the ID is unique on a page, and 鴆 Las S can be used more than once in the page. You define an element without meaning. For example:

div#content {/* declarations */}

Fieldset.details {/* declarations */}

can be written

#content {/* declarations */}

. details {/* declarations */}

This can save some bytes.

Five. Default value

Usually the default value for the padding is transparent, which is the default value for 0,background-color. However, the default values for different browsers may be different. If you are afraid of conflict, you can define the margin and padding values for all elements at the beginning of the stylesheet as 0, like this:

* {
margin:0;
padding:0;
}

Six. You do not need to repeat the definition of inheritable values

In CSS, child elements automatically inherit the attribute values of the parent element, such as color, font, and so on, that are already defined in the parent element and can be directly inherited in child elements, without having to repeat the definition. Note, however, that the browser may overwrite your definition with some default values.

Seven. Recent priority principles

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

Update:lorem ipsum dolor Set

In the CSS file, you have defined the element p and defined a classupdate

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 class is closer than P. You can find out more about the calculating a selector's specificity of the consortium.

Eight. Multiple class definition
A label can define more than one class at a time. For example, we first define two styles, the first style background is #666, and the second style has an PX border.

. One{width:200px;background: #666;}
. two{border:10px solid #F00;}

In the page code, we can call

<div Class=one two></div>

The final display effect is that the DIV has both a #666 background and a 10px border. Yes, it's OK, you can try it.

Nine. Using a descendant (selectors)
CSS beginners do not know that using a child selector is one of the reasons that affects their efficiency. A child selector can help you save a lot of class definitions. Let's look at the following code:

<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>item 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li>
</ul>
</div>

The CSS definition for this 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 use the following method to replace the above code

<ul id=subnav>
<li> <a href=#> Item 1</a> </li>
<li class=sel> <a href=#> Item 1</a> </li>
<li> <a href=#> Item 1</a> </li>
</ul>

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 easy to read.

10. Do not need to quote the background picture path

To save bytes, I recommend that you do not enclose the background picture path with quotes, 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 quotes, it can cause some browser errors.

11. Group Selector (selectors)

When some element types, classes, or IDs have common attributes, you can use the group selector to avoid multiple duplicate definitions. This can save a lot of bytes.

For example, to define the font, color, and margin of all headings, you can write this:

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

Font-family:lucida Grande,lucida,arial,helvetica,sans-serif;

Color: #333;

Margin:1em 0;

}

If there are individual elements that need to be defined as separate styles when used, you can add new definitions to cover old definitions, such as:

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. The first letter is LVHA, you can remember it as love hate (like hate). Why this definition, you can refer to Eric Meyer's "Link specificity".

If your users need to use the keyboard to control, you need to know the focus of the current link, you can also define: the focusing attribute. : The effect of the focus attribute also depends on where you write, if you want the focused element to display: hover effect, you put: focus on: hover front; If you want focused effects to replace: hover effect, you put: focus on: hover behind.

13. Clear Floating

A very common CSS problem, when positioning using a float, the layer below is covered by the floating layer, or the layer nesting of the child layer beyond 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 little far-fetched, fortunately there is still a good way to solve, see this article "How to clear floats without structural Markup" (Note: This site will soon translate this article).

The above 2 methods are good for solving floating problems, but what if you really need to clear the layers or layers of objects? An easy way is to use the overflow attribute, which was originally published in the 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, depending on the situation, no longer discussed here. In addition to the application of Float, some excellent articles have been very clear, recommend you to read: "Floatutorial", "containing floats" and "float Layouts"

14. Horizontally centered (centering)

It's a simple trick, but it's worth saying again because I see so many novice questions asking: How is css horizontally centered? You need to define the width of the elements and define the horizontal margin, if your layout is contained in a layer (container), like this:

　　<!--your layout here to start-->

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 correctly display this definition, we use a very useful technique to solve: using the Text-align attribute. 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 that all elements of the body are centered in the Ie5/win (other browsers simply center the text), the second text-align:left is the left of the text in the #warp.

15. Importing (import) and hiding CSS

Since older browsers do 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 makes me very headache for a while. Later I used the following wording:

@import main.css;

This can also be hidden in the IE4 CSS, hehe, also saved 5 bytes. To learn more about @import syntax, see here "Centricle ' CSS Filter Chart"

16. For IE optimization

There are times when you need to define some special rules for IE bugs, there are too many CSS tips (hacks), and I use only two of these methods, and whether or not Microsoft is better at supporting CSS in the upcoming IE7 Beta, both of these are the safest.

1. Method of annotation

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

Html>body p {

/* Definition Content * *

}

(b) The following wording is only understandable 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 annotation (conditional comments)

Another way, I think, than the CSS hacks more withstand the test 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:

<!--[If ie]>
<link rel=stylesheet type=text/css href=ie.css/>
<! [endif]-->

17. Debugging skills: How big is the floor?

When debugging CSS errors, you need to be like a typesetting worker, parsing CSS code line by row. I usually define a background color on the problem layer so that it's clear how much space the layer occupies. Some people suggest using border, the general situation is also possible, but the problem is, sometimes border will increase the size of elements, Border-top and Boeder-bottom will destroy the value of vertical margin, so it is safer to use background.

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

18. CSS Code writing style

In writing CSS code, for indentation, line breaks, spaces, everyone has the writing habits of everyone. After continuous practice, I decided to use the following writing style:

Selector1,

Selector2 {

Property:value;

}

When working with federated definitions, I usually write each selector in a single line, so it's easy to find them in a CSS file. Add a space between the last selector and the curly brace {Each definition is written separately, and the semicolon is directly after the attribute value, without spaces.

I'm used to adding a semicolon after each property value, although the rule allows the last attribute value to be followed by a semicolon, but if you want to add a new style, it's easy to forget to make up the semicolon and create an error, so it's all better.

Finally, close the curly brace to write a single line.

Spaces and line-wrapping are helpful and readable.