一 :css 出现的由来
html元素本身就含有一部分样式
html 元素 本身就具备一些样式的,这些样式使得 我们在不添加任何其他样式的情况下,html 元素 也能按照一定的结构规则和样式规则在页面上显示.
比如:div 元素的默认 样式:
strong 元素的默认样式
可以看到html 元素本身是携带一部分 样式的,我们常说的在编写 html 页面时,要注意元素的语义性,就是指 我们要利用html 元素的 这些默认的样式,来进行结构布局,而不要忽略一个元素的默认样式,一味的胡乱编写html页面.
由此看来,样式 本身就是html 文档中的一部分,样式与html 元素本身 结合的很紧密.结合计算机的发展历史,我们可以知道 早期的网站 对网站的样式 没有特别高的要求,所以这些简单的样式就能满足日常的网站开发.即使没有现在这么复杂的css概念与系统,我们也是可以编写出一些具有基本样式的html 页面的.
然而历史是发展的,当计算机的功能不断强大,人们对html 元素这种简单的样式越发不满足,网站嘛,当然是越好看越好,一个只有基本信息的网站和一个能把重要信息用样式特殊标识出来的网站,我相信大多数人会更喜欢后者,所以人们开始探究更丰富的样式系统,并由此产生了很多样式系统,而这些历史上的样式系统也对现在的css 产生了很多遗留问题,使得css 的学习更加复杂与煎熬.
书归正传,当人们意识到 页面需要一个更强大的样式系统来美化html 元素时,css 的时代就来了,它经过一系列的演变,终于发展到了 目前的程度,至于以后,还会更加强大.
二.css 的基础概念
css 表示 层叠样式表,又称串样式列表,级联样式表,串接样式表,阶层式样式表,是为网页添加样式的代码.css的出现是为了美化HTML的并让结构(HTML)与样式(CSS)分离.
css 主要通过两种方式美化HTML
- 为HTML 添加各种各样的样式,比如颜色,字体,大小,下划线等,
- 对HTML 进行布局,按照某种结构显示(css 进行布局-浮动,flex,grid)
从概念来看,css 的出现主要是为了如下的结构目的
1. 一个是 针对单个html元素,使我们在html 元素的默认样式的基础上,添加更丰富的样式,使我们能够更多的控制一个html元素在html文档中的样子
2. 一个是针对一个html,一个html元素应该在浏览器窗口或者说视口中的什么位置显示,使我们能够更好的控制一个元素在浏览器中的位置.
3. 出于结构性考虑,最好把html 元素编写的代码,与css 语言编写的文件分离开来,方便css 文件的管理与复用
三:怎么学习css
从 1994年 css1 的诞生到如今日新月异,风云变化的2023年,可以说css已经走过了将近30年的历史.
任何一门知识,经过30年的洗礼,我们都不能说它是一个很 "简单" 的东西,从态度上我们一定要认识到它的重要性.
任何一样东西,都有它的历史,而它的历史也一定会影响它现在的样子,所以对于一些历史遗留的问题,我们一定要知其所以然,才能更好的理解它.
无论学习任何知识,还是要掌握一定的方式方法,css 的知识点很碎,很碎,很碎,重要的事情说三遍,所以才应该有更好的一条知识线,把所有的 零碎的知识串联起来,方便自己学习与记忆.
虽然css 不是一门真正意义上的编程语言,但是css 的研发机构也对它的复用性 上做了很多努力,在学习中,也应该注重这一点,这样才能有更好的实践.
最后实践是验证真理的唯一标准,要不断的练习,灵活运用,深刻理解,知行合一.
四:css 的学习思路
这里 把css 的几个核心概念与css 出现的目的结合起来,将css 散碎的知识点串联起来,做一个概述,css 核心概念的详细总结会在对应的链接中,详细补充.
从上文 css 出现的原因和目的,我们可以知道,css 想解决如下几个问题
- 使 css 文件与html 文件分离,避免html 页面代码冗余,使项目结构更清晰
- 更好的控制一个html 元素在浏览器窗口中显示的位置
- 为在特定位置上的html 元素 添加更加丰富的样式
现在通过对css 的这几个目的出发,可以更好将css 的相关知识串联起来
1.使 css 文件与html 文件分离,使代码有更好的结构性 ---css 文件 作用于 html 元素的方式
css 中将css 文件 与 html 文件隔离开来, 目的是为了减少html页面代码冗余,使项目结构更清晰,
而当我们要使用css 文件为html 添加样式时,首先要学习的就是如何将css 文件与对应的html 文件关联起来,并添加对应的样式.
要想将css 作用于 html 文档,需要通过一种媒介,将html文档与css文件关联起来,主要包含如下几种方式
- 内联样式
- 内部样式表
- 外部样式表
详细补充,参考链接 --- 后续补充
2. 更好的控制一个html 元素在浏览器窗口中显示的位置
为了更好的控制一个html元素 在窗口中的 位置,css 定义了两套规则来决定一个元素的位置.
- 标准流中的 元素位置的规则.
- 非标准流中的元素的位置规则.
标准流中的元素位置规则
在css 中 标准流中的元素主要通过 对 display 属性的设置来决定一个html元素如何在窗口中显示.
这里我们要了解 首先要了解 什么是标准流 , 然后还要对display属性的几个取值进行学习.
非标准流中的元素的位置规则
css 中 存在 三种 非标准流html 元素
- 1. 被设置了定位特定值的html 元素, 又称为 定位
- 2. 被设置了浮动特定值的html 元素,又称为 浮动
- 3. flex 布局中被设置为flex-item html 元素,又称为flex布局
非标准流元素 又被称为 脱标元素 ,脱标元素分为 非完全脱标元素 与完全脱标元素.
css 通过 position 属性设置一个html 元素的定位方式
通过 float 属性 设置一个html 元素的浮动方式
通过 给一个html 元素的 父元素 设置 display:flex 属性,来使 这个 html 元素 脱标,这种方式又被称为flex 布局,是目前最流行的前端布局方式
如果我们希望 在自己的页面中 能够灵活的将一个html 元素 放到任意的位置,我们需要灵活的掌握这三种布局方式
3.为在特定位置上的html 元素 添加更加丰富的样式
css 出于给 特定位置上的元素 添加更丰富的样式的目的,建立了如下几个机制,来保障我们更好的选中某个元素, 并设置更丰富的样式.
- 为了选中要设置css样式的一个html 元素,添加了选择器机制
- 为了 设置好一个html元素的 边框,内容,宽高 等属性 ,添加了 盒子模型概念
- 为了 选中 要设置 css 样式的 几个 html元素, 添加了 层叠与继承机制
- 为了给 html 元素 添加动画效果,添加了 css 动画机制
- 为了 适配移动端,添加了移动端的特殊适配机制
- 为了 更加丰富的样式设置体验,增加了 BFC 机制
当css 文件与 html文档关联后,想要对某一个html元素添加css 样式时.
1.选择器
首先要做的是选中对应的元素,而要准确的选中某个元素,就涉及到css 的一个核心概念 选择器 ,选择器顾名思义,就是选择某个元素的器械,准确的理解css 为 选择某个html元素 所制定的一套选择规则或策略.
css 中的选择器是多种多样的,而不同的选择器对html 元素的作用级别也是不同的,这里又涉及到选择器的一个概念叫做选择器的权重.
同时选择器不仅可以选中某个html 元素,还可以选中这个html 元素的某个状态,进行特定样式的定制,这里就涉及到选择器的另外一个概念,伪类.
同时 选择器还可以给选中的html 元素的前面和后面添加一些元素,这里涉及到选择器的另外一个概念,伪元素.
2.盒子模型
明确了css 如何选中一个html元素后,我们还需要知道这个html 元素在css 中是如何被定义的,一个html元素的宽度和高度在css中是如何被定义的,这样才能全方位的在css 中对这个html元素进行"装修".
在css 中,选择器选中的一html 元素被称为一个 元素盒子,被称为盒子模型,这个盒子模型是css 中一个特别重要的概念.因为只有明确了 一个html元素的盒子之后,我们才能在这个对这个盒子进行对应的样式定制.
3.层叠与继承机制
层叠
了解完 css 的选择器和 盒子模型后, 我们来思考这样一个问题, 选择器是多种多样的,多种多样的选择器是很方便的.
但是选择器的多种多样也造成了一些问题,比如 同一个html 元素 可能会被 多个选择器同时选中,这个时候就涉及到了css 的 一个非常重要的机制,叫做css的层叠,还记得css 又叫什么玩意吗?层叠样式表.
现在 层叠来了,css 的层叠就是指
- 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置
- 那么属性会被一层层覆盖上去
- 但是最终只有一个会生效
那么多个样式属性覆盖上去, 哪一个会生效呢?
- 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
- 判断二: 先后顺序, 权重相同时, 后面设置的生效;
那么如何知道选择器的权重呢? 这里要引出 另外一个概念,叫做选择器,以及选择器的权重
继承
css 的继承是指 CSS的某些属性具有继承性(Inherited):
- 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
- 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
如何知道一个属性是否具有继承性呢?
常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;
更多 可以从mdn 上查询相关信息
4. 其他
1.css 基础属性 总结
2.元素的隐藏
3.overflow 属性
4.元素 不生效排查思路
五:css 相关联的知识补充总结
1.网络字体
2.精灵图
六:css 的学习网站推荐
1.CSS 官方文档地址:
2.css 推荐文档地址:
developer.mozilla.org/zh-CN/docs/...