【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍

凉凉心.

发布于 2025-10-13 17:53:06

1510

文章被收录于专栏：CSDN专栏CSDN专栏

CSS 介绍

CSS(英文全称：Cascading Style Sheets 层叠样式表)

CSS的发展史：

CSS1.0:1996年12月，CSS1.0作为第一个正式规范面世，其中加入了字体、颜色等相关属性。
CSS2.0:1998年5月，CSS2.0规范正式推出。这个版本的CSS是最广为人知的一个版本，以前的开发者使用的一般的就是这个版本的CSS规范。
CSS2.1:2004年2月，CSS2.1对原来的2.0进行了一些小范围的修改，删除了一些浏览器支持不成熟的属性。CSS2.1可认为是CSS2.0的修订版。
CSS3.0:2010年，CSS3规范推出，这个版本的CSS完善了前面CSS存在的一些不足。例如：
- 颜色模块增加了色彩校正、透明度等功能；
- 字体模块则增加了文字效果、服务器字体支持等；
- 还增加了变形和动画模块等。

CSS样式表的基本使用

为文档添加样式的4种方式： 1、使用内联样式：直接将样式定义到HTML元素中(写在标签里)。这种作用范围有限，只影响它所在的标签，而且总是覆盖嵌入样式和链接样式。

<div style="width:200px;height:200px;"></div>

2、使用内部样式：写在<style>标签中。作用范围仅限于当前页面，内部样式覆盖链接样式，但也会被内联样式覆盖。

 <style type="text/css"> CSS样式</style>

3、链接样式：写在单独的CSS样式表中。链接样式的作用范围可以是整个网站。只要使用标把样式表链接到页面，相应页面就可以使用样式。

<link href="链接表地址" rel="stylesheet" type="text/css"/>

rel是relationship的英文缩写
stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思

rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是，href连接的文档是一个新式表

4、@import指令导入外部样式文件：和链接样式类似。引用@import指令在某些浏览器(IE) 可能会出现“屏闪”。所以我们应该尽量的避免使用@import指令。而是尽量使用链接外部样式表。

<style type="text/css">@import url(地址);</style>

导入

@import url()

但随着浏览器发展，这种屏闪问题已经解决，可以使用

CSS选择器

CSS样式的语法格式：

p {
	color:red;
}

元素选择器**(元素选择器是最简单的选择器)**

选择器 {属性:值} 根据这个结构我们可以扩展：例如：

p{color:red;font-size:14pt;font-weight:bold;}
h1,p,a{color:blue;font-size:14pt;} /*组合选择器*/

所有用于选择特定元素的选择器分三种：上下文选择器(迭代选择器)：基于祖先或同胞元素选择一个元素 ID和类选择器：基于id#和class的属性值进行选择元素。属性选择器：基于属性的有无和特征进行选择。

上下文选择器：

上下文选择器的语法格式：标签1 标签2{属性:值;}

注意：组合选择器和上下文选择器的区别，组合选择器以逗号隔开，上下文选择器以空格隔开

特殊的上下文选择器

子选择器 > : 语法格式:

标签1>标签2 解释说明：标签1和标签2是父子关系。

紧邻同胞选择器 + : 语法格式:

标签1+标签2
解释说明：标签2紧跟同胞标签1的后面。

一般同胞选择器 ~ : 语法格式:

标签1~标签2
解释说明:标签1、2是同胞即可，不一定紧挨着。

通用选择符* : 解释说明:通用选择器*是一个通配符，匹配任何元素。

id选择器和class选择器

id选择器：语法格式:#idValue class选择器：语法格式: .classValue

属性选择器

属性名选择器：语法格式：标签名[属性名] 属性值选择器：语法格式：标签名[属性名="属性值"]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器 Selector</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
# 元素选择器
div {
	width: 800px;
	height: 500px;
	border: 2px solid #C30;
	text-align: center;
}
# 上下文选择+class选择器
div .myp{
	font-size:30px;
	color:#900;
}
# id 选择器
#myh1{
	
}
# 属性选择器
p[class="myp"]{
	
}

body div p{
	
}
</style>
</head>

<body>
    <div >
        <h1 id="myh1" class="myp">this is an H1 Heading</h1>
        <p class="myp">this is paragraph one</p>
        <p class="myp">paragraph two has <a href="#">a link</a> in it</p>
        <a href="#">this is a link</a>
        <h1 id="myh">this is an H1 Heading</h1>
    </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
/*--给div设置样式*/
div {
	width: 800px;
	height: 500px;
	border: 2px solid #C30;
	text-align: center;
}
/*上下文选择器*/
div h1 {   
	color: #F0F;
}
/*特殊上下文选择器--子选择器> */
div>h1 {
	font-style: italic;/*设置字体样式为倾斜*/
}
/*特殊上下文选择器--紧邻同胞选择器+ */
h1+p {
	font-style: italic;/*设置字体样式为倾斜*/
	color: #F00;
}
/*特殊上下文选择器--一般同胞选择器~ */
h1~p {
	color: #FC0;
	font-size: 14pt;
}
/*特殊上下文选择器--通用选择符* */
 * {
	color: #900;
}
/*id选择器*/
#myh1 {
	color: #F3C;
	font-size: 20pt;
	background: #06F;
}
/*class选择器*/
.myp {
	color: #90C;
	font-size: 15pt;
}
/*属性名选择器*/
h1[id] {
	color: #C03;
	font-style: italic;
}
/*属性值选择器*/
h1[id="myh"] {
	color: #C03;
	font-style: italic;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-10-13，如有侵权请联系 cloudcommunity@tencent.com 删除

浏览器