CSS学习之一 CSS样式的引入

关于CSS样式的引入有以下几种方法：

内部样式表

内部样式表是指将CSS样式直接写在HTML文档中，使用style标签将CSS样式放在head标签中。

示例代码：

<!DOCTYPE html>
<html>
   <head>
      <title>示例文档</title>
      <style>
         body {
            font-size: 16px;
            color: #333;
         }

         h1, h2, h3 {
            color: #f00;
            font-weight: bold;
         }
      </style>
   </head>
   <body>
      <h1>Hello World</h1>
      <p>这是一个示例文档。</p>
   </body>
</html>

在这个例子中，我们在head标签中使用了style标签来定义CSS样式，具体样式定义在了style标签内部。这些样式可以应用于文档中的任何元素，例如body、h1、h2和h3。

外部样式表

外部样式表是指将CSS样式写在一个独立的CSS文件中，然后在HTML文档中使用link标签将其引入。这种方式更易于管理和维护，特别在网站中多个页面使用相同的样式时更加方便。

示例代码：

HTML文件：(index.html)

<!DOCTYPE html>
<html>
   <head>
      <title>示例文档</title>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <h1>Hello World</h1>
      <p>这是一个示例文档。</p>
   </body>
</html>

CSS文件：(style.css)

body {
   font-size: 16px;
   color: #333;
}

h1, h2, h3 {
   color: #f00;
   font-weight: bold;
}

在这个例子中，我们把CSS样式放在了一个单独的文件中(style.css)，使用link标签将其引入HTML文件中。这样，我们在多个HTML文件中可以重复使用相同的CSS样式。

内联样式

内联样式是直接将CSS样式写在HTML标签内部的一种方式。它的优点是简单快捷，但是缺点也很明显就是不利于代码维护和管理，同时这种方法也不适用于大规模的网站。

示例代码：

<!DOCTYPE html>
<html>
   <head>
      <title>示例文档</title>
   </head>
   <body>
      <h1 style="color: #f00; font-weight: bold;">Hello World</h1>
      <p style="font-size: 16px; color: #333;">这是一个示例文档。</p>
   </body>
</html>

在这个例子中，我们直接在h1和p标签内部使用了style属性来定义CSS样式。需要注意的是，style属性的写法和内部样式表是一样的，只是它是写在标签内部的。

以上就是CSS样式的引入方法，具体使用时应根据实际情况进行选择。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS学习之一 CSS样式的引入 - Python技术站

CSS学习之一 CSS样式的引入

内部样式表

外部样式表

内联样式

相关文章