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

发布于:2024-07-15 ⋅ 阅读:(144) ⋅ 点赞:(0)

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>

执行结果:

4、样式表调用的优先顺序

样式表调用的优先顺序遵循以下原则:

(1)内联样式中定义的样式优先级最高。

(2)其他样式按其在HTML文件中出现或者被引用的顺序,遵循就近原则,越靠近文本,优先级就越高。

(3)选择器的优先顺序为后代选择器、类选择器、ID选择器,优先级依次降低。

(4)未在任何文件中定义的样式,将遵循浏览器的默认样式。