掌握CSS:新手前端学习指南

发表时间: 2022-08-09 16:12

要想学习前端,要想学习程序开发,你一定听过CSS,它是用来控制网页外观的一门技术,指的是“Cascading Style Sheet层叠样式表)”。我们知道,前端最核心的3个技术是HTMLCSSJavaScript,那么,你知道这三者的关系是什么吗?

HTMLCSSJavaScript三者都是用于控制网页的技术,只不过控制的具体目标有所不同,HTML用于控制网页的结构,CSS用于控制网页的外观,JavaScript控制的是网页的行为。

从这个角度来讲,这三者的学习步骤一定是HTMLCSSJavaScript,因为CSS做的更多的是布局上的工作,要想学好CSSJavaScript一定得自己先把原本HTML的框架弄得足够清晰。由于前面已经写过一篇关于HTML的文章,所以今天主要来介绍控制网页外观的这项技术CSS,想要了解HTML的,把文章链接粘贴在下面了,感兴趣的小伙伴可以去看看:

https://www.toutiao.com/i7127561327534834213/

一、CSS介绍

CSS1994年被提出,1996年由Internet Explorer 3首次实现,前面已经讲过它实际上是一门用来控制网页外观的技术,尽管它是web技术栈中最容易被忽视的一部分,但一旦你的项目编写了清晰的CSS代码,你就会发现你再也离不开它了。

CSS的世界是很庞大的,并且近几年涌现的新特性也越来越多,2016年我们见证了Flexbox的崛起,2017年网格布局开始兴起,混合模式、盒阴影、变换、过渡也刚刚普及。新的CSS特性在未来还会源源不断地出现,所以尽管初学者可以快速上手CSS,但也一定不要小瞧它,因为想要达到精通的境界必须投入大量的时间、精力才行,称得上是“只需一分钟就能学会,却要用一辈子的时间去精通”。

二、CSS重点基础知识


(一)层叠

“层叠”就是“CSS”里的“C”,代表cascade

层叠是指CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为全中高的覆盖权重低的,因此也被称作层叠。每个CSS选择器都会有一个权重(行内1000id100class10tag1、可以这样认为),当两个选择器同时配置同一元素的同一属性时(比如一个设置colorred,另一个colorblack),就会产生冲突,而解决冲突的方案就是CSS选择器的权重,权重高的来覆盖权重低的。所以层叠指的就是这一系列规则,它决定了如何解决冲突,是CSS语言的基础。下面来分析层叠的规则,声明冲突时,层叠会依据三种条件解决冲突:

1、样式表的来源

样式是从哪里来的,包括你的样式和浏览器默认样式等。

2、选择器优先级

哪些选择器比另一些选择器更重要。

3、源码顺序

样式在样式表里的声明顺序。

层叠的规则就是按照如上顺序来考虑的,也可以看看下面这个图:


(二)相对单位

CSS中的相对单位是CSS单位中的一种,除此之外还有绝对单位、频率单位、时间单位、分辨率单位、角度单位、百分比单位等,这里就不细讲了,主要还是来讲一下相对单位。相对单位就是相对于另一个长度的长度。CSS中的相对单位主要分为两大类:

1、字体相对单位

它们都是根据font-size来进行计算的。常见的字体相对单位有:emremexch

2、视窗相对单位

它们都是根据视窗大小来决定的。常见的视窗相对单位有vwvhvmaxvmin

所谓的视窗,在web端指的就是可视区域,移动端的视窗指的就是布局视窗。如果视窗大小发生了变化,那么这些值都会随之变化。


(三)盒模型

CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框,可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种盒子模型概念,通过定义一系列与盒子相关的属性,可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。

CSS盒模型可以看成是由从内到外的四个部分构成,即内容区(content)、内边距(padding)、边框(border)和外边距(margin)内容区是盒子模型的中心,呈现盒子的主要信息内容;内边距是内容区和边框之间的空间;边框是环绕内容区和内边距的边界;外边距位于盒子的最外围,是添加在边框外周围的空间。

三、CSS常用属性

CSS常用属性可以查看以下图片:

通过以上介绍,相信大家对CSS已经有了初步的了解,当然,只了解这些是远远不够的,这只是CSS基础知识的一小部分,目的是为了让大家对CSS形成正确的概念和印象。总的来说CSS入门容易,但想要精通并不简单,学习CSS也并不是学习一两个小技巧,而是要理解这门语言的方方面面,并知道如何将其搭配使用。相信在你的努力学习和融会贯通之下,你一定能成为真正的web开发高手。