CSS Practical Tutorial (1)

　CSS (Cascading Stylesheets) is a new technology for making web pages. It is now supported by most browsers and has become one of the indispensable tools for web design. Using CSS can simplify the format code of web pages, speed up the download and display speed, reduce the amount of code that needs to be uploaded, and greatly reduce the workload of repeated work. Especially when you are facing a site with hundreds of web pages, CSS is like a gift from God to us! ^_^

Foreword

CSS (Cascading Stylesheets) is a new technology for making web pages. It is now supported by most browsers and has become one of the essential tools for web design.

W3C (The World Wide Web Consortium) divides dynamic HTML (Dynamic HTML) into three parts to implement: scripting language (including javaScript, Vbscript, etc.), browsers that support dynamic effects (including Internet Explorer, Netscape Navigator, etc.) and CSS style sheets.

1. Characteristics of Cascading Style Sheets

Not to mention the lack of dynamics in web pages in the past, there are also many difficulties in the layout of web content. If you are not a professional or a particularly patient person, it is difficult to make the web page according to your own ideas and creativity. Display information. Even those who have mastered the essence of the HTML language must pass many tests before they can master the layout of this information. The process is very long and painful. In order to develop the Internet and allow more people to step into this colorful world as soon as possible, new HTML auxiliary tools are about to emerge.

The style sheet was born under this demand. The first thing it needs to do is to accurately position the elements on the web page, allowing the web designer to easily control the actors composed of text and pictures like a director. Perform well according to the script on the stage of the website.

Secondly, it separates the content structure and format control on the web page. What viewers want to see is the content structure on the web page, and in order to allow viewers to better see this information, format control must be used to help. In the past, the distribution of the two on the web page was staggered and combined, which was very inconvenient to view and modify. Now, separating the two will greatly facilitate web designers. The content structure and format control are separated, so that a web page can be composed solely of content, and the format control of all web pages is directed to a certain CSS style sheet file. This is beneficial in two aspects:

First, the format code of the web page is simplified. The external style sheet will also be saved in the cache by the browser, which speeds up the download and display speed and reduces the need to upload. number of codes (because repeated formatting will only be saved once).

Second, just modifying the CSS style sheet file that stores the website format can change the style and characteristics of the entire site, which is particularly useful when modifying sites with a large number of pages. It avoids the modification of web pages one by one and greatly reduces the workload of repeated work. When you are facing a site with hundreds of web pages, CSS is simply like a gift from God to us! ^_^

II. Methods of adding cascading style sheets

We have four methods of adding style sheets to web pages.

1. The easiest way is to add it directly to the HTML identifier (tag):

Web content

For example:

CSS instance

Code description:

Display the “CSS instance” with a font size of 10pt in blue. Although it is simple to use and intuitive to display, this method is not commonly used because such addition cannot fully take advantage of the style sheet "content structure and format control are saved separately".

2. Added in the HTML header information identifier :






The specific content of the style sheet

-->





type="text/css" indicates that the style sheet uses MIME type, which helps browsers that do not support CSS filter out CSS code and avoid The style sheet we set is displayed directly in front of us in the form of source code. However, in order to ensure that the above situation does not happen, it is still necessary to add the comment identifier "" to the style sheet.

3. The link style sheet

is also added in the HTML header information identifier :







*.css is a style sheet file saved separately, which cannot contain the

The above is the content of CSS practical tutorial (1). For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!