CSS Tutorial CSS and DOCUMENT_ experience Exchange

Cascading Style sheets:the Definitive Guide, 2nd Edition is a thorough review to all aspects of CSS2.1 and a comprehe Nsive 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 the individual CSS property and the IT interacts with the other properties, and shows the How to avoid comm On mistakes in interpretation.

the Css home page for the Web:

http://www.w3.org/Style/CSS/

1 CSS and document

1. 1 elements

Elements in HTML are easy to identify, such as P,table,span,a,div.

Elements in XML are defined by DTDs or XML schemas. Each element represents its representation in part.

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 contents 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.

The input element can also be replaced by radio button,checkbox,text input box depending on its type.

Replaced elements also produces a box when it is displayed.

nonreplaced elements: Most elements of HTML and XHTML are nonreplaced. That is, the content of these elements is expressed present by the user agent, usually the browser, in the box in which the element is generated. (Does box refer to an element that corresponds to a region on the page?) ）。

For example <span>hi there</span> is nonreplaced, the text hi here will be the user agent

To display.

Block-level element block elements: Creates an element box that fills the content area of its parent element, and there are no other elements on either side of the box. This means that each block-level is a single line by default. Like P,div.

The list items are a special block element. In order to have a uniform behavior with other block elements, a symbol, such as bullet, is generated for the disordered lists, and a number is generated for the ordered lists. Adds a symbol or number to the element box. In addition to the way symbols behave, 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 a element in XHTML, as in the case of Strong,em. Because inline elements are not interrupted by the

Display, so 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 rules in CSS. There is no restriction element nesting method.

Chunk elements (block Element)Typically a container element of another element, the block element typically starts with a new row, and it can hold inline and other block elements.Common block element is paragraph label ' 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 sorted sequentially to the next line at a time. And with the CSSLater, we can change this HTMLThe default layout mode, put the block elements into the you want toPosition to go up. Instead of being stupid every time you start another line. It should be noted that the tableTags are also a kind of block elements, table based layoutand CSS based layoutFrom the point of view of the general user (excluding the visually impaired, the blind, etc.), there is no difference between the two layouts except the page loading speed. But if the average user is inadvertentlyAfter viewing the page source code button, the difference between the two is very large. CSS design based on good refactoring conceptLayout page source code, at least can make no webDevelopment experience for ordinary users to move content fastQuick to read. From this perspective, CSS layout codeThere should be a better aesthetic experience. You can put the Block container element divThink of it as a box.，Or if you play with a scrapbook, it's much easier to understand. We first cut the articles we need from all kinds of newspapers and magazines.Get down. Each cut is a block.。 Then we put the pieces of paper back on a blank new piece of paper, in accordance with our own layout intent. That's what makes your own unique digest letters.Out. As an extension of technology, Web layout design follows the same pattern. 　　 Inline Elements(inline Element)are generally based on semantic level (semantic)The basic elements. Inline elements can only hold text or other inline elements, commonly inline element "a"。 　 Chunk elements (block Element)and inline elements (inline element)It's all HTML.The concepts in the specification. The basic difference between block elements and inline elements is that block elements generally start with a new row. And when you add a CSSAfter control, this genus of block elements and inline elementsSex differences don't make a difference. For example, we can completely cite the inline elementsPlus Display:blockSuch a property, so that he also has a new line each time to start the property. 　　 variable ElementThe basic concept is that he needs to determine whether the element is a block element or an inline element based on the context relationship. A mutable element is still a class of two elements, and once the context determines his class, he follows the rule limits of the block element or inline element. General classification of the elements see the full text. 　 Ps:About inline ElementIn Chinese, there are a variety of inline elements, embedded elements, inline elements, direct-type elements. Basically there is no unified translation, love how to call it. In addition to referring to inline elements, we would think of havingA displayThe attribute is display:inline;This property can fix the famous IEDouble the floating boundary problem. Chunk elements (block Element) * Address-Address * BLOCKQUOTE-Block reference * Center-Snap To block * DIR-Directory listings * Div-Common block level easy, also CSS layoutThe main label * DL-Definition List * Fieldset-formControl group * Form-Interactive forms * H1-Big title * 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 unsupported frameBrowser to display this block content * NoScript-Optional script content (for scripts that don't support scriptBrowser to display this content) * OL-Sort a Form * P-Paragraph * Pre-formatting text * Table-Form * ul-Non-sorted list Inline elements (inline element) AAnchor Point * ABBR-Abbreviation * Acronym-First word * B-Bold (Not recommended) * Bdo-bidi Override * Big-Large font * BR-Line Wrap * Cite- Reference * code- Computer code ( required when referencing source code) * DFN- definition field * em- accent * font- font settings ( not recommended) * I- italic * img- picture * Input- input box * k BD- define keyboard text * label- table tab * Q- Short reference * S- underscore ( not recommended) * SA MP- define sample computer code * Select- project Selection * Small- small font text * span- commonly used inline container, define text block * Strike- underline * Strong- bold accent * Sub- subscript * sup- superscript * textarea- multiline text input box * TT- Fax text

* U- underline * var- define Variable Variable element A variable element determines whether the element is a block element or an inline element, depending on the context context. * Applet-java Applet * Button- buttons * Del- Delete text * Iframe-inline Frame * INS- inserted text * Map- image block (map) * Object-object Object * Script- client scripting

An example:

<body>

<p>this is a paragraph with <em>an inline element</em> within

</body>

In the example above, there are two block elements, p and body, and 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.

In CSS there is no such rule, CSS can change the structure of the example.

p {display:inline;}

em {display:block;}

Insert block box in inline box. Effect:

Changing the display role of elements 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:

 to define the display hierarchy with CSS:

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

Publisher, pubdate {Display:inline}

Now Show:

can affect the display role Display Roles the characteristics are CSS important reasons for being highly useful in a variety of situations.