HTML样式表

最新推荐文章于 2022-08-04 21:32:22 发布

**瑱

最新推荐文章于 2022-08-04 21:32:22 发布

阅读量750

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS

本文链接：https://blog.youkuaiyun.com/CDZAllier/article/details/99682578

HTML/CSS 专栏收录该内容

17 篇文章

订阅专栏

本文深入讲解了CSS（层叠样式表）的三种类型：行内样式表、内部样式表和外部样式表。详细介绍了每种样式表的应用场景、语法结构及优先级规则，并通过实例演示了如何使用标签选择器、ID选择器和Class选择器来定制网页样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

层叠样式表（css的全称，也称为样式库）：

行内样式表：

<!--行内样式表 -->
<p 
	style="font-family: '微软雅黑';
	font-size: 20px;
        color:red;
	font-style: italic;
	text-decoration: underline;
	text-indent: 2cm;"
	>
	床前明月光
</p>

例：这里的样式字体为微软雅黑；字体大小 20；为红色字体；字体样式斜体；并带下划线(underline下划线，overline上线，line-through删除线)；文本缩进2cm（单位：cm/em/px）

行内样式表：写在标签里内的样式（style）称为“行内样式表”，适用于样子较少的情况下,不同元素之间用；隔开

像<h1> </h1>自带样式加粗及字体大小

内部样式表：

将样式（style）写在<head></head>标签内

语法：

<style>

选择器1{；；}

选择器2{；；}

……

</style>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
        <!--内部样式表-->
        <style  type="text/css">
            h1{
                color: green;
            }
            #h2{
                color: darkkhaki;
            }
            .h3{
                color: peachpuff;
            }					
        </style>
    </head>
    <body>
        <!--内部样式表-->
        <h1>疑是地上霜</h1>		
        <!--id选择器,以#id名-->
        <h2 id="h2">举头望明月</h2>
        <!--class选择器 ，以.类名-->
        <h3 class="h3">低头思故乡</h3>
    </body>
</html>

html5中 type="text/css" 可以省略

选择器

标签选择器（写在内部样式表中，直接以标签为名）

id选择器（以#id名为名，id 名不能重复使用，唯一的）

class选择器（也称为类选择器，以.类名为名，可以重复使用）

外部样式表:

<link rel="stylesheet" type="text/css" href="css文件路径" />

rel:告诉程序面部使用外部样式表

type:文件类型，text/css样式表文本

href:文件路径

<link />一般写在head内部，用来连接外部样式表，

注：（内容与样式分离，即产生css文件与html文件）css中不能含有html中的任何标签包括style

三种样式的出现

解决工嵌套样式时用行内样式。

解决同一页面样式一样的时候（也就是要用到时复制粘贴）用内部样式

解决大量的样式用外部样式

三种样式表优先级：离内容最近的优先选择

具体学习可进入：https://www.w3school.com.cn/html5/，参考