CSS简介 CSS引入方式 CSS语法 基础选择器

css简介

  • cascanding style sheets （层叠样式表）（级联样式表）

  • 作用：

    • 文本内容：文本大小，文本颜色，对齐方式。。。。

    • 标签的样式 ： 背景色，边框宽度颜色

    • 页面的布局 ： 浮动，定位

css引入方式

  • 行内式

    • 行内式只作用于当前标签

    • <div style="width: 200px;height: 200px;">1</div>

    • 特点：代码冗余，结构层与表示层不分离。

  • 内嵌式（文本内部引入）

    • 只作用于当前文档

    • <head>
          <style>
              /* 标签选择器 */
              div {
                  width: 200px;
                  height: 200px;
                  background-color: blue;
              }
          </style>
      </head>

    • 特点：代码相对清晰，结构层与表示层不完全分离

  • 外链式（文本外部引入）

    • 可以作用于任何文档，需要link标签引入

    • <link rel="stylesheet" href="./css/index.css">

    • 特点：代码非常清晰，结构层与表示层完全分离

css语法

  • 属性名：属性值；属性名：属性值；属性名：属性值；属性名：属性值；。。。

  • 属性名：属性值；-----一个css样式声明

  • color:red;

css引入方式优先级

  • 行内式最优先，内嵌式和外链式后引入生效

基础选择器

  • 通配符选择器

    • 格式：

      * {

      属性名:属性值;

      属性名:属性值;

      属性名:属性值;

      。

      。

      }

      * 代表所有标签

  • 标签选择器

    • 格式：

      关键字 {

      属性名:属性值;

      属性名:属性值;

      属性名:属性值;

      。

      。

      }

  • 类选择器

    • 格式：

      .类名 {

      属性名:属性值;

      属性名:属性值;

      属性名:属性值;

      。

      。

      }

  • id选择器

    • 格式

      #id名 {

      属性名:属性值;

      属性名:属性值;

      属性名:属性值;

      。

      。

      }

  • 优先级

    • id选择器>类选择器>标签选择器>通配符选择器

    •  

 

 

posted @ 2021-01-09 16:13  whispers-zhao  阅读(59)  评论(0)    收藏  举报