css那些事儿——读书笔记

• 之前定下的学习计划这些天一直在坚持每天完成一点，牛客网上的编程题已经过了一遍，《css那些事儿》也看了一遍，同时看完了《响应式web设计》这几天也在边忙着实验室的事，边在github上提交最近重新学习css写的布局相关的代码我的github 感觉学习css不能光看书，还是得多多练习。
• 看完了书还是要总结一下，这样心里才有点谱，这也是我看了《如何阅读一本书》中学到的，对于主食类的书，得分析阅读，知道这本书解决了什么问题，对我有什么用处。

---

第1部分：css入门篇

这里我主要想总结的是我平时记忆不牢的地方：

1 css的简写
1.1 背景的简写
background: background-color || background-image || background-repeat || background-attachment || background-position
示例：

body{     background: #f00 url(img/1.gif) no-repeat fixed 0 0;}

* 1.2 字体属性的简写*
font：font-style||font-variant||font-weight|| font-size/line-height||font-family（注意文字大小和行高用/隔开）
示例：

body{     font:italic small-caps bold 12px/140% "Lucida Grande",sans-serif;}

2 . css选择器
总结平时用的比较少的选择器

• 属性选择器可分为4中模式
  E[attr]
  E[attr=”value”]
  E[attr~=”value”]
  E[attr|=”value”]

• E代表任何一个HTML标签，attr代表E标签中的任何一个属性，value代表该属性中存在的属性值。
  E[attr]将匹配具有该属性的值；
  E[attr=”value”]匹配具有attr属性且属性值为“value”的E标签元素；
  E[attr~=”value”]匹配具有“attr”属性且属性值是具有空格符号隔开的字段，其中一个字段等于value的E标签元素；
  E[attr|=”value”]匹配具有“attr”属性且属性值是以value值开始及使用连字符-分隔的的E标签元素；

3 伪类与伪对象

• 伪类可以用来指定一个或多个与其相关的选择符的状态，伪类的形式为：选择符：伪类{属性：属性值；}例如link,visited,hover,active
• 伪对象(元素)是指在html的文档指定的信息之外，创建了文档的额外信息。例如：:first-letter，:first-line，before，after;伪类和伪元素详解

4 选择器的优先级

• 加入了！important后，重要性从高到低为：
  标有！inportant的用户声明（最高）
  标有！important的作者声明
  作者声明
  用户声明
  用户代理声明（最低）
• 对于作者声明有：行间样式，内嵌样式，外联样式表，导入样式表；
• 其中优先级 ：行间样式>内嵌样式>外联样式和导入样式；
• 优先级积分：行间样式积分1000，ID选择器积分100，类选择器，属性选择器积分10，标签，伪类，伪对象积分1。
• 注意内联CSS要比嵌入或链接CSS优先级更高；一个ID选择器要比任意数量的class，属性或元素选择器优先级更高；

5.css的继承属性

• 主要有：字体相关，文本相关，列表相关，还有color,注意背景相关属性不继承，点我查看详细
  

  ---

第2部分 css页面布局篇

• 盒模型介绍
  标准盒模型内容超出容器高度，会溢出可以使用overflow属性，IE的怪异盒模型会自适应高度。点我
• 网页基本布局
  包括居中，两列布局，三列布局，我在github上进行了相应的练习我的github
  

  ---

第3部分 css页面元素篇

1 . 网页文本润色

• text-indent属性可以进行首行缩进，可以利用缩进特性将文字“推”到容器之外，再设置overflow:hidden;将超出的内容隐藏，一般用法text-indent:-9999px;这样做的目的是：若你想用图片代替文字，又想搜索引擎能读到该处的文字可以用此方法；

2 . 图片的处理与美化

• 图片格式的对比：图片格式简介
  -jpeg格式：采用有损压缩，可控制压缩比，最常见，许多移动设备都支持，支持色彩多，照片一般保存为jpeg
  -gif格式：这种格式是用来交换图片(用作统计)的，压缩比高，可组成动画。
  缺点：不能存储超过256色的图像；在网页中使用GIF格式以图表类居多（对色彩要求不高）
  -png格式：是目前保证最不失真格式，采用无损压缩，显示速度快，支持透明图像制作，渐进显示和流式读写（逐渐清晰和一行一行显示），保留图像的名称，作者，版权，创作时间（可将js代码压缩到图片）；缺点：不支持动画，ie6不支持（有解决办法）
  -png-8:图片比GIF小一点，只能支持全透明
  -png-24:色彩最丰富，支持alpha通道的透明
  -webP:支持有损和无损压缩，支持完整的透明通道，也支持多帧动画，没有版权问题。
  BPG:最先进的图片压缩格式，同体积下能提供更高的图象质量
  SVG：优点：矢量图，无损压缩，绘制路径xml语言；缺点：浏览器支持不是很好，主要应用于移动端font-face.

• CSS Sprite技巧分解
  -CSS Sprite可以减轻服务器的负载，提高网页的加载速度，但同时CSS Sprite大多用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约。
  -使用CSS Sprite的过程中需要注意一下几点：

  • 固定容器的宽度和高度
  • 超出部分的背景图片隐藏
  • 背景图片在合并时，需要考虑每张图片的用途，图片之间是否要留间距

---

本书中关于概念的部分就总结到这，后面的部分我会在我的github上补充示例我的github