A brief introduction to CSS knowledge

1. CSS definition

CSS refers to Cascading Style Sheets, which is a style sheet language used to describe HTML or XML (including XML branch languages ​​such as SVG and XHTML) Document presentation. CSS describes how elements should be rendered on screen, paper, audio, and other media.

2. Why use CSS

Web pages are composed of HTML tags, then these tags will be typed and styled according to the browser's default method. If you want to change these default styles , it is recommended to use CSS, because this not only achieves the separation of content and performance, but also makes it easier to maintain.

3. CSS syntax

CSS syntax consists of two main parts: the selector, and one or more declarations.

selector {declaration1; declaration2; ... declarationN }

Each declaration consists of an attribute and a value.

selector {property: value}

In the following example, h1 is the selector, color and font-size are attributes, and red and 14px are values.

h1 {color:red; font-size:14px;}

This picture vividly represents the structure of the above code

CSS is insensitive to spaces and case. Sensitive, that is to say, both upper and lower case can be used. Whether or not spaces are included will not affect the working effect of CSS in the browser.

/* 属性为大小，值为小写，并且冒号后面有多个空格 */
 .box {COLOR:   blue;
}/* 建议写法 */.box {color: blue;
}

The above two writing methods will be displayed in the browser The effect is the same.

4. CSS comments

Like the HTML language, CSS also has comments

4.1. Single-line comments

/* 这是表示单行的注释 */

Note: Comments cannot be nested. For example, the following writing is wrong

/* 这是表示*/单行的注释 *//* 这是表示单行的注释 /* */ */

4.2. Multi-line comments

/*
 * 这是表示多行的注释
 * 注释内容1
 * 注释内容2 */

5. Introduction method

5.1. Inline style

Inline style sets the CSS style in the style attribute of the tag.

<div></div>

5.2. Embedded

Embedded is to write CSS styles in the tag of the

tag of the web page Alignment

<meta><title>嵌入式</title>...<style>...在这里写CSS样式</style>

5.3, External connection

Write the CSS style in a separate file, and then introduce the CSS style file through the link tag

<meta><title>外联式</title>...<link>

type attribute: There is only one option, "text/css", specifying that the current css text file is
rel: Specifying that the relationship between the current HTML file and the CSS file is a style sheet
href: Specifying The path of the external style sheet

5.4. Import (not recommended)

Write the CSS style in a separate file, and then introduce the CSS style file through the @import tag

<meta><title>导入式</title><style>@import url(css/outer.css);/*其他css样式*/</style>

Note: The imported style must be written before all css rules are written, otherwise it will be invalid. Importing an external style sheet is similar to linking an external style sheet, which is equivalent to using it directly in the file. This will It takes up space in the html file, so this method is not recommended. Moreover, some browsers will load the imported styles last, resulting in no styles when you first open the web page. The styles will not be imported until the loading is complete, resulting in a poor user experience.

Another use for importing external style sheets is that if a file needs to reference many external style sheets, you can put the style sheets to be referenced in one file, and then only need to reference the files that need to be referenced. Just one file, for example,
import.css content is as follows
@import “a.css”
@import “b.css”
@import “c.css”

In addition to the above four imported styles, you need to know that all tags have a default style, which we call browser style, or default style. That is, how HTML tags appear in a browser without adding any styles.

6. Suggestions and points of attention

Some suggestions

• In order to improve the code in the future For optimization, it is recommended to add a semicolon after each attribute value, such as: p { font-style: normal; }

• Some html attributes have custom default CSS attribute values. , such as:

• In order to be compatible with browsers, it is recommended to reset the CSS attribute values ​​​​of all elements, such as:

  h1>————>h1 { font-size: 12px; }

• If you want to use a special font but are worried that the user does not have the font on it, you can use The picture replaces

• The order of setting Chinese and English fonts, first set the English font, then set the Chinese font, such as: p { "Courier New", "宋体" }, it is recommended to use the font Double quotes

Style application order

• Inline styles have the highest priority

• For the same style attributes, different style attributes will be rendered in a merged manner.

• For the same style and the same attributes, the rendering method is determined by the order in

  . The previously defined attributes will be overwritten later
• ##!important The specified style rule will be applied first

The above is the detailed content of A brief introduction to CSS knowledge. For more information, please follow other related articles on the PHP Chinese website!