1.说明CSS指的是层叠样式表（CascadingStyleSheets）Sass（SyntacticallyAwesomeStyleSheets），一种由buby语言编写的css预处理语言，而html也有严格的缩进风格，与CSS编写规范有很大区别。它不使用大括号和分号，因此没有被广泛接受。Sass是加强CSS的辅助工具，是对CSS的扩展。它在CSS语法的基础上增加了变量、嵌套规则、mixins、继承（extend）、导入（inline）。imports），这些扩展使CSS更加强大和优雅。使用Sass和Sass样式库（例如Compass）有助于更好地组织和管理样式文件，更高效地开发项目。后缀为.sass。SCSS（SassyCSS），一种css预处理语言，SCSS是Sass3引入的新语法，其语法完全兼容CSS3，继承了Sass的强大功能。也就是说，任何标准CSS3样式表都是具有相同语义的有效SCSS文件。SCSS需要分号和花括号，而不是换行符和缩进。SCSS对空白符号不敏感。其实和CSS3语法一样，其后缀分别是.scss。2.css下面是本系的常识点：CSSInlinestyle的写法：将CSS代码写在HTML标签的style属性中。style是一个通用属性，每个标签都有这个属性，rule:Embed：将CSS代码嵌入到HTML文件中，Embedded就是嵌入CSS代码通过HTML中的外部链接：写一个.css扩展名的文件，然后在标签中使用标签将css文件链接到html文件。规则：selector元素选择器、id选择器、class选择器、属性选择器（比如为所有具有title属性[title]的元素设置样式{somestyles}），属性和值选择器（例如用title="hellotitle"[title=W3School]{somestyles}设置所有元素的样式），派生选择器（通过选择定义样式），一共有三种后代选择器：空格分隔；子元素选择器：>分隔，只选择作为某个元素的子元素的元素；adjacentsiblingselector：选择紧跟在一个元素之后的元素，且两者具有相同的Parent元素，比如设置紧跟在h1之后出现的p的字体颜色：h1+p{color:red;};注1：.a,.b逗号表示该类元素只有一个，可多选；注1：.a.b中没有空格，表示同时有两类元素。盒子模型所有的HTML元素都可以看作是盒子。CSS盒子模型本质上是一个盒子，封装了周围的HTML元素。它包括：margin（外边距）、border（边框）、padding（内边距）、content（内容）盒模型允许我们将元素放置在其他元素和周围元素的边框之间的空间中。PositioningPosition属性：指定元素的定位类型。即元素脱离文档流的布局，显示在页面的任意位置absolute：绝对定位；文档流的布局被分开，剩余空间由以下元素填充。定位的起始位置是最近的父元素（postion不是静态的），否则就是Body文档本身。relative:相对定位；不脱离文档流的布局，只是改变了自己的位置，在文档流原来的位置留了一块空白区域。定位从该元素在文档流中的原始位置开始。fixed:固定定位；类似于absolute，但不会随着滚动条的移动而改变位置。静态：默认值；默认布局。辅助属性：position属性只是让元素脱离文档流。如果想让这个元素按照想要的位置显示，需要使用如下属性（position:static不支持这些）：向左边插入多少像素，元素要移动多少像素向右。②right：表示向元素右侧插入多少个像素，元素向左移动多少个像素。③top：表示元素上方插入了多少像素，元素向下移动了多少像素。④bottom：表示元素下方插入了多少像素，元素向上移动了多少像素。注：以上属性的值可以为负数，单位：px。布局（略...）3、sass、scss、css的关系css预处理器css预处理器使用一种特殊的语言来设计网页的样式，然后编译成普通的css文件供项目使用.使用css预处理语言的优点：css更简洁，易于修改，可读性强，适应新，更容易维护代码。css与sass的关系Sass是buby语言编写的一种css预处理语言。它具有与html相同的严格缩进样式。与css编写规范有很大区别。它不使用花括号和分号，所以没有被广泛接受。scss和css的关系SCSS和CSS没有区别，这也是Sass越来越受到大众欢迎的原因之一。简单来说，你可以直接将你现有的“.css”文件修改为“.scss”来使用。sass和scss的关系sass和scss其实是同一种css预处理语言。SCSS是Sass3引入的新语法，其后缀分别为.sass和.scss。3.0之前的SASS版本具有后缀.sass，而3.0之后的版本具有后缀.scss。两者不同。sass之后，scss的书写规范与css基本一致。在sass时代，有严格的缩进规范，没有'{}'和';'。scss与css规范一致。示例代码//sass#sidebarwidth:30%background-color:#faa//scss#sidebar{width:30%;背景色：#faa；}4、sass直接跳过5、scssscsscomment多行注释——这些都是用/**/写的。多行注释保留在CSS输出中。单行注释-这些是后跟//的注释。CSS输出中不保留单行注释。变量$符号用于标识变量；将重复使用的css属性值定义为变量；$highlight-color:#F90;$highlight-border:1pxsolid$highlight-color;//变量可以存在于变量$link-color:blue;a{color:$link_color;//破折号和下划线是等价的，包括混合器和Sass函数的名称}$side:left;.rounded{border-#{$side}-radius:5px;//如果变量需要嵌入到字符串中，则必须写在#{}中。}$nav-color:#F90;//当前样式表可以使用nav{$width:100px;//只能在nav{}中使用，当前样式表的其他地方可以重复定义使用width:$width;color:$nav-color;}//编译后的导航{width:100px;color:#F90;}nestedselectornest#content{article{h1{color:#333}p{margin-bottom:1.4em}}aside{background-color:#EEE}}/*编译后*/#contentarticleh1{color:#333}#contentarticlep{margin-bottom:1.4em}#contentaside{background-color:#EEE}属性也可以嵌套，比如border-color属性，可以写成：p{border:{//注意边框后面必须加冒号。红色;}}在嵌套代码块中，&可用于引用父元素。例如，a:hover伪类可以写成{&:hover{color:#ffb3ff;}}计算函数所有数据类型都支持相等运算==或!=，此外，每种数据类型也有自己支持的运算方式。数值运算：支持数字加、减、乘、除、四舍五入等（+、-、*、/、%）$var:20px;body{margin:(14px/2);顶部：50px+100px；右：$var*10%;}字符串操作：+可用于连接字符串。请注意，如果带引号的字符串（在+的左侧）连接未带引号的字符串，则操作结果将被带引号。反之，一个不带引号的字符串（位于+左边）与带引号的字符串连接，运算结果不带引号p{cursor:e+-resize;}//编译后p{光标：电子调整大小；}p:before{内容：“Foo”+Bar；font-family:sans-+"serif";}//编译成p:before{content:"FooBar";字体系列：无衬线；}代码重用继承继承是基于类的类（有时是基于其他类型的选择器）允许一个选择器继承自另一个选择器。比如已有的class1:.class1{border:1pxsolid#ddd;}//class2要继承class1，需要使用@extend命令：.class2{@extend.class1;字体大小：120%；}MixerMixin避免无休止地重复一个模式//使用@mixin命令来定义一个代码块。 @mixinleft{ float:left; margin-left:10px; }//使用@include命令调用这个mixin。 div{ @includeleft; } //mixin的强大之处在于可以指定参数和默认值。 @mixinleft($value:10px){ float:left; margin-right:$value; }//使用时根据需要添加参数： div{ @includeleft(20px); }插入文件Sass扩展了@import的功能，允许它导入SCSS或Sass文件。导入的文件将被合并并编译成同一个CSS文件。另外，导入文件中包含的变量或mixins可以在导入文件中使用。@import"foo.scss";//将导入文件foo.scss@import"foo";//将导入文件foo.scss@import"http://foo.com/bar";//插入外部文件@import"foo.css";//相当于css的导入命令。控制指令、条件语句、循环语句、自定义函数等高级用法，本部分不一一列举。scss小结这里只是简单介绍一下scss最基础的部分。使用scss，您可以编写清晰、冗余和语义化的css。变量是scss提供的最基本的工具。变量允许单个css值可重复使用，无论是在单个规则的范围内还是跨样式表。变量、混合器甚至scss文件名的命名，通用的_和-可以互换使用。同样基础的是scss的嵌套机制。嵌套可以让css规则嵌套在css规则中，减少常用选择器的重复，让样式表的结构更加一目了然。scss还提供了一个特殊的父选择器标识符&，通过它可以构建更高效的嵌套。混合器允许用户编写语义样式，同时避免在视觉级别上重复样式。使用mixins减少重复，使用mixins使你的css更易于维护和语义化。补充mixins的选择器继承。继承允许你声明类之间的语义关系，通过它你可以保持你的CSS干净和可维护。样式导入，scss的另一个重要特性。通过样式导入，可以将分散在多个sass文件中的内容合并到一个css文件中，避免了项目中通过原生css@import存在大量css文件带来的性能问题。通过嵌套导入和默认变量值，导入允许更强大、可自定义的样式。
