zoukankan      html  css  js  c++  java
  • 《css设计指南》 读书笔记 一

    《css设计指南》这本书是一个大神同学介绍给我的,据说覆盖了几乎所有前端面试的有关css的知识点,所以赶紧买来看看。( ps:这本书貌似绝版了,可以上淘宝买复印本,也可直接看电子书。 )


    1. 闭合标签,自闭合标签。 html5中,将忽略所有自闭合标签最后的 / 。可是建议在最后仍然加上  空格加/ 以规范格式。
    2. 所有img标签都需要加上alt属性。 ps:视障用户使用的屏幕阅读器会读出图片的alt属性。
    3. 行内、块级标签。  块级: h1~h6, p, ol/ul, li, blockquote 。     行内: a, img, em, strong, abbr。
    4. <!-- 这里是html5网页模板 -->
      <!DOCTYPE html>
          <html>
          <head>
              <meta charset="utf-8">
              <title>title</title>
          </head>
          <body>
              <!-- 这里是网页 -->
          </body>
      </html>
    5. 在html的编辑器中一个tab等于4个空格,虽然tab方便,但是用4个空格比较好。
    6. css选择器: 大致分3种。 上下文选择器、id和类选择器、属性选择器。
    7. 上下文选择器又分为: 普通上下文选择器(p a{....})和特殊上下文选择器( > , + , ~ , * )
    8. 什么时候用id什么时候用class。 当一个元素是页面里独一无二的元素的时候,用id( 因为id只能用一个 ),当然这个独一无二的id的元素一定要有较大的作用。 class是用来标识一组具有相同特征的元素,毕竟叫 类 。
    9. 书上有一段话我感觉必须得强调一下,它是这么讲的: 要避免Web开发专家Jeffrey Zeldman说的类泛滥——标记中的麻疹”出现。什么意思呢?就是说你不要像使用ID一样,每个类都指定一个不同的类名,然后再为每个类编写规则。如果你确实有这种随意使用类的习惯,那说明你可能像大多数对CSS充满激情的初学者一样,还不了解继承和上下文选择符的作用。于是,你可能会给每个标签都重复写同样的样式(比如为页面中很多标签分别指定相同的字体)。实际上,继承和上下文选择符能让不同的标签共享样式,从而降低你需要编写和维护的CSS量。
    10. 伪类: :link :hover :visited :active     :focus      :target     :first-child/:last-child     :nth-child(n是数字,也可以是odd/even奇偶)
    11. 伪元素:   ::first-letter(首字符)  ::first-line(首行)   ::before/::after
    12. 一个冒号(:)表示伪类,两个冒号(::)表示CSS3新增的伪元素。尽管浏览器目前都支持对CSS 1和CSS 2的伪元素使用一个冒号,但希望你能习惯于用双冒号代替单冒号,因为这些伪元素最终可能都会被淘汰掉。更多相关信息,可以参见这里:http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#pseudo-elements
    13. 浏览器最基本的层叠css样式顺序
      1. 浏览器默认样式
      2. 用户样式表
      3. 作者链接样式表
      4. 作者嵌入样式
      5. 作者行内样式
    14. !important 用于增加css样式的权重。 缺点:很有可能会让用户的个人设定不起作用,即后续的任何该css的不同值加在上面的都不起作用。

    这里也就选择了书中的前两章的重点,并没有非常详尽,如果要看详细一些可以看pdf版。网上很好找,如果没有也可以问我要,邮箱neuscx@163.com

  • 相关阅读:
    LeetCode 1110. Delete Nodes And Return Forest
    LeetCode 473. Matchsticks to Square
    LeetCode 886. Possible Bipartition
    LeetCode 737. Sentence Similarity II
    LeetCode 734. Sentence Similarity
    LeetCode 491. Increasing Subsequences
    LeetCode 1020. Number of Enclaves
    LeetCode 531. Lonely Pixel I
    LeetCode 1091. Shortest Path in Binary Matrix
    LeetCode 590. N-ary Tree Postorder Traversal
  • 原文地址:https://www.cnblogs.com/neuscx/p/5140398.html
Copyright © 2011-2022 走看看