From basics to proficiency: 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 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 :

type="text/css" indicates that the style sheet uses the MIME type, which helps browsers that do not support CSS filter out CSS code and avoid directly displaying it in front of the browser Display the style sheet we set in 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

Media is an optional attribute that indicates what media the web page using the style sheet will use for output. Value range:

·Screen (default): Output to computer screen

·Print: Output to printer

·TV: Output to TV set

·Projection: Output to projector

·Aural: Output to speaker

·Braille: output to embossed tactile sensing device

·Tty: output to teletypewriter

·All: output to all the above devices

If you want to output to multiple media, you can use commas to separate the value list.

The Rel attribute indicates how the style sheet will be combined with the HTML document. Value range:

·Stylesheet: Specify an external style sheet

·Alternate stylesheet: Specify the use of an interactive stylesheet

4. The joint use of style sheets

is also added in the HTML header information identifier :

@import "*.css"

Declaration of other style sheets

-->

[email protected]�� Method is very similar, but combines styles Table input method has more advantages. Because the combined method can link to the external style sheet and at the same time make style rules that are not required by other web pages based on the specific conditions of the web page.

It should be noted that:

·The combined method input style sheet must start with @import.

·If there is a conflict when inputting multiple style sheets at the same time, the web page will be typeset according to the first input style sheet.

·If the input style sheet conflicts with the style rules in the web page, use the external style sheet.

Three. The format of cascading style sheets

Generally speaking, the declaration of style sheets is divided into selectors and blocks. The blocks contain properties and values ​​of the properties. The basic format is as follows:

Selector {Attribute: value}

Other formats 1:

Selector 1, Selector 2, Selector 3 {Attribute 1: Value 1; Attribute 2: Value 2; Attribute 3: Value 3}

Yes Sometimes multiple selectors will use the same settings. To simplify the code, we can set styles for them all at once and add "," between multiple selectors to separate them.

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}

is very similar to format 1, except that there is less added between the selectors ",", but the effects are quite different. Indicates that the set style rule will only take effect if the content included in selector 2 is also included in selector 1.

Four. Classification of Cascading Style Sheets

In order to make the format of the web page not too monotonous, it is necessary to allow the same selector to be classified, and to carry out different style designs according to different categories. The basic format is as follows:

selector.category name {attribute: value}

The category name will be quoted in the HTML identifier:

Web page content

5. Pseudo-classes of Cascading Style Sheets

In addition to the above-mentioned classification methods, in order to make the use of classification more flexible and diverse, the concept of pseudo-classes was born. What is the difference between classes and pseudo-classes?

Generally speaking, selectors can be set in a bundle with multiple classes. In this way, although multiple different styles can be created for the same selector, the bundled form also limits the set classes to other classes. The selector used. Pseudo-classes were created 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 {Attribute: value}

Pseudo-class can be referenced in HTML by any identifier.

Webpage content

6. Controlling font style

Controlling font style includes four parts: controlling font type, font size, font style, and font thickness.

1. Font type

When using word processing software such as WORD, you often need to adjust the display of fonts. For example, "Arial", "Impact", "Verdana" and other fonts are commonly used by the author.

The basic format is as follows:

font-family: font name

If you add the names of multiple fonts after font-family, the browser will search for the installed fonts in the user's computer one by one in the order of the font names. Once a font that matches the required font is encountered, the web page content is displayed in this font and the search is stopped; if it does not match, the search continues until it is found. In case all fonts in the style table are not installed, the browser It will use its default font to replace the content of the web page.

Note:

·When specifying multiple fonts, separate each font name with ",".

·When the font name contains more than two separate words, use "" to surround the font name.

·When there is already "" outside the style rule, use '' instead of "".

2. The basic format of font size

is as follows:

font-size: font size parameter

The value range of font size:

·In Point: The point unit is applicable to all browsers and operating platforms

·In Em In units: refers to the size of letter elements, which is the same distance as Point

·In Pixels: Pixels can be used on all operating platforms, but the display effect may be different due to different screen resolutions of viewers

· In inches (inches)

· In cm (centimeters)

· In mm (millimeters)

· In pc (printer font size)

· In ex (x- height) in units

·smaller: one size smaller than the default size of the current text

·larger: Larger than the default size of the current text

·Use the proportional 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: the name of the italic font

4. Font weight

Font weight controls the display of bold fonts. The value range is from 100 to 900. The default font weight of the browser is 400. In addition, you can use the parameters lighter and bolder to make the font appear thinner or thicker based on the original.

The basic format is as follows:

font-weight: font thickness

The above is the content of From Basics to Mastery: CSS Practical Tutorial (1). For more related content, please pay attention to the PHP Chinese website (www.php.cn )!