Home > Article > Web Front-end > "CSS Website Layout Record" Study Notes (2)_html/css_WEB-ITnose
"CSS Website Layout Record" Study Notes (2)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:05:311071browse
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. 4232f61a3189fcee7561adc9477ea794This 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 100db36a723c770d327fc0aef2ce13b173a6ac4ed44ffec12cee46588e518a5e 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 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 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 6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956 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:
- Transitional type: affcab47c30e4b2b3484a485e64f0d43
- Strict type: f305deb1141afd8b617ce3f3ff158ff7
- Frameset type: 43c85d3fc0b37747caa745659897ee5e
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: 1a73dfa055a76c3606858f541f15b00f94b3e26ee717c64999d7867364b1b4a3
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:
e1e4956521e464ad289ee3a8124b453754bdf357c58b8a65c66d7c19c8e4d114
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 6c04bd5ca3fcae76e30b72ad730ca86d 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:
283a79dbfe71a2da743e7a63e985de9b...473f0a7621bec819994bb5020d29372a
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 c9ccee2e6ea535a969eb3f532ad9fe89 tag.
Internal style sheet is a primary application form of CSS style coding, but it is not a recommended writing method. It is only valid for the current page and cannot be executed across pages, so it cannot achieve the purpose of CSS code reuse.
2.8.3 External style sheet
External style sheet is the best form of CSS application, which places the CSS style code in a separate external file , and then called by the web page. Multiple web pages can call the same style sheet file, which can maximize code reuse and optimize the configuration of website files. This is the most recommended coding method.
3b3664a1d87535f8d759078d51cb457b
In XHTML code, use under 93f0f5c25f18dab9d176bd4f6de5d30e 2cdf5bf648cf2f33323966d7f58a7f3f tag to call external style sheet files. Set the link to stylesheet mode and use href="" to specify the path to the stylesheet file.
2.9 Style priority issue
Since there are 3 different style sheet import methods and a wide variety of style selectors. Therefore, in CSS design, the issue of style priority cannot be ignored.
2.9.1 Writing priority
From the perspective of the location where styles are written, their priorities are:
That is to say, in the case of the same CSS definition, the style in the XHTML tag defined using style must take precedence over Style definitions written between c9ccee2e6ea535a969eb3f532ad9fe89. The second or last step is to call and apply external style sheets.
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 will inherit some of the style characteristics of the parent tag. Of course, some styles will not be inherited, such as margin, padding, etc.
2.9.4 !important syntax
In two lines of CSS style definitions of the same type, the latter one is often executed first:
div {
background-color: red; property, so that the statements marked with !important are executed first:
div {
background-color: red; !important
background-color: green;
}
In this way, the background color of the div will be designed as red.
From the professional terminology of CSS, the issue of style priority can be called cascading and particularity. This is one of the reasons why the full name of CSS is cascading style sheet.
2.10 Code CommentsIn good CSS coding habits, comments are a very important part. The comments of its style code are: /*...*/