How to call css-Front-end Q&A-php.cn

How to call css

WBOY

Release： 2023-05-27 11:39:07

Original

873 people have browsed it

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>

Copy after login

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;
}

Copy after login

(2) Link in the HTML file CSS file

<head>
    <title>我的页面</title>
    <link rel="stylesheet" href="style.css">
</head>

Copy after login

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>

Copy after login

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;
}

Copy after login

(2) In the HTML file Link main.css file

<head>
    <title>我的页面</title>
    <link rel="stylesheet" href="main.css">
</head>

Copy after login

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 */

Copy after login

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!