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 }Copy after login
Each declaration consists of an attribute and a value.
selector {property: value}Copy after login
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;}Copy after login
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;
}Copy after login
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
/* 这是表示单行的注释 */
Copy after login
Note: Comments cannot be nested. For example, the following writing is wrong
/* 这是表示*/单行的注释 *//* 这是表示单行的注释 /* */ */
Copy after login
4.2. Multi-line comments
/*
* 这是表示多行的注释
* 注释内容1
* 注释内容2 */
Copy after login
5. Introduction method
5.1. Inline style
Inline style sets the CSS style in the style attribute of the tag.
<div style="..."></div>
Copy after login
5.2. Embedded
Embedded is to write CSS styles in the tag of the
tag of the web page Alignment
<head><meta charset="UTF-8"><title>嵌入式</title>...<style type="text/css">...在这里写CSS样式</style></head>
Copy after login
5.3, External connection
Write the CSS style in a separate file, and then introduce the CSS style file through the link tag
<head><meta charset="UTF-8"><title>外联式</title>...<link rel="stylesheet" href="outer.css?1.1.11" /></head>
Copy after login
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
<head><meta charset="UTF-8"><title>导入式</title><style type="text/css">@import url(css/outer.css);/*其他css样式*/</style></head>
Copy after login
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 { 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
