How to introduce css files-CSS Tutorial-php.cn

How to introduce css files

coldplay.xixi

Release： 2023-01-05 16:13:05

Original

13830 people have browsed it

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].

How to introduce css files

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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文件路径" />

Copy after login

2, import type

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

Copy after login

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>

Copy after login

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!