css简介

css（cascading style sheets）层叠样式表，用于描述html文档的样式。

如果html是房子的骨架，css就是房子的装修，html负责结构，css负责样式。

css的作用就是美化html页面，使页面看起来更加美观。

css工作原理

css的工作原理是：浏览器会根据html文档的结构，找到对应的css样式，然后根据css样式来渲染页面。

css的语法

CSS的语法结构为：选择器 { 属性: 属性值; }

选择器：用于选择html元素

属性：用于描述元素的样式

属性值：用于指定属性的具体值

注意：属性和属性值之间用冒号隔开，每个属性值之间用分号隔开。结束使用分号。

示例

    <style>
    body {
      background-color: aqua;
    }
    h1 {
      color: brown;
    }
    p {
      color: blue;
    }
  </style>

css注释

css注释是：/注释内容/

注释内容：用于描述css的作用

注意：注释内容不会被浏览器解析，只是用于方便开发人员阅读。

id选择器

id选择器的作用就是识别html元素的id属性，然后根据id属性来设置样式。

注意：id属性在一个html文档中只能出现一次。

示例

  id 选择器
    <p id="p1">hello world</p>
    <p>这个锻炼不受影响</p>
    <style>
        #p1 {
            color: brown;
        }
    </style>

注意：id选择器的选择器名称前面要加上#号。

class 类选择器

class选择器的作用就是识别html元素的class属性，然后根据class属性来设置样式。

注意：class属性可以在一个html文档中出现多次。

示例

  class 选择器
    <p class="p1">段落p1</p>
    <h1 class="p1">标题h1</h1>
    <p class="p1 p2">段落p2</p> //空格以选择多个class
    <style>
        .p1 {
            color: blue;
        }
        h1.p1{
            text-align: center;
        }
        .p2{
            text-align: right;
        }
    </style>

用逗号将不同选择器隔开

用逗号将不同选择器隔开：可以同时选择多个元素，然后设置相同的样式。

注意：逗号隔开的多个选择器，会同时生效。

示例

    <p class="p1">段落p1</p>
    <h1 class="p1">标题h1</h1>
    <p class="p1 p2">段落p2</p> //空格以选择多个class
    <style>
        .p1, h1 {
            color: blue;
        }
        h1.p1{
            text-align: center;
        }
        .p2{
            text-align: right;
        }
    </style>

关系选择器

后代选择器

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cssStudy01</title>
</head>
<body>
    <div class="box"><p>Text in .box</p></div>
    <p>Text not in .box</p>

<style>
.box p{
    color: red;
}
</style>
</body>
</html>

后代选择器就是选择某个元素的所有后代元素。

注意：后代选择器可以选择多个元素，但是只能选择直接后代元素，不能选择间接后代元素。

子代关系选择器

子代关系选择器：选择某个元素的直接子代元素。

示例

    <ul>
  <li>Unordered item</li>
  <li>
    Unordered item
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
  </li>
</ul>
    <style>
      ul > li {

  border-top: 5px solid red;

              }
    </style>

以上例子中,ul > li 选择了ul元素的直接子代元素li,然后给li添加了边框。

相邻选择符 + 邻接兄弟选择符

相邻选择符+：选择紧接在另一个元素后的元素，且二者有相同的父元素。

示例

    <p>段落p1</p>
    <h1>标题h1</h1>
    <p>段落p2</p>
    <style>
        p + h1 {
            color: blue;
        }
    </style>

以上例子中,p + h1 选择了p元素后面的h1元素,然后给h1元素添加了样式。

通用兄弟

 <article>
  <h1>A heading</h1>
  <p>I am a paragraph.</p>
  <div>I am a div</div>
  <p>I am another paragraph.</p>
</article>
body {
  font-family: sans-serif;
}

h1 ~ p {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  padding: 0.5em;
}

在以上例子中, h1 ~ p 选择了h1元素后面的所有p元素,然后给p元素添加了样式。

伪类与伪元素

伪类：用于选择元素的特殊状态，比如鼠标悬停、点击等。

伪元素：用于选择元素的部分内容，比如第一个字母、第一个行等。

注意：伪类和伪元素的选择器名称前面要加上冒号。

示例

    <article>
  <p>
    蔬菜对你有好处，所以你需要多吃大头菜、大葱、白萝卜、苋菜、番茄酱、甜瓜、红豆、大蒜。
  </p>

  <p>
    秋葵浓汤、甜菜叶、玉米、鸡冠菜、菊苣、秋葵浓汤、葫芦。欧芹、葱、西葫芦、塌棵菜、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、裙带菜、番茄。蒲公英、黄瓜、花生、豌豆、花生、鸡冠菜、西葫芦。
  </p>
</article>
article p:first-child {
  font-size: 120%;
  font-weight: bold;
}

用户行为伪类

一些伪类只会在用户以某种方式和文档交互的时候应用。这些用户行为伪类，有时叫做动态伪类，表现得就像是一个类在用户和元素交互的时候加到了元素上一样。案例包括：

:hover——只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。

:focus——只会在用户使用键盘控制，选定元素的时候激活。

示例

<p><a href="">悬停在我上方</a></p>
a:link,
a:visited {
  color: rebeccapurple;
  font-weight: bold;
}

a:hover {
  color: hotpink;
}

伪元素

伪元素：用于选择元素的部分内容，比如第一个字母、第一个行等。

注意：伪元素的选择器名称前面要加上双冒号。

示例

    <article>
  <p>
    蔬菜对你有好处，所以你需要多吃大头菜、大葱、白萝卜、苋菜、番茄酱、甜瓜、红豆、大蒜。
  </p>

  <p>
    秋葵浓汤、甜菜叶、玉米、鸡冠菜、菊苣、秋葵浓汤、葫芦。欧芹、葱、西葫芦、塌棵菜、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、裙带菜、番茄。蒲公英、黄瓜、花生、豌豆、花生、鸡冠菜、西葫芦。
  </p>
</article>
article p::first-line {
  font-size: 120%;
  font-weight: bold;
}

把伪类和伪元素组合起来

选择一个`<article>`元素里面的第一个`<p>`元素的第一行。

示例

    article p::first-line {
      font-size: 120%;
      font-weight: bold;
    }

运算符

运算符：用于计算属性值。

注意:运算符的单位是px(像素)。

示例下面的示例用运算符（>）选择了<article>元素的初代子元素。

    article > p {
      
    }