Home >Web Front-end >Front-end Q&A >What are the three ways to use css3
What are the three ways to use css3
- WBOYOriginal
- 2022-01-24 11:15:382862browse
Three ways to use css3: 1. Inline style, the syntax is "
"; 2. Internal style, the syntax is ""; 3. External style, the syntax is "".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
What are the three ways to use css3
1. Inline style
Inline style is set through the style attribute, and the attribute value can be any CSS style.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联样式</title>
</head>
<body>
<p style="background: red"> I love China!</p>
</body>
</html>Display effect:
2. Internal style
The internal style is defined in the head part of the document and is set through the style tag. You need to use the element selector (p) to associate the style with the tag to be styled (p tag).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联样式</title>
<style type="text/css">
p{
background: green;
}
</style>
</head>
<body>
<p> I love China!</p>
</body>
</html>Effect:
3. External style
Define the css style in *.css outside the document, and then in the head of the document Partially introduced through link elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p> I love China!</p>
</body>
</html>Style.css file content:
p{
background: yellow;
}Display effect:
@import "style.css";
body{
background: red;
} Import the combine.css file into the HTML file <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<link rel="stylesheet" href="combine.css">
</head>
<body>
<p> I <span>love</span> China!</p>
</body>
</html> Effect:
css video tutorial)
The above is the detailed content of What are the three ways to use css3. For more information, please follow other related articles on the PHP Chinese website!