Since the w3c (The World Wide Web Consortium) formulation of a code-named Cougar of the 4.0 version of HTML, Web pages exist in the dynamic effects first formal recognition, the W3C dynamic hypertext (Dynamic HTML) the realization of the To three parts: scripts, supports dynamic effects of browsers and CSS.    The first two you may frequently used, but perhaps you css is not Clear what, if had the experience of making Web pages, you may have heard about style single style or single, if you have not heard, it does not matter, If you want to create more new features of a Web page, the paper will be equally suitable for you.    (Please use IE5 on IE4 or css attributes examples in the manual verification) 
  First, what is CSS? 
  CSS is the acronym for Cascading Style Sheet, and some books to translate it into "cascading style single" or "cascading style single" (hereinafter referred to as "single-style"), enacted in 1997 W3C standard HTML4 also announced the style The first single standard CSS1.    Style of the previous single html (HTML 3.2 the previous version) Syntax of a major innovation in the past, the HTML version, the realization of various functions through the marker elements to achieve, and this has also caused various browser vendors to the new standard conception Only by creating their own support of the various markers, nested among the various markers, we can achieve different effects, such as a section of text in the text part of a red, HTML3.2 should be like this: <p> <font Color = red> shown here red characters </ font> </ p> 

  In the form of single, certain markers (as in the case of the "font" tag) attributes, single-use patterns, the cases can be turned into: <p style = "color: red"> red characters shown here </ p > 

  This is the pattern all of the features of single?    Far not!    Said earlier style alone DHTML part of the establishment of the true meaning of style single object is to introduce the real HTML, allows us to use the script (such as Javascript, VBScript) call object attributes, and can change target attribute to the purpose of dynamic, This is in the HTML before it is impossible to achieve, and if you used such as VB, such as object-oriented programming tools, you will find a faster, single-use patterns do DHTML how easy it is.    Another form of a single contribution is to simplify the cumbersome HTML various markings, making all the attributes marked more general and common, and single-style expansion of the original marker functions, to achieve more effective, single-style even beyond their own Web pages display, and the pattern extended to a variety of media, and displayed an irresistible charm. 

  Since CSS1 style single version, and in May 1998 issued a CSS2 version, pattern-have been more substantial.    Internet Explorer4 and publicity support Netscape Navigator4 are single style, but the effect of all aspects of IE4 to more than NE4, it is because IE4 and the Javascript NE4 documents Model (DOM) caused by different from the surface, the two little distinction between models, but essentially it is widely divergent, IE4 model can be more easily turn Web pages into dynamic effects, although it is now only Microsoft IE4 model their support, but it was already clear written in the W3C DHTML standard and the style of single-NE4 through scripting and object attributes that did not sound right, it is only the style of its single table only.    (Netscape's own development of a single form known as the JSSS, which uses Javascript to define the style, but has not been recognized by W3C.) 
  Second, a better understanding of style - 
  Cascading Style Sheet in the Cascading is "stacked", I mean, that is to say in the same Web document can have more than one style single-existence of these styles according to the location of single, have different priorities, the higher the priority, show that will be used in the final.    From the pattern in the form of single insertion can be divided into three types: 

  Style in the single: it conducive to the existing HTML tags, a special style markings added to those from the control of information, for example, just examples. 

  Embedded single style: It Javascript and the same can be embedded into HTML documents to the head of (<html> and <body> tags), and the use of <Style> </ Style> container loading, such as: "<style> p (color: red; font-weight: bold) </ style> ", which will all pages are marked <p> role. 

  Single external Style: a preserved in the form of external single document, the external documents. CSS for the extension, such as "<link rel = stylesheet href =" main-sheet.css "type =" text / css ">." 

  According to the application, can freely use these three needs, but in reality, in the form of single-use patterns and embedded in some more. 

  Third, the syntax-style features 

  - Have their own unique style of writing, grammar master its features, find out about its various attributes, then you will find use in the form of Web pages is how easy single.    For example, there is a simple HTML documents: 

<html>
<body>
  <p> Text goes here… <p> 
  </ Body> 
  </ Html> 

  We can use embedded-style provisions style. 

<html>
<style>
  <! -- 
  P (color: red; font-weight: bold) 
  -- -> 
  </ Style> 
<body>
  <p> Red characters shown here </ p> 
  </ Bdoy> 
  </ Html> 

  Can be seen in this file, and there is more "Style" marker, with between <! -……… - -> Notes to prevent the pattern does not recognize the low single version of the browser as a single style show out, and then is the crucial one: 

  P (color: red; font-weight: bold) 

  This whole trip known as a Statement (Statement), in the form of single, the statement divided into two types, such as this one is called "rule set", the other is called the "at-rule." 

  At-rule "@" as a keyword, on the elements of the front, usually at-rule for the media (Media) statement, and if the same rule for an at-statement, then only will the front Position play a role, such as: 

  @ Import "subs.css" 
  h1 (color: blue) 
  @ Import "list.css" 

  At a post-Rule invalid. 

  The rule set that as we look ahead, it is composed of several components, including the selection, attributes and attribute values.    General writing is this: 

  Selector1 (property1: value1; property2: value2;……) 
  Selector2) (…… 

  Just one example of the "P" stands paragraphs marked Element for the selection of ,"{}" a block (Block), said the statement marked the attributes (Declaration), there are a number of attributes ";" separated , in the form of single attribute the general approach is that front is a kind of the name of the property, followed by the name of the specific attributes of the middle "-" separated, and in the use of attributes of the script, put "-" removed, and the initials of the second part of the capital.    Attribute values that can use the 10-band, 16 hexadecimal values (such as # FFFFFF), percentage (100%), string, url (eg url (http://www.mysite.com)) and RGB (such as rgb (255255255)), and other means that.    Now I will focus on one part of a more detailed explanation. 

  1, select (Selector) 

  Selector not only marked the elements in the document, it can be like (Class, which is different from Java or C + + class), id (special element to the name, also facilitates the use of the script), or elements of a kind of status (such as: a: link).    Such as: 

<html>
<style>
  <! -- 
  P (color: red; font-weight: bold) 
  . BigFont (font-size: 200%) 
  # BlueBack (background-color: blue; color: yellow) 
-->
  </ Style> 
<body>
  <p> Use <span class = "bigFont"> Class </ span> and <span id = "blueBack"> ID </ span> Display content.    </ P> 
  </ Body> 
  </ Html> 

  Them. Someclass representative category, ID # someID representatives.    Class and ID markers can be combined and the elements, such as: 

  P.bigFont) (…… 

  Said to be in a category for bigFont P tags (<p class = "bigFont" ") before the implementation of single style, the same is also suitable for the ID. 
  To streamline the duplication of certain attributes of a statement marking can be used "and" separated for the different options that they have said into the same attributes, such as: 

  H1, H2 (color: red) 
  Div, p.mytext) (…… 

  Sometimes we also hope to be in a specific pattern within the scope of single force: 

  P em (color: red) 

  Also marked spaces between elements separated, said In "p> and </ p> the <em>, red <em> said.    You can also use the "~" said a choice of keeping up with another option behind, and on both sides "/" surrounded: 

  / Selector1 ~ Selector2 /) (…… 

  Said that if Selector2 followed Selector1 style is the use of the single. 

  2, the attribute value units 

  In the form of single, attributes a large number of units for units of length, including px (pixels), pt (pounds), em (a layout of the units, a em = 12pt), mm (millimeters), cm (cm), pc (1pc = 12pt), in (inch), these units can use integer (px), it can also be used (such as em), and there are elements in numerical succession (inherit) the relationship between, for example: 

  body (font-size: 12pt; text-indent: 3em;) 
  H1 (font-size: 15pt) 

  Then display the text-indent H1 attribute is not 36 but 45 pt pt.    Some even attribute the unit can be negative, such as the Margin can be achieved some special effects, such as the overlap between elements.    There are also a number of other units such as the angle of its units deg (degrees), grad (gradient) and the rad (radians); frequency units, Hz and kHz, which we are very familiar. 
  3, and the Notes box style single statement also notes: You can use the "/ *…… * /" Notes marker in the browser in the form of single-one pairs of the analyzer, which is responsible for the inspection of the single form, will be Analyzer Notes ignore the content of between markers.    Space is in the form of single-effective, if there are more than one character between spaces exist, it will omit the remaining spaces, but only one reservation, in particular in the statement certain fonts, space must not be omitted.    2 to the attention of the First of all, pattern-is case-sensitive, so we should pay attention to spelling; not followed by the statement CSS2 attributes and methods, the style single analyzer will be overlooked its existence, such as: 

  H1, H2 (color: green) 
  H3, H4 & H5 (color: red) 
  P (color: blue; font-variant: small-caps) 

  Among them, "&" Style is not alone in labeling, and the second line throughout the analyzer bypass, the third line of font-variant is not a legal nature, has been slightly off ( "color: blue" effective). 

  Understanding of the above rules, you have single-entry forms, which are detailed on the various styles single attribute and attribute values. 

  CSS attributes: 

  1, the media (Media) type 

  Style single one of the most important features is that it can act on a variety of media, such as page and the screen, the electronic synthesizer, and so on.    The only specific attributes of the specific role of the media, such as the "font-size" can only attribute Scroll effective media types (screen). 

  A media statement attribute can be used or @ @ import media into: 

  @ Import url (loudvoice.css) speech; 
  @ Media print ( 
  / * Style sheet for print goes here * / 
  ) 

  Documents can also marked the introduction of the media: 

  <LINK Rel="stylesheet" type="text/css" media="print" href="foo.css"> 

  Can be seen, and the @ @ import of the difference between the media, the introduction of the former single form for external media types, the latter attribute directly to the media.    @ Import method is the use of Canadian style single @ import documents with the URL type of media, the media can be shared over a single style, media types "," Partition at separately.    @ Media rule is to use the media type on the front of other Rules and rule-set the same.    Various media types are listed below: 

  SCREEN: It refers to a computer screen. 
  PRINT: refers to the printer's opaque medium. 
  PROJECTION: means for the display projects. 
  BRAILLE: Braille system, saying that the sensitivity of the results printed. 
  AURAL: that voice synthesizer. 
  TV: TV that type of media. 
  HANDHELD: that handheld display device (small screen, monochrome) 
  ALL: suitable for all media. 

  CSS attributes: 
  2, BOX model (BOX Model) attribute is what BOX?    CSS to HTML in a…… <somesign> </ somesign> as part of BOX (containers), BOX There are three types of attributes: padding, margin and border. 

  Margin properties: 

  Margin attributes into top-margin, margin-right, and margin-bottom, margin-left margin and five properties, respectively, said BOX content of the distance from the border, it is the numerical value of the property units, it could be length, or the percentage of auto , or even can be set to negative margin, resulting BOX BOX and the overlap between, on the margin attribute detailed in the table below: 

  Attribute name: 'margin-top', 'margin-right', 'margin-bottom' and 'margin-left' 
  Attribute value: <margin-width> 
  Initial value: 0 
  Suitable object: whether all the elements of inheritance: no 
  Percentage Note: Compared to the Width of BOX 

  For example: 

  H1 (margin-top: 2em) 
  H2 (margin-right: 12.3%) 

  Margin also a quick way of writing, is the direct use of margin attributes, such as: 

  BODY (margin: 1em 2em 3em 2em) 

  Equivalent to: 

  BODY ( 
  Margin-top: 1em; 
  Margin-right: 2em; 
  Margin-bottom: 3em; 
  Margin-left: 2em; 
  ) 
  Margin back to four attributes of the middle and separated by a space (not remember comma), the order is "on the right lower left" and the margin behind the course can be less than four values, such as: 

  BODY (margin: 2em) / * is all set to 2 margin em * / 
  BODY (margin: 1em 2em) / * from top to Bottom for a margin em, and the right of the Left Margin em 2 * / 
  BODY (margin: 1em 2em 3em) / * 1 margin em, and the right to the left margin em 2, 3 under margin em * / 

  Padding attributes: 
  BOX Padding attributes used to describe the contents of borders and how much space inserted between, and attributes similar margin, it is divided into left and right lower on a shortcut padding, the padding on the properties detailed in the table below: 

  Attribute name: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'padding' 
  Attribute value: <padding-width> 
  Initial value: 0 
  Suitable object: whether all the elements of inheritance: no 
  Percentage Note: Compared to the width of BOX 

  For example: 

  BLOCKQUOTE (padding-top: 0.3em) 

  Padding and margin similar attributes omitted here. 

  Border attributes: 

  Show us in peacetime HTML document, see the section of text, it will be not as a BOX, BOX is actually borders, but usually do not show up, and border attribute is used to describe the BOX borders.    Border attributes into border-width, border-color and border-style, and these attributes are below branch. 

  Border-width attributes: 

  Border-width attributes are divided into: border-top-width, border-right-width, border-bottom-width, border-left-width, and border-width attributes, border-width by length is expressed as "thin / medium / thick "or units of length, width-border Below is a detailed list of attributes: 

  Attribute name: 'border-top-width,' 'border-right-width,' 'border-bottom-width,' 'border-left-width,' 'border-width' 
  Attribute value: <border-width> 
  Initial value: medium 
  Suitable object: whether all the elements of inheritance: no 
  Percentage Note: be prohibited 

  Border-width for the shortcut, the order of the right lower on the left, between the values separated by a space. 

  Border-color attributes: 

  Border-color attribute to display BOX border color, divided into border-top-color, border-right-color, border-bottom-color, border-right-color and border-color attributes, attribute values for color, can be used 10 six hex that can also be used rgb (), attributes below: 
  Attribute name: 'border-top-color' and 'border-right-color' and 'border-bottom-color' and 'border-left-color' 
  'Border-color' 

  Attribute value: <color> 
  Initial value: Elements of the initial values for color object: whether all the elements of inheritance: no 
  Percentage Note: be prohibited 

  Border-color for the shortcut, the order of the right lower on the left, between the values separated by a space. 

  Border-style attribute: 

  Border-style attribute for setting targets BOX frame styles, and its attribute values specified keywords for CSS usually see border is because none of the initial value is the reason.    Attribute below: 

  Attribute name: 'border-top-style', 'border-right-style', 'border-bottom-style', 'left-border-style', 'border-style' 
  Attribute value: <border-style> 
  Initial Value: none 
  Suitable object: whether all the elements of inheritance: no 
  Percentage Note: be prohibited 

  Border-color for the shortcut, the order of the right lower on the left, between the values separated by a space. 

  Attribute value of the name and on behalf of significance is as follows: 

  None: no borders. 
  Dotted: borders to point line. 
  Dashed: frame for the short-term long. 
  Solid: Borders solid line. 
  Double: Borders to dual. 
  Groove, ridge, inset and the outset: Showing the effects of different 3-D frames (based on color attributes). 

  Border attributes: 

  Border border attributes for a fast way, attribute values separated by a space of the order is "frame width frame styles border color," such as: 

  <h1 Style="border:.5em outset red"> hello! </ H1> 

  You may also use top-border, border-right, border-bottom, left-border were on the lower right as a shortcut to the left, attribute values with the sequence border attributes. 

  3, layout (Layout) attributes: 

  In previous HTML, the elements can only depend on the location of the elements that were ranked, and CSS, you can more precise positioning elements.    Netscape has made Layer marker, it is very good for the precise layout, but has not been recognized W3C, in the W3C CSS Layer markings similar to the proposed function. 

  Position attributes: 

  Position attributes used to determine the location of element types, as detailed attributes: 

  Attribute name: 'position' 
  Attribute value: absolute | relative | static 
  Initial Value: static 
  Suitable object: whether all the elements of inheritance: no 
  Percentage Note: prohibited its property values represent: 
  Absolute: the absolute position on the screen. 
  Relative: the relative position on the screen. 
  Static: the inherent position. 

  Direction attributes: 

  BOX direction attribute decision direction of the arrangement, as detailed attributes: 

  Attribute name: 'direction' 
  Attribute value: ltr | rtl 
  Initial Value: ltr 
  Suitable object: whether all the elements of Succession: yes 
  Percentage Note: be prohibited 

  Float and clear attributes: 

  In HTML floating in the picture can choose the location of objects now BOX by the CSS can also choose the location of floating.    BOX change the float attribute BOX other elements will be floating on the left or the right: 

  Attribute name: 'float' 
  Attribute value: left | right | none 
  Initial Value: none 
  Suitable object: whether all the elements of inheritance: no 
  Percentage Note: be prohibited 

  For example: 

  <STYLE Type="text/css"> 
  IMG (float: left) 
  BODY, P, IMG (margin: 2em) 
  </ STYLE> 
<BODY>
<P>
  <IMG Src=img.gif> 
  Some sample text that has no other ... 
  </ BODY> 

  On the contrary, the use of clear property will be prohibited from elements in the left or right BOX floating: 

  Attribute name: 'clear' 
  Attribute value: left | right | both | none 
  Initial Value: none 
  Suitable object: whether all the elements of inheritance: no 
  Percentage Note: be prohibited 

  Absolute position attributes: 

  There are four attributes absolute position attributes: top, right, bottom and left, attribute values for the length of units or percentage: 

  Attribute name: 'top', 'right', 'bottom', 'left' 
  Attribute value: <length> | <percentage> | auto 
  Initial Value: none 
  Suitable object: whether all the elements of inheritance: no 
  Percentage Note: be prohibited 

  Use of the above attributes, users can precise definition of the location of elements, such as: 

  <P Style="position: relative; margin-right: 10px; left: 10px;"> 
  I used two red hyphens to serve as a change bar. They 
  Will "float" to the left of the line containing THIS 
  <SPAN Style="position: absolute; top: auto; left: 0px; color: red;"> - </ SPAN> 
  Word. </ P> 

  Z-index attribute: 

  CSS allows the elements overlap, so there is a display order, z-index attribute describes the elements of the front and rear position, as if the computer screen XY plane, then the Z-axis is perpendicular to the screen, z-index Integer said that the use of elements at the front and rear position, the greater the value, will be displayed on the relative position of the front, and CSS agreed z-index used in the negative. 

  Attribute name: 'z-index' 
  Attribute value: auto | <integer> 
  Initial Value: auto 
  Suitable object: the use of the elements of the position attribute inheritance: no 
  Percentage Note: be prohibited 

  Width attributes: 

  BOX provisions of the width attributes, the width can not rely on BOX it contains the contents of the number of: 

  Attribute name: 'width' 
  Attribute value: <length> | <percentage> | auto 
  Initial Value: auto 
  Suitable targets: block element of the inheritance: no 
  Percentage Note: In accordance with the width and the father of the elements 

  CSS also provided in the min-width and max-width attributes, making BOX width to a minimum width and maximum width between. 

  Attribute name: 'min-width' 
  Attribute value: <length> | <percentage> 
  Initial value: 0 
  For Target: all 
  Whether inheritance: no 
  Percentage Note: In accordance with the width and the father of the elements 

  Attribute name: 'max-width' 
  Attribute value: <length> | <percentage> 
  Initial value: 100% 
  For Target: all 
  Whether inheritance: no 
  Percentage Note: In accordance with the width and the father of the elements 

  Height attributes: 

  BOX have the same height attributes to control their height: 

  Attribute name: 'height' 
  Attribute value: <length> | <percentage> | auto 
  Initial Value: auto 
  Suitable targets: block element of the inheritance: no 
  Percentage Note: In accordance with the height and the father of the elements 

  CSS also provided in the min-max-height and height attributes, making BOX height to a minimum altitude and maximum height between. 

  Attribute name: 'min-height' 
  Attribute value: <length> | <percentage> 
  Initial value: 0 
  For Target: all 
  Whether inheritance: no 
  Percentage Note: In accordance with the height and the father of the elements 

  Attribute name: 'max-height' 
  Attribute value: <length> | <percentage> 
  Initial value: 100% 
  For Target: all 
  Whether inheritance: no 
  Percentage Note: In accordance with the height and the father of the elements 

  Overflow attributes: 

  Elements in the provisions of the width and height, and if the size of elements not show the full contents of what used to overflow attributes: 

  Attribute name: 'overflow' 
  Attribute value: visible | hidden | scroll | auto 
  Initial Value: visible 
  For Target: elements of the position attribute inheritance: no 
  Percentage Note: be prohibited 

  Attribute values following meanings: 

  Visible: expand the area to show all of its contents. 
  Hidden: hidden beyond the scope of the content. 
  Scroll: the right elements in a show of rolling. 
  Auto: As the elements of the area exceeded that of the scroll. 

  Clip attributes: 

  CSS also provides a clip attributes can be regional shear element into various shapes, but only provided a box: 

  Attribute name: 'clip' 
  Attribute value: <shape> | auto 
  Initial Value: auto 
  Suitable elements: the element of absolute position attribute is set 
  Whether inheritance: no 
  Percentage Note: be prohibited 

  <shape> Value rect (top right bottom left). 

  Line-height and vertical-align attribute: 

  Line-height attribute elements can be provided within the space, or the percentage of use of units of length: 

  Attribute name: 'line-height' 
  Attribute values: normal | <number> | <length> | <percentage> 
  Initial Value: normal 
  Suitable object: whether all the elements of Succession: yes 
  Percentage Note: In accordance with the elements and the Font size 

  For example, the following examples, although the expression of different, but the results the same: 

  DIV (line-height: 1.2; font-size: 10pt) 
  DIV (line-height: 1.2em; font-size: 10pt) 
  DIV (line-height: 120%; font-size: 10pt) 

  Vertical-align attribute vertical elements in the decision to show the location of: 

  Attribute name: 'vertical-align' 
  Attribute value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> 
  Initial Value: baseline 
  For Target: inline elements 
  Suitable successor: no 
  Percentage Note: In accordance with the line-height elements and attributes for 

  Attribute values following meanings: 
  Baseline: alignment with the elements of the baseline. 
  Middle: alignment with the central element. 
  Sub: word sinking. 
  Super: word up. 
  Text-top: the top of the text alignment. 
  Text-bottom: text at the bottom of alignment. 
  Top: Bank location and maximum elements of alignment. 
  Bottom: Bank location and the minimum elements of alignment. 

  Visibility attributes: 

  The attributes used to control elements to display or hide: 

  Attribute name: 'visibility' 
  Attribute value: inherit | visible | hidden 
  Initial Value: inherit 
  Suitable object: whether all the elements of the succession: If the value is inherit, the element attribute Inheritance father percentage Note: be prohibited 

  CSS attributes: 

  4, and Background Color (Color and Background) attributes: 

  But here is the CSS in Jianjingse and Background color, the picture setup. 

  Color attributes: 

  Color attribute set Jianjingse elements: 

  Attribute name: 'color' 
  Attribute value: <color> 
  Initial value: according to the user's initial value may be suitable for object: whether all the elements of Succession: yes 
  Percentage Note: be prohibited 

  Color attribute value can be hexadecimal values, rgb () function or color CSS recognized name.    Such as: 

  EM (color: red) 
  EM (color: rgb (255,0,0)) 

  Background attributes: 

  Background-color attribute set background color, the initial value is transparent: 

  Attribute name: 'background-color' 
  Attribute value: <color> | transparent 
  Initial Value: transparent 
  Suitable object: whether all the elements of inheritance: no 
  Percentage Note: be prohibited 

  Backgroud-image attribute set the background for the picture: 

  Attribute name: 'background-image' 
  Attribute value: <url> | none 
  Initial Value: none 
  Suitable object: whether all the elements of inheritance: no 
  Percentage Note: be prohibited 

  Which can be absolute url address, it can also be a relative address, such as: 

  BODY (background-image: url (marble.gif)) 
  P (background-image: none) 

  These two attributes use ordinary HTML attributes can be achieved, the following attributes of the original CSS is the expansion of HTML. 
  Background-repeat attributes used to describe the background picture repeat sequence: 

  Attribute name: 'background-repeat' 
  Attribute value: repeat | repeat-x | repeat-y | no-repeat 
  Initial Value: repeat 
  Suitable object: whether all the elements of inheritance: no 
  Percentage Note: be prohibited 

  The meaning of attribute values: 
  Repeat: along the X-axis and Y-axis in both directions repeated picture. 
  Repeat-x: along the X-axis direction repeat picture. 
  Repeat-y: along the Y-axis direction repeat picture. 
  None: not repeat picture. 

  For example: 

  BODY ( 
  Background: red url (pendant.gif); 
  Background-repeat: repeat-y; 
  ) 
  / * Along the Y-axis repeat images "pendant.gif" to the rest of the red for the background color * / 

  Background-attachment attribute that rolling the entire document, the Background Image is displayed.    Its property values there are two: fixed and scroll, the fixed equivalent of IE4, the watermark effect, that is, drag files, the background is relatively static, and scroll, scroll the document. 

  Background-position attributes to the designated background images shown here: 

  Attribute name: 'background-position' 
  Attribute values: [<percentage> | <length>] (1,2) | [top | center | bottom] | | [left | center | right] 
  Initial value: 0% 0% 
  For Target: container elements whether inheritance: no 
  Percentage Note: refer to the size of the element itself 

  Implications for the value of these attributes: 
  "Top left" and "left top," said "0% 0%." 
  "Top", "top center" and "center top," said "50% 0%." 
  "Right top" and the "top right" have expressed their "100% 0%." 
  "Left", "left center" and "center left" that "0% 50%." 
  "Center" and "center center," said "50% 50%." 
  "Right" and "right center" and "center right," said "100% 50%." 
  "Bottom left" and "left bottom," said "0% 100%." 
  "Bottom", "bottom center" and "center bottom," said "50% 100%" 
  "Bottom right" and "right bottom" that "100% 100%." 
  For example: 

  BODY (background: url (banner.jpeg) right top) / * 100% 0% * / 
  BODY (background: url (banner.jpeg) top center) / * 50% 0% * / 
  BODY (background: url (banner.jpeg) center) / * 50% 50% * / 
  BODY (background: url (banner.jpeg) bottom) / * 50% 100% * / 

  Background attribute is above background attribute shortcuts, properties, and the following order: 

  Attribute name: 'background' 
  Attribute values: < 'background-color'> | | < 'background-image'> | | < 'background-repeat'> | | < 'background-attachment'> | | < 'background-position'> 
  Suitable object: whether all the elements of inheritance: no 
  Percentage Note: only in the background-position of allowing the use of 

  CSS attributes: 

  5, fonts (Font) attributes: 

  Here on the definition of the various font attributes. 

  Font-family name of the font attribute definition, can be a font of the title, and can also be the name of a type font, the font name and the computer system must be exactly the same as in: 

  Attribute name: 'font-family' 
  Attribute values: [[<family-name> | <generic-family>]] * [<family-name> | <generic-family>] 
  Initial value: According to user-defined may be suitable for Target: whether all the elements of Succession: yes 
  Percentage Note: be prohibited 

  Some computer systems, if there is no single pattern requirements of the font, can be set up to prepare a case in the font.    For example: 

  BODY (font-family: Baskerville, "Heisi Mincho W3," Symbol, serif) 

  Family-name refers to a set of fonts, such as Heisi Mincho W3, generic-family refers to a particular type of font, such as serif. 

  Font-style font attributes describe the degree tilt: 

  Attribute name: 'font-style' 
  Attribute values: normal | italic | oblique 
  Initial Value: normal 
  Suitable object: whether all the elements of Succession: yes 
  Percentage Note: be prohibited 

  Font-variant attributes: 

  Attribute name: 'font-variant' 
  Attribute values: normal | small-caps 
  Initial Value: normal 
  Suitable object: whether all the elements of Succession: yes 
  Percentage Note: be prohibited 

  To use the small-caps attributes of the elements of the lowercase letters look than normal number of small capital letters. 

  Font-weight character attributes used to describe heavy. 

  Attribute name: 'font-weight' 
  Attribute values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 
  Initial Value: normal 
  Suitable object: whether all the elements of Succession: yes 
  Percentage Note: be prohibited 

  100-900 behalf of nine kinds of different characters weight, normal 400 representatives, 700 representatives of bold, 900 is the most heavily fonts, bolder font or that the lighter weight than the word father of a high or low level elements, such as word-father element 400 , bolder characters weighing 500 representatives, if the word itself father elements weight of 900, then bolder, weight or 900 words, the same lighter is the same.    Some of the font and no 1-900 then all the characters in weight, may be from 300 to 700, then re-word the minimum and maximum for the 300-700.    For example: 

  P (font-weight: normal) / * 400 * / 
  H1 (font-weight: 700) / * bold * / 

  Font-size attribute description font size: 

  Attribute name: 'font-size' 
  Attribute value: <absolute-size> | <relative-size> | <length> | <percentage> 
  Initial value: medium 
  Suitable object: whether all the elements of Succession: yes 
  Percentage Note: relative to parent element's font size 

  The properties can use the absolute size, can also use relative size, the size of which can be used absolutely, that the following keywords: 

  Xx-small | x-small | small | medium | large | x-large | xx-large representing the smallest, small, small, medium, large, larger and largest.    Relative sizes can use: larger or smaller description.    For example: 

  P (font-size: 12pt;) 
  BLOCKQUOTE (font-size: larger) 
  EM (font-size: 150%) 
  EM (font-size: 1.5em) 

  Font properties is a fast way to the above attributes, the attributes are as follows: 

  Attribute name: 'font' 
  Attribute values: [[< 'font-style'> | | < 'font-variant'> | | < 'font-weight'>]? < 'Font-size'> [/ < 'line-height'>]? < 'font-family'>] 
  Suitable object: whether all the elements of Succession: yes 
  Percentage Note: only in the use of font-size 

  For example: 

  P (font: 12pt/14pt sans-serif font (P): 80% sans-serif) 
  P (font: x-large/110% "new century schoolbook," serif) 
  P (font: bold italic large Palatino, serif) 
  P (font: normal small-caps 120% / 120% fantasy) 

  6, the text (Text) attributes: 

  Here will affect WEB attributes of the text in the document that the situation. 

  Property Description text-indent Text Indentation level: 

  Attribute name: 'text-indent' 
  Attribute value: <length> | <percentage> 
  Initial value: 0 
  For Target: container elements whether Succession: yes 
  Percentage Note: In accordance with the width of the father may be elements 

  The following example shows that the indentation of paragraphs 3 em: 

  P (text-indent: 3em) 

  Alignment of text attribute that alignment: 

  Attribute name: 'alignment' 
  Attribute value: left | right | center | justify 
  Initial value: for in accordance with user-defined object: block-level elements 
  Whether Succession: yes 
  Percentage Note: be prohibited 

  Text-decoration attribute description of the modifications to the text: 

  Attribute name: 'text-decoration' 
  Attribute values: none | [underline | | overline | | line-through | | blink] 
  Initial Value: none 
  Suitable object: whether all the elements of inheritance: no (see clarification below) 
  Percentage Note: be prohibited 

  Meaning property values are: 
  Underline: underlined. 
  Overline: on the line. 
  Line-through: strikeout. 
  Blink: Scintillation (as in the blink Navigator marked function) 

  Text-shadow attributes can be added to the text of the shadow effects: 

  Attribute name: 'text-shadow' 
  Attribute values: none | <color> [<color>] * 
  Initial Value: none 
  For Target: all 
  Whether Succession: No 
  Percentage Note: in the description of transparency only when effective 

  For example: 

  P (text-shadow: black) 

  Cases will be in the text on the lower right shows that black shadow, and shadows will increase the size of BOX. 

  Letter-spacing attributes of the text shows that the word pitch: attribute name: 'letter-spacing' 

  Attribute values: normal | <length> | auto 
  Initial Value: normal 
  Suitable object: whether all the elements of Succession: yes 
  Percentage Note: be prohibited 

  For example: 

  BLOCKQUOTE (letter-spacing: 0.1em) 

  Word-spacing in the text that attributes the word pitch: 

  Attribute name: 'word-spacing' 
  Attribute values: normal | <length> 
  Initial Value: normal 
  Suitable object: whether all the elements of Succession: yes 
  Percentage Note: be prohibited 

  For example: 

  H1 (word-spacing: 1em) 

  Text-transform BOX attributes can be specified within the text of the capital or lowercase form: 

  Attribute name: 'text-transform' 
  Attribute value: capitalize | uppercase | lowercase | none 
  Initial Value: none 
  Suitable object: whether all the elements of Succession: yes 
  Percentage Note: be prohibited 

  Attribute value meaning: 
  Capitalize: BOX in the first letter of each sentence into capital. 
  Uppercase: BOX to all of the letters into capital. 
  Lowercase: BOX to all of the letters into lowercase. 

  White-space attribute describes how to display text in the box, in HTML, space is omitted, in the sense that you have marked the beginning of a paragraph regardless of the number of input space are null and void and have to enter a space two ways, first, the code directly into space "," or use <pre> marker, CSS also developed a similar pre attributes: 

  Attribute name: 'white-space' 
  Attribute values: normal | pre | nowrap 
  Initial Value: normal 
  For Target: container elements whether Succession: yes 
  Percentage Note: be prohibited 

  For example: 

  PRE (white-space: pre) 
  P (white-space: normal) 

  7, List of attributes: 

  Here used to describe the properties of the list (list) a series of attributes. 

  List-style-type attribute description for a list before each use of symbols: 

  Attribute name: 'list-style-type' 
  Attribute value: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none 
  Initial Value: disc 
  For Target: List of the elements of Succession: yes 
  Percentage Note: be prohibited 

  Attribute value meaning: 
  Disc: a round-shaped cake. 
  Circle: hollow circular. 
  Square: square. 
  Decimal: a decimal value. 
  Lower-roman: lowercase Roman numerals. 
  Upper-roman: uppercase Roman numerals. 
  Lower-alpha: lowercase letters of the Greek alphabet. 
  Upper-alpha: uppercase letters of the Greek alphabet. 

  For example: 

<STYLE>
  OL (list-style-type: lower-roman) 
  </ STYLE> 
<BODY>
<OL>
  <LI> This is the first item. 
  <LI> This is the second item. 
  <LI> This is the third item. 
  </ OL> 
  </ BODY> 

  Can also use the list-style-image on the front of the symbol for the graphics: 

  Attribute name: 'list-style-image' 
  Attribute value: <url> | none 
  Initial Value: none 
  For Target: List of the elements of Succession: yes 
  Percentage Note: be prohibited 

  <url> Can absolutely address, it can also be a relative address. 

  List-style-position list of attributes used to describe the location: 

  Attribute name: 'list-style-position' 
  Attribute value: inside | outside 
  Initial Value: outside 
  For Target: List of the elements of Succession: yes 
  Percentage Note: be prohibited 

  Attribute values outside and inside, respectively show that BOX external or internal, such as: 

  <STYLE Type="text/css"> 
  UL (list-style: outside) 
  UL.compact (list-style: inside) </ STYLE> <UL> 
  <LI> First list item comes first 
  <LI> Second list item comes second 
  </ UL> 
  <UL Class=compact> 
  <LI> First list item comes first 
  <LI> Second list item comes second 
  </ UL> 

  List-style attribute for the above-mentioned attributes of shortcuts: 

  Attribute name: 'list-style' 
  Attribute values: < 'list-style-type'> | | < 'list-style-position'> | | < 'list-style-image'> 
  Initial value: no 
  For Target: List of the elements of Succession: yes 
  Percentage Note: be prohibited 

  For example: 

  UL (list-style: upper-roman inside) / * * effectively to any UL / 
  UL-UL (list-style: circle outside) / * UL any effective internal UL mark * / 

  8, forms attributes: 

  Since the majority of properties in the table above have been discussed in various attributes, so here only two attributes description: 

  Row-span attribute description forms leap in the number of firms: 

  Attribute name: 'row-span' 
  Attribute values: 
  Initial value: 1 
  Suitable object: whether the succession form elements: no 
  Percentage Note: be prohibited 

  Property Description column-span across the table in the number of: 

  Attribute name: 'column-span' 
  Attribute values: 
  Initial value: 1 
  Suitable object: whether the succession form elements: no 
  Percentage Note: be prohibited 

  CSS attributes: 

  9, the user interface attributes: 

  Cursor attributes, users can specify a certain elements to be used on the cursor shape: 

  Attribute name: 'cursor' 
  Attribute value: auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | 
  Initial Value: auto 
  Suitable object: whether all the elements of Succession: yes 
  Percentage Note: be prohibited 

  Attribute values representing the mouse pointer in the windows operating in the various forms, and can also specify the url address pointer icon, but does not support CSS also temporarily ani animated cursor. 

  1985: 

  Here, all available on the CSS attributes are on the end (there are still some areas on the form of single hearing, would not be subject to presentations), the paper also concluded that, although the pattern now supports single browser types is not, but also accounted for more than half, patterns alone will sooner or later become the standard browser, for two reasons: First, the style alone only acceptable form of W3C standards, and there are no indications that W3C will Javascript as a template-style single standard; 2 CSS effective solution is the introduction of elements of the incident, with script, is a dynamic HTML indispensable part of the attempt to establish a single pattern with Web page, you will find that it really is convenient.    I hope that these efforts can you mastering style alone do something.