1, convenient to modify the format of the Web page: CSS control of the page style can be independent, so modify, update the page up all appear unusually easy and easy.
2, easy to increase the special effect of the webpage: excessive use of the image in the Web page will destroy the original text storage format, and will be extended download time, if the use of CSS image filter, you can not increase the volume of the page to achieve some special visual effects, add to the Web page angry.
3, the use of page elements more accurate positioning: The table used in the previous HTML to locate the table elements, and the table is only applicable to the rules of the page layout, for the complex structure of irregular web page is not enough, and CSS can be a good solution to typesetting problems.
4, good adaptability: many browsers support CSS.
At the same time, we have a deeper understanding of the CSS style sheet features:
1, flexible custom page element style: CSS can be used to define the elements of their display style in the page. If you want an element to have multiple appearances, you can create multiple classes of this element, and you can define that element in a Web page in a different class.
2, quickly update the site style: using CSS, the entire site's style information can be concentrated in the external CSS style sheet file, its extension is. css, so that HTML or XML can be referenced by a certain statement of the file style.
3, the combination of different styles of the Web page: Everyone to create a Web page style and ideas are not the same, and finally everyone's web page and has developed a perfect combination of the page is quite difficult, and CSS technology can let everyone put their own content directly to the page, and then the Web page and the corresponding CSS file connection, After the combination of style is more consistent, but also save a lot of unnecessary trouble.
How do css layouts work? How CSS files are linked
1. Additional links: external CSS files
2. Import CSS: When multiple CSS files are used, import multiple CSS into one CSS file
There are three types of CSS rules defined
1, classes such as ". Redtext ",". Bluetext "and". BigText "Wait.
2, tag for the original HTML tag to do the re-CSS definition 3, advanced pseudo-class, the element that defines the ID, and a comprehensive definition
Application of CSS Rules
1, only "class" style needs to be applied, class= "XXXX". Any element can apply a class.
2. The difference between class and ID
3, the label application generally for the "body" label one-time use, for such as "Li", "TD" and so on the page of large repetition of the label is not recommended definition.
4, advanced multi-use, the definition of "#id li" than the definition of "Li" is much better.
The order in which CSS rules are executed
1, according to the implementation of CSS Code order
2. If there are duplicate rules, follow the definition after execution
3, the final rule is a combination of multiple definition rules
Focus: Advanced Rule definitions
1, for the different table text style definition. (Different tables use different IDs, use class style definitions)
2. Multiple hyperlink style definitions in one page
3, multiple same rules different objects of CSS common definition
4. Consider what is more scientific (extensibility and Code simplification) for multiple CSS methods defined by the same object
Overflow and text-indent:-9999pxThe usual way to offset the font is
Use text-indent:-9999px;
But he has a limitation. He only works with block-level elements.
And we often sometimes want to offset the font on a
So that's the problem.
TEXT-INDENT:-9999PX, though more comfortable to use.
If you turn a into a block, the elements behind him will be on his way to the next line.
If it happens to be a button behind this a
Float to make the crowd behind him.
Is that a bit of a problem?
So the recommended use
line-height:0;
font-size:0;
Overflow:hidden;
The perfect "Hide" the font above your background
Tested ie6.0, 7.0, 8.0, Firefox 3.010 through
And the way to hide this for input value is a little hard.
So we can only use block plus text-indent to "offset" the simulation hidden
Display:block;
font-size:0;
line-height:0;
text-indent:-9999px;
Tested by ie6.0, 7.0, Firefox 3.010Site RefactoringFirst, 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 to an element that defines class or ID, you can omit the preceding element qualification, because the ID is unique on a page, and 鴆 Las S can be used multiple times on the page. You have no meaning in qualifying an element. For example:
Div#content {}
Fieldset.details {}
can be written
#content {}
. Details {}
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 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 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:
<div id=subnav>
Item 1
<li class=subnavitemselected>
Item 1
Item 1
The CSS definition for this piece of 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 method
<ul id=subnav>
- Item 1
<li class=sel> Item 1
- Item 1
The style definition is:
#subnav {}
#subnav Li {}
#subnav a {}
#subnav. Sel {}
#subnav. Sel a {}
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
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;
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 {
}
(b) The following wording is only accessible by IE browser (hidden from other browsers)
* HTML P {
}
(c) There are times when you want Ie/win to be effective and ie/mac hidden, you can use the backslash technique:
* HTML P {
Declarations
}
2. Method of conditional annotations (conditional comments)
Another way, I think, than the CSS hacks more than the test is to use 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.
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.
Creating Web-standard-based Web pages with Xhtml+cssThis is a long time ago article, now it seems that the idea is worthy of everyone to learn, in 52css.com study cases at the same time, do not imitate the knowledge of some theories, the breakthrough of your knowledge will be very helpful. Come on, everybody!
Since watching Mr. Zeldman's masterpiece "Designing With Web Standards" Chinese version for "website Refactoring" (2nd edition) a book, feel quite deep, determined I use the WEB standard idea, to develop and practice our project. But it's not enough to know just what web standards are and how to apply them to real projects. Each component of the Web Standard must be learned by application, conquer, to discover their essence! For web development designers like me, understand this truth, to carry out targeted learning and practice, I believe we will reap more, but also for the web standards in China to make a contribution to the application! (Well, this may be a bit of a bluff, but it's really the ideal of most of our software practitioners.) ）
It is the age of web2.0 and even 3.0, the age of Xhtml,xml,css,ecmascript and Dom. Although they are not the ultimate technology, they are combined as a solution-we plan to build a backward-compatible Web site and are the necessary technical basis for web-compliant websites. Not only do we want to get more user support and access, but also to build long-lasting, beautiful websites that attract their attention for a long time. I believe that learning to use CSS to improve our website is a great way to attract attention and is also a trendy trend in the web2.0 era. I'll just talk about the experience I've gained from the CSS technology.
To be a CSS expert, it is not enough to be proficient in using CSS selectors (selectors). It also lies in the overall planning of the work, mastering the workflow and improving the maintainability and efficiency of the style sheets. CSS can be used to create a fantastic website we want, and to write CSS itself is a kind of enjoyment. So how do we create a more appealing style sheet? What are the characteristics of your style sheet? Through learning and combining my own work experience, summed up a set of beautiful style table to create a good way.
One, do not let the CSS have too many tags
Linking or importing a style sheet sounds like a job without a clue. I've seen a lot of web development with neat, well-organized CSS documents, but slowly, because it may not be quick to update in the short term, or too lazy to manage, this makes the previously created exquisite style sheet into garbage. If we work on a huge website that needs to publish hundreds of content. Because time is limited, you need to make quick changes or updates by nesting or arranging CSS. Over time, this habit is maintained until one day you are told that the site is going to completely overturn the redesign (but the content is the same) and that you only have a week to create (including testing). In general, updating a stylesheet is a very simple approach, and unless you make changes to the site's fragmented areas for a long time, you won't be able to take a holistic look at the structure of the Web site style sheet.
Linking or importing your stylesheet is not a random thing. Create a clean and tidy style sheet and keep it going, and you'll be happier with your work. Note: If you're trying to create a new style sheet every time you update or add something new, you're asking for trouble. Too many links and imported style sheets can make it difficult to eliminate bugs and make stylesheets difficult to maintain. It is understandable that a larger web site will have different parts of the style sheet set up separately. Be careful not to go to extremes. Adding a lot of style sheets will add more HTTP requests and may also affect the later work.
Second, the semantic definition is clear and understandable
In addition to choosing the most appropriate, most meaningful element to express, you also decide to select the class and id attribute values. A clear definition can make maintenance easy, and members of the team will understand it. Look at this definition:
. l10k {color: #369;},. left-blue {color: #369;}, if I do it I may know what it means, but it is not necessarily understood. Even if you know what it means today, can you promise to know what it means many years from now? It is best not to add color or long-width dimensions to the class properties. More appropriate naming conventions:. work-description {color: #369;}
third, know when to add conditional comments and application skills
Many articles have written about problem-solving techniques, and conditional annotations are a good way to control the release of IE. I agree that conditional annotations are much better than scribbling in your CSS documents, but lately I've come to realize that there's a lot of evidence that this isn't the best solution. You want to set its minimum height in an element, but the IE6 browser does not execute it, so you know that the height you can use will be treated the same way. Re-build a stylesheet and add conditional comments to your logo, all you need to do is follow this rule? Keeping the rules of the lowest height and height together, choose a little trick in the same CSS document, would that be better? In this case, I find it difficult to work with this method.
apply CSS to Web pages to use external style sheets as much as possible
Is it good? Everyone is clear, of course, one thing is undeniable, can maximize the implementation of code reuse and optimize the configuration of Web site files.
Well, these are some of my personal views, I hope that your friends to give more advice, your proposal is my challenge the power of the difficult! Thank you!
CSS layout rules in DreamweaverCS3
Although it has been suggested that you do not use the Dreamweaver visual editing method of CSS page layout, but still many friends are using. Create a code editor that you can use with DW to write CSS code. Today we introduce the CSS layout rules in Dreamweaver CS3 Web page making.
How CSS files are linked
• Additional links: external CSS files
• Import CSS: When multiple CSS files are used, import multiple CSS into one CSS file
There are three types of CSS rules defined
• Classes such as ". Redtext ",". Bluetext "and". BigText "Wait.
• Label re-CSS definition for original HTML tags
• Advanced Pseudo-class, element with ID defined, and comprehensive definition
Application of CSS Rules
• Only the "class" style needs to be applied, class= "XXXX". Any element can apply a class.
The difference between class and ID
• Label application generally for "body" label one-time use, for such as "Li", "TD" and so on in the pages of large repetition of the label is not recommended definition.
• Advanced multi-use, it is much better to define "#id Li" than to define "Li".
The order in which CSS rules are executed
• Follow the order of CSS Code execution
• If there are duplicate rules, follow the definition of subsequent executions
• The final rule is a synthesis of multiple definition rules
Focus: Advanced Rule definitions
• Text style definitions for different tables. (Different tables use different IDs, use class style definitions)
• Multiple hyperlink style definitions in one page
• Multiple CSS Common definitions for different objects of the same rule
• Consider what is more scientific (extensibility and Code simplification) for multiple CSS methods defined by the same object
CSS3 's most anticipated eight functionsCSS3 is still in sight, and it's not a technical problem, it's not a question of when people can completely abandon old browsers that don't meet the standards. CSS3 is expected to be sure, CSS Tricks Web site did a poll, voted the most anticipated CSS function, a total of 7000 people participate, the results are as follows. Interestingly, the top three of the results were very close.
#1) fillet (22%, 1,541 votes)
This feature has been widely used in browsers such as Mozilla and Webkit, and is undoubtedly the most anticipated for WEB designers, yet IE still has no sign of supporting this feature.
#2) Multi-background (22%, 1,523 votes)
This feature is what I most expect, but backwards compatibility can be a big problem.
#3) @font-face (21%, 1,424 votes)
The latest version of Firefox will support this feature, Safari,opera even IE will support or already support this feature, we will see the wide application of this feature, but the copyright issue of fonts will be very troublesome.
#4) animations and gradients (12%, 818 votes)
Webkit is the leader in this area, animation is part of the design, it should also belong to CSS. These will be implemented slowly, and when browsers outside of Webkit start to support this feature, we will see a lot of surprising results.
#5) Gradient (8%, 535 votes)
Defining a fixed color background is simple, but the gradient is not so simple, the gradient is very suitable for the implementation of the Code, Webkit again in this area Rob first.
#6) Box Shadow (4%, 271 votes)
Shadows are also a kind of gradient, in the past through the background image, if you consider the multi-directional shadow, things will become more complex, the Box shadow mechanism to solve all problems.
#7) RGBa-Add transparent Color (3%, 234 votes)
The A in RGBa is a transparent color, and transparency is very important to the designer, which is now widely used in addition to IE.
#8) Text Shadow (2%, 140 votes)
Also belongs to the concept of gradient, so that the text has a shadow, before even can not be achieved through the picture background, so this will bring designers unprecedented convenience.
CSS layout formulas-CSS Bug jingle view full text 2009-05-04 23:44:22
In the CSS page layout encountered a bug, please read the following carefully, very easy to remember, do not know which man put CSS bug into jingle! Look good, remember?
First, IE border if not, it should be noted that the height setting has been forgotten;
Second, the floating generation has the reason, if the parent layer contains live, immediately after floating to clear, the container naturally show therein;
Three or three pixel text slow move don't panic, height set to help you busy;
Four, compatible with each browsing must note that the default setting row height may be the killer;
Five, independent clear floating must be remembered, row height set no, high set 0, design effect and browse;
Six, the school layout must train of thought, the road with the layout principle of natural straight, easy to control the HTML, water layout less hack, code refreshing, compatible, friendly engine hi welcome.
Seven, all the labels have a source, but the default is different, span is infinite, no two-in-one and block-level, IMG more special, but also in compliance with the legal principle, the other is only the transformation of the different, A * number of the original, cascading style should be more practice, all things are law.
Eight, the picture link layout must be careful, the picture link text link If aligns, the padding and the vertical-align:middle to set, although the difference fine does not harm.
Nine, ie floating bilateral distance, please use display:inline arrest.
Ten, the list of horizontal layout, the list code must close, the gap from the need to remember.
CSS for Web page style control
