【网页前端】CSS样式表入门概述以及基本语法格式和选择器
🔎这里是【前端网页】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS样式表入门概述以及基本语法格式和选择器
文章目录
1.CSS 概述
1.1什么是 CSS
CSS (Cascading Style Sheets)
：层叠样式表
层叠：一层一层叠加
样式表：存储样式的地方，多个样式
CSS 通常称为 CSS 样式或层叠样式表，主要用于设置 HTML 页面中的文本内容（字体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。CSS 可以使 HTML 页面更好看， CSS 色系的搭配可以让用户更舒服， CSS+DIV 布局更佳灵活，更容易绘制出用户需要的结构。
CSS 作用：修饰 HTML 页面，更丰富多彩地展示超文本信息
1.1入门案例
步骤
1
：创建一个
HTML
文件
步骤
2
：在
HTML
上创建一个标签
步骤
3
：标签中新增一个
style
属性，并修改
style
属性值
效果：
因为
HTML
属性在单独使用时有一定的局限性，所以要配合
CSS
样式代码才可以展示更为丰富的
效果。
2. CSS 基本语法格式
放置规范：
在
<style>
标签内容体中书写
css
样式代码。
<style>
标签放置在
<head>
标签之中。
格式规范：
选择器名称
{
属性名
1
：属性值
1
；属性名
2
：属性值
2
；……
.}
选择器：即指定
CSS
样式作用在哪些
HTML
标签上
代码规范：
属性名和属性值之间是键值对关系；
属性名和属性值之间 用 “:”
连接，最后“
;
”结尾；
例如：
font-size:120px;
如果一个属性名有多个值，多个值之间用 空格 隔开。
例如：
border
:5px solid red;
CSS
注释：
/*
注释内容
*/
等同于
java
的多行注释
示例：
效果：
3. 选择器
3.1 标签选择器
标签选择器：即以
HTML
标签名作为选择器名称。
作用：选择
CSS
样式代码 作用于 对应标签名的标签上。
格式：
标签名
{
/*CSS
样式代码
*/
}
适用范围：适用于将相同样式
作用在多个同名标签上
准备代码：
<span>我是 span111111111111</span>
<span>我是 span222222222222</span>
<span>我是 div111111111111</span>
<span>我是 div222222222222</span>
示例：
效果：
3.2 类选择器
每个
HTML
标签都有一个
class
属性，
class
属性值即为类名
类选择器：即以
HTML
的类名（
class
属性值）作为选择器名称。
作用：选择
CSS
样式代码 作用于 对应类名的
HTML
标签上
格式：
.
类名
{
/*CSS 样式代码
*/
}
适用范围：适用于将样式 一次作用在相同类名的标签上。（即使标签名不同）
准备代码：
<span>span1：我是黑色</span>
<span class="redF">span2：我是红色</span>
<div>div：我是黑色</div>
<div class="redF">div2：我是红色</div>
示例：
效果：
注意：
1
、如果需要选择多个，例如同时使用
c1
和
c2
多个样式：
2
、类选择器命名时，词组之间可以通过中横线来分隔：
例如：
main-top
main-middle
main-bottom
3.3 ID 选择器
每个
HTML
标签都有一个
id
属性，
id
的属性值必须在本页面是唯一的。
id
选择器：即以
HTML
的
id
（
id
属性值）作为选择器名称。
作用：选择
CSS
样式代码 作用于 某个规定
id
值的
html
标签上
格式：
#id
值
{
/*CSS
样式代码
*/
}
适用范围：适用于将样式 作用某个标签上。（更有针对性）
注意：
必须人工保证
ID
值在本页面唯一。
准备代码：
<span>span1：我是黑色</span>
<span>span2：我是黑色</span>
<div>div1：我是黑色</div>
<div id="d1">div2：我是红色</div>
<div id="d2">div2：我是红色</div>
示例：
效果：
注意：
class
属性是为了美工 通过类选择器 调整页面样式
id
属性更多是为了程序员 通过
JS
操作页面
3.4 扩展：通配符选择器
CSS 支持使用 * 作为通配符，表示任意元素
上述案例中，因为使用
*
代表任意元素，这里
<h1>
和
<h2>
两个标签都被修改了样式。
注意：不建议使用，会降低页面加载速度。
3.5 扩展：属性选择器
每个标签将来都会设置不同的属性及属性值，
我们可以通过标签的属性及属性值来将样式作用于特点标签上。
格式：
标签名
[
属性名
=’
属性值
’]
{
/*css
样式代码
*/
}
准备代码：
<font size="3">黑色字体 1111</font>
<font size="5">黑色字体 2222</font>
<font size="7">红色字体</font>
示例：
效果：
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快？
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码