Home > Article > Web Front-end > Several common ways to introduce css into HTML pages
Several common ways to introduce css into HTML pages
- PHPzOriginal
- 2023-04-06 12:47:282685browse
CSS is a programming language used to style web pages, which can make web pages look more beautiful and professional. Before using CSS to decorate a web page, it needs to be introduced into the web page. This article will introduce several common methods of introducing CSS.
1. Inline style sheet
Inline style sheet refers to writing CSS code directly in the style attribute of the HTML element. This method is suitable for situations where individual elements require custom styling. For example:
<p style="color: red; font-size: 18px;">这是一个段落</p>
2. Internal style sheet
Internal style sheet refers to using the <style> tag to introduce CSS code in the head of the document to control the entire HTML The style of the document. For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档标题</title>
<style>
p{
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
3. External style sheet
External style sheet refers to storing CSS code separately in a CSS file, and then passing <link> in the HTML document The tag refers to the file. This method is suitable for styles that need to control multiple pages, and can make HTML documents more concise. For example:
Write CSS code in the style.css file:
p{
color: red;
font-size: 18px;
}
Reference the CSS file in the HTML document:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档标题</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>这是一个段落</p> </body> </html>
4. Import Style sheets
are similar to external style sheets. Importing style sheets also introduces CSS files by using the <style> tag at the head of the document. The difference is that imported stylesheets use the @import syntax to introduce external CSS files. For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档标题</title>
<style>
@import url("style.css");
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
The above are several common methods of introducing CSS. Under different usage scenarios, choosing different introduction methods can make web development more efficient and concise.
The above is the detailed content of Several common ways to introduce css into HTML pages. For more information, please follow other related articles on the PHP Chinese website!