Web standardization, XHTML, and CSS cascading style sheet relationships

Css|web|web Standard |xhtml| style sheet

Web standards divide Web pages into three separate components:

* Structure: Html,xhtml,xml

* Performance: Css1,css2

* Behavior: ECMAScript, DOM

Web standards so far Han has to the appearance of the aesthetic to do any guidelines and precepts, the site's appearance and feelings do not have any restrictions, they simply enable the browser to correctly represent the site created by the designer, to help customers according to the company's market needs and user analysis to set goals.

Web standards can be done by:

* More precise control, positioning and typesetting on the graphics viewer

* Complex interaction behavior

* Accessibility

* Support multiple browsers

* New and old browsers can work

* Guaranteed to work in the future of the tour device

* Time to redesign website shortened

* Non-traditional equipment support

* Easy for any Web page to provide a suitable version of the print

* Easy redesign of documents in the release process

* HTML conversion to the XML Base markup language

Reasons to use Web standards:

* Enhanced Interactive capabilities

* Enhanced Accessibility

* Reduce maintenance effort

* Reduce Bandwidth

* Reduce costs

XHTML is an xml-based markup language that seems to be somewhat imagined with HTML, with only a few small but important differences. As you can see, XHTML is an XML that acts like an HTML role.

XHTML is essentially a bridging (transition) technology that combines the power of XML (in some cases) with the simple features of HTML (most).

----Jeffery Zeldman

10 reasons to switch to XHTML:

* XHTML is the current standard for replacing HTML4 markup languages.

* XHTML is the ability to interact well with other xml-based markup languages, applications, and protocols.

* XHTML is better consistent than HTML.

* XHTML1.0 is a bridge to future versions of XHTML

* Old browsers adapt to XHTML

* New browsers are preferential to XHTML rather than HTML

* XHTML can be good for other user agents, such as wireless devices.

* XHTML is part of the Web Standard family

* XHTML can help you remove the abuse of the presentation layer code

* XHTML can help you develop the habit of marking checksums to test page work

XHTML rules:

* Start with the right DOCTYPE and name space

* Use meta content elements to declare your content encoding language

* Write all elements and attribute names in lowercase letters

* Add quotes to all property values, separated by a space between the attributes.

* Assign a value to all attributes

* Close all labels

* Close blank labels with spaces and slashes

* Do not use "-" in the annotation content

* Make sure to use < and & to express < and &.

XHTML1 provides three types of DTDs:

* Transitional, transition, the most relaxed DTD, the only tolerance of the presentation layer of the tag, garbage elements and attributes of the DTD

* Strict, Strict,

* Frameset, Frame,

XHTML declares the method of content encoding:

* XML Prolog, that is , but browsers do not handle this

* Inserts the Content-type element in the specified encoding language,

* The encoding language is set through the HTTP headers returned on the Web server, and this method is recommended by the consortium.

General mechanism for increasing structure

* Div and SPAN elements, joint IDs, and class attributes provide a common mechanism for adding structures to documents.

* These elements define the built-in content (SPAN) and The Block level (DIV) without introducing anything else in the content.

The * ID attribute is similar to the label for a particular area in the code, suggesting that the area needs special processing. When an id attribute value is used for a particular set of CSS, it is called a CSS selector, and ID is the easiest and most common way to create a selector.

* The name of the ID must begin with a letter and an underscore and cannot begin with a number.

Function of ID

* As a style sheet selector, minimize the XHTML paging file;

* As the anchor of the hyperlink, replace the outdated Name property;

* Methods of referencing elements in DOM scripts;

* As a declared object element name;

* A tool used as a common purpose flow process.

# A style sheet, a collection, a collection of one or more rule definitions that determine how the selected element is displayed.

# A CSS definition consists of two parts: selectors and declarations. Where the declaration is also a collection, the set element is placed in a pair of {}, each element with ";" Ends, each element consists of two parts: the property and the value, and the property and the value separated by ":".

# A selector that starts with a #, an ID selector, a selector with a. Beginning.

# Multiple selectors can share the same declaration, where different selections are separated by commas.

# according to CSS, the child elements of the page inherit attributes from the parent element, but some old browsers do not support it (such as Netscape 4). If you do not want the child element to inherit the parent element attribute, the child element can freely define the related attribute.

# CSS is case-insensitive, but when associated with an HTML file, the category and ID names are case-sensitive.

# to facilitate editing of CSS, you can add some spaces or line breaks.

# style sheets can be used in three different ways to display the page

1. Outreach/Import

　　 <>

Or

Or

Note: Only more than 5.0 of the browser support @Import method

2. Embed (embed in XHTML page head position)

The following is a reference fragment: ...

Reasons to use embedding:

* This style sheet is used only on this page

* User is still using IE3

* Designers constantly modify the style sheet, need to see the effect immediately

3. Inline (plus style attributes on elements)

To specify a font for the entire site:

* Body {font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Sans-serif;}

* The name of a font consisting of multiple letters shall be enclosed in quotation marks;

* If the preceding font does not exist, use the first font that exists later.

* "Lucida Grande"-mac OS X, verdana-windows, Lucida---unix, Arial----old Windows, Helvetica----Old Unix

* Use redundancy to resolve problems that browsers do not support inheritance, such as:

Body {font-family:verdana, Sans-serif;} P, TD, UL, OL, UL, Li, DL, DT,DD

{Font-family:verdana, Sans-serif;}

Replace the black dots before the unordered table with a picture:

* ul.inventory{list-style:disc URL (/path/to/pic.gif) inside;}

The definition of color:

* P {color:red;}

* P {color: #ff0000;}

* P {color: #f00;}

* P {Color:rgb (255,0,0);}

* P {Color:rgb (100%,0%,0%);}

# According to the elements of the content to determine the style of elements, to avoid excessive class, keep the mark neat and tidy.

# such as: The strong in the list item appears italic rather than bold. Li Strong {font-style:italic; Font-weight:normal; }

# The two parts of the selector are separated by spaces, where the first part can be a general selection, an ID selector, or a class selector.

# in modern layouts, ID selectors often appear in the content selector

such as: #sidebar p {font-style:italic; text-align:right; margin-top:0.5em;}

# cannot appear in inline elements of or equal to tokens.

# ID Selector tag elements can appear only once per page, but an ID selector can be used multiple times to define content/derivation selector definitions.