CSS入门经典——《CSS设计指南》(第3版)重点总结

《CSS入门经典——《CSS设计指南》(第3版)重点总结》 CSS设计指南.png

关于《CSS设计指南》,本书很薄,在闲暇时间我花了三天的时间就在Kinde for PC上把它给看完了。不得不说,《CSS设计指南》被誉为CSS的经典入门教材是很有道理的,读者只要掌握了HTML的就能够读懂这本书,因为里面作者举出了大量浅显易懂的案例,就连案例中的描述文本也是为了方便读者理解而专门设置的,看得出作者在案例的可读性上着实下了很大一番功夫。而且作为一本包含大量图片和案例的工具书,本书是我看过的在Kinde上排版最为精美的。给亚马逊点个赞!

本书由八个章节组成,我个人把本书划分为四个部分:

第一部分(第1章和第2章) :CSS与HTML的关系

第1章为“HTML标记与文档结构”,从HTML讲起,是因为CSS的用途就是为HTML标记添加样式。第2章为“CSS工作原理”,由添加样式的三种方法(行内样式,嵌入样式,链接样式)和选择符组成。

重点提炼:

  1. 理解DOM:
    • HTML结构所对应的文档对象类型
    • DOM是从浏览器的视角来观察页面中的元素的属性,由此得出这些元素的一个家族树
    • 通过DOM,可以确定元素之间的相互关系
    • 在CSS中引用DOM中的特定的位置,就可以选中相应的HTML元素,并修改其样式属性.
  2. 层叠权重的要点总结:
    • 选择器:id>class>标签
    • 行内样式>嵌入样式>链接样式
    • 设定的样式胜过继承的样式
第二部分(第3章-第4章):CSS基础知识

第3章-第4章分别为“定位元素”、“字体和文本”,这两个章节主要介绍的是CSS的基础知识,包括盒子模型、浮动、定位、背景属性和文本属性。

** 重点提炼:**

  1. 理解盒子模型
    《CSS入门经典——《CSS设计指南》(第3版)重点总结》 Paste_Image.png
  2. 盒子模型的两个重要结论:
    1. 盒子模型结论一:没有宽度的元素始终会扩展到填满其父元素的宽度为止. 添加水平边框, 内边距和外边距, 会导致内容宽度减少,减少量等于水平边框,内边距和外边距的和
    2. 盒子模型结论二:为设定了宽度的盒子添加边框,内边距和外边距,会导致盒子扩展得更宽.实际上,盒子的width属性设定的只是盒子内容区的宽度,而非盒子要占据的水平宽度.(*解决办法,添加box-sizing:border-box)
  3. 定位上下文的常用方法:
    把祖先元素的position设置为relative, 将需要定位的元素设置为position: absolute;
  4. 使用clearfix规则清除浮动:
    .clearfix:after{
    content:”.”;
    display:block;
    height:0;
    visibity:hidden;
    clear:both;
    }
  5. letter-spacing的合理使用:
    默认的字符间距在字体变大时会让文本显得松散,因此缩小大标题的字符间距可以让网页显得更专业.
    《CSS入门经典——《CSS设计指南》(第3版)重点总结》 Paste_Image.png
第三部分(第5章-第7章):CSS综合应用

第5章-第7章分别为“页面布局”、“界面组件”、“CSS实战”。这三章利用前面4个章节讲的CSS基础知识开始进行复杂案例,首先是页面的整体布局,随后过渡到一些较为复杂的网页组件,最后在实战阶段,分析了一个具体的网页案例。这3章的内容对CSS知识点进行综合应用,需要读者更多的去敲代码实践,查看样式效果。

重点提炼:
1.** box-sizing属性的使用:在为固定宽度的元素添加水平外边距,边框和内边距,会导致元素盒子变宽,使用box-sizing:border-box可以达到不使得盒子变宽,只导致内容变窄的效果。
2.
table-cell实现布局的好处:**
* 单元格(table-cell)不需要浮动就可以并排显示,而且直接为他们应用内边距也不会破坏布局
* 默认情况下,一行中的所有单元格高度相同,因而也不需要人造的等高栏效果了
* 任何没有明确设定宽度的栏都是流动的
3.** 热区最大化:**为了保证用户体验,所有视觉样式–内边距,背景, 边框等等,都要应用给链接a,而不要应用给ul或者li, 把a链接display属性设定为block,以便实现热区最大化.

下面是我做的第7章作业,在写页面的过程中,能够感觉到作者试图把尽可能多的CSS属性融入到这个简单的页面中。比如左边的文本区域的第一行作者就尽量多的使用了text的各种属性。

《CSS入门经典——《CSS设计指南》(第3版)重点总结》 Paste_Image.png

第四部分(第8章):响应式设计

第8章为“响应式设计”,作者以第7章的桌面浏览器页面为基础,分别分析了在iPad和iPhone上如何进行优化。鉴于我的自身水平有限,这章并没有精读。

响应式设计的要素:

  • 媒体查询:是一种CSS语法,可以根据浏览器的特性,一般是屏幕或浏览器容器宽度提供的CSS规则
  • 流式布局:是使用em或百分比等相对单位设定的页面总体宽度,让布局能够随屏幕大小而缩放
  • 弹性图片:是使用相对单位确保图片再大也不会超过其容器

图片来自:

  1. [英]Charles Wyke-Smith. CSS设计指南(第3版) (图灵程序设计丛书 93) . 人民邮电出版社. Kindle Edition.
    原文作者:李棠辉
    原文地址: https://www.jianshu.com/p/79512fe4ec99
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