CSS tutorial CSS and document

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 already des new content on positioning, lists and generated content, table layout, user interface, paged media, and more. it has es in detail each individual CSS property and how it interacts with other properties, and shows how to avoid common mistakes in interpretation. W3C Of CSS Home page: Http://www.w3.org/Style/CSS/ 1. CSS and document 1.1 Elements Elements in HTML are easily identified, such as P, table, span, A, and Div. Elements in XML are defined by DTD or XML schema. Each element represents its representation. Each element in CSS generates a box, which contains the content of the element. 1.1.1Element Types: replaced and nonreplaced elements, block-level and inline-level elements Replaced Elements : The content of an element can be replaced by content not directly represented by a document. The IMG in XHTML is typical. It can be replaced by image files outside the document. Input The elements can also be replaced by radio buttons, checkbox, and text input boxes based on their types. Replaced Elements A box is also generated during display. Nonreplaced Elements : The majority of HTML and XHTML elements are nonreplaced. That is to say, the content of these elements is expressed by the user agent (usually the browser) in the box generated by the element. (Box indicates a region corresponding to an element on the page ?). For example <Span> Hi There </span> is nonreplaced. Text hi here will be performed by the user agent . Block-level element block element: generates an element box that fills in the content area of its parent element and has no other elements on either side. That is to say, by default, each block-level is a single row. For example, P and Div. List items is a special block element. To unify the behavior with other block elements, generate a symbol for the unordered lists, such as bullet; generate a number for the ordered lists. Add a symbol or number to the element box. In addition to the symbolic representation, other features are the same as those of other block elements. Inline-level element inline element: generates an element box, which contains a line of text and is not a separate line. A typical example is the element in XHTML, such as strong and em. Because inline elements do not interrupt the display before and after them, if they appear in other elements, they do not interrupt the display of other elements. Note: block elements in XHTML and HTML cannot be inherited from inline elements, but there is no similar rule in CSS. There is no restriction on element nesting.

Block Element) It is generally a container element of other elements. Block elements generally start from a new line and can accommodate inline elements and other block elements, The common block element is the section label 'P . "Form" This block element is special and can only be used to accommodate other block elements. If no CSSThe block elements are arranged in the order of each row. With CSSLater, we can change this type of HTMLThe default Layout modeThe desired location. Instead of just starting another line. It should be noted thatLabels are also a type of block elements.And CSS based layoutFrom the perspective of general users (excluding visually impaired persons and blind persons), there is no difference between the two la S except for the page loading speed. However, if a common user accidentally clicksView pageSource codeButton, the difference between the two is very large. CSS designed based on a good refactoring ConceptLayout page source code, at least can make no webOrdinary users with development experience can speed up contentFast Reading. From this perspective, CSS layout codeWe should have a better aesthetic experience. You can put the block container element DivImagine a box,Or, if you have played with the clipboard, it is easier to understand. We needArticleCutting from various newspapers and magazines. Each piece of cut is a block.. Then we pasted the paper block to a blank new paper with glue based on our typographical intent. This forms your own unique digest Express. As an extension of technology, webpage layout design follows the same pattern .. Inline Element(Inline element)Generally, it is based on the semantic level (semantic). Inline elements can only contain text or other inline elements. Common inline elements are "". Block Element)And inline Element)All are htmlConcepts in the specification. The basic difference between block elements and inline elements is that block elements generally start from a new line. When CSS is addedAfter control, this type of owner of block elements and inline ElementsSexual differences do not become differences. For example, we can put the inline element citeAdd the display: BlockThis attribute also gives him the attributes starting from the new line each time. Variable ElementThe basic concept is that it needs to determine whether the element is a block element or an inline element based on the context relationship. The variable element still belongs to the above two element categories. Once the context relation determines its category, it must follow the block element or Inline element rule restrictions. For rough element classification, see the full text. PS:About inline ElementHas a variety of inline elements, embedded elements, line elements, straight forward elements. Basically, there is no unified translation. What do you call love. When we mention inline elements, we will thinkDisplay (s)The property of is display: inline;This attribute can fix the famous IEDouble Floating boundary problem. Block Element) * Address- Address * BLOCKQUOTE- Block reference * Center- Center alignment Block * Dir- Directory List * Div- The common block level is easy, and CSS layout Main label * Dl- Definition list * Fieldset-Form Control group * Form- Interactive form * H1- Title * H2- Subtitle * H3-3 Level title * H4-4 Level title * H5-5 Level title * H6-6 Level title * HR- Horizontal Separator * Isindex-input prompt * Menu- Menu list * Noframes-Frames Optional. The browser displays the content of this block. * NoScript- ) Optional script content (for unsupported scripts In the browser) * Ol- Sorting form * P- Section * Pre- Format Text * Table- Table * Ul- Non-sorted list Inline Element) *- Anchor * Abbr- Abbreviations * Acronym- First word * B- Bold ( Not recommended) * BDO-bidi override * Big- Large font * Br- Line feed * CITE- Reference * Code- ComputerCode( When referencing source code) * Dfn- Define Fields * Em- Emphasize * Font- Font setting ( Not recommended) * I- Italics * IMG- Image * Input- Input box * KBD- Define keyboard text * Label- Table label * Q- Short reference * S- Dashes ( Not recommended) * Samp- Define sample computer code * Select- Project selection * Small- Small font text * Span- Commonly used inline containers, defining text blocks * Strike- Dashes * Strong- Highlighted in bold * Sub- Subscript * Sup- Superscript * Textarea- Multi-line text input box * Tt- Telex text

* U-Underline * Var-Define Variables Variable Element The variable element determines whether the element is a block element or an inline element based on the context. * Applet-Java Applet * Button-Button * Del-Delete text * IFRAME-inline Frame * Ins-Inserted text * Map-Image Block (MAP) * Object-ObjectObject * Script-Client script

Example:

 
<Body>
 

 
<P> This is a paragraph with <em> an inline element </em> within it. </P>
 

 
</Body>
 

In the preceding example, there are two block elements, P and body, and an inline element em. In XHTML, EM can inherit from P, but not vice versa. Inline elements in XHTML can be inherited from block elements, but 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 block box in 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.

 
<Book>
 

 
<Maintitle> Cascading Style Sheets: the definitive guide </maintitle>
 

 
<Subtitle> Second Edition </subtitle>
 

 
<Author> Eric A. Meyer </author>
 

 
<Publisher> O 'Reilly and associates </publisher>
 

 
<Pubdate> 2004 </pubdate>
 

 
<ISBN> blahblahblah </ISBN>
 

</Book>
 

 
<Book>
 

 
<Maintitle> css2 pocket reference </maintitle>
 

 
<Author> Eric A. Meyer </author>
 

 
<Publisher> O 'Reilly and associates </publisher>
 

 
<Pubdate> 2004 </pubdate>
 

 
<ISBN> blahblahblah </ISBN>
 

 
</Book>
 

 
Default display:
 

UseCSSTo define the display level:
 

 
Book, maintitle, subtitle, author, ISBN {display: block ;}
 

 
Publisher, pubdate {display: inline ;}
 

 
Display now:
 

Can affect the display role Display roles Is CSS Important reasons for high usefulness in multiple situations.