CSS is called: Cascading style sheets (Cascading style sheets)
To beautify HTML is to set the style for the HTML tags in the page
CSS Grammar Rules
The css should be written inside the head tag, below the title tag, and framed with a style tag
<head>
<title>...</title>
<style>
...
<style>
</head>The writing format in style is selector + braces
Selector: Select the name of the tag you want to change, for example, the <p></p> tag is written as
<style>
p {
color: red;
}
</style>The third line of the above code is called the css attribute, color is the attribute name, red is the attribute value, and a semicolon ";" must be added at the end of the statement
<head>
<title>Document</title>
<style>
/* css注释 */
/* 在这里写css */
/* 选择器{css属性} */
p {
color: red;
/* px是像素 */
font-size: 30px;
/* 背景色 */
background-color: blue;
width: 300px;
height: 300px;
}
</style>
</head>
The display effect is as shown above
CSS import method
Embedded
CSS is written in the style tag. Although the style tag can be written anywhere on the page, it is usually agreed to write it in the head tag
outreach
CSS is written in a separate .css file
It needs to be introduced in the web page through the link tag
Inline
Write in the style attribute of the tag (can be used with js)
outreach
Let's see how to use the link tag to introduce css into html
1. First create an html file and test it with the p tag. This is the style before importing
2. Create a css file
I named it "import" here, and the file suffix must be .css
3. Then we want to beautify the p tag in the html, then return to our html code and enter the link (usually written under the title)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- stylesheet:关系为样式表 href为路径，同级目录我们只需./就能找到了 -->
<link rel="stylesheet" href="./引入.css">
</head>
<body>
<p>引入css</p>
</body>
</html>Then look at the effect of html display at this time
You can see that the .css file has been successfully referenced, changing the font of the p tag
Inline
Add style in the tag, take the div tag as an example, add color and font size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- stylesheet:关系为样式表 href为路径，同级目录我们只需./就能找到了 -->
<link rel="stylesheet" href="./引入.css">
</head>
<body>
<p>引入css</p>
<div style="color: rebeccapurple; font-size: 30px;">这是个div标签</div>
</body>
</html>renderings
Inline style has a limitation, that is, it can only control one label
These three reference methods distinguish characteristics and usage scenarios
Citation |
writing position |
Scope of action |
scenes to be used |
Embedded |
CSS is written in the style tag |
The current page |
small case |
outreach |
CSS is written in a separate css file and imported through the link tag |
multiple pages |
project |
Inline |
CSS is written in the style attribute of the tag |
current tab |
Use with js |