第二节了解CSS | 字节青训营笔记初识CSS 这是我参与「第四届青训营」笔记创作活动的的第2天！由于这次课程的时

初识CSS

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

由于这次课程的时长较长，所以笔记的整理时间较久，话不多说，让我们来看看今天的课程内容吧！

首先来简单看一下CSS的功能和描述标签：

CSS全称Cascading Style Sheets。其功能标签主要被用于定义页面元素的样式，包括但不局限于设置字体，更改文本颜色，设置位置和大小，以及添加动画效果等等。总之和我们第一节了解的HTML不同的点是，CSS可以让整个页面变的更加生动形象，页面元素也变得丰富多彩。

那么在了解了CSS的基本信息后，我们下面来学习CSS的基本代码构成。

CSS基本代码块主要由选择器Selector，选择器Property及其属性值Value，最后是声明Declaration 这几个部分组成，其具体的功能如下：

选择器Selector：主要用于选中页面中的一些元素，来给这些元素匹配一个样式
选择器Property：主要用于选择元素的属性，去具体的设置元素样式
属性值Value：元素属性的具体属性值
声明Declaration：用分号隔开，写在代码块结尾

具体的实例（为h1标签设置样式）如下图：

而在具体的页面中使用CSS主要有三种方式：

外链：把CSS的定义放在一个单独文件里面，通过link标签把文件引入到页面里面来
嵌入：直接把CSS定义的样式代码嵌入到HTML里面
内联：把标签样式的属性直接写在标签自带的style属性里面

一般情况下，更推荐使用外联方式，可以把HTML，CSS分开，比较方便管理。下面我们来看一段具体的代码案例

        <h1>This is heading</h1>
        <p>this is some paragraph.</p>

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

我们选择了h1标签和p标签定义元素color的具体属性值为 red 则其输出情况如下：

CSS的工作机制

上面一部分我们已经了解了如何使用CSS定义标签的元素样式，那么在学习过程中，有一个问题我们必须去思考——CSS是怎么去应用到我们的样式里面的呢？这个问题分为几个步骤：

首先我们打开某个页面时，浏览器会先加载页面的HTML
然后浏览器会解析HTML,其解析出的结构为一个DOM的树型结构
在解析HTML的同时，浏览器也会加载CSS
CSS加载完成后，会以前面我们讲过的三种模式之一去添加样式到DOM树
在对元素属性计算过后产生确定的树，最终去展示页面给我们用户

选择器详解

在设计开发一个页面的过程中，我们通常会设置很多不同类型的元素，对于不同情况下使用选择器选择元素的场景，如何去合理使用选择器成为我们必须要掌握的一个点。而选择具体的选择方法大致可以分为如下三个方向：

按照名称：比如标签名，类名，属性名来选择元素
按照属性：通过某一具体属性来选择
按照DOM树中的位置：通过具体节点所在的位置来选择

1.通配选择器

使用“ * ”来匹配所有标签的元素样式，使得标签都产生同一效果的元素样式。

 <h1>文字内容</h1>
 <p>文字内容</p> 
   <style>
* {
  color: 属性值;
  font-size: 属性值;
}
</style>

2.标签选择器

和通配选择器类似，通过选择标签来设置元素样式

3.id选择器

给标签设置id属性的值，我们可以通过# + id属性值来选择这个元素来设置样式，且这个id属性值在页面中需要唯一。

    <h1 id="id属性值"><h1>
    <style>
        #id属性值{
        font-size: 属性值
        font-weight:属性值
        }
        </style>

4.类选择器

对于同一类型的标签设置样式，使用class来给多个类型的标签设置元素样式。

     <ul>
         <li class="属性值">文字内容</li>
         <li class="属性值">文字内容</li>
         <li class="属性值">文字内容</li>
     </ul>
     <style>
     .done{
     color:属性值
     text-decoration：属性值
     }

5.属性选择器通过一些元素的具体属性值来选中元素，例如input标签的disabled属性值。

      <input value="属性值"disabled>
      <style>
          [disabled] {
          background:属性值
          color：属性值
          }

也可以使得某个属性为特定的值，比如我们如果想要使得一个登录页面的密码输入属性为红色，我们可以这样设置

      <input type="password" value="12300">
      <style>
          input[type="password"]{
          border-color:red;
          color:red;
          }
      </style>