今天完成的事件

  总结任务11-13

架构的CSS样式

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

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

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

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

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

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

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

了解sass语法：

首先第一个是 变量声明和引用，

$highlight-color: #F90;

这个东西主要在于我们把经常用到的值如宽和高的值，已经颜色啊 可以自己编一个进行引用代码如下：

我们看到  那个文字的大小30px我用sass 声明变量代替了，这里最主要一点就是 当你要改变30px这个值的时候在没有变量前我们要一个类一个类进行修改

但是用了变量我们就可以直接修改变量的值 而其他不同类的值也会随着改变减少重复性工作，我们把他改成18效果如下：

  这就是改完18后的字样可以替换重复性工作。

 嵌套css规则代码如下

这要做的好处非常多 比如 如果你在这父类进行命名 而其他类也有相同的命名 那么他们之间是不会有影响的，因为嵌套的原因 它是像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

按在CSS显示出是这样的

#content article h1 { color: #333 } 

#content article p { margin-bottom: 1.4em } 

#content aside { background-color: #EEE }

也就是说它会加上里面所以的套过类名字 即使你当时书写的类名字相同 但父类的名字不同所以里面的值是不受影响的，而且这样写很方便检查代码，以前我代码很长 要看好久而现在你只需要把父类的关上如上面图片 就可以把里面子类全部收入进去增加了可读性。

而且也让你的命名更方便了。

父类选择器&

它的解释是一般情况下，sass在解开一个嵌套规则时就会把父选择器（#content）通过一个空格连接到子选择器的前边（article和aside）形成（#content article和#content aside）。这种在CSS里边被称为后代选择器，因为它选择ID为content的元素内所有命中选择器article和aside的元素。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接。

 代码如下：

这样你就可以使用hover效果 如果你不用这&父类选择器那么你 就要写成.A:hover .pictur-wrap 而且 这东西还不能随便放在嵌套里面必须放在第一个父类下代码如下：

这样的情况 就很麻烦 如果你写的很长 那你就要找到子类的选择，  用&可以很直接的看到父类引用的是那个子类方便可读性。

  代码规范：

1.  所有的命名最好都小写

2.属性值要用双引号括起来，且一定要有值

2.每个标签都要有开始和结束，且要有正确的层次，排版有规律工整

4.空元素要有结束的tag或开始tag后加上

5.H1到H5定义，遵守从小到大的原则，体现文档结构有利于搜索引擎查询。

6.给每一个表格和表单加上唯一，结构标记ID

7.给图片加上alt标签

8.尽量英文命名原则

9.尽量不缩写除非一眼能看明白的单词

CSS书写顺序

1.位置属性如pasition top right z-index display等

2.大小如 widht height padding margin 

3.文字系列 font,ine-height,;etter-spacing .color text-align

4.背景 background border

5其他 

css缩写规范

如padding margin，在写上下左右距离的时候不要写错padding-top padding-left等

要写成 padding 0 0 0 0; margin 0 0 0 0 ;4个值分布表示上左下右，在写数字小数点的时候不要写0.8px  要写成.8px 去掉小数点前面的0，

css选择器命名规范

长命名的要有词组可以用中横线来为选择器命名。不要随意使用ID命名 因为是唯一的而且不能多次使用，用class类选择器可以重复使用另外ID优先级优先class。