第六届字节跳动青训营第二课 | 青训营

78 阅读2分钟

1.CSS选择器的特异度

一条界面内可以写多个选择器,可以选择同样的一个元素

(1)性质:选择器的特殊程度,选择器越特殊优先级就越高。

<article>
  <h1 class = "title">拉森火山国家公园</h1>
  
  <style>
   .title{
   color:blue;
   }
   
   article h1{
   color:red;
   }
   </style>
2.CSS继承

(1)继承:某些属性会自动继承其父元素的计算值,除非显式指定一个值。

<p>This is a <em>test</em>
of <strong>inherit</strong>
</p>

<style>
 body{
 font-size:20px;
 }
 p { color:blue;
 }
 em {
 color:red;
 }
 </style>

(2)宽度不可直接从父级继承,font-size可以直接从父级继承

(3)显示继承
*{
  box-sizing:inherit;
  }
  html{
  box-sizing:border_box;
  }
  
  .some-widget{
  box-sizing:content-box;
  }

优点:通过一个容器就可改变该容器内所有的元素

(4)初始值概念:每一个元素在规范里就已经规定好它的一个初始值,当一个元素它是不可继承的又没有给其设置属性,在这时候它将会用到初始值;或者它是可继承的,但没有继承到,也会push。
(5)CSS中,每个属性都有一个初始值。
background-color的初始值为transparent
margin-left的初始值为0
可以使用initial关键字显示重置为初始值
background-color:initial

概念 (1)元素标签——有双标签,单标签 (2)元素属性——存在于标签内部的, 分为系统属性,自定义属性 属性指的是一个键值对,key,value (3)

hello demo1

——<元素标签>文本节点</元素标签> 2.尝试html和css部分语法合作完成特定功能 p13 ——title是什么

3.块级元素和行内元素的区别(重点) 示例:p元素一块级元素 span元素—行内元素

4.常用的块级元素p15 (1)标题元素,只有6个,数字大小和显示大小的关系 h1最大 (2)p,段落元素 ——空格,  ——换行,

5.注释语句 ---注意区分不同语言的注释语句 (C语言:"//" C#语言:“//、/* */" python:"#" html:")

6.列表元素(重点) (1)无序列表 元素标签:

    不可见元素;
  • 可见元素 (2)有序列表 元素标签:
      ;
    1. ###
        更改属性 (3)自定义列表 元素标签:
        (4)嵌套组合 注意点:嵌套的时候需要完整的将另一个列表插入

        块级元素