读《精通css》--第二章基础知识

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了读《精通css》--第二章基础知识相关的知识,希望对你有一定的参考价值。

一. 常用的选择器:类型选择器和后代选择器、ID选择器和类选择器、伪类选择器(:link,:visited,:hover,:active,:focus)

 

二. 通用选择器:*  ( 通配符,也可以用来对某个元素的所有后代应用样式)

 

三. 高级选择器:CSS有向后兼容性,即如果浏览器不理解某个选择器,那么它会忽略整个规则。对于站点功能或布局很重要的任何元素上,都应该避免使用这些高级选择器。

  1. 子选择器和相邻同胞选择器:> +    (IE6不支持)

  2. 属性选择器:根据属性是否存在 或者 属性的值    (IE6不支持)

    具体可以查看W3C:http://www.w3school.com.cn/css/css_selector_attribute.asp

  3. 层叠和特殊性:

    1)层叠的重要度次序:(css样式表)

      标有!important的用户样式
      标有!important的作者样式
      作者样式
      用户样式
      浏览器/用户代理应用的样式

    2)特殊性:选择器的特殊性分为四个等级a、b、c、d

      如果是行内样式,a=1;

      b等于ID选择器的总数;

      c等于类、伪类、属性选择器的数量;

      d等于类型选择器和伪元素选择器的数量。

    总之:尽量保持一般性样式非常一般,特殊样式尽可能特殊,这样就不需要覆盖特殊样式了。如果发现不得不多次覆盖一般样式,则从更一般的规则中删除需要覆盖的声明,并应用于需要它的每个元素。

  4. 继承:不要将继承和层叠混为一谈!

    应用样式的元素的后代会继承样式的某些属性,比如颜色和字号。 直接应用于元素的任何样式总会覆盖继承而来的样式。

    继承使开发人员不必在元素的每个后代上添加相同的样式。如果打算设置的属性是继承而来的属性,那么也可以将它应用于父元素。

 

 

四. 规划、组织和维护样式表:

  1. 对文档应用样式:导入样式表比链接样式表慢

  1)设计代码结构:

  A. 一般性样式:

    主体样式

    reset样式

    链接

    标题

    其他元素

  B. 辅助样式:

    表单

    通知和错误

    一致的条目

  C. 页面结构:

    标题、页脚、导航

    布局

    其他页面结构元素

  D. 页面组件

    各个页面

  E. 覆盖

  2)注释风格:

  3)自我提示:

    a. @todo表示某些东西需要在以后进行修改、修复和复查;

    b. @bugfix表示代码或特定浏览器遇到的问题;

    c. @workaround表示并不完善的权宜之计。

  4)删除注释和优化样式表

以上是关于读《精通css》--第二章基础知识的主要内容,如果未能解决你的问题,请参考以下文章

第二篇:前端基础之CSS

微搭低代码从入门到精通

微搭低代码从入门到精通

微搭低代码从入门到精通

微搭低代码从入门到精通

零基础如何入门到精通人工智能Pytorch, 深度学习,如何跟进AI领域的最新算法,如何读论文找代码