0
点赞
收藏
分享

微信扫一扫

【Web 三件套】两万字带你入门 CSS

_刘彦辉 2022-01-31 阅读 24

文章目录

1. CSS 基本介绍

1.1 认识 CSS

CSS(Cascading Style Sheets):

  • CSS,即层叠样式表是一种用来表现 HTML(标准通用标记语言的一个应用)或 XML标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
  • CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
  • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表
  • 多个样式定义可层叠为一个,即同一个元素可以应用多个样式,这些样式之间会产生叠加

1.2 CSS 基本语法规范

1.2.1 基本语法

选择器 {
	一条/N条声明
}
  • 选择器:绝对针对谁修改
  • 声明:决定修改的内容
  • 声明的属性是以键值对的形式写的,其中不同键值对之间以分号区号,每个键值对的键和值以冒号区分

内部样式示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        p {
            /* 设置字体颜色 */
            color: green;
            /* 设置字体大小 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>我绿了</p>
</body>
</html>

image-20220128143135214

  • CSS 代码可以放到一个专门的 style 标签里面(内部样式),style 标签本身放到页面的任意位置,一般是放到 head 标签中
  • CSS 中的注释符是 /* */,可以使用快捷键 Ctrl + /
  • 上述示例中,选择器为段落标签 p,声明的内容包含将字体颜色 color 设置为 green,将字体大小 font-size 设置为 30px

1.2.2 样式风格

  • 紧凑风格

    p { color: green; font-size: 30px;}
    
  • 展开风格(推荐)

    p { 
        color: green;
        font-size: 30px;
    }
    

1.2.3 样式大小写

由于在 CSS 中不区分大小写,因此

  • 在开发时,统一使用小写字母
  • 属性名也是使用脊柱命名法,即一个属性若是由多个单词构成,中间用 - 隔开

1.2.4 空格规范

  • 冒号后面带空格
  • 选择器和 { 符号之间带有空格

1.3 引入方式

1.3.1 内部样式

基本介绍: 将 CSS 代码放到一个专门的 style 标签里面,style 标签本身可以放到页面的任意位置,一般是放到 head 标签中

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        p {
            /* 设置字体颜色 */
            color: green;
            /* 设置字体大小 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>我绿了</p>
</body>
</html>

优点: 内部样式能够实现样式和页面结构分离

缺点: 样式和页面结构分离的不够彻底,尤其是 CSS 内容较多时

1.3.2 行内样式

基本介绍: 将 CSS 代码以 style 属性的方式写到标签中

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
</head>
<body>
    <p style="color: green ;font-size: 30px">我绿了</p>
</body>
</html>

优点: 适合写简单的样式

缺点: 只针对某个标签生效,不能写太复杂的样式

注意: 行内样式的优先级较高,会覆盖其它样式

1.3.3 外部样式

基本介绍: 实际开发中最常用的方式,先创建一个 CSS 文件,再使用 link 标签引入 CSS

示例代码:

  1. 创建一个 CSS 文件(这里创建一个 style.css),里面写具体样式的内容

    p {
        color: green;
        font-size: 30px;
    }
    
  2. 在 HTML 文件中,通过 link 标签引入写好的 CSS

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>test1</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>我绿了</p>
    </body>
    </html>
    
    • link 标签中的 rel 属性值固定为 stylesheet
    • link 标签中的 href 属性值为 CSS 的路径

优点: 外部样式可以使样式和页面结构彻底分离

缺点:使用外部样式会受到浏览器缓存影响,修改之后不一定立刻生效

补充: 浏览器的缓存知识

2. 选择器

2.1 选择器的功能

CSS 选择器用于选中页面中指定的标签元素。就好比打游戏时,你要先选中攻击的敌人,之后才能给予对方你想造成的伤害。

2.2 选择器的种类

这里主要将选择器分成两大类,八小类来进行介绍

  • 基础选择器:由单个选择器构成的
    • 标签选择器
    • 类选择器
    • id 选择器
    • 通配符选择器
  • 复合选择器:将多种基础选择器结合起来使用
    • 后代选择器
    • 子选择器
    • 并集选择器
    • 伪类选择器

除了上述介绍的八种选择器,CSS 中还有很多其它的选择器,这里只具体介绍这八种常用的选择器image-20220128164836177

参考文档:https://www.w3school.com.cn/cssref/css_selectors.asp

2.3 基础选择器

2.3.1 标签选择器

基本介绍: 选择器的对象为某个标签,选中后就能对所有该标签的内容进行修改

特点: 能快速为同一类标签的内容进行修改,但是不能差异化选择

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        p {
            color: green;
            font-size: 30px;
        }
        div {
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>我绿了</p>
    <div>我红了</div>
</body>
</html>

image-20220128165911490

2.3.2 类选择器

基本介绍: 可以对标签设置一个或多个类 class 属性,然后选择器的对象可以为某个类名,选中后就能对所有属于该类的标签内容进行修改

语法细节:

  • 标签中设置的 class 属性的值:不能使用纯数字、中文、标签名来命名
  • 如果 class 属性的值过长,可以使用 - 分割
  • 一个类可以被多个标签使用,一个标签也可以使用多个类(多个类名之间使用空格分割)
  • CSS 中使用点号 . 开头表示类选择器,点好 . 后面是具体的类名

特点: 可以差异化表示不同的标签,可以让多个标签使用同一个样式

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
        .font-size {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p class="red">我红了</p>
    <p class="green">我绿了</p>
    <div class="red font-size">我红了</div>
</body>
</html>

image-20220128171535186

2.3.3 id 选择器

基本介绍: 可以对每个标签设置一个 id 属性,然后选择器的对象可以为 id 名,选中后就能对是某个 id 的标签的内容进行修改

语法细节:

  • 每个标签都只能设置一个 id 属性,且 id 属性值是唯一的
  • CSS 中使用 # 开头表示 id 选择器,# 后面是具体的 id 值

特点: 通过 id 选择器能选择具体的某个标签进行内容的修改

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        #one {
            color: red;
        }
        #two {
            color: green;
        }
    </style>
</head>
<body>
    <p id="one">我红了</p>
    <p id="two">我绿了</p>
</body>
</html>

2.3.4 通配符选择器

基本介绍: 选择器的对象是 * 所表示的就是通配符选择器,它能够选取所有的标签。常用来清楚浏览器的默认样式

特点: 通配符选择器能让页面的所有标签都被修改

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        * {
            color: red;
        }

    </style>
</head>
<body>
    <p>我红了</p>
    <div>我也红了</p>
    <p>我们都红了</p>
</body>
</html>

image-20220128172900996

2.3.5 基础选择器小结

选择器作用特点优先级
标签选择器能够选出所有相同的标签不能差异化选择较低
类选择器能够选出一个或多个同类标签根据需求选择,最灵活,最常用较高
id 选择器能够选出某个唯一 id 的标签同一个 id 在一个 HTML 中只能出现一次最高
通配符选择器能够选出所有标签特殊清空使用(如清楚浏览器的默认样式)最低

由于选择器可以组合使用,因此在基础选择器中有一个优先级(即对元素的针对性,针对性越强,优先级就越高),组合的基础选择器会按照优先级更高的显示修改的内容

不过由于 CSS 还有复合选择器,所以优先级其实是有一个复杂的计算规则的,这个要根据具体情况判断

2.4 复合选择器

2.4.1 后代选择器

基本介绍: 后代选择器的选择对象为某个父元素的某个子元素(包括孙子元素)

语法细节:

元素1 元素2 {样式声明}
  • 元素1是父级,元素2是子级
  • 元素1和元素2之间要使用空格分割
  • 后代选择器只会影响元素2,不会影响元素1
  • 后代选择器不仅仅可以是标签选择器的组合,还可以是类选择器或 id 选择器的组合

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        ul li {
            color: red;
        }
        .green li {
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>弥豆子</li>
        <li>弥豆子</li>
        <li>弥豆子</li>
    </ul>
    <ol class="green">
        <li>善逸</li>
        <li>善逸</li>
        <li>善逸</li>
    </ol>
</body>
</html>

image-20220128220110944

2.4.2 子选择器

基本介绍: 和后代选择器类似,选择器的对象为某个父元素的子元素,但是只能是子元素,不能是孙子元素

语法细节:

元素1>元素2 {样式声明}
  • 元素1是父级,元素2是子级
  • 元素1和元素2之间用 > 隔开
  • 子选择器只选亲儿子,不选孙子元素

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        .red>a {
            color: red;
        }
    </style>
</head>
<body>
    <div class="red">
        <a href="#">链接1</a>
        <p><a href="#">链接2</a></p>
    </div>
</body>
</html>

image-20220128221530969

2.4.3 并集选择器

基本介绍: 并集选择器用于选择多组标签,可以对这些标签集体声明

语法细节:

元素1,
元素2,
...,
元素N {样式声明}
  • 通过逗号将各个元素分割开
  • 任何基础选择器都可以使用并集选择器
  • 并集选择器建议竖着写,每个选择器占一行

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        div,
        p,
        ul>li {
            color: pink;
        }
    </style>
</head>
<body>
    <div>弥豆子</div>
    <p>善逸</p>
    <ul>
        <li>伊之助</li>
        <li>碳治郎</li>
    </ul>
</body>
</html>

image-20220128222246221

2.4.4 伪类选择器

基本介绍: 伪类选择器分为链接伪类选择器:focus 伪类选择器

  • 链接伪类选择器

    • 语法细节:

      选择器的对象含义
      a:link选择未被访问过的链接
      a:visted选择已被访问过的链接
      a:hover选择鼠标指针悬停在上的链接
      a:active选择鼠标按下了但是未弹起的链接
    • 注意事项: 对于链接选择器,一般按照 LVHA (记忆规则“绿化”)的顺序书写,如果把 active 拿到前面去,就会导致 active 失效

    • 示例代码:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>test1</title>
          <style>
              a:link {
                  color: red;
              }
              a:visited {
                  color: black;
              }
              a:hover {
                  color: blue;
              }
              a:active {
                  color: green;
              }
          </style>
      </head>
      <body>
          <a href="#">我是链接</a>
      </body>
      </html>
      
  • :focus 伪类选择器

    • 基本介绍::focus 伪类选择器可以选择获取焦点的 input 表单元素(这里只介绍这一种,理解就行)

    • 示例代码:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>test1</title>
          <style>
              .one>input:focus {
                  color: red;
              }
              .two>input:focus {
                  color: green;
              }
          </style>
      </head>
      <body>
          <div class="one">
              <input type="text">
              <input type="text">
          </div>
          <div class="two">
              <input type="text">
              <input type="text">
          </div>
      </body>
      </html>
      

2.4.5 复合选择器小结

选择器作用注意事项
后代选择器选择后代元素后代包含孙子元素
子选择器选择子元素子元素只能是儿子,不能是孙子
并集选择器选择具有相同样式的元素更好的做到代码复用
链接伪类选择器选择不同状态的链接注意 LVHA 书写顺序
:focus 伪类选择器选择被选中的元素这里只介绍 input:focus

3. 常用元素属性

CSS 的属性有很多,就像 Java 中很多的方法一样,这里只重点介绍一些常用元素。如需了解更多,可以看看参考文档。

参考文档:https://www.w3school.com.cn/cssref/index.asp

3.1 字体属性

3.1.1 文字字体

属性:

font-family

注意事项:

  • 字体名称可以用中文,但是不建议
  • 如果值有多个字体,则多个字体之间用逗号分割(将会从左到右查找字体,如果查找不到,会使用默认字体)
  • 字体可以使用引号括起来,以防止字体之间有空格
  • 建议使用常用字体,并且保证设置的字体在个人机器上存在

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        #one {
            font-family: '宋体';
        }
        #two {
            font-family: "Microsoft YaHei";
        }
    </style>
</head>
<body>
    <div id="one">我是宋体</div>
    <div id="two">我是微软雅黑</div>
</body>
</html>

image-20220129191132339

3.1.2 文字大小

属性:

font-size

注意事项:

  • 由于不同浏览器的默认字号不一样,因此最好给一个明确的值

  • font-size 的值可以是具体的数字,单位是像素px

  • font-size 的值也可以是固定的英文单词

    描述
    xx-small、x-small、small、medium、large、x-large、xx-large把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。默认值:medium。
    smaller把 font-size 设置为比父元素更小的尺寸。
    larger把 font-size 设置为比父元素更大的尺寸。
    length把 font-size 设置为一个固定的值。
    %把 font-size 设置为基于父元素的一个百分比值。
    inherit规定应该从父元素继承字体尺寸。
  • 实际上设置的字体中,字符框的高度会受浏览器的缩放影响,与实际设置的值不同

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        #one {
            font-size: 10px;

        }
        #two {
            font-size: xx-large;
        }
    </style>
</head>
<body>
    <div id="one">我是10px的大小</div>
    <div id="two">我是xx-large的大小</div>
</body>
</html>

image-20220129192344906

3.1.3 文字粗细

属性:

font-weight

注意事项:

  • font-weight 设置的值可以是数字,没有单位,但是取值范围必须是[100,900]这个区间的整百的值

  • font-weight 设置的值可以是英文单词

    描述
    normal默认值。定义标准的字符。
    bold定义粗体字符。
    bolder定义更粗的字符。
    lighter定义更细的字符。
    inherit规定应该从父元素继承字体的粗细。
  • 数字400等同于 normal,而700等同于 bold。

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        #one {
            font-weight: 700;
        }
        #two {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="one">我是加粗字体</div>
    <div id="two">我是加粗字体</div>
</body>
</html>

image-20220129193129581

3.1.4 文字样式

属性:

font-style

注意事项:

  • font-style 设置的值可以为如下几个

    描述
    normal默认值。浏览器显示一个标准的字体样式。
    italic浏览器会显示一个斜体的字体样式。
    oblique浏览器会显示一个倾斜的字体样式。
    inherit规定应该从父元素继承字体样式。
  • 其实很少把某个文字变倾斜,但是经常会把倾斜的字体改成正常的

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        #one {
            font-style: italic;
        }
        #two em{
            font-style: normal;
        }
    </style>
</head>
<body>
    <div id="one" >我背正改斜了</div>
    <div id="two"><em>我改邪归正了</em></div>
</body>
</html>

image-20220129193843168

3.2 文本属性

3.2.1 文本颜色

属性:

color

注意事项:

  • color 的值可以是一些表示颜色的英文单词(red、green、blue、black等)
  • color 的值可以是十六进制,形如:#ff0000
  • color 的值可以是 RGB 方式,形式如:rgb(255, 0, 0)

补充: RGB 的简单介绍

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        #one {
            color: red;
        }
        #two {
            color: #ff0000;
        }
        #three {
            color: rgb(255,0,0);
        }
    </style>
</head>
<body>
    <div id="one" >弥豆子</div>
    <div id="two">善逸</div>
    <div id="three">伊之助</div>
</body>
</html>

image-20220129204005363

3.2.2 文本对齐

属性:

text-align

注意事项:

  • text-align 的值可以是

    描述
    left把文本排列到左边。默认值:由浏览器决定。
    right把文本排列到右边。
    center把文本排列到中间。
    justify实现两端对齐文本效果。
    inherit规定应该从父元素继承 text-align 属性的值
  • 该属性不仅能控制文本对齐,也能控制图片等元素居中或者靠右

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        #one {
            text-align: left;
        }
        #two {
            text-align: center;
        }
        #three {
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="one" >弥豆子</div>
    <div id="two">善逸</div>
    <div id="three">伊之助</div>
</body>
</html>

image-20220129204728242

3.2.3 文本装饰

属性:

text-decoration

注意事项:

  • text-decoration 的值可以为

    描述
    none默认,即什么都不加
    underline定义文本下的一条线,即下划线
    overline定义文本上的一条线,即上划线
    line-through定义穿过文本下的一条线,即删除线
    blink定义闪烁的文本。
    inherit规定应该从父元素继承 text-decoration 属性的值。
  • none 可以给 a 标签去掉下划线

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        #one {
            text-decoration: none;
        }
        #two {
            text-decoration: overline;
        }
        #three {
            text-decoration: underline;
        }
        #four {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div id="one" >啥都没有</div>
    <div id="two">上划线</div>
    <div id="three">下划线</div>
    <div id="four">删除线</div>
</body>
</html>

image-20220129205323503

3.2.4 文本缩进

属性:

text-indent

注意事项:

  • text-indent 的值可以是数字,单位可以有 px 或者 em。px 就是以像素单位,而 em 单位表示当前元素的文字大小,即 1em 表示一个文字大小
  • 缩进可以是负值,表示往左缩进,会导致开头文字不在显示框中

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        /* #one {
            text-indent: 0em;
        } */
        #two {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div id="one" >无缩进的文字</div>
    <div id="two">两个文字距离缩进的文字</div>
</body>
</html>

image-20220129211034336

3.2.5 文本行高

属性:

line-height

注意事项:

  • 行高指的是上下文本行之间的基线距离(行高=文字本身的高度+行间距)
  • line-height 的值为行高,单位是px

补充: HTML 中展示文字涉及到的几个基准线

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        div {
            font-size: 30px;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div>第一行</div>
    <div>第二行</div>
    <div>第三行</div>
</body>
</html>

image-20220129220025437

3.3 背景属性

3.3.1 背景颜色

属性:

background-color

注意事项:

  • background-color 的值和 color 的值是一样的,可以通过三种方式设置
  • background-color 默认的值是 transparent,表示透明

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        .one {
            background-color: #ff0000;
        }
        .two {
            background-color: rgb(0,0,255);
        }
        .three {
            background: transparent;
        }
    </style>
</head>
<body>
    <div class="one">红色背景</div>
    <div class="two">蓝色背景</div>
    <div class="three">透明背景</div>
</body>
</html>

image-20220129221842940

3.3.2 背景图片

属性:

background-image: url()

注意事项:

  • background-image 的 url 中是图片路径
  • url 上可以加引号,也可以不加
  • background-image 默认是按照“平铺”的方式来展示图片的

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        .one {
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
        }
        .two {
            background-image: url(./image/善逸.jpg);
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="one">弥豆子</div>
    <div class="two">善逸</div>
</body>
</html>

在这里插入图片描述

3.3.3 背景平铺

属性:

background-repeat

注意事项:

  • background-repeat 是用来设置平铺方式的,取值如下

    描述
    repeat默认。背景图像将在垂直方向和水平方向重复
    repeat-x背景图像将在水平方向重复,即水平平铺
    repeat-y背景图像将在垂直方向重复,即垂直平铺
    no-repeat背景图像将仅显示一次,不进行平铺
    inherit规定应该从父元素继承 background-repeat 属性的设置。
  • background-repeat 默认取值是 repeat

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        .one {
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            background-repeat: no-repeat;
        }
        .two {
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            background-repeat: repeat-x;
        }
        .three {
            background-image: url(./image/弥豆子.jpg);
            height: 600px;
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div class="one">不平铺</div>
    <div class="two">水平平铺</div>
    <div class="three">垂直平铺</div>
</body>
</html>

image-20220129231416092

3.3.4 背景位置

属性:

background-position

注意事项:

  • background-position 的值可以有三类

    描述
    top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right如果您仅规定了一个关键词,那么第二个值将是"center"。默认值:0% 0%。
    x% y%第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。
    xpos ypos第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。您可以混合使用 % 和 position 值。
  • 计算机的平面坐标系,左上角为原点,往右为x正轴,往下为y正轴

  • 如果参数的两个值都是方位名词,则与前后参数顺序无关(如:left center 和 center left 一个意思)

  • 如果只指定了一个方位名词,则第二个默认居中(如:left 其实表示 left center)

  • 如果参数是精确值,则第一个肯定是x,第二个肯定是y(如:100 200 表示x为100,y为200)

  • 如果参数是精确值,,且只给定了一个参数,则该参数一定是x,另一个默认垂直居中(如:100 表示横坐标为100,垂直居中)

  • 如果参数是混合单位,则第一个值一定为x,第二个值为y(如:100 center 表示横坐标为100,垂直居中)

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        .one {
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            background-repeat: no-repeat;
            background-position: 0 0;
        }
        .two {
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            background-repeat: no-repeat;
            background-position: center center;
        }
        .three {
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            background-position: 100% 100%;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="one">背景左上角</div>
    <div class="two">背景居中</div>
    <div class="three">背景右下角</div>
</body>
</html>

image-20220130011424407

3.3.5 背景尺寸

属性:

background-size

注意事项:

  • background-size 的值可以有四类

    描述
    length设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。
    percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。
    cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
    contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
  • contain 是把尺寸放到适应的最大尺寸,而 cover 是用背景图将背景区域完全覆盖掉,可能会导致部分区域超过显示区域

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        .one {
            background-image: url(./image/弥豆子.jpg);
            height: 600px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        body {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="one">弥豆子</div>
</body>
</html>

image-20220130014729546

3.4 圆角矩形

3.3.1 基本用法

border-radius
  • border-radius 的值表示矩形四个角内切圆的半径
  • 内切圆半径越大,矩形的圆角化就越圆
  • border-radius 其实是一个符合写法,还可以针对四个角分别设置
    • border-top-left-radius 表示左上角
    • border-top-right-radius 表示右上角
    • border-bottom-right-radius 表示右下角
    • border-bottom-left-radius 表示左下角
  • border-radius 本身可以直接设置4个值,值的顺序是按照左上——右上——右下——左下顺时针排列

3.3.2 生成圆形

当内切圆的直径等于矩形的变成时,就可以生成圆形

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        .one {
            background-image: url(./image/弥豆子.jpg);
            height: 600px;
            width: 600px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-radius: 600px;
        }
        body {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="one">弥豆子</div>
</body>
</html>

image-20220130021505989

3.3.3 生成圆角矩形

当 border-radius 的值适合时,就能生成圆角矩形

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        .one {
            background-image: url(./image/弥豆子.jpg);
            height: 600px;
            width: 600px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-radius: 50px;
        }
        body {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="one">弥豆子</div>
</body>
</html>

image-20220130021724647

4. 元素的显示模式

在 CSS 中,对于 HTML 的标签的显示模式有很多。这里主要介绍:块级元素和行内元素

4.1 块级元素

常见的块级元素:

h1 - h6
p
div
ul
ol
li
...

特点:

  • 独占一行
  • 高度、宽度、内外边距、行高都可以控制
  • 宽度默认是父级元素宽度的100%
  • 内部可以嵌套块级元素和行内元素

注意:

  • 文字类的元素内部不能使用块级元素
  • p 标签主要用于存放文字,内部不能放块级元素,尤其是 div

4.2 行内元素

常见的行内元素:

a
strong
b
em
i
del
s
ins
u
span
...

特点:

  • 不独占一行,一行可以显示多个元素
  • 设置高度、宽度、行高均是无效的
  • 左右外边距是有效的,上下外边距是无效的,内边距都是有效的
  • 默认宽度就是本身的内容宽度
  • 行内元素只能容纳文本和其它行内元素,不能放块级元素

4.3 改变显示模式

属性: 使用 display 属性可以修改元素的显示模式

display
  • display: block 表示改成块级元素
  • display: inline 表示改成行内元素

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        span {
            display: block;
        }
    </style>
</head>
<body>
    <span>弥豆子</span>
    <span>善逸</span>
</body>
</html>

image-20220130024827243

5. 盒模型

5.1 基本介绍

每一个 HTML 元素都相当于一个矩形的“盒子”。这个盒子由如下几部分构成

  • 边框 border:盒子的边框
  • 内边距 padding:边框与内容之间的距离
  • 外边距 margin:盒子与盒子之间的距离
  • 内容 content:盒子里面装的东西

5.2 边框

5.2.1 基础属性

属性:

border-width
border-style
border-color
  • border-width 表示边框的粗细
  • border-style 表示边框的样式,默认是没边框
    • solid 表示实线边框
    • dashed 表示虚线边框
    • dotted 表示点线边框
  • border-color 表示边框颜色
  • 可以对边框的四个方向分别改变
    • border-top 上边框
    • border-bottom 下边框
    • border-left 左边框
    • border-right 右边框

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        .one {
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            width: 300px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-width: 5px;
            border-style: solid;
            background-color: black;
        }
        body {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="one">弥豆子</div>
</body>
</html>

image-20220130033517492

5.2.2 边框会撑大盒子

我们设置的 width 和 heigth 属性是不包含边框的。如果没有边框,此时元素的尺寸就和设置的是一样的;如果有了边框,那么整个元素就会被撑大。

为了在布局时,方便计算,我们更想要在设置尺寸时能够包含边框。可以将 box-sizing 属性设置为 border-box 来表示设置的 width 和 heigth 包含了边框。

* {
	box-sizing: border-box;
}

5.3 内边距

5.3.1 基础属性

属性: 通过 padding 属性来设置内容和边框之间的距离

padding
  • padding-top 表示上内边距

  • padding-bottom 表示下内边距

  • padding-left 表示左内边距

  • padding-right 表示右内边距

  • 可以把多个方向的 padding 合并到一起,但是写法需要注意,示例如下

    padding: 5px; 表示四个方向都是 5px
    padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
    padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
    padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)
    

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        div {
            height: 200px;
            width: 300px;
            padding-top: 5px;
            padding-left: 5px;
        }
    </style>
</head>
<body>
    <div>
        弥豆子
    </div>
</body>
</html>

image-20220130035202917

5.3.2 内边距会撑大盒子

内边距其实也会撑大盒子,和边框一样,可以将 box-sizing 属性设置为 border-box 来表示设置的 width 和 heigth 包含了内边距。

* {
	box-sizing: border-box;
}

5.4 外边距

5.4.1 基础属性

属性: 外边距是控制盒子和盒子之间距离的,通过 margin 属性控制

margin
  • margin-top 表示上外边距

  • margin-bottom 表示下外边距

  • margin-left 表示左外边距

  • margin-right 表示右外边距

  • 可以把多个方向的 margin 合并到一起,但是写法需要注意,示例如下

    margin: 10px; // 四个方向都设置
    margin: 10px 20px; // 上下为 10, 左右 20
    margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
    margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
    

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        div {
            height: 200px;
            width: 300px;
            padding-top: 5px;
            padding-left: 5px;
            margin-top: 5px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div>
        弥豆子
    </div>
    <div>
        弥豆子
    </div>
</body>
</html>

image-20220130042350879

5.4.2 块级水平元素居中

前提: 把水平 margin 设为 auto,即 margin-left 和 margin-right 设为 auto

方法: 有三种方式

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意:

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        .one {
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            width: 300px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-width: 5px;
            border-style: solid;
            margin: auto;
        }
        body {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="one">弥豆子</div>
</body>
</html>

image-20220130043022130

5.5 去除浏览器默认样式

由于浏览器会给元素加上一些默认的样式,尤其是内外边距。因此为了保证不同浏览器上都能按照统一的样式显示,往往我们会去除浏览器的默认样式。方法如下

* {
    margin: 0;
    padding: 0;
}

6. 弹性布局

6.1 认识 flex 布局

  • flex 是 flexible box 的缩写,意思是”弹性盒子“,用来为盒装模型提供最大的灵活性。

  • 任何一个容器都可以指定为 flex 布局

  • flex 布局的本质是给父盒子添加 display: flex 属性,来控制盒子的位置和排列方式

  • 采用 flex 布局的元素,称为 flex 容器(flex container),简称”容器”,通过 display:flex 设置

  • flex 容器的所有子元素自动成为容器成员,称为 flex 项目(flex item),简称”项目”。

  • 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

  • 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。

  • 当给父元素设置了 display: flex 属性,此时父元素里面的元素都要遵循弹性布局规则,并且子元素就不再按照块级元素/行内元素的规则来排列了

img

注意:
当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效

6.2 常用属性

6.2.1 justify-content

基本介绍:

该属性用于设置主轴上的子元素排列方式

属性取值:

取值描述
flex-start默认值,项目位于容器的开头
flex-end项目位于容器的结尾
center项目位于容器的中央
space-between项目在行与行之间留有间隔
space-around项目在行之前/行之间和行之后留有间隔

示例代码1: 未指定 justify-content 属性时,默认按照从左到右的方向布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        div {
        width: 100%;
        height: 150px;
        background-color: red;
        display: flex;
        }
        div span {
        width: 100px;
        height: 100px;
        background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>
</html>

image-20220130061802088

示例代码2: 将示例代码1增加 justify-content: flex-end,此时元素都排列到右侧

image-20220130061931542

示例代码3: 将示例代码1增加 justify-content: center,此时元素都居中排列

image-20220130062135350

示例代码4: 将示例代码1增加 justify-content: space-around,此时元素平分了剩余空间

image-20220130062235444

示例代码5: 将示例代码1增加 justify-content: space-between,此时两边元素贴近边缘,再平分剩余空间

image-20220130062343842

6.2.2 align-items

基本介绍:

该属性用于设置侧轴上的元素排列方式

属性取值:

取值描述
stretch默认值,行拉伸以占据剩余空间
center项目位于容器的中央
flex-start项目位于容器的开头
flex-end项目位于容器的末端
baseline项目被定位到容器的基线

示例代码1: 未指定 align-items 属性时,子元素没有被显示指定高度就会填满父元素高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <style>
        div {
        width: 500px;
        height: 500px;
        background-color: green;
        display: flex;
        }
        div span {
        width: 150px;
        background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

image-20220130063057856

示例代码2: 将示例代码1增加 align-items: center,此时元素实现垂直居中

image-20220130063208639

示例代码3: 将示例代码1增加 align-items: flex-start,此时元素实现在最顶部

image-20220130063308383

示例代码4: 将示例代码1增加 align-items: end,此时元素实现在最底部

image-20220130063332812

示例代码5: 将示例代码1增加 align-items: baseline,此时元素对准基线

image-20220130063913071

举报

相关推荐

0 条评论