CSS Tutorial CSS and DOCUMENT_ experience Exchange

cascading Style sheets:the Definitive Guide , 2nd Edition is a thorough review of all aspects of CSS2.1 and a comprehensive guide to CSS implementation. The book includes new content on positioning, lists and generated content, table layout, user interface, paged media, and More. It explores in detail all individual CSS property and how it interacts with the other properties, and shows how to avoid comm On mistakes in interpretation. the of the Css Home page: http://www.w3.org/Style/CSS/ 1 CSS and document 1. 1 ElementsElements in HTML are easily recognizable, such as P,table,span,a,div. Elements in XML are defined by DTDs, or XML Schema definitions. Each element part represents the way it behaves. CSS can be thought of as each element produces a box that contains the contents of the element. 1. 1. 1 element types: Replaced and nonreplaced elements,block-level and inline-level elements replaced elements: The content of an element can be replaced by content that is not directly represented by the document. Typically an IMG in XHTML, it can be replaced by a picture file that points to the outside of the document. InputThe element can also be replaced by the Radio button,checkbox,text input box, depending on its type. replaced elementsAlso produces a box when displayed. nonreplaced Elements: Most elements of HTML and XHTML are nonreplaced. In other words, the content of these elements is represented by the user agent (which is usually the browser) in the box generated by the element to express present. (Does box mean that the element corresponds to a region on the page?) ）。 Like what Hi There is nonreplaced, text hi here will be by the user agent to display. Block-level element block elements: produces an element box that fills the content area of its parent element with no other elements on either side. This means that, by default, each block-level is a separate line. Like P,div. The list items is a special block element. In order to behave in a uniform manner with other block elements, a symbol, such as bullet, is generated for the unordered lists, and a number is generated for the ordered lists. Add a symbol or number to the element box. In addition to the representation of a symbol, other features are the same as the rest of the block elements. Inline-level element Inline: Produces an element box, which is a line of text, and is not a single line. A typical example is the a element in XHTML, in addition to the Strong,em. Because inline elements do not interrupt the display before and after them, inline elements appear in other elements without interrupting the display of other elements. NOTE: block elements in XHTML and HTML cannot inherit from inline elements, but there are no similar provisions in CSS. There are no restrictions on how elements are nested.

block Elementtypically a container element of other elements, the block element is generally started from the new row, which can accommodate inline elements and other block elements,Common block elements are paragraph labels ' P. "Form"this block element is special, and it can only be used to accommodate other block elements. 　 if there is no CSS, the block elements are ordered to go down in a row each time. And with CSS.later, we can change this HTMLThe default layout mode, placing the block elementsplace to go. Instead of every stupid other line. It should be noted that the tabletags are also a form of block elements, table based layoutand CSS based layoutfrom the perspective of the general user (excluding visually impaired, blind, etc.), there is no other difference except the page loading speed difference. But if the average user accidentally points it out,When you view the page Source button, the difference between the two is very large. Design of CSS based on good reconstruction conceptlayout page source code, at least can let no webdevelopment experience of ordinary users to the content quicklyto read it quickly. From this perspective, CSS layout codethere should be a better aesthetic experience. you can put a block container element divImagine it as a box .,or if you've ever played a scrapbook, it's easier to understand. We will first cut the required articles from a variety of newspapers and magazinesdown. Each cut is a block.. Then we put the pieces of paper on a blank new piece of paper according to our own layout intent. So you can create your own unique digest letters.up. As an extension of technology, Web page layout design also follows the same pattern . Inline elements (inline Element) 　　Are generally based on the semantic level (semantic)the basic elements. Inline elements can only hold text or other inline elements, common inline element "a". 　 block Elementand inline elements (inline element)It's all HTML .the concept in the specification. The basic difference between a block element and an inline element is that the block element generally starts from the new row. And when the CSS is addedafter control, this genus of block elements and inline elementssex differences will not be the difference. For example, we can completely cite the inline elementplus Display:block .such a property lets him also have properties that start from the new line every time. The basic concept of a mutable element is that he needs to determine whether the element is a block element or an inline element based on the context relationship. Mutable elements are also part of the above two categories of elements, and once the context determines his category, he follows the rules of block elements or inline elements. The approximate elements are categorized in full. 　　 　 PS:about inline ElementIn Chinese, there are many inline elements, embedded elements, inline elements, and straight-forward elements. Basically there is no unified translation, love how to call it. In addition to the inline element, we will think of aa displaythe attribute is display:inline;This property can fix the famous IEdouble floating boundary problem. block Element * Address-Address * blockquote-Block Reference * Center-to aligning. * DIR-Directory list * Div-Common block-level easy, also CSS layoutthe main label * DL-definition List * Fieldset-formcontrol Group * Form-Interactive Forms * H1-Big Headlines * H2-subtitle * h3-3level headings * h4-4level headings * h5-5level headings * h6-6level headings * HR-Horizontal Divider Line * Isindex-input Prompt * Menu-Menu List * Noframes-framesoptional content, (for frames not supportedbrowser to display this chunk content * NoScript-) optional script content (for scripts not supportedbrowser to display this content) * OL-Sort a form * P-paragraph * Pre-formatting text * Table-Table * ul-non-sorted list inline elements (inline Element) * A-Anchor Point * abbr-Abbreviations * Acronym-First word * B-Bold (not recommended) * Bdo-bidi Override * Big-Large Font * BR-line Break * cite-References * code-Computer code (when referencing the source code is required) * DFN-Defining Fields * em-emphasized * FONT-font settings (not recommended) * I-Italic Body * img-Image * Input-Input Box * KBD-Defining keyboard Text * Label-Table Labels * Q-Short References * S-Medium Dash (not recommended) * Samp-defining sample computer code * Select-Project Selection * Small-Small Font text * Span-commonly used inline containers that define chunks within text * Strike-Medium Dash * Strong-Bold Emphasis * Sub- Subscript * sup-superscript * TEXTAREA-Multi-line text input box * TT-Telex Text

* U- Underline * var- Defining Variables Variable element A mutable element is a block element or an inline element that determines whether the element is in context. * Applet-java Applet * Button- buttons * del- Delete Text * Iframe-inline Frame * INS- inserted text * Map- image block (map) * Object-object Object * Script- Client Script

An example:

An inline element within it.

In the example above there are two block elements, p and body, an inline element em. In XHTML, EM can inherit from P, not vice versa. Inline elements in XHTML can be inherited from block elements, not vice versa. There is no such rule in CSS, CSS can change the structure of the above example. p {display:inline;} em {display:block;} Insert the Block box in the inline box. Effect: Changing the display role of an element is useful in XHTML. XML documents do not have any inherited display roles, so it is very important to define them through CSS.

 
  
   
    
   Cascading Style sheets:the Definitive Guide
  
   

 
  
   
    
   Second Edition
  
   

Eric A. Meyer

 
  
   
    
   O ' Reilly and Associates
  
   

 
  
   
    
   2004
  
   

 
  
   
    
   Blahblahblah
  
   

 
  
   
    
   CSS2 Pocket Reference
  
   

Eric A. Meyer

 
  
   
    
   O ' Reilly and Associates
  
   

 
  
   
    
   2004
  
   

 
  
   
    
   Blahblahblah
  
   

The default display:

with CSS to define the display hierarchy:

Book, Maintitle, subtitle, author, ISBN {Display:block;}

Publisher, pubdate {display:inline;}

Show Now:

ability to influence display roles Display Roles is characterized by CSS important reasons for being highly useful in a variety of situations.

