A practical tutorial on CSS (i)

CSS (cascading stylesheets) is a new technology for making web pages. Now it is supported by most browsers and becomes one of the essential tools for web page design. Using CSS can simplify the format code of web page, speed up the download and display speed, reduce the number of code to be uploaded, and greatly reduce the workload of repeated work. Especially when you are facing a site with hundreds of pages, CSS is like a gift from God! C
Preface
CSS (cascading stylesheets) is a new technology for making web pages. Now it is supported by most browsers and becomes one of the essential tools for web page design.
The W3C (the World Wide Web Consortium) divides dynamic HTML into three parts: script language (including JavaScript, VBScript, etc.), browser supporting dynamic effects (including Internet Explorer, Netscape Navigator, etc.) and CSS style sheet.
1、 Features of cascading style sheets
Not to mention the lack of dynamic web pages in the past, there are also many difficulties in the layout of web content, if not professionals or especially patient people, it is difficult to make web pages display information according to their own ideas and creativity. Even those who have mastered the essence of HTML must pass many tests to master the layout of these information. The process is very long and painful. For the development of Internet, let more people set foot in this colorful world as soon as possible, the new HTML assistant tool is coming out.
Style sheet is born under this kind of demand. The first thing it needs to do is to precisely locate the elements on the web page, so that the web designer can easily control the actors composed of words and pictures like the director, and perform well on the stage of the web page according to the script requirements.
Secondly, it separates the content structure from the format control. Visitors want to see the content structure of the web page, and in order to let the visitors better see the information, we need to help through format control. In the past, the distribution of the two on the web page is staggered, so it is inconvenient to view and modify them. Now, it will greatly facilitate the designers of the web page to separate them. Content structure and format control are separated, so that the web page can be composed of content, and the format control of all web pages can point to a CSS style sheet file. There are two ways to do this:
First, it simplifies the format code of the web page, and the external style sheet will be saved in the cache by the browser, which speeds up the download and display speed, and reduces the number of codes to be uploaded (because the repeated format will be saved only once).
Second, as long as you modify and save the CSS style sheet file of the website format, you can change the style characteristics of the whole site, which is particularly useful when you modify a site with a large number of pages. It avoids the modification of one web page and greatly reduces the workload of repeated work. When you are facing a site with hundreds of web pages, CSS is like a gift from God! C
2、 How to add cascading style sheets
There are four ways to add a stylesheet to a web page.
1. The easiest way is to add it directly to the HTML tag
< Tag style = "properties" > Web content < / tag >
for instance:
< P style = "color: blue; font size: 10pt" > CSS instance < / P >
Code Description:
"CSS instances" with a font size of 10pt are shown in blue. Although it is easy to use and intuitive to display, this method is not often used, because it can not fully play the advantages of style sheet "content structure and format control are saved separately".

