Chapter 2 XHTML and CSS Basics
2.1 XHTML Basics
XHTML is the core content of web page code , the standard XHTML code is as follows:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 .org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>新建文档</title> 6 </head> 7 8 <body> 9 </body>10 </html>
This code can be divided into several parts to understand:
1. This code starts with doctype and also becomes the document type specification Code, which is the format tag of XHTML, is used to tell the browser what type of code it is.
2. The tag represents a web page and is the first tag of the web page. It indicates that the content between the predicate tags belongs to the html type, and the browser will Content is parsed by html type.
3. The
tag refers to the head of the web page, the content of which is mainly placed in the title bar of the browser, 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 is encoded in utf-8.4. The
tag refers to the main body of the web page. 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 Choose the appropriate DTD
A standard XHTML document must start with a doctype tag. For XHTML, the type can use 3 different XHTML document types. The usage is as follows:
In essence, XHTML DTD requires the use of individual tags of XHTML to define all content in the document structure rather than expressing its style, so the final way of writing XHTML should be to use the Strict type. However, using the Strict type directly sometimes makes the encoding method too narrow, so the Transitional type is generally used.
2.3 Choose the appropriate tag
1. Layout
The div tag is the first choice for layout tags. Each tag on the page An area, such as header, footer, left column, right column, etc., can be identified using div. Remember one sentence: use div layout and css control!
2. Text
XHTML provides many rich tags for text layout, such as h1-h6 tags, etc.
3. Pictures and other objects
There are img tags in HTML, as well as object tags that are often used when inserting Flash. They can be used for pictures and objects. insert.
4. List element
In addition to being used in list-type content, list elements can also be used as navigation designs. XHTML provides several list tags including ul, ol, li, dl, dt, dd, etc.
There are also form, input, select and tags used in forms, etc. Here are only some tags. In table layout, they are not often used, but in CSS layout, 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 attributes in XHTML. id can be understood as the name of the object, and class can be understood as the type or ownership of the object. For example:
Define a p tag with an id of content:
Use in CSS: #content {...}
This form allows you to write styles for p objects. Even if the page has multiple p tags, as long as their ids are different, you can write different style codes for them respectively. In XHTML, the same id name can only be used once on each page, and repeated id names are not allowed. This is the uniqueness of naming.
Similarly, the class attribute can also be used in the same way, such as:
The main purpose of class It corresponds to the CSS style, and the class name is allowed to be reused in the page. In other words, painful styles can be used in multiple XHTML objects.
2.5 Good XHTML writing habits
The most obvious difference between XHTML and HTML is that XHTML has stricter syntax requirements than HTML. These rules are mainly reflected in the following aspects:
2.6 CSS syntax structure
To apply CSS to XHTML, the first thing to do is to choose the appropriate selector. The selector is the CSS object in the XHTML document. a way. Simply put, it tells the browser which object this style will be applied to.
2.6.1 CSS attributes and selectors
The grammatical structure of CSS only consists of 3 parts: selector (Selector), attribute (Property) and value ( Value).
How to use: Selector {Property: Value;}
In practical applications, the following types of application forms are often used:
body {background-color: blue;}
It means that the selector is body, that is, selection The
tag in the page has the attribute 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, using semicolons to separate each attribute. For example:
p {
text-align: center;
color: black;
font-family: arial;
}
Similarly, an id or class can also be styled in the same form.
2.6.2 Type selector
The body {} above is a type selector. The type selector refers to the selector that uses the existing tag name in the web page as its name. Such as: body{}, div{}, span{}, etc.
2.6.3 Group Selector
In addition to assigning styles to a single XHTML object, the same style can also be assigned to a group of objects. For example:
h1, h2, h3, p, span {
font-size: 12px;
font-family: arial;
}
Use commas to separate selectors so that all h1, h2, h3, p, and span in the page will have the same style definition. The advantage of this is that you only need to write the style sheet once for places on the page that need to use the same style, thereby reducing the amount of code and improving the structure of the CSS code.
2.6.4 Inclusion selector
When you only intend to specify styles for sub-objects of an object, the inclusion selector comes in handy. Containing selectors means that the previous object in the selector combination includes the following object, and spaces are used as separators between objects. For example:
h1 span {
font-weight: bold;
}
The span under h1 is styled, and the span under the h1 tag is styled The span tag will be styled with font-weight: bold applied. It is worth noting that this style is only effective for tags with this structure. This style will not be applied to separate h1 or span and other spans that are not subordinate to h1 tags.
In addition to including both, the inclusion selector can also be included at multiple levels. However, for the sake of clear code and high readability, this is generally not recommended.
2.6.5 id and class selectors
id and class are selectors provided by CSS for user-defined tag names. Users can use the selectors id and class to customize the name of the XHTML tags in the page.
2.6.6 Tag-specific selector
If you want to use both id or class and tag selector at the same time, you can use the following format:
h1#content {}: Indicates that all h1 tags with the id of content are assigned.
h1.p1 {}: Indicates that it is defined for all h1 tags with class p1.
The label-specific selector is between the label selector and the id/class selector in terms of accuracy of label selection.
2.6.7 Combination Selectors
For all the above CSS selectors, no matter what kind of selectors, they can be used in combination. For example:
h1 .p1 {}: Indicates all tags with class p1 under the h1 tag.
#content h1 {}: Represents all h1 tags under the tag with the id of content.
h1 .p1, #content h1 {}: Group selection for the above two.
h1#content h2 {}: Represents the h2 tag under the h1 tag with the id of 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 are part of CSS. Extension classes and objects. The names of pseudo classes and pseudo objects cannot be customized by users, and can only be applied in standard formats when used.
Pseudo classes and pseudo objects are composed of the following two forms:
CSS has several built-in standard pseudo-classes that can be used for style definition.
| 伪类 | 用途 |
| :link | a链接标签的未被访问的样式 |
| :hover | 对象在鼠标移上时的样式 |
| :active | 对象被用户点击及被点击释放之间的样式 |
| :visited | a 链接对象被访问后的样式 |
| :focus | 对象成为输入焦点时的样式 |
| :first-child | 对象的第一个子对象的样式 |
| :first | 对于页面的第一页使用的样式 |
Similarly, CSS has several built-in standard pseudo-objects for user style definition.
| 伪对象 | 用途 |
| :after | 设置某个对象之后的内容 |
| :first-letter | 对象内的第一个字符的样式设置 |
| :first-line | 对象内第一行的样式设置 |
| :before | 设置某个对象之前的内容 |
Except for the :link, :hover, :active, :visited pseudo-classes controlled by link styles, other pseudo-classes and pseudo-objects are not common in actual use.
2.6.9 Wildcard selector
Wildcarding refers to using characters to replace uncertain content. The so-called wildcard selector means that objects can be selected using a fuzzy formula. The CSS wildcard selector can use * as a keyword. The usage method is as follows:
* {
color: blue; All objects, including all id and class XHTML tags. When using the above selector for style definition, all objects in the page will apply color: blue; to set the font color.
Note:Priority of CSS selectors: Remember one sentence, the more precise the control, the higher the priority!
2.7 CSS data units
CSS provides many types of mathematical units to help designers define numerical values.
2.8 Apply CSS to web pages
2.8.1 Inline style sheet
Inline style sheet refers to encoding CSS styles Written in XHTML tags, similar to the following format:
We strongly oppose this. Rare style sheets only support the style attribute of XHTML tags and do not comply with the design principle of separation of presentation and content. Therefore this way of writing CSS should be completely avoided. This method is only suitable for temporary use when you need to debug CSS styles.
2.8.2 Internal Style Sheets
The similarity between internal style sheets and inline style sheets is that they both write CSS style code in the page. The difference is that the former can uniformly place the style sheet in a fixed location. Write the CSS code inside the
