CSS code-writing techniques commonly used

Posted by john
5/8/2007
Related Tags:
css code  css code generator  css color code 

  css broadcast of the commonly used techniques - the use of abbreviations can help reduce your CSS file size, and more easy to read.    Css initials of the main Rules see "css acronym commonly used Syntax summary," described here will not start. 

  1. Use css initials 

  The use of abbreviations can help reduce your CSS file size, and more easy to read.    Css initials of the main rules see "css acronym commonly used syntax summary," described here will not start. 

  2. Clear definition, unless value of 0 
  Forget the definition of the unit size is generally CSS rookie mistakes.    In html you can only write Width = 100, but CSS, you must give an accurate units, such as: width: 100px width: 100em.    Only two exceptions can be no definition of unit: 0 line and high value.    In addition, the value must keep up with other units that do not value and units in the spaces between. 

  3. Case-sensitive when used in the CSS in XHTML, CSS Element in the definition of the name is case-sensitive.    In order to avoid this mistake, I propose that all names have adopted the definition of lowercase. 

  id class and the value of the HTML and XHTML is case-sensitive, and if you have to write mixed case, please carefully to confirm your CSS and XHTML, the definition of the label is the same. 

  4. Cancelled before the class and id element when you wrote to a limited definition of class or id elements, you can omit the preceding element limited because the ID, is the only one page, can also expanded las s multiple pages times.    You limit a senseless elements.    For example: 

  Div # content (/ * declarations * /) 
  Fieldset.details (/ * declarations * /) 

  Can be written 

  # Content (/ * declarations * /) 
  . Details (/ * declarations * /) 

  This can save some bytes. 

  5. Padding is usually the default value for the default value of 0, the background-color default value is transparent.    However, in different browsers default value may be different.    If fear of a conflict, in the style sheet can be a first definition of the beginning of all the elements of Margin and padding value to 0, like so: 

  * ( 
  Margin: 0; 
  Padding: 0; 
  ) 

  6. Do not need to repeat the definition of Gejicheng 

  CSS, the elements of automatic succession father elements attribute values, like colors, fonts, and so on, has elements of the definition of a father, in the sub-elements can be directly inherited, do not need to repeat the definition.    However, we should pay attention to, the browser might use some of the default cover your definition. 

  7. Recently priority on the same principle if the definition of a variety of elements to the nearest (minimum level) is defined as the highest priority, for instance, such a code 

  Update: Lorem ipsum dolor set 

  In the CSS document, you have the definition of p elements, and defines a classupdate 

  P ( 
  Margin: 1em 0; 
  Font-size: 1em; 
  Color: # 333; 
  ) 
  . Update ( 
  Font-weight: bold; 
  Color: # 600; 
  ) 


  These two definitions, class = update will be used, because the last class more than p.    You can read the W3C's "Calculating a selector's specificity" Read more. 

  8. Multiple class definition of a label can be a number of class definition.    For example: We have two first definition of the pattern, a pattern Background # 666; second form 10 px borders. 

  . One (width: 200px; background: # 666;) 
  . Two (border: 10px solid # F00;) 

  In the page code, we can call this 

  <div Class=one two> </ div> 

  This is the ultimate effect of this div the background of the existing # 666, 10 px borders.    Yes, it is possible, you can give it a try. 

  9. Use of choice (descendant selectors) 
  CSS beginners do not know the use of selector affect their efficiency is one of the reasons why.    - Selector can help you save a lot of class definition.    Below we look at this 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> 

  CSS definition of 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 alternative methods of 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> 

  Style definition: 

  # Subnav (/ * Some styling * /) 
  # Subnav li (/ * Some styling * /) 
  # Subnav a (/ * Some styling * /) 
  # Subnav. Sel (/ * Some styling * /) 
  # Subnav. Sel a (/ * Some styling * /) 

  - Selector can be used to your code and CSS more concise, easier to read. 

Related articles:

Bbs and web2.0
  Heater space to see the "conversation minutes and ox" (I am a bit of this title for Khan)    Http://spaces.msn.com/members/linzheming/Blog/cns!1pkUP2u7l_jzCEtbzqEtD8Zw!221.entry    Really think of the day on msn to discuss a lot of things.    I also ...
Study: Korean site where Fortunately, the design
  From the 1980s to the present, can be said to be in China set off a Korean, such as South Korea's music, television dramas, movies, games, etc., it can be said now it is the love opera love Korean dramas, the Korean film. Game in our country is more popular. websites in South Korea and C...
Flash production darkness and rain water ripples animation splash
  Related Articles: Practical Programming Flash 5 animation production - rain    In some brilliant Flash can be seen in the film, often fishes and the effect of rain, gives us a warm and romantic feeling.    The production of rain fell from the night sky, splashing water a...
Wealth of information: how to assess the value of a web site
  How to assess the value of a website? We must not forget that although we do not make money website, but to assess the value of a commercial site, or to return to the final whether it is the ability to profit.    I have a friend, is a well-known domestic science and technology mag...
Ajax: A New Approach to Web Applications
  ת ԣ º http://www.adaptivepath.com/publications/essays/archives/000385.php    By Jesse James Garrett    February 18, 2005    Ifanything about current interaction design can be called "glamorous," it's creating Web applications. Af...