前端体系复习-html和css（三）

知识不过脑子
267 阅读5分钟

二. CSS

2.1. 认识CSS

CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表） 是为网页添加样式的代码。

CSS是一种语言吗？(知道即可)

  • MDN解释：CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言；
  • 维基百科解释：是一种计算机语言，但是不算是一种编程语言；

历史

早期的网页都是通过HTML来编写的，但是我们希望HTML页面可以更加丰富:

这个时候就增加了很多具备特殊样式的元素：比如i、strong、del等等；

后来也有不同的浏览器实现各自的样式语言，但是没有统一的规划；

1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS，在1996年的时候发布了CSS1； 

直到1997年初，W3C组织才专门成立了CSS的工作组，1998年5月发布了CSS2； 

在2006~2009非常流行 “DIV+CSS”布局的方式来替代所有的html标签；

从CSS3开始，所有的CSS分成了不同的模块（modules），每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容。

直到2011年6月7日，CSS 3 Color Module终于发布为W3C Recommendation。

总结：CSS的出现是为了美化HTML的，并且让结构（HTML）与样式（CSS）分离；

  • 美化方式一：为HTML添加各种各样的样式，比如颜色、字体、大小、下划线等等；
  • 美化方式二：对HTML进行布局，按照某种结构显示（CSS进行布局 – 浮动、flex、grid）；

2.2. CSS规则

CSS这么重要，那么它的语法规则是怎么样的呢？

属性名（Property name）：要添加的css规则的名称；

属性值（Property value）：要添加的css规则的值；

2.3. 三种编写规则

CSS提供了3种方法，可以将CSS样式应用到元素上：

  • 内联样式（inline style） ：内联样式表存在于HTML元素的style属性之中。 CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;

image.png

很多资料不推荐这种写法：

  1. 在原生的HTML编写过程中确实这种写法是不推荐的

  2. 在Vue的template中某些动态的样式是会使用内联样式的；

  • 内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）  将CSS放在HTML文件head元素里的style元素之中。

image.png 在Vue的开发过程中，每个组件也会有一个style元素，和内部样式表非常的相似（原理并不相同）；

  • 外部样式表（external style sheet）  外部样式表（external style sheet） 是将css编写一个独立的文件中，并且通过link元素引入进来；

使用外部样式表主要分成两个步骤：

  • 第一步：将css样式在一个独立的css文件中编写（后缀名为.css）；
  • 第二步：通过link元素引入进来；

image.png @import：

可以在style元素或者CSS文件中使用@import导入其他的CSS文件

image.png

2.5. 常见的CSS的官方文档：

CSS官方文档地址： www.w3.org/TR/?tag=css

CSS推荐文档地址： developer.mozilla.org/zh-CN/docs/…

由于浏览器版本、CSS版本等问题，查询某些CSS是否可用：

可以到caniuse.com/查询CSS属性的可用性…

三. 知识点补充

3.1. link元素

link元素是外部资源链接元素，规范了文档与外部资源的关系

link元素通常是在head元素中

最常用的链接是样式表（CSS）：

此外也可以被用来创建站点图标（比如 “favicon” 图标）；

◼ link元素常见的属性：

href：此属性指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的。

rel：指定链接类型，常见的链接类型：developer.mozilla.org/zh-CN/docs/…

icon：站点图标；

stylesheet：CSS样式；

3.2. 颜色表示方法

1.颜色关键字:, 例如, red, yellow 等

2.RGB有三种表示方式：

所有颜色都是由三原色R(red)G(green)B(blue)组成，也就是通过调整这三个颜色不同的比例组合成其他的颜色，RGB各个原色的取值是0~255。

  • RGB颜色可以通过以#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示。

  • 方式一：十六进制符号：#RRGGBB[AA]

    • R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；A是可选的。

      • 比如，#ff0000等价于#ff0000ff；

  • 方式二：十六进制符号：#RGB[A]

    • R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；

    • 三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版。

      • 比如，#f09和#ff0099表示同一颜色。

    • 四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。

      • 比如，#0f38和#00ff3388表示相同颜色。

  • 方式三：函数符： rgb[a](R, G, B[, A])

    • R（红）、G（绿）、B （蓝）可以是（数字），或者（百分比），255相当于100%。
    • A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）。

developer.mozilla.org/zh-CN/docs/…

3.4. 浏览器的渲染流程：

根据HTML代码生成DOM Tree 

根据CSS代码生成CSSOM

合并DOM Tree 和CSSOM整合生成Render tree

计算布局

绘制

为什么CSS要放在头部：

CSSOM 可以和DOM Tree可以同时构建

是为了在DOM Tree加载完之前，就加载完CSSOM，这样DOM tree一加载完就可以和CSSOM整合生成Render Tree，一次性渲染完成，避免重复渲染。

为什么JS要放在后面：

但是在执行中，html解析的时候遇到js标签，会停止解析html，而去加载和执行js代码，因为js代码可以操作我们的Dom，所以浏览器希望html解析的Dom和js操作的DOM放在一起形成最后的DOM，而不是去频繁的去生成DOM树。

JS会阻塞暂停页面的渲染，放在前面会导致页面渲染时间变得很长。

defer,asnyc可以异步

  • defer,同样是立即下载，延迟执行,

  • Async,不让页面等待下载，异步执行其他，不能控制执行循序的 segmentfault.com/a/119000001…

avatar
文章
阅读
粉丝