CSS基础:简单介绍CSS

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生,2年时间从1800到月入过万,工作5年买房。 分享成长心得。

259篇原创内容-公众号

后台回复“前端工具”可获取开发工具,持续更新中

后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

我们之前已学习了HTML 基础,接下来咱们继续聊 web 前端开发的第 2 个基础技能——CSS。

CSS(Cascading Style Sheets,层叠样式表) 是用于控制网页样式和布局的一种样式表语言。用于描述网页的样式和布局,包括字体、颜色、大小、间距、边框等方面。

假如说,HTML 元素是一辆汽车,HTML 标签可以决定汽车的基本结构和功能,如车轮、车身和车门等。而 CSS 就像是汽车的油漆和装饰,它可以改变汽车的颜色、图案、贴纸等外观特征,让汽车看起来更加吸引人或者适应不同的场景。

比如,我之前带着学员写过的网易云网站,如果只有框架没有 CSS,那么页面就只剩下标签堆砌,预览效果如图。

图片

但如果加上 CSS,就像给网页穿上了一套美丽、标准,整洁的皮肤一样,如下图,这就像是,毛坯房和精装修的区别,对吧,hah。

图片

对,这就可以解释为 CSS 的最最重要的作用之一——布局网页。

那关于 CSS ,也是有长达近30年的历史了。了解它的历史,对于学习和理解 CSS 非常重要,可以帮助你更好地掌握 CSS 的语法和特性,了解网页设计的发展趋势,理解 CSS 的标准和规范,以及学习和使用其他前端技术。

ok,那我们一起来看看吧。

发展史

随着技术的不断发展,CSS 也不断更新迭代,目前主要有三个主要版本:CSS1、CSS2 和 CSS3。

CSS1 是最早的版本,于 1996 年推出,引入了基本的样式控制功能,如文本样式、颜色和背景等,当下已基本废弃。

CSS2 在 1998 年发布,增加了更多的样式属性和布局控制功能,如浮动和定位等。

而 CSS3 是最新的版本,于 2011 年开始逐步推出,引入了更多的新特性,如动画、过渡效果、阴影、圆角等,以及对响应式布局和移动端优化的支持。

我们本次呢,是先学习 CSS2,为什么不直接学习最新的 CSS3 呢?有以下几点理由。

1、历史沿革: CSS2 是 CSS 的第二个版本,是在 CSS1 的基础上进行了扩展和改进。学习 CSS2 有助于理解 CSS 的发展历程,为进一步学习 CSS3 和未来的 CSS 版本打下坚实基础。

2、广泛适用: 了解并掌握 CSS2 是确保网页在不同环境下正常显示的关键。

3、基础技能: CSS2 包含了 CSS 的核心概念和基本功能,如选择器、盒模型、布局、样式属性等,这些都是学习 CSS 的基础知识。通过学习 CSS2,可以建立起对 CSS 技术体系的全面理解,为进一步学习和尽快应用 CSS3 奠定坚实基础。

综上所述,学习 CSS2 对于前端开发者来说是非常重要的,它是打开 CSS 技术之门的第一步,也是构建稳健、兼容性强的网页应用的基础。

总结

总之,前端小白可以通过掌握基本的样式设计和布局技能,开始构建网页,比如,模仿一些知名的常用的电脑端网站,如淘宝、腾讯新闻、QQ 音乐、网易云音乐等。

随着刻意练习熟练度增加,后续才可以逐渐提升到更复杂和丰富的网页设计和开发中。

HTML 和 CSS 是 web 开发中最基础、最重要的 2 种技术。务必要认真把基础打牢~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/591825.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java中Date类,SimpleDateFormat类和Calendar类

Date类 public Date() 创建一个Date对象,代表的是系统当前此刻的日期时间 public Date(long date) Constructs a Date object using the given milliseconds time value. 把时间毫秒值转变成Date日期对象 public void setTime(long date) Sets an existing Date ob…

SQLite下一代查询规划器(十)

返回:SQLite—系列文章目录 上一篇:SQLite 查询优化器概述(九) 下一篇:SQLite的架构(十一) 1. 引言 “查询规划器”的任务是弄清楚 找出完成 SQL 语句的最佳算法或“查询计划”。 从 SQLi…

顶象全系列产品升级,对抗AI带来的新威胁

4月2日,在顶象CSDN直播间,最新一期“业务安全大讲堂”上,顶象数据科学家翼龙与资深解决方案专家鳯羽,围绕当前备受关注的AI威胁、人脸风险进行深入分享,并详细介绍针对AI威胁的最新反欺诈技术与安全产品。 AI威胁带来的…

【信号处理】基于变分自编码器(VAE)的图片典型增强方法实现

关于 深度学习中,经常面临图片数据量较小的问题,此时,对数据进行增强,显得比较重要。传统的图片增强方法包括剪切,增加噪声,改变对比度等等方法,但是,对于后端任务的性能提升有限。…

面试复盘1 - 测试相关(实习)

写在前:hello,大家早中晚上好~这里是西西,最近有在准备测试相关的面试,特此开设了新的篇章,针对于面试中的问题来做一下复盘,会把我自己遇到的问题进行整理,除此之外还会进行对一些常见面试题的…

【解决】Unity Profile | FindMainCamera

开发平台:Unity 2020.3.7f1c1 关键词:FindMainCamera   问题背景 ModelViewer 是开发者基于 UnityEngine 编写的相机控制组件。ModelView.Update 中调度52次并触发3次GC.Collect。显然并不期望并尽可能避免 Update 造成的GC 问题。事实上 FindMainCame…

稀碎从零算法笔记Day35-LeetCode:字典序的第K小数字

要考虑完结《稀碎从零》系列了哈哈哈 这道题和【LC.42 接雨水】,我愿称之为【笔试界的颜良&文丑】 题型:字典树、前缀获取、数组、树的先序遍历 链接:440. 字典序的第K小数字 - 力扣(LeetCode) 来源&#xff1…

【面试经典150 | 动态规划】不同路径 II

文章目录 写在前面Tag题目1方法一:动态规划方法二:空间优化 题目2方法一:动态规划空间优化 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法,两到三天更新一篇文章,欢迎催更…… 专栏内容以分析题目为主…

跟着Kimi Chat学习提示工程Prompt Engineering!让AI更高效地给你打工!

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,所以创建了“AI信息Gap”这个公众号,专注于分享AI全维度知识…

DTFT及其反变换的直观理解

对于离散时间傅里叶变换(DTFT)及其反变换的讲解,教材里通常会先给出DTFT正变换的公式,再举个DTFT的简单变换例子,推导一下DTFT的性质,然后给出DTFT反变换的公式,再证明一下正变换和反变化的对应关系。总的来说就是&…

conda修改默认安装python版本为指定版本

1.查看conda中当前的python版本号: 打开Anaconda Powershell Prompt 输入python -V 回车会输出版本号 2.查看conda所支持的python版本,并选择指定版本安装 选择一个3.9.13版本的进行安装 安装命令: conda install python=3.9.13 如果一直卡在这个画面,请使用管理员权限运行…

python ---- %r %s格式输出的区别

在python中, % s和 % r是我们常用的格式符,它们的用法基本一致,但作用却不尽相同,下面简要说明一下两者的区别: 1. % s是将对象 / 变量传递到str()方法中,并将其转化为面向用户的可阅读的格式。 2. % r是将…