CSS在页面中使用的三种方式：行内样式、内嵌式样式表、链接式样式表

news2024/9/22 19:36:31

CSS样式如何在页面中使用，包含三种方式：行内样式、内嵌式样式表、链接式样式表。

CSS样式的使用系列博文：

《CSS在页面中使用的三种方式：行内样式、内嵌式样式表、链接式样式表》

《CSS选择器：基本选择器、复合选择器、伪类选择器、伪元素选择器》

1、行内样式

行内样式是比较直接的一种样式，直接定义在 HTML 标签之内，并通过 style 属性来实现。这种方式比较容易学习，但是灵活性不强。

【实例】应用行内样式控制页面。

<!-- 在页面元素中定义CSS样式 -->
<p style="font-size: 36px; color:red">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 24px; font-weight: bold;">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 18px; font-style: italic">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 14px; text-decoration: line-through;">您好，欢迎访问 pan_junbiao的博客</p>

执行结果：

2、内嵌式样式表

内嵌式样式表就是使用<style>...</style>标签将 CSS 样式包含在页面中的，内嵌式样式表的形式没有行内样式表现得直接，但页面会更加规则。

【实例】使用内嵌式样式表设计页面样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>
    
    <!-- 内嵌式样式表 -->
    <style type="text/css">
        h1, h2, h3{
            font-family: Tahoma, Geneva, sans-serif; /*定义字体*/
            color: blue; /*文字颜色*/
        }
    </style>
</head>
<body>
    <h1>大风起兮云飞扬</h1>
    <h2>威加海内兮归故乡</h2>
    <h3>安得猛士兮守四方</h3>
</body>
</html>

执行结果：

3、链接式样式表

链接外部 CSS 样式表是最常用的一种引用样式表的方式。首先将 CSS 样式定义在一个单独的文件中，然后在 HTML 页面中通过<link>标签来引用它们，这是一种最为有效的使用 CSS 样式的方式。

<link>标签的语法结构如下：

<link rel='stylesheet' href='path' type='text/css'>

rel：外部文档和调用文档间的关系。

href：CSS文档的绝对或相对路径。

type：外部文件的MIME类型

【实例】在页面中引用 CSS 样式。

（1）创建 css 目录，然后再目录中创建 css.css 样式文件。

/*定义CSS样式 */
h1,h2,h3{								
    color:#6CFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

p{
    color:#F0CC;	/*定义颜色*/
    font-weight:200;
    font-size:24px;	 /*设置字体大小*/
}

（2）在页面中通过<link>标签将CSS样式文件引入页面中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>

    <!--页面引入CSS样式表-->
    <link rel="stylesheet" type="text/css" href="/css/css.css">		
</head>
<body>
    <h2>春夜喜雨</h2>
    <p>好雨知时节，当春乃发生。</p>
</body>
</html>

执行结果：