CSS入门

一.CSS简介

• 什么是CSS

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

  样式通常存储在样式表中

• 为什么要使用CSS

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

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

二.CSS基础语法

• CSS声明

  • 样式属性 background-color

  • 操作符 :

  • 样式值 #FFFFF

  • 分隔符 ;

  • CSS声明块 { }

  • CSS规则 div 选择器

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

三.CSS的内联样式

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

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

四.CSS的外联样式

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

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

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

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

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

• 选择器

  • ID选择器（唯一不可重复）

    id

  • 元素选择器

    span

  • 类（class）选择器

    class

  • 属性选择器

    title

  <style>
    <!-- id选择器 -->
    #p{
      color:teal;
    }
    <!-- 类选择器-->
    .myclass{
      color:salmon;
    }
    <!--元素选择器-->
    span{
      color:lightgreen;
    }
    <!--属性选择器 -->
    [title]{
      color:sandybrown;
    }
  </style>
  <! --四种选择器的基本用法 -->

• 基于关系的选择器

  • 后代关系选择器

    <div>
      <span>...</span>
      <span>...</span>
    </div>
    <!------------------------->
    <style>
      div span{
        color:...;
      }
    </style>
    <!--此时属于div后代元素的所有span标签都会起作用-->

  • 子元素选择器

    <div>
      <span>...1
        <span>...2</span>
    	</span>
    </div>
    <!------------------------->
    <style>
      div > span{
        color:...;
      }
    </style>
    <!-- 此时被改变的是1处，要注意区分后代元素和子元素区别>

  • 相邻元素选择器

    <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 用来匹配已选中元素的一个虚拟的最后子元素

    <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.案例

<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布局

• 两行三列布局举例

  <header></header>
  <div id="container">
      <nav></nav>
      <aside></aside>
      <article></article>
  </div>

  <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>

• 三行两列布局举例

  <header></header>
      <div id="container">
          <nav></nav>
          <article></article>
      </div>
  <footer></footer>

  <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属性例子：

    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 设置元素上外边距