Lesson03_01 What is CSS and how to set it_Basic Tutorial

Lecture 3 CSS

• What is CSS
• Several ways to set CSS
• Style Rule Selector
• Comments and valid range of style rules
• Detailed explanation of style attributes

What is CSS and how to set CSS

Author: Loncer More learning resources are at: wwww.loncer.cn

What is CSS

CSS is the abbreviation of the English words Cascading Style Sheets, and the Chinese is: Cascading Style Sheets. In addition to easily setting the display position and format of web page elements, it can also generate filters , image fade, web page fade-in and fade-out gradient effect. In short, CSS is to achieve the same typesetting control as Word for the display effect of web pages.
For example, the following code:

That is, a CSS style is set.

As you can see from the above : The style attribute of an HTML element can specify multiple styles. The name of each style is separated from its setting value by a colon, and each style is separated by a semicolon. Various "style names" " is called "CSS attribute", and the "setting value" of style is called "CSS attribute value". This way of setting the display effect of web page elements is CSS.

How to set CSS

• Inline style sheets (inline style sheets)

The method of directly setting the style attribute of the HTML square tag is called an inline style sheet.
For example:
When using inline style sheets, the HTML4.01 standard recommends that users add a tag between the tags of the web page,
as follows:
There are two disadvantages in using this method:
1. If you want to set the same style To all paragraphs, repeat settings for each

tag.
2. A web page can be output on multiple media or media. The styles set using inline style sheets will take effect when output on all media, and it is impossible to specify different style sheets for different media.

• Embedded style sheets (Embedded style sheets)

media specifies the medium on which this style is displayed
It is written for browsers that do not support CSS

---

The basic format of each style rule defined in the in the embedded style sheet in a separate external file , this external file is an external style sheet file, and its extension is .css. An external style sheet file can be linked to an HTML document through the HTTP tag.
Example: TBODY>

First create a test.css file with the following code:
P{
"FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋体;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline "
}

Write another file to use the style sheet, and set them both in the same folder:



type and media are optional, rel and href are required

Using external style sheets, web page authors can change the appearance of the entire web by changing one file. Most browsers save external style sheet files in a buffer, making browsing the site faster.

• Imported sytle sheets

You can use CSS's @import to import a CSS file into another CSS file. The imported CSS style rule definition statement is Becomes part of the entered CSS style rule definition statement. You can also use @inport to import a CSS file into the tag pair. The entered CSS style rule definition statement becomes the definition statement in the tag pair.
Example:

<style type="text/css" media="screen"><br> <!--<br> @import url(http://………………);<br> @import url(/XXXX…………);<br> p{background:yellow;color:black}<br> --><br> </style> <br>

---

Note: All @import parts must be placed in front