CSS3笔记

本文最后更新于:1 年前

CSS3笔记

  1. 什么是CSS?

页面美化+布局控制

概念:

  • Cascading Style Sheets层叠样式表

  • 层叠:多个样式可以作用在同一个HTML的元素上

好处:

  • 功能强大
  • 将内容的展示和央视的控制分离
    • 降低耦合度,解耦
    • 让分工协作更容易
    • 提高开发效率
  1. 如何学习CSS(快速入门)

CSS选择器(重点+难点)

美化网页(文字,阴影,超链接,列表,渐变)

盒子模型

浮动

定位

网页动画(特效)

什么是CSS

  • CSS是层叠样式表 (Cascading Style Sheets)
  • 不是编程语言
  • 告诉浏览器如何指定样式、布局等

CSS发展史

CSS1.0

CSS2.0 DIV(块)+CSS CSS与html结构分离的思想 网页变得简单 SEO

CSS2.1 浮动,+定位

CSS3.0 圆角+阴影+动画… 浏览器兼容性~

快速入门

CSS的使用:CSS与HTML的结合方式

  1. 内联样式

    • 在标签内使用style属性指定CSS代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <!--
    内联样式
    在标签内使用style属性指定CSS代码
    -->
    <h1 style="color: red">我的第一个网页</h1>
    </body>
    </html>
  2. 内部样式

    • 在head标签内,定义style标签,style标签体的内容就是CSS代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    内部样式
    在head标签内使用style标签指定CSS代码
    -->
    <style>
    h1 {
    color: blue;
    }
    </style>
    </head>
    <body>

    <h1>我的第一个网页</h1>
    </body>
    </html>
  3. 外部样式(推荐)

    1. 定义CSS资源文件
      1. 在项目里新建一个CSS文件夹,里面用于存放CSS文件
    2. 在head标签内,定义link标签,引入CSS文件
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <link rel="stylesheet" href="CSS/style.css">
      </head>
      <body>
      <h1>我的第一个网页</h1>
      </body>
      </html>
      在CSS文件内填入如下CSS代码
      1
      2
      3
      h1 {
      color: red;
      }

注意:这三种方式,CSS的作用范围越来越大

  • 内联样式:只作用于当前定义了CSS代码的标签

  • 内部样式:作用于一类标签

  • 外部样式:作用于整个html

引入外部标签的另一种方法(了解)

1
2
3
<style>
@import "CSS/style.css"
</style>

CSS基本语法

  • 语法格式:

    1
    2
    3
    4
    5
    选择器 {
    属性:属性值;
    属性:属性值;
    ...
    }
  • 选择器:筛选具有相似特征的元素

  • 每一对属性要用;隔开,最后一对属性可以不加;

CSS语法

CSS选择器(重点)

分类:

  1. 基础选择器

    1. id选择器:选择具体的id属性值的元素,建议id值唯一

      • 语法:#id属性值{}
      • id选择器优先级最高
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>基础选择器</title>
      <style>
      #div1 {
      color: blue;
      }
      </style>
      </head>
      <body>
      <div id="div1">基础选择器</div>
      <div>id选择器</div>
      </body>
      </html>
    2. 元素选择器:选择具有相同标签名称的元素。

      • 语法:标签名称{}
      • id选择器的优先级高于元素选择器
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>基础选择器</title>
      <style>
      #div1 {
      color: blue;
      }
      div {
      color: red;
      }
      </style>
      </head>
      <body>
      <div id="div1">基础选择器</div>
      <div>元素选择器</div>
      </body>
      </html>
    3. 类选择器:选择具有相同class属性值的元素。

      • 语法:.class属性值{}
      • 类选择器优先级低于id选择器
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>类选择器</title>
      <style>
      .cls1{
      color:yellow;
      }
      </style>
      </head>
      <body>
      <div id="div1">基础选择器</div>
      <div class="cls1">类选择器</div>
      <div class="cls1">Hello</div>
      </body>
      </html>
  2. 扩展选择器

    1. 选择所有元素

      • 语法:*{}
    2. 并集选择器

      • 语法:选择器1,选择器2{}
     3. 子选择器:筛选选择器1下的选择器2元素
    
     - 语法:选择器1 选择器2{}
    
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>拓展选择器</title>
    <style>
    div p {
    color: red;
    }
    </style>
    </head>
    <body>
    <div>
    <p>helloworld</p>
    </div>
    <p>你好世界</p>
    </body>
    </html>
    1. 父选择器:选择选择器2上面的选择器1元素

      • 语法:选择器1>选择器2{}
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>拓展选择器</title>
      <style>
      div p {
      color: red;
      }

      div > p {
      border: 1px solid;
      }
      </style>
      </head>
      <body>
      <div>
      <p>helloworld</p>
      </div>
      <p>你好世界</p>
      </body>
      </html>
    2. 属性选择器:选择元素名称,属性名=属性值的元素

      • 语法:元素名称[属性名=”属性值”]{}
      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
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>拓展选择器</title>
      <style>
      div p {
      color: red;
      }

      div > p {
      border: 1px solid;
      }

      input[type="text"]{
      border: 2px solid;
      }
      </style>
      </head>
      <body>
      <div>
      <p>helloworld</p>
      </div>
      <p>你好世界</p>
      <input type="text">
      <input type="password">
      </body>
      </html>
    3. 伪类选择器:选择元素具有的状态

      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
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
      a:link {
      color: pink;
      }

      a:active {
      color: yellow;
      }

      a:visited {
      color: blue;
      }

      a:hover {
      color: green;
      }
      </style>
      </head>
      <body>
      <a href="https://linsip.cn">我的个人博客</a>
      </body>
      </html>

CSS常用属性

  1. 字体、文本

    • 字体(font)
    属性 说明 CSS
    font 在一个声明中设置所有字体属性 1
    font-family 规定文本的字体系列 1
    font-size 规定文本的字体尺寸 1
    • 文本(Text)
    属性 说明 CSS
    color 设置文本的颜色 1
    line-height 设置行高 1
    text-align 规定文本的水平对齐方式 1
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style>
    h1 {
    color: pink;
    font-size: 40px;
    text-align: center;
    line-height: 100px;
    border: 1px solid red;
    }
    </style>
    </head>
    <body>
    <h1>Hello World</h1>
    </body>
    </html>
  2. 背景

    • background:设置背景,复合属性
    属性 说明 CSS
    background 复合属性。设置对象的背景特性。 1
    background-color 设置或检索对象的颜色。 1
    background-image background-color 1
  3. 边框

    • border:设置边框,复合属性
  4. 尺寸

    • width:宽度
    • height:高度
  5. 盒子模型:控制布局

    • margin:外边距,相对概念
    • padding:内边距,相对概念
      • 默认情况下设置内边距会影响盒子的大小
      • box-sizing: border-box;设置盒子的属性,让width和height就是最终盒子的大小。
    • float:浮动

练习

注册页面


博主码字不易,本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!