Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to learn the basis of XHTML and CSS in the layout of css website". In daily operation, I believe many people have doubts about how to learn the basic problems of XHTML and CSS in the layout of css website. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how to learn the basis of XHTML and CSS in the layout of css website". Next, please follow the editor to study!

2.1 XHTML Foundation

XHTML is the core content of the web code. The standard XHTML code is as follows:

The code is as follows:

Create a new document

For this code, you can understand it in several parts:

1. This code begins with doctype and also becomes the document type making code, which is the format tag of XHTML to tell the browser what type of code it is.

two。 The tag, which represents a web page, is the first tag of the web page, indicating that the content between these tags belongs to the html type, and the browser parses the content according to the html type.

3. A tag refers to the header of a web page, in which the content is mainly placed in the name of the browser's title bar, or other information that needs to be given to the browser. The meta tag tells the browser that the type of web page is text/html and uses utf-8 encoding.

4. The tag refers to the main body of the web page, and the content in the body will be displayed in the window by the browser.

The CSS code should be placed in the head tag.

2.2 Select the appropriate DTD

A standard XHTML document must start with a doctype tag. For XHTML, types can use three different XHTML document types. The mode of use is as follows:

Transitional type:

Strict type:

Frameset type:

In essence, XHTML DTD requires the use of XHTML tags to define the structure of all the content in the document, rather than to express its style, so the ultimate way to write XHTML should be to use Strict types. However, the direct use of the Strict type can sometimes make the coding too narrow, and the Transitional type is used in all cases.

2.3 Select the appropriate label

1. Overall Arrangement

Div tags are the first choice for layout tags, and every area of the page, such as header, footer, left column, right column, etc., can be identified by div. Remember one sentence: use div layout, use css control!

two。 Text

XHTML provides many rich tags for text typesetting, such as h2-h7 tags.

3. Pictures and other objects

There are img tags in HTML, as well as object tags that are often used when inserting Flash, which can be used to insert pictures and objects.

4. List element

In addition to being used in column phenotypic content, list elements can also be used as navigation designs. XHTML provides several list tags, including ul, ol, li, dl, dt, dd, and so on.

In addition, there are form, input, select for the form, and tags for the table, but only some of the tags are listed here. In tabular layouts, they are not often used, but in CSS layouts, they will be the main force of page tags.

2.4 leave an interface for CSS

CSS is controlled by using the id and class properties in XHTML. Id can be understood as the name of an object, while class can be understood as the type or attribution of an object. For example:

Define a p tag with id as content:

Use in CSS: # content {...}

This form allows you to style p objects, even if the page has multiple p tags, as long as they have different id, you can write different style code for them. In XHTML, the same id name can only be used once per page, and duplicate id names are not allowed, which is the uniqueness of naming.

Similarly, the class property can be used in the same way, such as:

The main purpose of class is to correspond to the CSS style, and class names allow reuse in the page. That is, the pain-one style can be used in multiple XHTML objects.

2.5 good XHTML writing habits

The clearest difference between XHTML and HTML is that XHTML is more stringent in syntax than HTML. These rules are mainly manifested in the following aspects:

Attribute names must be lowercase

Attribute values must be in double quotation marks

Attribute abbreviations are not allowed

Use id instead of name

You must use the end tag

2.6 CSS grammatical structure

To apply CSS to XHTML, the first thing to do is to choose the appropriate selector, which is a way for CSS to control objects in XHTML documents. Simply put, it is used to tell the browser to which object this style will be applied.

2.6.1 CSS attributes and selectors

The syntax structure of CSS consists of only three parts: selector (Selector), Property (attribute), and Value (value).

How to use: Selector {Property: Value;}

A Selector, also known as a selector, refers to the objects for which this set of style codes are targeted, which can be a XHTML tag or a tag that defines a specific id or class.

Property is the core of CSS style control, and CSS provides rich style attributes for each XHTML tag.

A value (Value) refers to the value of an attribute in two forms, one is a range of values, and the other is a numeric value.

In practical applications, the following types of applications are often used:

Body {background-color: blue;}

It indicates that the selector is body, that is, the tag in the page is selected, and the attribute is background-color, which is used to control the background color of the object, and its value is blue.

In addition to the definition of a single attribute, you can also define one or more attributes for a single tag, each separated by a semicolon. For example:

The code is as follows:

P {

Text-align: center

Color: black

Font-family: arial

}

Similarly, an id or class can write styles in the same form.

2.6.2 Type selector

Body {} above is a type selector. A type selector is a selector that takes an existing tag signature on a web page as a name. Such as: body {}, div {}, span {} and so on.

2.6.3 Group selector

In addition to style assignments to individual XHTML objects, the same style assignments can be made to a group of objects. For example:

The code is as follows:

H2, h3, h4, p, span {

Font-size: 12px

Font-family: arial

}

Use commas to separate selectors so that all H2, h3, h4, p, and span on the page will have the same style definition. The advantage of this is that you only need to write the stylesheet once where the same style is needed on the page, thus reducing the amount of code and improving the structure of the CSS code.

2.6.4 include selector

Inclusion selectors come in handy when you plan to style only the sub-objects of an object. Include selector means that the previous object in the selector combination contains the latter object, and spaces are used as delimiters between objects. For example:

