1.CSS简介

1.1.CSS简述

CSS：层叠样式表(英文全称：Cascading Style Sheets)：
是一种用来表现HTML样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1.2.为什么需要CSS样式表

是为了实现内容与样式的分离。

  • HTML：负责页面的结构和内容，
  • CSS：样式表负责页面外观的渲染（相当于华丽的衣服）。

CSS的特性：

  1. 内容与表现分离
  2. 网页的表现统一，容易修改
  3. 丰富的样式，使得页面布局更加灵活
  4. 减少网页的代码量，增加网页的浏览速度，节省网络带宽
  5. 运用独立于页面的CSS，有利于网页被搜索引擎收录
  6. 由浏览器解释运行

  7. 不区分大小写

    2.CSS语法

    2.1.CSS基本语法

    在页面上使用时，通常在head>部分写入style标签，样式代码放在style标签中。CSS基本语法：

    1. 选择器 {
    2.  样式声明;
    3.  样式声明;
    4.  ... ...
    5. }

    什么是选择器：选择器就是找到你要渲染的那个HTML标签。

    1. <style type="text/css">
    2.  /* p是html选择器，表示给所有的p标签设置样式 */
    3.  p {
    4.      color:red;
    5.      font-size:24px;
    6.  }
    7. </style>

    2.2.CSS选择器

    2.2.1.基本选择器

    基本选择器有三种：

  8. HTML标签选择器：直接作用于某个HTML标签

    1. <style>
    2.  p {
    3.      color:red;
    4.      font-size:24px;
    5.  }
    6. </style>

  9. 类选择器：可在页面中被多次使用

    1. <style>
    2.  .one {
    3.      color:red;
    4.      font-size:24px;
    5.  }
    6. </style>
    7. <p class="one">这是一个p标签</p>

  10. ID选择器：作用于同一ID的某个资源，同一个页面中只能使用一次

    1. <style>
    2.  #first {
    3.      color:red;
    4.      font-size:24px;
    5.  }
    6. </style>
    7. <!-- 在一个页面中，id属性的值必须唯一 -->
    8. <p id="first">这是一个p标签</p>

    2.2.2.层次选择器

  11. 后代选择器： E F 选择所有被E元素包含的F元素

    1. <style>
    2.  div p {
    3.      color:red;
    4.      font-size:24px;
    5.  }
    6. </style>
    7. <div>
    8.  <p>这是div里的p标签</p>
    9. </div>
    10. <p>这是p标签</p>

  12. 子选择器： E > F 选择所有作为E元素的子元素F（只选择第一代子元素）

    1. <style>
    2.  div > p {
    3.      color:red;
    4.      font-size:24px;
    5.  }
    6. </style>
    7. <div>
    8.  <p>这是div里的p标签</p>
    9.  <ul>
    10.      <li><p>这是ul里的p标签</p></li>
    11.  </ul>
    12. </div>

  13. 群组选择器：多个选择器通过逗号连接而成，利用群组选择器同时声明风格相同样式

    1. <style>
    2.  html,body {
    3.      width:100%;
    4.      height:100%;
    5.  }
    6. </style>

    2.2.3.伪类选择器

  14. :first-of-type：选择一组子元素中的第一个（即使有其他子元素，也不会受到影响）

    1. <style>
    2.  div p:first-of-type{
    3.      color: red;
    4.  }
    5. </style>
    6. <div>
    7.  <p>dsfsdgfdsgdfg</p>
    8.  <p>dsfsdgfdsgdfg</p>
    9.  <p>dsfsdgfdsgdfg</p>
    10. </div>

  15. :last-of-type：选择一组子元素中的最后一个（即使有其他子元素，也不会受到影响）

    1. <style>
    2.  div p:last-of-type{
    3.      color: red;
    4.  }
    5. </style>
    6. <div>
    7.  <p>dsfsdgfdsgdfg</p>
    8.  <p>dsfsdgfdsgdfg</p>
    9.  <p>dsfsdgfdsgdfg</p>
    10. </div>

  16. :nth-of-type()：使用索引来选择某一个子元素（即使有其他子元素，也不会受到影响）

    1. <style>
    2.  div p:nth-of-type(2){
    3.      color: red;
    4.  }
    5. </style>
    6. <div>
    7.  <p>dsfsdgfdsgdfg</p>
    8.  <p>dsfsdgfdsgdfg</p>
    9.  <p>dsfsdgfdsgdfg</p>
    10. </div>

    2.3.CSS引入方式

    CSS的引入方式共有三种：

  • 行内样式
  • 内嵌样式
  • 外部样式。

前面我们使用的CSS引入方式就是内嵌样式。

2.3.1.行内样式

写在某个标签中，只对本行有效。（内联样式）

  1. <p style="font-family:华文行楷;color:green;font-size:32px">这是一个行内样式</p>

2.3.2.内嵌样式

样式写在某个页面的style标签中，只对本页面有效。前面的例子都是内嵌样式。

  1. <style>
  2.     div > p {
  3.         color:red;
  4.         font-size:24px;
  5.     }
  6. </style>

2.3.3.外部样式

将样式代码写在一个单独的文件中（.CSS文件），使用时要将这个.CSS文件导入使用。

  1. <link href="common.css" rel="stylesheet" type="text/css" />

注意：href和rel属性是必须的。

2.4.CSS优先级

2.4.1.基本规则

CSS 优先规则：

  1. 从引用方式方面来说：行内样式 > 内嵌样式/外部样式
  2. 从选择器方面来说：ID 选择器 > 类选择器（属性选择器、伪类选择器） > 标签选择器

    2.4.2.样式叠加时的优先级

    如果在同一选择器上，外部样式、内嵌样式、行内样式都对某一属性使用了样式，也就是存在样式叠加时，那么要使用以下3个原则来决定到底哪一种样式有效。
  • 就近原则：距离最近的样式有效。
  • 顺序原则：这里的顺序是指的书写顺序，也就是最后书写(不是调用)的样式有效。
  • 精细原则：或者叫特殊原则。既选择器的指向越精细越优先。

    2.5.CSS继承

    2.5.1.html 文档树（DOM节点树）

    整个html就是一个树型结构。它的根就是html。
    02.初识CSS - 图1

    2.5.2.CSS继承

    CSS继承规则：
  1. 子标签可以继承父标签的样式风格
  2. 子标签的样式不会影响父标签的样式风格

  3. 一般只有文字文本具有继承特性，如文字大小、文字加粗、文字颜色、字体等。

    2.6.CSS中的颜色

    主要有以下两种：

  4. 使用英文单词作为颜色值：如：red、green、blue、black、white、yellow ……

  5. 使用十六进制的颜色值：如：#000000 #FFFFFF #45F87E
    （其中前两位表示红色，中间两位表示绿色，最后两位表示蓝色。也可以使用简写：#FF0088 -> #F08）