这是我参加青训营的第2天

一.CSS是什么

1.全称：Cascading Style Sheets

2.作用:用来定义页面元素的样式

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

3.代码

   1>h1：选择器（Selector）
       （选择器：选中页面中的一些元素，给这些元素定义样式）
   2>属性（在选择完元素后，给这些元素设置一些特定的元素）
        冒号之前叫选择器（Property）
        冒号之后叫属性值（Value）
        整个语句（加分号）叫做声明（Deciaration）
   3>规则：选择器加上一个大括号，代表一个规则
   

二.在页面中怎么使用CSS(推荐使用第一种）

1.外链

（把CSS的定义放到一个文件中，然后用link函数引用）

<link rel="stylesheet" href="/assets/style.css"

2.嵌入

（直接把样式的代码嵌入进标签中）

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

3.内联（不太推荐）

（把标签样式直接写在style属性里）(不需要再写选择器了)

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

二.CSS是如何工作的

选择器（Selector）

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

• 使用多种方式选择元素

  按照标签名，类名或id
  按照属性
  按照DOM树中的位置
  

1> 通配选择器

（*号：匹配所有）

2>标签选择器

用标签设置样式（上面写过）

3>id选择器

（如果我们给一些标签设置了id属性，eg：h1设置id属性“logo",那么我就可以通过#logo去选择id是logo的一些元素进行设置）

（注意：如果我们想使用id选择器去选择元素，那么要确保这个id是页面中唯一的）

4>类选择

（在给同一类的标签设置样式时，可以通过class来进行）

（class可以出现多次）

5>属性选择器

（通过一些元素的属性或属性值去选择一些属性）

三.总结

本节课对 CSS 的工作流程及原理、页面中 CSS 使用方法等进行详细解读，可以帮助前端新手建立对 CSS 的全面而深刻的认知。