总结任务11和12

了解到CSS最基本的结构至少应该有基础重置部分、基础样式部分、布局（模块的容器）、模块（可重用的部分）、第三方样式。

架构的CSS样式

有的会分为：header.css，body.css，footer.css

有的会分为：reset.css，main.css，content.css

有的会分为：common.css，然后每个种类再单独划分，比如：首页（index.css）,分页（page.css）

有的直接嵌入到HTML代码中。

就是按照首页 内容 尾页分类 当然也可以按照功能分类 如文本可以分一类，反复使用的模块也可以分一类主要是看个人习惯但大部分还是按照页面布局进行分类可以算是公共都可以应用的，方便直接修改细节如改样式等。

这是我自己设计的公用css类。

命名尽量简写最好以每个字母开头进行命名这样也方便，一眼就知道这个类是干什么用的里面是什么属性。

知道了input type="checkbox"的应用 做子导航栏做如图：

这里需要实现左边的导航栏隐藏起来在需要的时候把原本的页面推过去 我这里要用checked选择器。

checked：属于伪类选择符，checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

如果要实现上面的效果就需要用到这个伪类选择符，注意它是适用于单选按钮或者复选框。

首先要实现我的代码是这样写的 先用body里面属性写上flex布局让2个块状元素并列，让最左边的先消失代，这里注意下

给他最小的宽度 如果不给那么他们2个人相当于在同一个宽度会显得非常挤如图

左边的最小宽度是40%右边的最小宽度正常给100%就行这样多出来的40%就会把右边的页面推过去。

而display: none;这个很重要 直接让它消失包括元素不会影响我的右边页面效果。

参考：https://www.runoob.com/cssref/pr-dim-min-width.html

了解到scss的写法 如怎么使用变量声明$名字：属性值。

可以方便以后如果要修改某一属性值的时候 ， 不用一个类一个类的进去改直接改变量值那么使用这个变量声明的值就会全部修改。

以及css嵌套：

代码如下

#content {  article {    h1 { color: #333 }    <span p<="" span="" style="word-break: break-all;"> { <span margin-bottom<="" span="" style="word-break: break-all;">: 1.4em }  }  <span aside<="" span="" style="word-break: break-all;"> { <span background-color<="" span="" style="word-break: break-all;">: #EEE } }

/* 编译后 */ #content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE }

  在分类的类名里面写它的子类类名 然后像俄罗斯套娃娃一样一个一个打开进行引用，好处就是如果你子类命名在其他类里面是相同的，但父类的命名不同那么这2个就相互不影响而且最主要的是你关闭它的父类的话 如下图：

  它就会把下面的子类全部关闭方便之后阅读性。

父类选择器&

这就主要就是在用伪类的时候你只需要在类名里面用这个&就可以了代码如下

 导入SASS文件;

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

@import 这里用法就是比如你有导航栏和底部是一样的话那么你就可以重新开个css把类写进去然后在你常用的css类里面直接引用代比如我创建一个header.css里面是我专门写一个导航栏的值

那么 header.css的值就可以直接引用 而不用每个页面都要写一遍而 里面的值都是写好的。

这差不多就是 这个任务必须要掌握的知识点，知道怎么应用sass代码，可以帮你节省大量的重复性代码而不用每次一样的代码需要开头写来节省时间提升效率。