前端自学——CSS3基本语法和盒模型

CSS3基本语法和盒模型——第1节

CSS3简介

css(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言。

CSS3是CSS的最新版本，相比之前的版本增加了大量的样式、动画、3D特效和移动端特性等。

前端三层

CSS意义

• CSS使样式和结构分离，样式和结构不用“杂糅着写”，而是彼此分开：HTML就负责结构，CSS负责样式。
• HTML和CSS通过选择器结合。

体验CSS的选择器

区别如下图所示：

CSS的本质

• CSS就是样式的“清单”，要书写合适的选择器，然后把指定元素的样式“一条一条罗列”出去。
• CSS没有加减乘除、与或非、循环、选择、判断，CSS不是“编程”，就是简单罗列样式；但是背诵CSS属性很重要，背诵的熟练程度决定了制作网页的速度。

CSS的书写位置

• 内嵌式：直接嵌在.html文件中，在标签对中书写标签队中书写CSS语句；
• 外链式：可将CSS单独存为.css文件，然后使用标签引入它，其优点是可供多个html网页使用。
• 导入式：最不常见，因为导入式引入的样式表，不会等待css文件加载完毕，而是立即渲染HTML结构，所以页面会有几秒出现“无样式”的时间。
• 行内式：即通过style属性直接写在标签身上，但其失去了样式表的批量设置样式的能力，只能给一个标签设置样式，也不太常用。
  CSS3基本语法
  首先书写选择器，再输入一个大括号对，其中添加属性名：属性值，最后一条样式可以不书写分号，也可以不换行；注释样式：/**/

参考：慕课网《前端工程师》课程