The code is as follows:

H2 span {

Font-weight: bold

}

The span below H2 has been styled, and the span tag under H2 tag will be styled with font-weight: bold. It is worth noting that this style is only valid for tags with this structure, but does not apply to separate H2 or span and other span that are not subordinate to H2 tags.

The inclusion selector can include both or multiple levels of inclusion, but this is generally not recommended for the sake of clear code and high readability.

2.6.5 id and class selector

Both id and class are selectors provided by CSS to customize the tag name. Users can use the selector id and class to customize the name of the XHTML tag in the page.

2.6.6 tag-specified selector

If you want to use both id or class and tag selectors, you can use the following format:

H2#content {}: indicates that all H2 tags whose id is content are assigned.

H2.p1 {}: means defined for all H2 tags whose class is p1.

The tag-specified selector is between the tag selector and the id/class selector in terms of the accuracy of the tag selection.

2.6.7 combination selector

For all of the above CSS selectors, no matter what kind of selector, can be combined. For example:

H2 .p1 {}: indicates that all tags under the H2 tag whose class is p1.

# content H2 {}: indicates all H2 tags under the tag where id is content.

H2 .p1, # content H2 {}: group selection of the above two.

H2#content h3 {}: indicates that id is the h3 tag under the H2 tag of content.

2.6.8 pseudo-classes and pseudo-objects

Pseudo-class and pseudo-object is a kind of special class and object, which is automatically supported by CSS and belongs to an expanded class and object of CSS. The names of pseudo-classes and pseudo-objects cannot be defined by the user, and can only be applied according to the standard format.

Pseudo classes and pseudo objects are made up of the following two forms:

Selector refers to pseudo class

Selector refers to pseudo object

CSS comes with several standard pseudo-classes that can be used for style definitions.

Except for several pseudo-classes controlled by the link style: link,: hover,: active,: visited, other pseudo-classes and pseudo-objects are not common in practical use.

2.6.9 wildcard selector

Wildcard refers to the use of characters instead of uncertain content. The so-called wildcard selector means that objects can be selected in a vaguely defined way. The CSS wildcard selector can use * as the keyword, as follows:

The code is as follows:

* {

Color: blue

}

The * sign represents all objects, including all id and class XHTML tags. When you use the selector above for style definition, all objects on the page apply color: blue; to set the font color.

Note: priority of CSS selector: remember one sentence, the finer the control, the higher the priority!

2.7 CSS data unit

CSS provides many types of mathematical units to help designers define numerical values.

2.8App CSS to web pages

2.8.1 interline style sheet

An interline stylesheet refers to writing the CSS style code in a XHTML tag, similar to the following format:

The code is as follows:

...

I am strongly opposed to this. Rare stylesheets are only XHTML tags' support for style attributes and do not conform to the design principle of separation of presentation from content. Therefore, this way of writing CSS should be completely eliminated. This method is only good for temporary use when you need to debug CSS styles.

2.8.2 Internal style sheet

The similarity between internal stylesheets and interline stylesheets is that CSS style codes are written in the page. The difference is that the former can uniformly place the stylesheet in a fixed location. Write the CSS code in the tag.

Internal stylesheet is the primary application form of CSS style coding, but it is not the recommended way of writing, it can only be valid for the current page, can not be executed across pages, so it can not achieve the purpose of CSS code reuse.

2.8.3 external style sheet

External stylesheet is the best form in CSS application. It puts the CSS style code in an external file, and then it is called by web page. Multiple web pages can call the same stylesheet file, which can achieve the maximum reuse of code and the optimal configuration of website files, which is the most recommended coding method.

The code is as follows:

Invoke the external stylesheet file by using tags under in the XHTML code. Define link as stylesheet, and use href= "" to indicate the path to the stylesheet file.

2.9 style priority issues

Due to the existence of 3 different stylesheet import methods, as well as a wide variety of style selectors. Therefore, in CSS design, the problem of style priority can not be ignored.

2.9.1 Writing priority

In terms of where the styles are written, their priority is:

Inline style sheet

Internal style sheet

External style sheet

That is, in the case of the same CSS definition, the style in the XHTML tag defined using style must take precedence over the style definition written in between. Second, or finally, the invocation and application of external stylesheets.

2.9.2 selector priority

For id and class, the definition of id takes precedence over the definition of class.

2.9.3 style inheritance

Child tags in XHTML inherit some of the style characteristics of the parent tag. Of course, some styles will not be inherited, such as margin, padding and so on.

2.9.4! important syntax

In two lines of the same type of CSS style definition, the latter often takes precedence:

The code is as follows:

Div {

Background-color: red

Background-color: green

}

But you can use! important syntax to increase the importance of a stylesheet to give priority to! important tagged statements:

The code is as follows:

Div {

Background-color: red;! important

Background-color: green

}

In this way, the background color of div will be designed to be red.

The issue of style priority can be called cascading and particularity in the technical terms of CSS, which is one of the reasons why CSS is called cascading stylesheets.

2.10 Code comments

Annotations are an important part of good CSS coding habits. The comment on the style code is: / *. * /

At this point, the study on "how to learn the basics of XHTML and CSS in the layout of css websites" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.