2. Add in the header information identifier < head > of HTML:
< head>
< style type=”text/css”>
<!
Style sheet details
>
< /style>
< /head>
Type = "text / CSS" indicates that the style sheet adopts MIME type, which helps browsers that do not support CSS to filter out CSS code and avoid directly displaying the style sheet we set in the form of source code in front of browsers. However, in order to ensure that this does not happen, it is necessary to add the comment identifier "<! -- comment content -- >.
3. Link style sheet
It is also added in the header identifier < head > of HTML:
< head>
< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>
< /head>
*. CSS is a separately saved style sheet file, which cannot contain < style > identifiers, and can only be suffixed with CSS.
Media is an optional property that indicates what media the page using the style sheet will output on. Value range:
·Screen (default): output to computer screen
·Print: output to printer
·TV: output to TV
·Project: output to projector
·Aural: output to Speakers
·Braille: output to convex tactile sensing device
·TTY: output to teletypewriter
·All: output to all the above devices
If you want to output to multiple media, you can separate the value table with commas.
The rel property indicates how the stylesheet will be combined with the HTML document. Value range:
·Stylesheet: specifies an external style sheet
·Alternate stylesheet: specifies to use an interactive stylesheet
4. Joint use style sheet
It is also added in the header identifier < head > of HTML:
< head>
< style type=”text/css”>
<!
@import “*.css”
Declaration of other style sheets
>
< /style>
< /head>
The input method of union style sheet starting with @ import is similar to that of link style sheet, but the input method of union style sheet is more advantageous. Because the union method can link the external style sheet and make the style rules which are not needed by other web pages according to the specific situation of the web page.
It should be noted that:
·Union input style sheets must start with @ import.
·If there is a conflict in entering multiple style sheets at the same time, the page will be typeset according to the style sheet entered first.
·If the style sheet you enter conflicts with the style rules in the web page, use an external style sheet.
3、 Format of cascading style sheets
Generally speaking, the declaration of style sheet can be divided into selector and block {}. The block contains properties and values. The basic format is as follows:
Selector {property: value}
Other format 1:
Selector 1, selector 2, selector 3 {attribute 1: value 1; attribute 2: value 2; attribute 3: value 3}
Sometimes multiple selectors will use the same settings. To simplify the code, we can style them at once and separate them by adding "," between multiple selectors.
When there are multiple attributes, they must be separated by ";".
Other format 2:
Selector 1 selector 2 {attribute 1: value 1; attribute 2: value 2; attribute 3: value 3}
It is very similar to format 1, except that "," is added less between selectors, but the effect is quite different. Indicates that the set style rule only works if the content of selector 2 is included in selector 1.
4、 Classification of cascading style sheets
In order to make the web page format not too monotonous, it is necessary to make the same selectors can also be classified, and different styles can be designed according to different categories. The basic format is as follows:
Selector. Class alias {property: value}
Category names will be referenced in HTML identifiers:
< identifier class = class alias > Web content
5、 Pseudo classes for cascading style sheets
In addition to the above classification methods, in order to make the use of classification more flexible and diverse, the concept of pseudo class is also produced. What's the difference between a class and a pseudo class?
Generally speaking, selectors can be set in the form of bundling with multiple classes, so that although many different styles can be created for the same selectors, the bundling form also limits the use of the set classes for other selectors. Pseudo classes are generated to solve this problem. Each pre declared pseudo class can be referenced by all HTML identifiers, except for some block level content settings. The basic format is as follows:
. pseudo class name {property: value}
Pseudo classes can be referenced in HTML by any identifier.
< identifier class = pseudo class name > Web content
6、 Control font style
Control font style includes four parts: control font type, font size, font style and font thickness.
1. Font type
When using WORD and other word processing software, it is often necessary to adjust the font display, for example, "Arial", "Impact", "Verdana" and other fonts are more used by the author.
The basic format is as follows:
Font family: font name
If you add multiple font names after font family, the browser will search the installed fonts in the user's computer one by one according to the order of font names. Once you encounter a font that matches the requirements, you will display the content of the web page according to this font and stop searching; if not, you will continue to search until you find it, in case all fonts in the style sheet do not exist When installed, the browser will use its own default font instead of displaying the content of the web page.
Be careful:
·When multiple fonts are specified, use "," to separate each font name.
·When the font name contains more than two separate words, enclose the font name with "".
·Use '' instead of '' when there is already '' outside the style rule.
2. Font size
The basic format is as follows:
Font size: font size parameter
Value range of font size:
·Point units: point units apply to all browsers and platforms
·In EM: refers to the dimension of letter element, the same distance as point
·In pixels: pixels can be used on all operating platforms, but the effect on display may be different due to different screen resolutions of the viewer
·In inches
·In cm (CM)
·In mm (mm)
·In PC (printer font size)
·In ex (x-height)
·Smaller: smaller than the default size of the current text
·Bigger: smaller than the default size of the current text
·Use proportion relationship
XX-Small
X-Small
Small
Medium
Large
X-LARGE
XX-Large
3. Font style
Font style can only control the display of various italics.
The basic format is as follows:
Font style: name of italics
4. Font thickness
Font thickness controls the display of bold characters. The value range is from the number 100 to 900. The default font thickness of the browser is 400. In addition, you can use the parameters lighter and bolder to make the font appear thinner or thicker on the original basis.
The basic format is as follows:
Font weight: font weight transferred from: dynamic web production guide www.knowsky.com