百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第四天

  1. 背景,边框,列表,链接相关属性

    这个查文档就好了

  2. CSS 各种选择器的概念,使用方法及使用场景

    简单选择器:元素选择器 、类选择器、 id选择器、通用选择器*
    属性选择器:存在和值属性选择器、字串值属性选择器
    伪类选择器:太多了,常用的有四种 :link,:visited、:hover、:avtive
    伪元素选择器:::after ::before ::first-letter ::first-line ::selection ::backdrop
    由于历史原因 css2 :after 、:before(不推荐这样用了)

  3. CSS 选择器的优先级

    1. 先明确一点,特指度高则优先级高,使用!important可提高优先级

      CSS选择符的特指度,由它选择符中包含标签的多少、class和id决定
      
      特指度的计算
      计分公式:“ I-C-E ” 三个字母用“ - ”分隔符组成
      选择符中有一个id,  "  I  " 位置加1
      选择符中有一个class,“C”  位置加1
      选择符中有一个标签(元素),“ E ” 位置加1
      得到一个“三位数”,这并非真正意义上的三位数
      
    2. 如果有多个选择器特指度相同,那么就由多个选择器的位置决定
      !important > 行内样式 > 内嵌样式 > 外联样式写在后面的 > 外联样式写在前面的
      
      注意 : 权值实际并不是按十进制,用数字表示只是说明思想,一万个class也不如一个id权值高 。 (不如用一个1x4 类似向量形式来表示多好,清晰明了)

层叠机制

层叠性: css处理冲突的能力

层叠就是对样式表的叠加,是某种样式在样式表中逐层叠加的过程,对于某个标签的特定属性值的多个来源,浏览器将最终确定使用那一个。这里面有一套规则。
  1. 规则一 找到应用每个元素和属性的所有声明。检查每一条css规则并标记出收到影响的HTML标签
  2. 规则二 按照顺序和权重进行排序。 浏览器依次检测5个来源,匹配并更新有定义的值,声明可以通过!important提升权重。

    浏览器默认样式表
    用户样式表
    作者链接样式表
    作者潜入样式表
    作者行内样式表
    
  3. 规则三 计算特值度进行排序。特指度(specificity)即一条规则有多么明确,选择符的特指度由它所包含多少标签,类名和id决定。

    CSS特指度的计算规则 (特制度很大程度上决定优先级)
      CSS选择符的特指度,由它选择符中包含标签的多少、class和id决定
      特指度的计算
      计分公式:“ I-C-E ” 三个字母用“ - ”分隔符组成
      ①选择符中有一个id,  "  I  " 位置加1
      ②选择符中有一个class,“C”  位置加1
      ③选择符中有一个标签(元素),“ E ” 位置加1
      ④得到一个“三位数”,这并非真正意义上的三位数
    
  4. 规则四 顺序决定权重 在特指度相同的情况下,后声明胜出。


这是一条胡乱的分割线


简单层叠要点—《CSS设计指南》一书
  规则一:包含id的选择符胜过包含class选择符,包含class选择符胜过包含标签的选择符
  规则二:如果几个不同来源样式都为同一标签的同一属性定义了样式,行内样式胜过嵌入样式,嵌入样式胜过链接样式,在链接样式中,如果特指度相同,后声明胜过先声明
  规则三:手动设定样式胜过继承样式。
0条评论