1.2 (X) HTML and CSS

X The relationship between HTML and CSS is the relationship between "content" and "form", and (X) HTML determines the content of the Web page, and CSS determines the form of the page. I. Introduction to the standard of CSS Like HTML, CSS is also developed and published by the organization. The CSS 1.O specification was released in December 1996, and the CSS 2.0 specification was released in May 1998. There are currently two new versions in the working state. CSS version 2.1 and CSS version 3.0. Figure 1 shows the proposed version of the March 24, 2011 CSS 3.0 release to be approved, readers can download to http://www.w3.org/TR/ Figure 1 Publication of the CSS 3.0 specification work published by the organization However, there is no compelling requirement for software vendors to comply with the specifications, so the current popular browser does not fully conform to the specifications of the CSS, which also gives designers to design a Web page to bring some difficulties. But with the development of technology, all kinds of browsing will gradually do more in this area, I believe that the situation will be better. Currently, the 3 most popular browsers are IE 7.0,ie 8.0 and Firefox. The sum of their usage in China has crossed 99%. And the target of these 3 kinds of browsers. It is perfectly possible to make CSS layout pages that are very consistent in display. After understanding the relationship between XHTML and HTML, for ease of interpretation, this tutorial does not use the term XHTML in the following explanations, but uses HTML uniformly, meaning (X) HTML. Second, the introduction of CSS in HTML method HTML and CSS are two different languages that work on a Web page at the same time, so there must be some way to hook up the CSS with HTML to function properly. In Htmi, the method of introducing CSS mainly includes inline, inline, import and link 4 kinds. 1. In-line Inline is the CSS style that is set in the tag's style property, which does not inherently reflect the advantages of CSS and is therefore not recommended. 2. Embedded Embedded will focus on the various elements of the page set in This is a convenient way. But for a Web site that contains many pages, if each page is nested in its own style, it loses the great benefits of CSS, so a Web site is usually written in a separate CSS stylesheet file, using one of the following two ways to introduce an HTML document. 3. Import and Link-type The purpose of importing and linking is to introduce a standalone CSS file into an HTML file, with little difference. Here is a more in-depth introduction, because many readers have doubts about it. In fact The biggest difference is that the link uses HTML markup to introduce an external CSS file, whereas using an import is a rule that uses CSS to introduce an external CSS file. So their syntax is different. If you use a linked type, you need to introduce an external CSS file using the following statement. < Link href="wangyexx.css" rel="stylesheet" type = "Text/css"/> If you use the guide, you need to use the following statement. < style type="text/css"> @import "Wangyexx.css"; </ style >   In addition, the display effect is slightly different after using these two methods. When using the link method, the CSS file is loaded before the main part of the section is loaded, so that the displayed Web page is styled from the beginning, and when the import is loaded, the CSS file is loaded after the entire page has finished loading, and for some browsers, in some cases, if the size of the Web file is larger, You'll see a page with no style first, and then the effect of setting the style after flashing a bit. From the perspective of the visitors, this is a flaw in the use of the import type. For some of the larger sites, for ease of maintenance, you might want to put all CSS style categories into several CSS files, so if you use the link, you need to import a few statements into the CSS file. If you want to adjust the classification of CSS files, you need to adjust the HTML file at the same time. This is a flaw in maintenance work. If you use the import, you can only introduce a total CSS file, in this file to guide other independent CSS files, and links do not have this feature. So the suggestion here is that if you only need to introduce a CSS file, then use the link, if you need to introduce more than one CSS file, the first link to introduce a "directory" CSS file, the "directory" CSS file in the use of the Guide to introduce other CSS files. However, if you want to dynamically decide which CSS file to introduce through JavaScript, you must use the link method to implement it. Here is a complete example of how the various import methods are written. In order to be easy to explain in the sections later in this tutorial, most cases are done inline, because the example given is usually a separate page. Suppose you have the following page code. <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   < HTML xmlns="http://www.w3.org/1999/xhtml"> < Head >   < Meta http-equiv="content-type" Content=" text/html; Charset=utf-8 " /> < title > Web Learning Network Example 1 </ title >   </ Head >   < Body >   < H1 style="Color:white; Background-color:blue "> Here is a line of text lodidance.com </H1 > </ Body >   </ HTML >   The code uses inline, which is to set the CSS style directly in the style property of the H1 tag. The text color is set to white, the background color is set to blue, and the effect in the browser is shown in 2. Figure 2 Using inline styling to set up CSS This approach only works on this one H1 title, so if you want all H1 tags in the page to use this style, you can transform the code into inline. The method is to move the style from within the line to the head section, with the following code. <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   < HTML xmlns="http://www.w3.org/1999/xhtml"> < Head >   < Meta http-equiv="content-type" Content=" text/html; Charset=utf-8 " /> < title > Web Learning Network Example 2 </ title >   < style type="text/css"> h1{ Background-color:blue; Color:white } </ style >   </ Head >   < Body >   <H1> here is a line of text lodidance.com</H1>   < H1 > here is another line of text lodidance.com </ H1 >   </ Body >   </ HTML >   In the head section, the H1 is called the selector, which selects certain elements of a page, followed by the same style rules as the previous inline rules. Note: each-rule is terminated with a semicolon. The last article does not have to end with a semicolon. As a result, all H1 headings in the page are displayed as shown in 3. Figure 3 Setting up CSS using inline mode If you want to write the rules of the CSS into an external standalone file, then introduce HTML. You should write a separate file with a. css suffix for the filename. The contents are as follows: h 1 {   background-color:blue; Color:White; } Then change the <style></style> section in the HTML document to: < style type="text/css"> @import "Wangyexx.css"; </ style >   Note: the correct CSS file path needs to be specified here. This shows exactly the same effect as the example above. If you want to use the link to introduce this CSS file, you can delete the <style></style> section above, and then add the following statement in the head section: < Link href="wangyexx.css" rel="stylesheet" type = "Text/css"/> The display effect is exactly the same. This section of code readers refer to the example 1.htm to Example 4.htm in "chapter 1th" of the download case in this tutorial. Click to download the 1th to 7th CSS Tutorial resource to return to the tutorial list of CSS Tutorial layout

Editor: Web Learning Network

This address: http://www.lodidance.com/css/jc/653.html