Home >Web Front-end >CSS Tutorial >How to introduce css files

How to introduce css files

coldplay.xixiOriginal: 2021-04-29 17:22:4813895browse

Methods to introduce css files: 1. Use the style attribute to introduce CSS styles; 2. Write CSS code in the style tag; 3. Save the CSS code in a style sheet with the extension [.css].

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

How to introduce css files:

1. Inline style

Use the style attribute to introduce CSS styles.

Example:

<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

It is not recommended to use when writing pages, but can be used during testing.

For example:

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>行内样式</title>
</head>
<body>
     <!--使用行内样式引入CSS-->
     <h1 style="color:red;">Leaping Above The Water</h1>
     <p style="color:red;font-size:30px;">我是p标签</p>
</body>
</html>

2. Internal style sheet

Write CSS code in the style tag. The style tag is written in the head tag.

Example:

<head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>

For example:

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>内部样式表</title>
  <!--使用内部样式表引入CSS-->
  <style type="text/css">
    div{
        background: green;
    }
  </style>
</head>
<body>
     <div>我是DIV</div>
</body>
</html>

3. External style sheet

CSS code is saved in the extension .css The

HTML file in the style sheet refers to the style sheet with the extension .css. There are two ways: link type and import type.

Grammar:

1, link type

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2, import type

<style type="text/css">
  @import url("css文件路径");
</style>

For example:

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>外部样式表</title>
  <!--链接式:推荐使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
  <!--导入式-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>
<body>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

Related tutorials Recommended: CSS video tutorial

The above is the detailed content of How to introduce css files. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set the button to be unclickable in cssNext article：How to set the button to be unclickable in css

See more

How to introduce css files

Related articles