CSS | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第2天。CSS作为前端基本技术栈的一员，主要负责定义页面元素的样式。

一、课程内容总结

课程介绍了CSS的基本概念，在页面中使用CSS的方法和选择器的使用方法，以及对于CSS和页面显示的深入理解。

二、课程内容

1、CSS的基本介绍

全称Cascading Style Sheets ，翻译为层叠样式表，用于定义页面元素的样式。

主要功能：

设置字体的颜色和大小
设置位置和大小
添加动画效果、

2、基本代码组成

h1{
    color: White;
    font-size: 14px;
}

代码由一个选择器起头。它的作用就是选择对应添加样式的HTML元素。接着输入一对大括号{ }。在大括号内部定义键值对。一个键值对称为一个 声明 (declarations) 。每个声明就对选中的元素的某一个属性就行设置。

3、使用CSS：

外链：CSS样式单独写成文件，完成内容和样式分离和模块化，推荐使用

<link rel="stylesheet" href="styles.css">

嵌入：直接在HTML代码中使用<style></style>标签嵌入CSS样式，也完成内容和样式分离。

    li{margin : 0;color: White;}
</style>

内联：通过HTML标签的style属性来定义CSS样式，不推荐使用。

<p style="margin :lem 0">Test</p>

4、选择器：

用于选择出页面中需要的元素，以绑定样式。选择器选择方式：

统配选择器：匹配所有元素

*{
    color: White;
    font-size: 14px;
}

标签选择器：利用标签选择元素

h1{
    color: White;
    font-size: 14px;
}

ID选择器：利用id属性给元素设置唯一的标签，然后利用ID选择器选中

#logo{
    color: White;
    font-size: 14px;
}

类选择器：利用class属性给元素设置类型，然后选中

.class{
    color: White;
    font-size: 14px;
}

属性选择器：通过属性选择元素,[]中选用属性

input[type="password"]{
    color: White;
    font-size: 14px;
}

伪类：

状态伪类：利用元素的状态选中

a:link{
     color: White;
 }
a:link{
     color: black;
 }
a:visited{
     color: gray;
 }

结构伪类：利用DOM树中的元素结构选中

li:first-child{
     color: White;
 }
li:last-child{
     color: black;
 }

5、选择器组合：

名称	用法	说明	示例
直接组合	AB	满足A同时满足B	input.class
后代组合	A B	选中B，如果B是A的子孙	nav a
亲子组合	A>B	选中B，如果B是A的子元素	section > p
兄弟选择器	A~B	选中B，如果B在A后且与A同级	h2~p
相邻选择器	A+B	选中B，如果B紧跟在A后面	h2+p

6、选择器组：

一次选中多个元素:

h1,h2,h3,h4,h5{
    color: White;
    font-size: 14px;
}

7、选择器优先级：

当一个标签对应多个选择器,选择器如何生效? e.g.

  <article>
      <h1 class="title"> 这里是测试文本.</h1>
  </article>
  <style>
    .title{
        color: White;
        font-size: 14px;
      }
    article h1{
        color: black;
      }
  </style>

有两个选择器同时选中h1的文本,如何生效呢? 靠特异度计算优先级!

优先级:ID选择器 > (伪)类 > 标签

8、属性的继承：

某些属性会继承自父级元素,除非显示设置值。

显式设置继承属性:先使用通配选择器设置继承属性,然后该属性就可以显式被继承

  *{
     box-sizing: inherit;
  }
  html{
     box-sizing:border-box;
  }

初始值:当一个元素的某个属性既不能继承自父级元素又没有被设置值,就使用初始值。可以显式设置为初始值。

  h2{
     background-color: initial;
  }

9、布局：

布局就是确定内容大小和位置的算法

依据元素,内容,兄弟节点和内容等信息来计算布局技术:
常规流：HTML默认的布局方式

display属性：
- block：BFC，块级盒子，块级盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽，每个盒子占据一行。可以使用width与height属性。
- inline：LFC，行级盒子，行级盒子不会产生换行。width与height属性不会生效。 正常流中的所有内容都有一个display的值，用作元素的默认行为方式，通常是block或者inline。
脱离常规流：
- Grid：网格布局，父元素上应用display: grid，然后使用 grid-template-rows 和 grid-template-columns两个属性定义了一些行和列的轨道。子元素上自动地排列在创建的格子当中。
- Flex：弹性盒子，在想要进行flex布局的父元素上应用display: flex ，所有直接子元素都将会按照 flex 进行布局。
浮动：把一个元素“浮动”(float) 起来，会改变该元素本身和在常规流中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从常规流中移除，这时候其他的周围内容就会在这个被设置浮动 float的元素周围环绕。
绝对布局：定位 (positioning) 能够让我们把一个元素从它原本在常规流中应该在的位置移动到另一个位置。
- 静态定位 (Static positioning) 是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
- 相对定位 (Relative positioning) 允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计 (design pinpointing) 非常有用。
- 绝对定位 (Absolute positioning) 将元素完全从页面的常规流中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的 <html> 元素边缘固定，或者相对于该元素的最近被定位祖先元素 。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。
- 固定定位 (Fixed positioning) 与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
- 粘性定位 (Sticky positioning) 是一种新的定位方式，它会让元素先保持和position: static一样的定位，当它的相对视口位置达到某一个预设值时，他就会像position: fixed一样定位。

10、总结：

主要讲述了CSS的使用，从CSS代码的引入，到CSS代码的构建再到代码的基本逻辑和机构都有了更加清晰的认识。除此之外，讲述了CSS代码中许多基本属性的使用，需要多加练习。整个CSS就是为了HTML所展示的页面做出效果服务的，定位到对应元素并且做出渲染样式的设置是CSS的核心功能，掌握这一点就能过更好地理解CSS和HTML。