HTML---CSS-引入样式表和选择器

原创

于 2024-01-14 14:56:04 发布 · 1.2k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

本文详细介绍了CSS在网页设计中的作用，包括如何引入外部、内部和行内样式表，以及CSS的选择器，如元素选择器、id选择器、class选择器、后代选择器和群组选择器的用法实例。

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

CSS : Cascading Style Sheet 层叠式样式表
HTML 用于控制网页的结构，CSS则用于控制网页的外观，想要做出美观好看的网页，CSS是必须的

引入外部样式表：
它的属性 rel 和 type是固定的
语法：

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

引入内部样式表
type属性也是固定的
语法：

<style type="text/css">
	...
</style>

引入行内样式表
语法：

<!DOCTYPE html>
<html>
<head> 
    <title>表单</title>
    <meta charset="utf-8"/>
</head>
<body>
    <div style="color:red";> 这里有一段红色字体的话</div>
    <div style="color:green";> 这里有一段绿色字体的话</div>
    <div style="color:yellow";> 这里有一段黄色字体的话</div>
</body>
</html>

效果：
在这里插入图片描述

CSS选择器

HTML中有两个属性，如下：

id属性

id具有唯一性，不可重复

class属性

class元素可以重复

CSS选择器 – 元素选择器

<!DOCTYPE html>
<html>
<head> 
    <title>表单</title>
    <meta

最低0.47元/天解锁文章

200万优质内容无限畅学