news 2026/6/23 20:18:58

[Web自动化] CSS基础概念和介绍

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
[Web自动化] CSS基础概念和介绍

4.1 CSS基础概念和介绍

4.1.1 CSS的基本概念

CSS,全称Cascading Style Sheets(层叠样式表),是一种用来表现HTML或XML(包括各种XML方言如SVG、XHTML或XML用于已经建立的一些如MathML或RDF的应用)等文件样式的计算机语言。CSS能够对网页进行美化和布局,控制网页的字体、颜色、间距、布局等样式,使得网页的呈现更加丰富多彩和易于阅读。

4.1.2 CSS的特点

样式与内容分离:CSS将网页的样式与结构分离,使得网页的维护更加方便。网页的结构由HTML控制,而样式则由CSS控制。
丰富的样式设置:CSS支持丰富的样式设置,包括字体、颜色、背景、边框、边距、定位等,几乎可以控制网页中的所有视觉元素。
层叠性:CSS的层叠性允许为同一个元素指定多个样式规则,这些规则会根据一定的优先级(也称为权重)进行层叠,最终决定元素的呈现样式。
继承性:CSS的继承性允许子元素继承父元素的某些样式属性,这减少了重复设置样式的需要。

4.1.3 CSS的引入方式

CSS可以通过以下几种方式引入到HTML文档中:
1、内嵌式:
将CSS代码直接写在HTML文档的<style>标签内,这种方式只对当前页面有效。

<head><style>p{color:red;}</style></head><body><p>这是一段红色的文字。</p></body>

2、外联式:
将CSS代码写在一个单独的.css文件中,然后通过HTML的<link>标签引入。这种方式适用于多个页面共享相同样式的情况。

<head><linkrel="stylesheet"href="styles.css"></head>

styles.css文件内容:

p{color:red;}

3、行内式:
将CSS样式直接写在HTML元素的style属性中。这种方式只对该元素有效,且不推荐大量使用,因为它会增加HTML的复杂度。

<pstyle="color:red;">这是一段红色的文字。</p>

4.1.4 CSS的基础选择器

CSS选择器用于选择需要应用样式的HTML元素。基础选择器主要包括以下几种:
1、标签选择器(元素选择器):
根据HTML元素的标签名来选择元素。

p{color:red;}

这条规则会将所有

元素的文字颜色设置为红色。
2、类选择器:
通过元素的class属性来选择元素。类选择器以点(.)开头,后跟类名。

.highlight{background-color:yellow;}
<pclass="highlight">这是高亮显示的文字。</p>

3、ID选择器:
通过元素的id属性来选择元素。ID选择器以井号(#)开头,后跟ID名。需要注意的是,ID在HTML文档中必须是唯一的。

#unique{border:1px solid red;}
<divid="unique">这是唯一的元素。</div>

4、通配符选择器:
使用星号(*)作为选择器,它会匹配文档中的所有元素。

*{margin:0;padding:0;}

这条规则会清除所有元素的默认边距和内边距。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/23 19:31:03

重新发现深圳,找个咖啡/羽毛球搭子一起探索城市的AB面

在深圳这座城市藏着太多惊喜 —— 既有 CBD 的潮酷天际线&#xff0c;也有城中村的烟火小巷&#xff1b;既能沉浸式玩咖啡拉花&#xff0c;也能酣畅打一场羽毛球。想解锁这份精彩&#xff0c;找个合拍搭子就够了&#xff0c;让深圳探索之旅更安心有趣。雨欣一直想体验咖啡拉花&…

作者头像 李华
网站建设 2026/6/23 19:33:21

请求拦截不再难,Symfony 8拦截器实现原理与最佳实践全解析

第一章&#xff1a;请求拦截不再难&#xff0c;Symfony 8拦截器实现原理与最佳实践全解析在现代 Web 应用开发中&#xff0c;对 HTTP 请求进行统一处理是构建高可维护性系统的关键环节。Symfony 8 通过事件监听机制和中间件式设计&#xff0c;提供了灵活而强大的请求拦截能力&a…

作者头像 李华
网站建设 2026/6/23 6:47:02

RAG文本分块策略:优化LLM的知识访问效率

分块并非简单的预处理步骤&#xff0c;而是RAG流水线的核心支柱。优质文本块是有意义、独立完整的知识单元&#xff0c;而劣质文本块只是会误导LLM的孤立碎片。在检索增强生成&#xff08;RAG&#xff09;系统中&#xff0c;若说检索模块是搜索引擎&#xff0c;那么分块&#x…

作者头像 李华
网站建设 2026/6/23 19:06:15

桌面那么点大,性能它偏要狂

AI 基建遍地开花&#xff0c;内存带宽“饭量”暴增&#xff0c;可传统产能却在偷偷“减肥”。于是 DRAM 价格一路高歌——“涨”声响起&#xff0c;根本停不下来&#xff01;科技巨头们囤货如囤年货&#xff0c;闪存和内存条顿时成了超市里的限量薯片&#xff0c;货架越来越空。…

作者头像 李华
网站建设 2026/6/23 19:08:38

基于51单片机的智能水表系统设计

基于51单片机的智能水表系统设计 一、系统设计背景与需求分析 传统机械水表依赖人工抄表&#xff0c;存在效率低下、数据误差大、抄表周期长等问题&#xff0c;尤其在高层住宅、老旧小区中&#xff0c;人工入户抄表不仅耗费人力&#xff0c;还易引发用户隐私纠纷。此外&#xf…

作者头像 李华
网站建设 2026/6/23 15:48:41

基于单片机的交通控制系统

第一章 系统整体架构设计 基于单片机的交通控制系统&#xff0c;核心目标是实现路口交通信号灯的精准控制与车流自适应调节&#xff0c;整体架构分为核心控制模块、信号灯驱动模块、车流检测模块、人机交互模块四大单元。核心控制模块以单片机为核心&#xff0c;负责处理车流数…

作者头像 李华