CSS概念
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
为什么学习CSS
20 世纪 90 年代初 HTML 语言诞生,这时的 HTML 只包含很少的属性来控制网页的显示效果。伴随着 HTML 的成长,各式各样的样式语言也随之出现,不同的浏览器结合它们各自的样式语言来控制页面的显示效果。
经过不断的发展,HTML 中添加了越来越多的属性来满足页面设计者的需求,随着这些属性的增加,HTML 变的越来越杂乱,而且 HTML 页面也越来越臃肿,于是 CSS 便诞生了。
CSS 的特点
CSS 是 Web 领域的一个突破,它为 HTML 提供了一种描述元素样式的方式,使用 CSS 和 HTML 可以制作出外形优美的网页。总体来说 CSS 具有以下特点:
1) 丰富的样式定义
CSS 提供了丰富的外观属性,可以在网页中实现各式各样的效果,例如:
- 为任何元素设置不同的边框,以及边框与元素之间的内外间距;
- 改变文字的大小、颜色、字体,为文字添加修饰(例如下划线、删除线);
- 为网页设置背景颜色或者背景图片等等。
2) 易于使用和修改
CSS 的样式信息不仅可以定义在 HTML 元素的 style 属性中,也可以定义在 HTML 文档 标签内的 标签中,还可以定义在专门的 .css 格式的文件中,之后再将其引用到 HTML 文档。 推荐使用最后一种定义方式(定义单独的 .css 格式文件),这样可以将 CSS 样式统一存放,方便后期维护。
3) 多页面应用
前面说了可以将 CSS 样式单独存放在一个 .css 格式的文件中,这个文件不属于任何页面,我们可以在不同的页面引用这个 .css 格式的文件,这样就可以统一不同页面的风格。
4) 层叠
层叠就是指可以对同一个 HTML 元素多次定义 CSS 样式,后面定义的样式会覆盖前面定义的样式。 例如整个站点引用了同样的 CSS 样式文件,但想要调整其中某个页面的某些元素,这时就可以针对想要调整的元素单独定义一份样式文件并引用到页面中。这样后来单独定义的样式就会覆盖前面的样式,在浏览器同样只会看到最后设置的效果。
5) 页面压缩
一个网页其中通常包含大量的 HTML 元素,为了实现某些效果我们往往还需要为这些元素定义样式文件,如果将它们放到一起就会使得我们的 HTML 文档过于臃肿。而将 CSS 样式定义在单独的样式文件中,把 CSS 样式与 HTML 文档分开的话就可以大大减小 HTML 文档的体积,这样浏览器加载 HTML 文档所用的时间也会减少。
另外,CSS 样式可以重复使用,不同的元素可以使用相同的 CSS 样式,这样可以避免定义重复的样式,CSS 样式文件的体积也会相应的减小,从而进一步缩短页面加载的时间。
CSS基础知识
css基础知识包括Casading规则、选择器、继承、值、位置和盒模型。
层叠,也就是会涉及到谁先谁后的优先级问题
盒模型是相对重要的一个知识点,CSS盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。通过盒模型的一些特性可以实现一些展现形式,还有负外边距,这是盒模型才有的。
变形,过渡和动画
这是一个我觉得很重要,并且需要掌握的点,transform变形, 从2D、3D到动画的实现,不仅让网页变得更加丰富多彩,同时,在用户体验和操作等等多方面都有很大的好处,当然,这就会涉及到像素,不同屏幕,不同客户端,那么采用什么标准转换呢?于是有了DPR(设备像素比),解决了这一问题。
随着时代的发展,现在的技术越来越完备,在语言方面,也有了CSS预处理器等等一些东西。这节课的内容对我来说很抽象,但是,关于CSS的作用跟意义却是非常明白的。