Home > Article > Web Front-end > How to call css
How to call css
- WBOYOriginal
- 2023-05-27 11:39:07844browse
CSS (Cascading Style Sheets) is a language used to define the style of web pages. It can control the layout, colors, fonts and other aspects of web pages. In web page production, we usually need to combine CSS files with HTML files to achieve the style effect of the web page. So next, let’s talk about how to call CSS.
- Internal style sheet
The internal style sheet is a method that defines the CSS style in the header of the HTML file for easy switching and embeds the code in the HTML file. This method is suitable for specific styles that are only needed by the current page. The calling method is as follows:
<head>
<title>我的页面</title>
<style>
/* CSS样式代码 */
</style>
</head>- External style sheet
External style sheet is a way to define CSS styles in another file and then reference that file via a link in the HTML file. This method is suitable for situations where multiple pages require the same style. The calling method is as follows:
(1) Define the style code in the CSS file
/* style.css */
body {
background: #f6f6f6;
font-family: Arial, "Helvetica Neue", sans-serif;
font-size: 14px;
}
h1 {
font-size: 24px;
font-weight: bold;
color: #333;
}(2) Link in the HTML file CSS file
<head>
<title>我的页面</title>
<link rel="stylesheet" href="style.css">
</head>- Inline style sheet
Inline style sheet is a method of writing CSS styles directly in HTML tags. This method is suitable for situations where only one tag needs to be styled. The calling method is as follows:
<h1 style="color:red;">这是一个标题</h1>
- Import style sheet
Importing style sheet is a way to CSS styles are defined in another file, and then introduced into another CSS file. This method is similar to the external style sheet structure, but the calling method is slightly different:
(1) Introduce the style.css file in the main.css file
/* main.css */
@import url('style.css');
/* 下面是对样式的调用 */
body {
margin: 0;
}
.container {
width: 960px;
margin: 0 auto;
}(2) In the HTML file Link main.css file
<head>
<title>我的页面</title>
<link rel="stylesheet" href="main.css">
</head>- Inherited style
Inherited style is a method of applying the style of the parent tag to the child tags. This method is suitable for situations where the elements have the same style, and the code can be simplified by the style of the parent tag. For example:
div {
font-family: Arial, "Helvetica Neue", sans-serif;
font-size: 14px;
color: #333;
}
h1 {
font-size: 24px;
font-weight: bold;
}
/* 这里的h1将继承div中的color和font-family */To sum up, there are many ways to call CSS, and you can choose different calling methods according to actual needs. In web page production, using appropriate CSS calling methods can better achieve the effect of web page style and improve user experience.
The above is the detailed content of How to call css. For more information, please follow other related articles on the PHP Chinese website!