这是我参与「第四届青训营」笔记创作活动的的第2天

理解css

语法结构

CSS 语法结构为：

//选择器{属性：值;属性：值;...}
h1 {
    color: red;
}

选择器：通常是你需要设置样式的 HTML 元素。
属性：是你需要设置的样式属性，比如宽高，颜色，大小等。
属性值：你需要设置的样式属性的具体值，比如宽高具体是多少 px，颜色具体是什么颜色。

注释

/* 这是一行单行注释 */
/*
这是
多行注释
*/

CSS数值与单位

颜色值
- 英文命名颜色：p{color:pink;}
- RGB颜色：由 Red、Green、Blue 三种颜色的比例来配色：p {color: rgb(154, 32, 432);}
- 十六进制颜色：原理为RGB设置，把每项的数字变成十六进制：p {color: #00eeff;}
长度值
- 像素：px
- em：字体的 font-size 值：
  
  p { font-size: 14px; line-height: 2em; } //在这里的line-height行高被设置成了14*2=28px
- 百分比：
  
  p { font-size: 14px; line-height: 120%; } //行高为：14*1.2=16.8

CSS样式类型

内联式：

<p style="color:blue;"> 哈喽，要保持微笑哦。 </p>
内嵌式：写在HTML文档的head头部标签中：

<style type="text/css"> p{color:blue;} </style>
外链式：在html文件中引入css文件：

<link rel="stylesheet" href="main.css" />

选择器

基础选择器：标签选择器，类选择器，id 选择器，通配符选择器组合选择器：标签指定式选择器，后代选择器，并集选择器属性选择器伪类选择器

标签选择器
- 标签选择器也叫元素选择器。其实就是 html 代码中的标签，比如 <html>、<body>、<h1>、<p>、<img>。
- 语法格式为：
```
  标签名 {
      属性1: 属性值1;
      属性2: 属性值2;
      ...;
  }
```
类选择器
- 对 HTML 标签中 class 属性进行选择。CSS 类选择器的选择符是 "."
- 例如：.shadow
id选择器
- 对 HTML 标签中 id 属性进行选择（id不可重复）。id 选择器的选择符是 "#"
- 例如：
```
  #height{
      height：100px;
  }

  <p class="bgc" id="height">实验楼</p>
```
通配符选择器
- 用“*”号表示，能匹配页面中所有的元素一般使用通配符选择器定义 CSS 样式，清除所有 HTML 标记的默认边距。
```
  ```*``` {
        margin: 0; /* 定义外边距*/
        padding: 0; /* 定义内边距*/
    }
```
标签指定式选择器
- 两个选择器构成，第一个是标签选择器，第二个为 class 选择器或 id 选择器
- 两个选择器之间不能有空格,比如 p.one 选择的是类名为 one 的段落标签

后代选择器

当标记发生嵌套时，内层标记就成为外层标记的后代。

例如：

  .one #two p {
      color: red;
  }

  <div class="one">
      <div id="two">
          <p>实验楼</p>
      </div>
  </div>

子代选择器
- 子元素选择器只能选择作为某个元素的子元素
- 例如：只想选择 p 元素的子元素 strong 元素，为其设置样式
```
  p > strong {
      color: red;
  }

  <p>
      <strong>实验楼</strong>
      <strong>实验楼</strong>
  </p>
  <p>
      <em>
          <strong>实验楼</strong>
          <strong>实验楼</strong>
      </em>
  </p>
```
- 注：从上述两个例子中看出，子代选择器只选择指定标签的第一代子元素，后代选择器是作用于所有子后代元素。

并集选择器

各个选择器通过逗号连接而成的，任何形式的选择器。

例如：

  p,
  #one,
  .two {
      color: red;
  }
  
  <p>我爱学习</p>
  <span id="one">我爱运动</span>
  <strong class="two">我爱睡觉</strong>

属性选择器

根据元素的属性及属性值来选择元素。

例如：

E[attr]:匹配所有具有attr属性的E元素。
E[attr=val]:匹配所有attr属性等于“val”的E元素
E[attr]:匹配所有attr属性具有多个空格分隔的值、其中一个值等于“val”的E元素

E[attr]:匹配所有attr属性其中一个值以“val”开头的E元素

  <style type="text/css">
      p {
          color: blue;
      }
      p[title='one'] {
          color: red;
      }
      p[title~='two'] {
          color: green;
      }
      p[title|='three'] {
          color: pink;
      }
  </style>

  <body>
      <p title="five">我爱学习</p>
      <p title="one">我爱运动</p>
      <p title="one two">我爱吃饭</p>
      <p title="three-four">我爱睡觉</p>
  </body>

伪造选择器

:link 应用于未被访问过的链接。IE6 不兼容，解决此问题，直接使用 a 标签。
:hover 应用于有鼠标指针悬停于其上的元素。在 IE6 只能应用于 a 连接，IE7+ 所有元素都兼容。
:active 应用于被激活的元素，如被点击的链接、被按下的按钮等。

:visited 应用于已经被访问过的链接。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8" />
      <title>Document</title>
      <style type="text/css">
      /*a:link{
              color: red;
          }*/
      /*链接默认状态*/
      a {
          color: red;
          text-decoration: none;
      }
      /*链接访问之后的状态*/
      a:visited {
          color: yellow;
      }
      /*鼠标放到链接上显示的状态*/
      a:hover {
          color: blue;
          text-decoration: line-through;
      }
      /*链接激活的状态*/
      a:active {
          color: pink;
      }
      </style>
  </head>
  <body>
      <a href="">实验楼</a>
  </body>
  </html>

CSS层叠性和继承性
1. 层叠性：指多种 CSS 样式的叠加
  - !important ：具有最大优先级。
    - 例如：
```
  div {
      color: red !important;
      font-size: 60px !important;
  } 
```
  - 源代码出现次序：
    - 例如：先定义的 box2 类样式，再定义的 box 类样式，最后显示的是 box 类中的样式。
  - 优先级：
    1. 规则（1）：行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式。
    2. 规则（2）：important > 内联 > id > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承。另外权重会叠加，所以为了便于理解，权重设置如下：
      - 1 表示标签选择器的权重；- 10 表示类选择器的权重；- 100 表示 id 选择器的权重；- 1000 表示内联样式的权重。
2. 继承性：子元素会继承父元素的某些样式。例如：
```
 <style type="text/css">
     .box {
         font-size: 15px;
         color: red;
     }
 </style>

 <body>
     <div class="box">
     <span>实验楼</span>
     </div>
 </body>
```

布局

width
height
padding
border

margin

margin:auto 水平居中

   <div></div>

   <style>
       div {
           width: 200px;
           height: 200px;
           background: coral;
           margin-left: auto;
           margin-right: auto;
       }
   </style>

overlow
- overflow： visible hidden scroll

块级&行级

块级行级.png

display属性：

block：块级盒子
inline：行级盒子
inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none：排版时完全被忽略

flex-direction：

row：右
row-reverse：左
column：下
column-reverse：上

justify-content：

align-items:

align-self:

flexibility:

可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
flex-grow：有剩余空间时的伸展能力
flex-shrink：容器空间不足时收缩的能力
flex-basis：没有伸展或收缩时的基础长度

position属性：

static：默认值，非定位元素
relative：相对自身原本位置偏移，不脱离文档流
absolute：绝对定位，相对非static祖先元素定位
fixed：相对视口绝对定位

理解css ｜ 青训营笔记

理解css

语法结构

注释

CSS数值与单位

CSS样式类型

选择器

布局

块级&行级

理解css ｜青训营笔记