CSS入门:样式规则与选择器
zhezhongyun 2025-05-21 17:55 4 浏览
一、CSS简介
1.1 什么是CSS？
- 定义：CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML（包括如SVG, MathML之类的XML语言）文档外观和格式的样式语言。
- 作用：分离内容与表现，使网页内容更加丰富和美观。
1.2 CSS如何工作？
- 层叠性：多个样式表可以应用于一个HTML文档，CSS样式按照优先级和来源（如内联、内部、外部）进行层叠。
- 继承性：某些CSS属性可以从父元素继承到子元素。
二、CSS样式规则
2.1 基本结构
css代码：
selector {
property: value;
}- selector：选择器，用于指定应用样式的HTML元素。
- property：属性，定义要改变的样式特性。
- value：属性值，为所选属性赋予的具体样式值。
2.2 示例
p {
color: blue;
font-size: 16px;
}上述规则将所有<p>元素的文本颜色设置为蓝色，字体大小设置为16像素。
三、CSS选择器
3.1 类型选择器
- 定义：根据HTML元素的类型选择元素。
- 示例：p选择所有段落元素。
3.2 类选择器
- 定义：使用HTML元素的class属性选择元素，类选择器前有一个点（.）。
- 示例：.myClass选择所有class属性为myClass的元素。
3.3 ID选择器
- 定义：使用HTML元素的id属性选择元素，ID选择器前有一个井号（#），且ID在页面中唯一。
- 示例：#myId选择ID为myId的元素。
3.4 属性选择器
- 定义：根据元素的属性及属性值选择元素。
- 示例：[type="text"]选择所有type属性值为text的input元素。
3.5 后代选择器
- 定义：选择某元素内部的所有指定后代元素。
- 示例：div p选择所有位于<div>元素内的<p>元素。
3.6 伪类选择器
- 定义：选择元素的特定状态，如鼠标悬停、点击等。
- 示例：a:hover改变鼠标悬停在链接上的样式。
3.7 伪元素选择器
- 定义：选择元素的一部分内容，如首字母、首行等。
- 示例：p::first-line改变段落首行的样式。
四、实践应用
4.1 编写一个简单的CSS示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器示例</title>
<style>
/* 类型选择器 */
p {
color: green;
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID选择器 */
#unique {
font-weight: bold;
}
/* 后代选择器 */
div p {
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个普通的段落。</p>
<p class="highlight">这是一个高亮显示的段落。</p>
<div>
<p id="unique">这是一个加粗显示的段落，位于一个div内。</p>
</div>
</body>
</html>五、总结
- CSS是网页设计中不可或缺的一部分，用于控制网页的外观和布局。
- 样式规则由选择器、属性和属性值组成。
- 选择器类型多样，包括类型选择器、类选择器、ID选择器、属性选择器、后代选择器、伪类选择器和伪元素选择器。
- 通过实践应用，可以更好地理解和掌握CSS选择器的使用。
相关推荐
- 办公小技巧:杜绝意外 让字体永不丢失
-
当精心编辑的文档，在其它电脑上打开时，最常见的问题就是页数增加了，表格被撑破了，有些严重的甚至会出现乱码……为什么会这样呢？究其根源都是因为缺少相应的字体。本文介绍各类文档中（包括Word文档、PPT...
- 网站速度优化:从10秒到2秒的极致性能提升方案
-
核心内容：性能诊断工具：PageSpeedInsights与Lighthouse的评分差异解读。WebPageTest多地区、多设备性能对比。前端优化：CSS/JS压缩与合并的自动化方案（如Webp...
- 如何在WordPress中删除谷歌字体(2种简单方法)
-
许多WordPress主题都会用Google字体，然而，Google字体并不存储在网站本地，它是一个第三方资源，这会影响网站的加载速度，让网站变慢，尤其当你的网站面向的是国内用户时，更需要禁用Goog...
- 2019年免费可商用字体大全(附打包下载)
-
私信“字体”可免费获得。附送一个几十G的，有商业授权要求的字体包！不说那么复杂了，简单讲，可能你下载的大多数字体都是收费的。比如方正、文鼎、汉仪等的90%以上需要商业授权，甚至个人授权。这儿的授权，指...
- 开源免费、美观实用的后台管理系统模版，简单轻量、开箱即用!
-
项目介绍ArtDesignPro是一款开源免费（基于MITlicense开源协议）、美观实用的后台管理系统模版，专注于用户体验和快速开发的开源后台管理解决方案。基于ElementPlus设计...
- 【推荐】一款开源免费、美观实用的后台管理系统模版
-
如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍ArtDesignPro是一款开源免费（基于MITlicense开源协议）、美观实用的后台管理系统模...
- 想要字体图标设计师却给了SVG?没关系，自己转
-
本文为Varlet组件库源码主题阅读系列第三篇，读完本篇，你可以了解到如何将svg图标转换成字体图标文件，以及如何设计一个简洁的Vue图标组件。Varlet提供了一些常用的图标，图标都来自Mater...
- 零基础教你学前端——66、CSS谷歌字体和Icon图标
-
我们学习CSS谷歌字体和CSSIcon图标。我们在应用font-family属性声明样式字体时，除了使用HTML中的标准字体外，还可以使用谷歌字体。谷歌字体是免费使用的，并且有1000多种字体...
- 必须掌握的前端开发基础知识，什么是字体图标?
-
必须掌握的前端开发基础知识,什么是字体图标?显示隐藏元素display显示隐藏none隐藏block显示隐藏后不再占有原来的位置visibility隐藏元素后,继续占有原来的位置visible元...
- 让你的网站速度提升10倍!(四):压缩~~~
-
在前面的内容中讲了如何降低页面大小（给页面瘦身）,重点讲的是如何优化图片，而没有讲文本内容如何优化，这是因为与其辛苦的优化文本还不如使用我们的秘密武器：Gzip压缩！如果你还不清楚Gzip是什么，看这...
- MFC转QT - Qt界面开发 - 常用控件
-
基础控件(QPushButton,QLabel,QLineEdit等)按钮控件族Qt提供了丰富的按钮控件，比MFC的按钮控件更加细分和功能丰富。QPushButton（标准按钮）//创建按钮...
- 使用CSS实现苹果官网文字渐入效果
-
效果分析文字是从左到有慢慢呈现出来，不是整体消失和出现，那么肯定不能使用透明度。我们可以想到渐变文字，然后通过改变背景的位置来控制文字的显示与隐藏。渐变文字渐变文字该如何实现呢？这是实现这个效果的关键...
- HarmonyOS NEXT - ArkUI: Text组件
-
Text组件用于在界面上展示一段文本信息，可以包含子组件Span。文本样式包含文本元素的组件，例如Text、Span、Button、TextInput等，都可以使用文本样式。文本样式的属性如下表：.f...
- 计算机网络的 166 个核心概念，你知道吗?
-
上回我整理了一下计算机网络中所有的关键概念，很多小伙伴觉得很有帮助，但是有一个需要优化的点就是这些概念不知道出自哪里，所以理解起来像是在云里穿梭，一会儿在聊应用层的概念，一会儿又跑到网络层协议了。针对...
- 软网推荐:请个多功能纯文本管理助手
-
纯文本不单是指常用的语言文字，还包括各种类型的程序代码、编码等。作为常用的纯文本处理工具，“记事本”显得力不从心。我们可用一款免费软件AlternateTextbrowser，随心所欲地管理各种类型...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)