走进前端技术栈——CSS | 青训营

一、CSS代码构成

1. CSS是什么？

   1. CSS（样式）

   2. Cascading Style Sheets

   3. 用来定义页面元素样式

      1. 设置字体和颜色
      2. 设置位置和大小
      3. 添加动画效果

   4. CSS代码基本组成

      

二、CSS使用方法

1. 在页面中使用CSS

   1. 外链

      1. <link rel="stylesheet" href="/路径.css">
         

   2. 嵌入

      1. <style>
             li{ margin: 0; list-style: none; }
             p{ margin: lem 0; }
         </style>
         

   3. 内联

      1. <p style=" margin:lem 0">Example Content </p>
         

2. CSS是如何工作的

   1. 

3. 选择器Selector

   1. 找出页面中的元素，以便给他们设置样式

   2. 使用多种方式选择元素

      1. 按照标签名、类名或id
      2. 按照属性
      3. 按照DOM树中的位置

4. 通配选择器

   1. <style>
      *{
          color: red;
          font-size: 20px;
      }
      </style>
      

5. 标签选择器

   1. <style>
      h1 {
          color: orange;
      }
      p{
          color: gray;
          font-size: 20px;
      }
      </style>
      

6. id选择器

   1. <style>
      #logo {
          font-size: 60px;
          font-weight: 200;
      }
      </style>
      

7. 类选择器

   1. <style>
      .done {
          color: gray;
          text-decoration: line-through;
      }
      </style>
      

8. 属性选择器

   1. <style>
      [disabled] {
          background: #eee;
          color: #999;
      }
      </style>
      

9. 伪类选择器

   1. <style>
      a:link {
          color: black;
      }
      
      a:visited {
          color: gray;
      }
      </style>
      

10. 组合

    1. 

三、CSS流程之选择器组、文本渲染

1. 选择器组

   1. body, h1, h2, h3, h4, h5, h6, ul, ol, li {
          margin: 0;
          padding: 0;
      }
      

2. 颜色-RGB

   1. 

3. 颜色-HSL

   1. 

4. Alpha 透明度

   1. 

5. 字体font-family

   1. <style>
      h1 {
          font-family: Optima, Georgia, serif;
      }
      body{
          font-family: Helvetica, sans-serif;
      }
      </style>
      

6. 通用字体族

   1. 

四、调试CSS

1. 右键点击页面，选择【检查】

2. 使用 快捷键

   1. Ctrl+Shift+I（windows）
   2. Cmd+Opt+I（mac）