一.CSS简介

  • 什么是CSS

    CSS指层叠样式表(Cascading Style Sheets)

    样式通常存储在样式表中

  • 为什么要使用CSS

    样式如何定义如何显示HTML元素

    为了解决内容与表现分离的问题(不同游览器)

二.CSS基础语法

  • CSS声明

    • 样式属性 background-color

    • 操作符 :

    • 样式值 #FFFFF

    • 分隔符 ;

    • CSS声明块 { }

    • CSS规则 div 选择器

      1
      2
      3
      4
      5
      <style>
      body {
      background-color: #6bc1ff;
      }
      </style> <!-- 简单的例子 -->

三.CSS的内联样式

  • 在段落标签中使用style设置属性

    1
    2
    <p style="color:lightseagreen;font-weight:bolder;">这是一个段落内容</p>
    <!-- 例子 内联样式不利于代码维护 -->

四.CSS的外联样式

  • 1.将style写在head标签中,使用选择器

  • 2.将CSS样式写在文件中

    1
    2
    <link rel="stylesheet" href="04.css">
    <!-- 在head标签中添加CSS路径关联,rel和href为必要属性 -->

    注:内联样式优先级高于外联样式

五.CSS常见的选择器和伪元素

  • 选择器

    • ID选择器(唯一不可重复)

      id

    • 元素选择器

      span

    • 类(class)选择器

      class

    • 属性选择器

      title

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
    <!-- id选择器 -->
    #p{
    color:teal;
    }
    <!-- 类选择器-->
    .myclass{
    color:salmon;
    }
    <!--元素选择器-->
    span{
    color:lightgreen;
    }
    <!--属性选择器 -->
    [title]{
    color:sandybrown;
    }
    </style>
    <! --四种选择器的基本用法 -->
  • 基于关系的选择器

    • 后代关系选择器

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <div>
      <span>...</span>
      <span>...</span>
      </div>
      <!------------------------->
      <style>
      div span{
      color:...;
      }
      </style>
      <!--此时属于div后代元素的所有span标签都会起作用-->
    • 子元素选择器

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <div>
      <span>...1
      <span>...2</span>
      </span>
      </div>
      <!------------------------->
      <style>
      div > span{
      color:...;
      }
      </style>
      <!-- 此时被改变的是1处,要注意区分后代元素和子元素区别>
    • 相邻元素选择器

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <ul>
      <li id="one">one</li>
      <li>two</li>
      <li>three</li>
      </ul>
      <!------------------------->
      <style>
      #one+li{
      color:salmon;
      }
      </style>
      <!--通过相邻元素选择器定位标签,two会被添加效果 --
  • 伪类

    • :link

      向未被访问的链接添加样式

    • :hover

      当鼠标悬浮在元素上方,向元素添加样式

    • :active

      向被激活的元素添加样式

    • :visited

      向已被访问的链接添加样式

  • 伪元素(加两个冒号 ::)

    • ::before 会为当前元素创建一个子元素作为伪元素

    • ::after 用来匹配已选中元素的一个虚拟的最后子元素

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <style>
      q::before{
      content:"<<";
      color: #542eff;
      }
      q::after{
      content:">>";
      color:aquamarine;
      }
      </style>

      <q>一些引用</q>,他说,<q>比没有好</q>
      <!-- 会将q标签替换成伪元素的内容及样式 -->

六.CSS设置样式

1.背景

  • background 简写属性,将背景属性设置在一个声明中
  • background-color 设置元素的背景颜色
  • background-image 把图像设置为背景
  • background-position 设置背景图像的起始位置
  • background-repeat 设置背景图像是否及如何重复

2.文本

  • color 文字颜色
  • text-align 对齐元素中的文本(左对齐 居中 右对齐)
  • text-decoration 向文本添加修饰(取消下划线)
  • text-indent 缩进元素中文本的首行

3.字体

  • font 在一个声明中设置所有的字体属性
  • font-family 指定文本的字体系列
  • font-size 指定文本的字体大小
  • font-style 指定文本的字体样式
  • font-weight 指定字体的粗细

4.列表

  • list-style 用于把所有用于列表的属性设置于一个声明中
  • list-style-image 将图像设置为列表项标志
  • list-style-type 设置列表项标志的类型

5.表格

  • border 设置表格边框
  • border-collapse 设置表格的边框是否被折叠成一个单一的边框或隔开
  • width 定义表格的宽度
  • text-align 表格中的文本对齐
  • padding 设置表格中的填充

6.案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
table,th,td {
border: 2px black solid; //边框粗细 颜色 样式
border-collapse: collapse; //单边框
}
table{
width:80%; //横向占比
margin: 0px auto; //上下边距 左右边距
}
th,td{
padding:10px; //字体与边框边距
}
th{
background-color:fuchsia;
}
.info{
background-color:aquamarine;
}
</style>

七.CSS布局

  • 两行三列布局举例

    1
    2
    3
    4
    5
    6
    <header></header>
    <div id="container">
    <nav></nav>
    <aside></aside>
    <article></article>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <style>
    html,body{
    margin:0px;
    }
    header{
    background-color:lightblue;
    height: 150px;
    }
    #container{
    background-color:aquamarine;
    height:800px;
    }
    nav{
    background-color:lemonchiffon;;
    height:100%;
    width:150px;
    float:left;
    }
    aside{
    background-color:lavender;
    height:100%;
    width:150px;
    float:right;
    }
    article{
    background-color:aqua;
    height:100%;;
    }
    </style>
  • 三行两列布局举例

    1
    2
    3
    4
    5
    6
    <header></header>
    <div id="container">
    <nav></nav>
    <article></article>
    </div>
    <footer></footer>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <style>
    html,body{
    margin:0px;
    }
    header{
    background-color:aquamarine;
    height:100px;
    }
    #container{
    background-color:aliceblue;
    height:300px
    }
    footer{
    background-color:lightcoral;
    height:50px;
    }
    nav{
    background-color:fuchsia;
    height:100%;
    width:150px;
    float:left;
    }
    article{
    background-color:moccasin;
    height:100%;
    margin-left:150px;
    }
    </style>

八.CSS的盒子模型

  • 边框

    • border 简写属性,用于把针对四个边的属性设置在一个声明

    • border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式

    • border-width 用于为元素的所有边框设置宽度,或者单独地为各个边框设置宽度

    • border-color 设置元素的所有边框中可见部分的颜色,或为4各边分别设置颜色

      整合border属性例子:

      1
      border:10px lightcoral solid;       //边距 边框颜色 样式
  • 内边距

    • padding 使用缩写属性设置在一个声明中的所有填充属性

    • padding-bottom 设置元素的底部填充

    • padding-left 设置元素的左部填充

    • padding-right 设置元素的右部填充

    • padding-top 设置元素的顶部填充

      若使用padding:10px 方式,则上下左右均为10px边距

      若使用padding:10px 20px 方式,代表上下边距10px,左右边距20px

      若使用padding:10px 20px 30px方式,代表上边距10px,左右20px,下30px

      四个值,上 右 下 左

  • 外边距

    • margin 简写属性,在一个声明中设置所有外边距属性
    • margin-bottom 设置元素下外边距
    • margin-left 设置元素左外边距
    • margin-right 设置元素右外边距
    • margin-top 设置元素上外边距