本文已参与「新人创作礼」活动，一起开启掘金创作之路。

CSS

css是描述页面样式的。可以样一个页面更好看。和HTML一样是不区分大小写的

每个CSS都需要一个选择器，就是让选择器里面的所有都换样式。

CSS引入

1.内部样式表（不常用，在搜狗浏览器搜索的时候能看到）
2.内联样式（只适合于样式简单的时候）

3.外部样式（用的最多的，是单独提取出来）

  让p标签里面的内容变成红色
  p{
      color:red;
  }
  在head部分引入
  <link rel="stylesheet" href="./day2.css">
  body里面的内容
  <body>
      <p>hello word</p>
  </body>

选择器

基础选择器

便签选择器

  就是HTML里面的标签来表示
  p{
      color:red;
  }
  <p>hello word</p>

类选择器

  通过类选择器，可以随心所欲的选择任意想要的元素
  首先我们需要在CSS代码里面创建一个类名，在对应的html元素中，通过class属性来引用这个类名
  此时具有该类名的元素就可以享用相关CSS样式
  .blue{
      color:blue;
  }
  ---------------------------------
  <p class="blue">hello word</p>

id选择器

  跟类选择相似不过有点限制，因为一份id只能有一个。
  #green{
      color:green;
  }
  ---------------------------------
  <p id="green">hello word</p>

通配符选择器、

  * 直接选中页面里面的所有元素
  
  *{
      margin: 0;
      padding: 0;
      box-sizing: 0;
  }

......

复合选择器

后代选择器

  通过多个基础选择器的搭配，可以选中某个元素里面的子、孙子元素
  ul li{
      color: orange;
  }
  ---------------------------------
  <ul>
  <li>三年级一班</li>
  <li>三年级二班</li>
  <li>三年级三班</li>
  </ul>
  <ol>
      <li>三年级一班</li>
      <li>三年级二班</li>
      <li>三年级三班</li>
  </ol>

子选择器

  ul>.yello{
      color: yellow;
  }
  ---------------------------------
  <ul>
      <li class="yello">三年级一班</li>
      <li>三年级二班</li>
      <li>三年级三班</li>
  </ul>
  <ol>
      <li>三年级一班</li>
      <li>三年级二班</li>
      <li>三年级三班</li>
  </ol>

并集选择器

  直接可以选择多个并列的
  <ul>
      <li class="yello">三年级一班</li>
      <li>三年级二班</li>
      <li>三年级三班</li>
  </ul>
  <ol>
      <li>三年级一班</li>
      <li>三年级二班</li>
      <li>三年级三班</li>
  </ol>
  ---------------------------------
  ul>li , ol>li{
      color: red;
  }

......

CSS学习

CSS

CSS引入

选择器

基础选择器

复合选择器