css样式的引入方式

时间 2019-12-10

标签 css 样式引入方式栏目 CSS 繁體版

原文原文链接

　　首选来介绍一下什么是CSS?(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言,其实就是一种层叠样式表。css

　　CSS不只能够静态地修饰网页，还能够配合各类脚本语言动态地对网页各元素进行格式化。CSS可以对网页中元素位置的排版进行像素级精确控制，支持几乎全部的字体字号样式，拥有对网页对象和模型样式编辑的能力。html

　　就像造房子同样，若是html是基地的话，那么CSS就是装修，只有装修的房子才能够住，天然至于那些灯光之类的是JS了，这是简单的比例，但也说明了css的重要性。字体

　　网页的核心就是内容与样式的分离，其中CSS就是分离的一种，那么若是分离了，该如何引用呢?一些网站中不少文件，只有相关的引用才能够实现，其中有四种方式，内链样式，嵌入式样式，外部样式，导入样式，下面为你们介绍一下：优化

　　1：内联样式(行间样式)：在标签的style属性添加样式：网站

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>行内样式</title>
</head>
<body>
     <!--使用行内样式引入CSS-->
     <h1 style="color:red;">惊风随笔</h1>
     <p style="color:red;font-size:30px;">惊风随笔</p>
</body>
</html>

　　二、嵌入式样式表(内部样式表)：在style标签内添加(加在head标签内部)url

<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.外部样式表：将css样式编写在扩展名为.css的文件中，再导入样式，导入在(head标签内部)spa

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>外部样式表</title>
  <!--连接式:推荐使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
  </style>
</head>
<body>
     <ul>
         <li>HTML</li>
         <li>CSS</li>
        <li>JavaScript</li>
     </ul>
</html>

　　四、@import导入其余css文件。就至关于原来的css文件中包含被导入的css文件中的样式。code

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>导入样式表</title>
  <!--导入式-不推荐使用-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>
<body>
     <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
     </ul>
</html>

　　不过根据目前网站的作作法，要作到内容与样式的分离，通常都是使用第三种的作法，也就是使用外部式表。这是通用的方式了，第四种通常不多用，由于须要进一步的加载，不利于后期SEO的优化。htm