CSS knowledge finishing (1) basic introduction and CSS import method
table of Contents
CSS knowledge finishing (1) basic introduction and CSS import method
1. Basic introduction
The full name of CSS is Cascading Style Sheets, cascading style sheets, used to render html, so that html skeleton webpages have a certain style, in simple terms, it is to make webpages look good.
Advantages of CSS:
- Realize the separation of content and performance (content is html, performance is CSS)
- The structure of the web page is unified and can be reused
- Rich style
The basic structure of CSS is:
标签选择器{
声明1;
声明2;
声明3;
}Tag selector{}
Two, import method
The css can be taken out as a .css file, or can be added directly in html. Inline style and internal style are to write css code directly in html, and external style is to write .css file separately, and then import it in html file
1. Inline style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color: red">我是一级标题</h1>
</body>
</html>The effect is as follows:
2. Internal style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h2{
color: orange;
}
</style>
</head>
<body>
<h2>我是二级标题</h2>
</body>
</html>The effect is as follows:
3. External style
First we prepare a style.css file
/*外部样式*/
h3{
color: blue;
}- Linked
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部样式链接式-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>我是三级标题</h3>
</body>
</html>
- Import
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*导入式*/
@import url("style.css");
</style>
</head>
<body>
<h3>我是三级标题</h3>
</body>
</html>The above effects are as follows:
It should be noted that: for the same label, the priority of its css style follows the principle of proximity , that is: inline>(internal or external: depending on which code is closer to the selected object)
The content of the article is organized according to the self-study of the CSS part of " Meeting Crazy God" . I would like to thank the blogger here .