CSS

1. 概念

  • 层叠样式表。页面美化和布局控制
  • 层叠：多个样式可以作用在同一个html的元素山，同时生效
  • 好处
    • 将内容展示和样式控制分离，降低耦合度

2. CSS使用

  • CSS和html结合使用

    1. 内联样式

      在标签内使用style属性指定css代码

      1
      <div style="color: antiquewhite">你好</div>

    2. 内部样式

      在head标签内，定义style标签，style标签体的内容就是css代码

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <head>
          <style>
              div{
                  color: brown;
              }
          </style>
      </head>
      <body>
      <!--内部样式-->
      <div>你好</div>
      </body>

    3. 外部样式

      1. 定义CSS资源文件
      2. 在head标签内，定义link标签引入外部资源文件
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <head>
          <link rel="stylesheet" href="../CSS/a.css">
          或者
          <style>
              @import "../CSS/a.css";
          </style>
      </head>
      a.css文件
      div{
          color: green;
      }

  • css语法

    • 格式

      选择器{

      ​ 属性名1：属性值1;

      ​ 属性名2：属性值2

      ​ …….

      }

    • 选择器：筛选具有相似特征的元素

      每一对属性需要使用;隔开，最后一对属性可以不需要

3. 选择器

3.1 基本选择器

  1. id选择器：选择具体的id属性值的元素。#id属性值{}
  2. 元素选择器：选择具有相同标签名称的元素
  3. 类选择器：选择具有相同的class属性值的元素 .class属性值{}

3.2 扩展选择器

  • 选择所有元素 *{}

  • 并集选择器：选择器1,选择器2{}

  • 后代元素选择器：选择指定父元素的指定的子元素，父元素>子元素{}

  • 子元素选择器：选择指定元素内的指定后代元素，祖先元素 子元素{}

  • 属性选择器：选择元素名称，属性名=属性值的元素，元素名称[属性名="属性值"]

  • 伪类选择器：选择一些元素具有的状态，元素:状态{}

    如：<a>的状态

    ​ link：初始化的状态

    ​ visited：被访问过的状态

    ​ active：正在访问状态

    ​ hover：鼠标悬浮状态

4. CSS属性

  1. 字体、文本

    • font_size：字体大小

    • color：文本颜色

    • text_align：对齐方式

    • line_height：行高

  2. 背景

    • background
    1
    2
    3
    4
    5
    div{
        border: 1px solid red;
        height: 296px;
        background: url("../HTML/示意图.PNG") repeat center;
    }

  3. 边框

    • border：边框 border:1px solid red;

  4. 尺寸

    • width：宽度
    • height：高度

  5. 盒子模型：控制布局

    • margin：外边距

    • padding：内边距。默认情况下内边距会影响到整个盒子的大小。

      ​ box-sizing: border-box;设置盒子的属性，让width和height就是最终盒子的大小

    • float：浮动

      • right
      • left