CSS:(cascading style sheet)一般称为层叠样式表
,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言.

网页的读者和作者都可以使用CSS来决定文件的颜色、字体、排版等显示特性,比如Chrome浏览器的Stylish插件可以自定义网页的css文件,来修改网站样式。CSS最主要的目的是将文件的内容与显示分隔开来。

这有许多好处:

  • 文件的可读性加强
  • 文件的结构更加灵活
  • 作者和读者可以自己决定文件的显示
  • 文件的结构简化了
    另外,在HTML中:

一个整个网站或其中一部分网页的显示信息被集中在一个地方,要改变它们很方便

不同的读者可以有不同的样式,比如有的读者需要字体比较大

HTML文件本身的范围变小了,它的结构简单了,它不需要包含显示的信息

CSS还可以控制其他参数,例如声音(假如浏览器有阅读功能的话)或给视障者用的感受装置。

几种引入方式

  • 外部引入:

    在head中可以引入另外一个单独的css文件

    1
    <link rel="stylesheet" href="test.css">
    • 一个css文件可以控制多个html页面

    • 方便改版和维护

    • 有效利用浏览器的缓存,实现加载更快

    • 相对于整站来说,代码更少,更加方便于分工合作

    • 相对于单页面来说,有垃圾代码,而且link标签中的href会增加服务器的压力

    • 整站访问量不是特别大的网页中

  • 头部引用:放在头部的style中

    1
    2
    3
    4
    5
    <style type="text/css">
    div{
    color: #999;
    }
    </style>

    • 速度快(相对于网络层面),没有请求压力

    • 相对外部引入来说代码更少

    • 不宜改版和维护

    • 代码很乱,不利于前后台的沟通

    • 使用场景:高访问量的网页(首页,活动页)

  • 标签内引用

    1
    <div style="color: blue; ">我是div</div>

    1.优先级最高

    2.多余代码多

    3.不利于维护

    使用场景:跟js和后台生成

优先级:外部-头部-标签内

范围越小,优先级越高


选择器

  • 标签名选择器

    1
    2
    3
    div{
    color: red;
    }
  • class选择器

    1
    <a href="###" class="red">超链接</a>
    1
    2
    3
    .red{
    color:red;
    }
  • id选择器

    1
    <a href="###" id="red">超链接</a>
    1
    2
    3
    #red{
    color:red;
    }
  • 组合选择器

    1. div标签下的所有a标签的样式,包括嵌套后的a标签(不推荐使* 用)

      1
      2
      3
      <div>
      <a href="###">a标签</a>
      </div>
      1
      2
      3
      div a{
      color:red;
      }
    2. div的下一级a标签有效(仅CSS3支持)

      1
      2
      3
      <div>
      <a href="###">###</a>
      </div>
      1
      2
      3
      div>a{
      color:red;
      }
    3. div标签下a标签class为green的样式

      1
      2
      3
      <div>
      <a href="###" class="green">###</a>
      </div>
      1
      2
      3
      div a.green{
      color:green;
      }
    4. 多个标签,class,id使用同一种样式

      1
      2
      3
      4
      5
      6
      7
      <p>这是p</p>
      <div>这是div</div>
      <a href="###" class="green">我是a1</a>
      <a href="###" class="red" id="green">我是a2</a>
      <a href="###">我是a3</a>
      <a href="###" class="red">我是a4</a>
      <a href="###">我是a5</a>
      1
      2
      3
      div,p,.red,#green{
      color:red;
      }

常用样式

  • 文字样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    p{
    font-family:"宋体";
    font-size:20px;
    font-style:normal;
    /*
    normal - 文本正常显示
    italic - 文本斜体显示
    oblique - 文本倾斜显示;
    */

    font-weight:bold;
    }
  • 文本样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    p{
    width: 200px;
    height: 200px;
    /*边框*/
    border: 1px solid red;
    /*行高*/
    line-height: 200px;
    /*文本修饰*/
    /*下划线*/
    text-decoration: underline;
    /*删除线*/
    text-decoration: line-through;
    /*文本缩进*/
    /*浏览器默认一个字16px*/
    text-indent: 32px;
    }
    a{
    /*取消a标签的下划线,其实是取消所有样式设置*/
    text-decoration: none;
    }