Cascading Style Sheets Tutorial

  CSS layout and the traditional form (table) the biggest difference is the layout: the original location forms are used by the spacing or use forms colorless, transparent GIF picture of the layout view to control the spacing, and now use Layer (div ) positioning, through layer margin, padding, border control and other attributes to the plate spacing.    1. Definition DIV 

  Analysis of a typical example of the definition of div: 

  # Sample (MARGIN: 10px 10px 10px 10px; 
  PADDING: 20px 10px 10px 20px; 
  BORDER-RIGHT: # CCC 2px solid; 
  BORDER-BOTTOM: # CCC 2px solid; 
  BORDER-LEFT: # CCC 2px solid; 
  BORDER-TOP: # CCC 2px solid; 
  BACKGROUND: url (images / bg_poem.jpg) # FEFEFE no-repeat right bottom; 
  COLOR: # 666; 
  TEXT-ALIGN: center; 
  LINE-HEIGHT: 150%; WIDTH: 60%;) 

  As follows: 

•   For the name of the sample, used in the pages 

    <div Id="sample"> 

    We can call this style. 
•   MARGIN means to stay outside of the borders of the blank for the page margins or with other layers to create a distance.    "10px 10px 10px 10px" on behalf of "the right lower left" (clockwise direction) four border, if we, can be abbreviated as " 

    MARGIN: 10px; 

    . "If the margins to zero, as the" 

    MARGIN: 0px; 

    . "NOTE: When the value is zero, in addition to RGB color values from 0% Percent must be other circumstances behind can not with the unit" px. "MARGIN transparent elements and can not be defined colours. 
•   PADDING layer refers to the borders of the gap between the content.    And the same margin, are designated on the right lower left bezel to the contents of the distance.    If all the same, can be abbreviated as " 

    PADDING: 0px 

    . "Left alone can be designated as the" PADDING-LEFT: 0px;. "PADDING is transparent elements and can not be defined colours. 
•   BORDER refers to the borders of the "BORDER-RIGHT: # CCC 2px solid," a definition of the color box to the right to "CCC #" width "px" style as "solid" line.    If the dotted line styles can be used to "dotted." 
•   BACKGROUND definition of the background.    The two definitions, the definition picture background to the adoption of the "url (.. / images / bg_logo.gif)" to designate the background picture path followed by the definition background color "# FEFEFE."  "

    No-repeat 

    "Means the background picture need not repeat, repeat if necessary horizontal" 

    Repeat-x 

    "Longitudinal repeat" 

    Repeat-y 

    "Duplication covered the entire background of" repeat. "Behind the" right bottom "refers to a background picture from the lower right corner of the beginning if there is no background images can only define the background color 

    BACKGROUND: # FEFEFE 
•   COLOR used to define a font color, on the one already introduced. 
•   TEXT-ALIGN used to define the content of the arrangement, the center middling, left Habitat left and right of abode right. 
•   LINE-HEIGHT to high definition, 150% refers to the height of standard height of 150 per cent, can be written as: 

    LINE-HEIGHT: 1.5 

    Or LINE-HEIGHT: 1.5em, are the same meaning. 
•   WIDTH definition of the width of a fixed value can be used, for example, 500 px, the percentage can also be used, like here, "60 percent."    It should be noted that: the width means you only the width of the content, not including margin, border and padding.    But in some browser is not so defined, and we need you to try. 

  Below this layer is the actual performance: 

  We can see that the border is 2 px grey background picture in the lower right there is no duplication, and content from the left frame 20 px, as middling, and anticipated all the same.    Hoho, although Buhaokan, but it is the most basic, master it, you will have learned half of the CSS layout technology.    This is, which is not hard!    (The other half is what is the other half of the layer and between the position I will gradually on the back.) 

  2.CSS2 Box Model 

  Since 1996 CSS1 the launch of the W3C organization on the proposal on all pages are on the right as a box (box), the designer can create this box to control the definition of the attributes, including paragraphs like these, the list, Heading picture, as well as layer <div>.    Box Model definition of the four main areas: content (content), from the borders (padding), border (border) and the margin (margin).    We are talking of the above is a typical sample of the box.    For beginners, often in confusion margin, background-color, background-image, padding, content, the border between the level of relations and mutual influence.    Here to provide a 3-D model box diagram, you hope that the ease of understanding and memory. 

  3. Picture will be assisted by background processing 

  Using XHTML CSS layout, a technical you are not accustomed to a beginning, it should be said that is a way of thinking and traditional forms layout not the same, that is: All are assisted by background picture to achieve.    Something like this: 

  BACKGROUND: url (images / bg_poem.jpg) # FEFEFE no-repeat right bottom; 

  Although it could be used <img> directly from the content, but it is not recommended.    Here the "auxiliary picture" refers to pages that are not as a part of the content of the expression, but merely for tinkering with intervals to remind the picture.    For example: the photo in the picture, pictures, news photographs, the top three box model d picture belong to a part of the content, they can use <img> elements directly from the page, and other similar logo, the title picture, the list prefix must use background images, or other means CSS format. 

  The reason for this is 2:00: 

•   Performance and will complete phase separation structure (a reference to read another article: "understanding of the structure and performance of Separation"), with the CSS to control all the appearance of performance, and ease of revision. 
•   Make the page more user-friendly, more friendly.    For example: the blind use screen readers with the background picture on the technology will not be read out. 

Tags: css layout, div css layout, div layout, layout examples, w3c standards, web standards

Releated Posts

• Using Web standards establishment of the first nine days: CSS layout entry (2)
• WEB standards handbook section nine days: CSS layout of the first examples
• Reconstruction, standards, the layout
• Web standards combat CSS page layout watercress Home
• Web standards combat CSS page layout Google Home

This entry was posted on Tuesday, January 23rd, 2007 at 12:00 am and is filed under Css+Div Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.