Home > Developer > JavaScript
Chapter 2 XHTML and CSS Basics
2.1 XHTML Basics
XHTML is the core content of web code. The standard XHTML code is as follows:
This code can be divided into several parts:
1. <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http: // www. w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> This code starts with doctype and becomes the document type code, which is the XHTML format mark used to tell the browser, the type of code.
2.
3.
4. The <body> </body> Label refers to the webpage subject. The content in the body must be displayed in the window by the browser.
CSS code should be placed in the head label.
A standard XHTML document must start with the doctype tag. For XHTML, three different types of XHTML documents can be used. The usage is as follows:
In essence, the xhtml dtd requires the use of XHTML labels to define the structure of all content in the document, rather than to express its style. Therefore, the final method of writing XHTML should be to use the Strict type. However, using the Strict type directly may cause the encoding method to be too narrow, and the Transitional type is generally used.
1. Layout
Div labels are the first choice for layout labels. Each area of the page, such as the page header, footer, left column, and right column, can be identified by div. Remember one sentence:
2. Text
XHTML provides many rich labels for text formatting, such as h1-h6 labels.
3. images and other objects
Img labels exist in HTML and the object tags frequently used in Flash insertion. They can be used for inserting images and objects.
4. List Elements
In addition to the List content, the list element can also be used as a navigation design. XHTML provides several list tags including ul, ol, li, dl, dt, and dd.
In addition, the form, input, select, and table labels are used for the form. Only some labels are listed here. Table layout is not often used, but in CSS layout, they will be the main force of page labels.
2.4 leave an interface for CSS
CSS is controlled by using the id and class attributes in XHTML. Id can be understood as the object name, while class can be understood as the object type or attribution. For example:
Define a p tag whose id is content: <p id = "content"> </p>
Use # content {...} In CSS {...}
In this way, you can write styles for p objects. Even if there are multiple p tags on the page, you can write different style codes for them as long as their IDs are different. In XHTML, the same id name can only be used once on each page, and duplicate id names are not allowed. This is the uniqueness of the name.
Similarly, the class attribute can be in the same way, for example:
<Span class = "blue"> </span>
The main purpose of the class is to correspond to the CSS style. The class name can be reused on the page. That is to say, the painful style can be used in multiple XHTML objects.
The most explicit difference between XHTML and HTML is that XHTML is stricter than HTML syntax. These rules are mainly manifested in the following aspects:
Apply CSS to XHTML. The first thing to do is to select a proper selection character, which is a way for CSS to control objects in the XHTML document. In short, it is used to tell the browser to which object the style will be applied.
2.6.1 CSS attributes and delimiters
The syntax structure of CSS consists of three parts: Selector, Property, and Value ).
Usage: Selector {Property: Value ;}
In practical applications, the following types of applications are often used:
Body {background-color: blue ;}
It indicates that the selection operator is the body, that is, the <body> label in the page is selected, and the attribute is background-color. This attribute 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 attribute is separated by a semicolon. For example:
P {
Text-align: center;
Color: black;
Font-family: arial;
}
Similarly, an id or class can also write styles in the same form.
2.6.2 type Selector
The above body {} is a type selector. A type selector uses an existing tag name in a webpage as a name. For example, body {}, div {}, and span.
2.6.3 group Selector
In addition to specifying styles for a single XHTML object, you can also specify the same styles for a group of objects. For example:
H1, h2, h3, p, span {
Font-size: 12px;
Font-family: arial;
}
Use commas to separate the delimiters so that all h1, h2, h3, p, and span on the page have the same style definition. The advantage of this is that you only need to write a style table once where the same style is needed on the page to reduce the amount of code and improve the structure of CSS code.
2.6.4 include Selector
When you only want to specify a style for a sub-object of an object, it is useful to include the selector. The inclusion selector indicates that the first object in the selector combination contains the last object, and spaces are used as separators between objects. For example:
H1 span {
Font-weight: bold;
}
Style assignment is performed on the span under h1, and the span label under h1 will be applied to the font-weight: bold style setting. It is worth noting that this style is only valid for labels with this structure, but not for separately existing h1 or span and other spans not under the h1 label.
The inclusion selector can contain both or multiple levels, but is generally not recommended for the sake of clarity and readability.
2.6.5 id and class selector
Both id and class are the delimiters of custom tag names provided by CSS. You can use the selector id and class to customize the names of XHTML tags on the page.
2.6.6 tag Selector
If you want to use both id or class and tag selector, you can use the following format:
H1 # content {}: This indicates that all h1 tags whose IDs are content are assigned.
H1.p1 {}: defines all h1 labels whose class is p1.
The tag-specific selector has a precision between the tag selector and the id/class selector.
2.6.7 combination Selector
All the preceding CSS delimiters can be combined for any type of delimiters. For example:
H1. p1 {}: All class p1 labels under the h1 label.
# Content h1 {}: all h1 labels under the tag whose id is content.
H1. p1, # content h1 {}: select groups for the preceding two.
H1 # content h2 {}: indicates the h2 tag under the h1 tag whose id is content.
2.6.8 pseudo classes and pseudo objects
Pseudo classes and pseudo objects are special classes and objects that are automatically supported by CSS and belong to a type of expanded class and object of CSS. The names of pseudo classes and pseudo objects cannot be customized by users. They can only be used in standard format.
Pseudo classes and pseudo objects are composed of the following two forms:
CSS has several built-in standard pseudo classes for style definition.
| Pseudo class | Purpose |
| : Link | Unaccessed style of a link tag |
| : Hover | The style when the object moves over the mouse |
| : Active | The style between the clicked and released objects. |
| : Visited | Style of a link object after access |
| : Focus | Style when the object becomes the input focus |
| : First-child | Style of the first child object of the object |
| : First | The style used for the first page of the page |
Similarly, CSS has several built-in standard pseudo objects for style definition.
| Pseudo object | Purpose |
| : After | Set the content after an object |
| : First-letter | Set the style of the first character in the object |
| : First-line | Set the style of the first line in the object |
| : Before | Set the content before an object |
In addition to link,: hover,: active, and: visited pseudo classes controlled by link styles, other pseudo classes and pseudo objects are not common in actual use.
2.6.9 wildcard character selection
Wildcard is used to replace uncertain content with characters. The wildcard character can be used to select objects. You can use * as the keyword for CSS wildcard selection. The usage is as follows:
*{
Color: blue;
}
* Indicates all objects, including all IDs and class XHTML labels. When you use the above selector to define the style, color: blue is applied to all objects on the page to set the font color.
CSS selector priority: Remember one sentence,
2.7 CSS Data Unit
CSS provides many types of mathematical units to help designers define values.
| Unit | Description | Example |
| Px | Pixel (Pixel) | Width: 12px; |
| Em | Font scale relative to the text in the current object | Font-size: 1.2em |
| Ex | Relative size relative to the character height | Font-size: 1.2ex; equivalent to 1.2 times the height of the Current Character |
| Pt | Point/pound (point) | Font-size: 9pt; |
| Pc | Pica) | Font-size: 0.5 pc (s) |
| In | Inch (Inch) | Height: 12in; |
| Mm | Millimeter (Millimeter) | Font-size: 4mm; |
| Cm | Centimeter (Centimeter) | Font-size: 0.2; |
| Rgb | Color Unit | Color: rgb (255,255,255 ); |
| Color: rgb (12%, 50% ); | ||
| # RRGGBB | Hexadecimal color unit | Color: # 000FFF; |
| Color Name | Color name supported by the browser | Color: blue; |
2.8 apply CSS to the webpage
2.8.1 line style sheet
A cross-line style sheet is used to write CSS style codes in XHTML labels, similar to the following format:
<H12.9 style priority
There are three different style table import methods, as well as a wide variety of style choices. Therefore, in CSS design, the style priority issue cannot be ignored.
2.9.1 write priority
From the point of view of style Writing, their priority is:
That is to say, in the case of the same CSS definition, the style defined in the XHTML label defined by style must take precedence over the style definition written between <style>. The second or last step is to call and apply external style sheets.
2.9.2 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 the style features of some parent tags. Of course, some styles are not inherited, such as margin and padding.
2.9.4! Important syntax
In the CSS style definitions of the same type of two rows, the following one is usually executed first:
Div {
Background-color: red;
Background-color: green;
}
But it can be passed! Important syntax to improve the importance of a style sheet and give it priority! Important annotation statement:
Div {
Background-color: red ;! Important
Background-color: green;
}
In this way, the background color of the div is designed to be red.
In terms of CSS terminology, style priority can be referred to as cascading and particularity, which is also one of the reasons why CSS is fully called Cascading Style Sheets.
Comments are an important part of good CSS coding habits. The style code is annotated :/*...*/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
