CSS3快速上手之1：语法格式

最新推荐文章于 2025-01-08 11:30:51 发布

Owen的Blog

最新推荐文章于 2025-01-08 11:30:51 发布

阅读量433

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS HTML

本文链接：https://blog.youkuaiyun.com/u011775523/article/details/52769446

HTML 同时被 2 个专栏收录

45 篇文章

订阅专栏

CSS

22 篇文章

订阅专栏

本文介绍了CSS选择器的不同类型及其语法，包括类选择器、ID选择器等，并通过实例展示了如何将这些选择器应用于HTML元素中以实现样式控制。

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

1.选择器格式说明：

2.选择器语法：（CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:）

/*---CSS声明总是以分号(;)结束，声明组以大括号({})括起来--- */

/*---以下为类的宣告，注意要有"."---*/
.C1 {color:red;text-align:center;}

/*---以下为ID的宣告，注意要有"#"---*/
#ID1 {color:red;text-align:center;}

/*---以下加入元素(P1)的类(C2)的宣告---*/
P1.C2 {color:red;text-align:center;}

/*---以下加入元素(P2)的ID(ID22)的宣告---*/
P2.ID2 {color:red;text-align:center;}

3.CSS和HTML相关联：（先以与HTML内部相关联当范例)

3.1程式码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>网页title</title> 
<style>

/*---以下为类(class),c1的css属性---*/
.c1
{
	color:blue;
	text-align:left;
} 
	
/*---以下为类(class),c1的css属性---*/
.c2
{
	color:red;
	text-align:center;
} 
</style>
</head>

<body>

<!-- 以下是在HTML中引用前述两个类(c1与c2)的范例 -->
<p class="c1">使用类(class),c1的属性</p>
<p class="c2">使用类(class),c2的属性</p>
</body>
</html>

3.2结果