超细的CSS学习笔记(CSS详解)

2022年05月14日 阅读数:5
这篇文章主要向大家介绍超细的CSS学习笔记(CSS详解),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

复习CSS时记录的笔记。
从最基本的 CSS 概念开始,复习如何使用 CSS 同时控制多重网页的样式和布局。同时涉及最新版本 CSS3 的内容,掌握新的标准化组件。
请添加图片描述css


1、CSS介绍

1.CSS概述

层叠样式表(英语:Cascading Style Sheets,简写 CSS),又称串样式列表、级联样式表、串接样式表、阶层式样式表,一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,由 W3C 定义和维护。目前最新版本是 CSS2.1,为 W3C 的推荐标准。html

注:定义来自维基百科。前端

直观的来讲 CSS 就是咱们网页的美容师,为咱们的网页添加样式,美化网页,让网页更加美观。而咱们前面所学到的 HTML 是写出咱们网页的结构。web

2.CSS语法

CSS 的语法单元是样式,每一个样式包含两部份内容:选择器和声明(或者称为规则):express

例子:api

h1 {
   
   
  color: red;
}

注:上述例子中 h1 是选择器,color 是属性,red 是属性值。浏览器

请添加图片描述
CSS 语法结构为:选择器{属性:值;属性:值;…}bash

  • 选择器:一般是你须要设置样式的 HTML 元素。
  • 属性:是你须要设置的样式属性,好比宽高,颜色,大小等。
  • 属性值:你须要设置的样式属性的具体值,好比宽高具体是多少 px,颜色具体是什么颜色。

3.CSS 注释

注释用来为部分 CSS 代码添加额外的解释,或者用来组织浏览器解析一部分区域内的 CSS 代码。编辑器

语法:ide

/* 这是一行单行注释 */

/*
这是
多行注释
*/

新建一个 test.html 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
   
   
        color: red;
        /*font-size:28px;
        font-weight:500;*/
      }

      div {
   
   
        width: 200px;
        height: 200px;
        /* background:blue;*/
        background: red;
      }
    </style>
  </head>

  <body>
    <div>小牛</div>
    <p>小马使我快乐!</p>
  </body>
</html>

请添加图片描述

4.CSS 数值与单位

你会在不少地方看到 CSS 单位中使用到数值。下面为你们介绍数值的最经常使用类别。

颜色值

在网页中的颜色设置是很是重要,有字体颜色,背景颜色,边框颜色等,设置颜色的方法也有不少:

1.英文命名颜色

p {
   
   
  color: pink;
}
/*给p标签的字体颜色设置为粉色*/

2.RGB 颜色

由 Red、Green、Blue 三种颜色的比例来配色,简称 RGB。

p {
   
   
  color: rgb(154, 32, 432);
}

每一项的值能够是 0~255 之间的整数,也能够是 0~100% 的百分数,如:

p {
   
   
  color: rgb(30%, 20%, 40%);
}

3.十六进制颜色

如今较为广泛的颜色使用法,其原理其实也是 RGB 设置,可是其每一项的值由 0~255 变成了十六进制 00-ff。

p {
   
   
  color: #00eeff;
}

长度值

长度单位总结了几种经常使用单位:px,em,%,这三种单位都是相对单位。

1.像素

px 像素(Pixel)。相对长度单位,像素 px 是相对于显示器屏幕分辨率而言的。

特色:

  • E 没法调整那些使用 px 做为单位的字体大小。
  • 国外的大部分网站可以调整的缘由在于其使用了 em 或 rem 做为字体单位。

2.em

就是本元素给定字体的 font-size 值,若是元素的 font-size 为 14px,那么 1em=14px。若是 font-size 为 18px,那么 1em=18px。

p {
   
   
  font-size: 14px;
  line-height: 2em;
}
/*在这里的line-height行高被设置成了14*2=28px*/

3.百分比

p {
   
   
  font-size: 14px;
  line-height: 120%;
}
/*行高为:14*1.2=16.8*/

5.CSS样式类型

CSS 样式类型分为三种:内联式、内嵌式、外链式。

内联式(行内式)

经过标签的 style 属性来设置元素的样式,语法格式为:

<标签名 style="属性1:属性值1; 属性2:属性值2; ..."> 内容 </标签名>

例子:

<p style="color:blue;">Hello World</p>

优势:十分灵活,书写方便,权重高(后面会提到)。
缺点:只能操做某一个标签,没有实现样式和结构相分离。

内嵌式(内部样式表)

将 CSS 代码集中写在 HTML 文档的 head 头部标签中,而且用 style 标签订义。语法格式为:

<head>
<style type="text/css">
    选择器 {
   
   属性1:属性值1; 属性2:属性值2; ...}
</style>
</head>

例子:

<style type="text/css">
    p{
   
   color:blue;}
</style>

优势:能够经过一条语句操做多个标签或类。
缺点:只能控制一个页面,没有完全实现样式和结构分离。

外链式(外部样式表)

将全部的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中,经过 link 标签将外部样式表文件连接到 HTML 文档中。语法格式为:

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

注:href 定义所连接外部样式表文件的 URL,能够是相对路径,也能够是绝对路径。rel 定义当前文档与被连接文档之间的关系,在这里须要指定为 “stylesheet”,表示被连接的文档是一个样式表文件。

例子:

首先咱们要建立一个 css 文件,好比:main.css。而后在里面就能直接写 css 代码了。好比:

p {
   
   
  color: blue;
}

其次咱们在 html 文件中引入这个 css 文件。

<link rel="stylesheet" href="main.css" />

优势:一个单独的 CSS 文件,多个 HTML 文件能够引用一个 CSS 样式表文件。HTML 代码和 CSS 代码分离,要写什么就在哪一个文件去找,修改方便。

注:这样写的前提是 HTML 页面与 CSS 文件在同一文件夹下。行内样式表通常写在标签头部,内嵌式样式表、外联式通常写在 标签内。为了编码规范,但愿你们尽可能使用外联式来写咱们的 CSS 代码。

三种方法的优先级

我三种 CSS 样式类型,若是对于同一个元素,同时使用了三种方法设置了 CSS 样式,这个时候,哪一个方法是有效的呢 ?

能够记住一个优先级:

内联式 > 嵌入式 > 外链式

可是“嵌入式 > 外链式” 有一个前提:嵌入式 CSS 样式的位置必定在外链式后面

制做一个谷歌图标的小案例。
在这里插入图片描述
源码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <meta charset="utf-8" />
  </head>

  <body>
    <p style="font-size:60px">
      <span style="color:blue">G</span>
      <span style="color:red">o</span>
      <span style="color:orange">o</span>
      <span style="color:blue">g</span>
      <span style="color:green">l</span>
      <span style="color:red">e</span>
    </p>
  </body>
</html>

注:span 是一个行内标签,它可以不换行显示。

二.CSS基本样式

1.文字排版

字体

经过 font-family 属性设置字体种类,注意不要设置不经常使用的字体,由于若是用户本地电脑上若是没有安装你设置的字体,就会显示浏览器默认的字体。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      body {
   
   
        font-family: 'yahei';
        /*微软雅黑*/
      }
    </style>
  </head>
  <body>
    <p>小牛</p>
  </body>
</html>

几种几乎全部系统都可以支持的几种字体:Arial,Courier New,Georgia,Times New Roman,Trebuchet MS,Verdana。

字体大小和颜色

字体大小经过 font-size 属性设置。字体的经常使用单位是:px,em。字体颜色经过 color 属性来设置。

<style>
  body {
   
   
    font-family: 'yahei';
    font-size: 40px;
    color: red;
  }
</style>
<body>
  <p>小牛</p>
</body>

注意:这里只展现

字体样式-粗体

经过 font-weight 属性设置字体的粗细。经常使用的有 normal:字体正常,bold:文字加粗。

<style>
  body {
   
   
    font-size: 40px;
    color: red;
    font-weight: bold;
  }
</style>
<body>
  <p>小牛</p>
</body>

字体样式-斜体
经过 font-style 属性设置文字格式。

  • normal: 将文本设置为普通字体 (将存在的斜体关闭)。
  • italic: 若是当前字体的斜体版本可用,那么文本设置为斜体版本;若是不可用,那么会利用 oblique 状态来模拟 italics。
  • oblique: 将文本设置为斜体字体的模拟版本,也就是将普通文本倾斜的样式应用到文本中。
body {
   
   
  font-size: 40px;
  color: red;
  font-style: italic;
}

字体装饰

经过 text-decoration 属性设置或者取消字体上的文本装饰,咱们通常会使用这个属性去掉连接上的默认下划线。

可用值为:

  • none: 取消已经存在的任何文本装饰。
  • underline: 文本下划线。
  • overline: 文本上划线。
  • line-through: 穿过文本的线(删除线)。
body {
   
   
  font-size: 40px;
  color: red;
  font-style: italic;
  text-decoration: underline;
}

段落排版

缩进

段落缩进使用 text-indent 属性,中文文字中的段前习惯空两个文字的空白。

<style>
  body {
   
   
    font-size: 14px;
    color: red;
    font-style: italic;
    text-decoration: underline;
    text-indent: 2em;
  }
</style>
<body>
  <p>小牛和小马是好朋友</p>
</body>

行高

可使用 line-height 属性设置段落行高。

<style>
  body {
   
   
    font-size: 14px;
    color: red;
  }
</style>
<body>
  <p>小牛和小马是好朋友</p>
  <p style="line-height:30px">小牛和小马是好朋友</p>
</body>

当两个段落一个设置行高,一个未设置行高时的效果:
请添加图片描述
中文字间距、字母间距

可使用 letter-spacing 属性设置文字间距或者字母间距。

  <style>
        body{
   
   
            font-size:14px;
            color:red;
            letter-spacing:2em;
        }
    </style>
  </head>
  <body>
       <p>小牛和小马是好朋友</p>
  </body>

对齐

若是想为块状元素中的文本、图片设置样式居中,可使用text-align 属性。

  <style>
        body{
   
   
            font-size:14px;
            color:red;
            text-align:center;
        }
    </style>
  </head>
  <body>
      <p>小牛和小马是好朋友</p>
  </body>

一样也可使用 text-align:left 设置左对齐,使用 text-align:right 设置右对齐。

2.样式化列表

list 列表大致上和其余文本同样,这里讲解一些特殊用在列表上的 CSS 属性。

列表特定样式

符号样式:用 list-style-type 设置用于列表的项目符号的类型,例如无序列表的方形或圆形项目符号,或有序列表的数字,字母或罗马数字。常见的取值有:

  • disc 无序列表的默认值,实心圆。
  • circle 空心圆。
  • square 实心方块。
  • decimal 有序列表的默认值阿拉伯数字。
  • lower-alpha 小写英文字母。
  • upper-alpha 大写英文字母。

栗子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      ul {
   
   
        list-style-type: circle;
      }
      ol {
   
   
        list-style-type: lower-alpha;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ul>

    <ol>
      <li>555</li>
      <li>666</li>
      <li>777</li>
    </ol>
  </body>
</html>

运行效果:
在这里插入图片描述

项目符号位置:经过 list-style-position 设置在每一个项目开始以前,项目符号是出如今列表项内,仍是出如今其外。

  • 默认值为 outside,这使项目符号位于列表项以外。
  • 若是值设置为 inside,项目条目则位于行内。

咱们把前面的例子设置为 inside 来看看效果,为了便于查看效果,咱们为 ul 和 li 设置背景色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      ul {
   
   
        list-style-type: circle;
        list-style-position: inside;
        background-color: red;
      }

      ol {
   
   
        list-style-type: lower-alpha;
      }

      li {
   
   
        background-color: gold;
      }
    </style>
  </head>

  <body>
    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ul>

    <ol>
      <li>555</li>
      <li>666</li>
      <li>777</li>
    </ol>
  </body>
</html>

效果为:
在这里插入图片描述

2.样式化连接

选择器中有如下几种伪类 :link、 :hover、 :active、 :visited, 咱们也能够为伪类设置样式。

首先咱们写一个连接,来看看它默认的一些样式:

<a href="#">我是连接</a>

效果图:
在这里插入图片描述
咱们发现如下特色:

  • 连接具备下划线。
  • 未访问过的 (Unvisited) 的连接是蓝色的。
  • 访问过的 (Visited) 的连接是紫色的。
  • 悬停 (Hover) 在一个连接的时候鼠标的光标会变成一个小手的图标。
  • 激活 (Active) 连接的时候会变成红色 (用鼠标左键点击连接)。

知道连接的默认样式后,咱们一样可使用 color 属性改变连接不一样状态的颜色,使用 text-decoration 属性去掉连接默认的下划线。通常来讲对于连接的样式,掌握这两个就够了。

<style>
  a:hover {
   
   
    color: red;
    text-decoration: none;
    /*鼠标通过,字体颜色变成红色,而且去掉下划线*/
  }
</style>
<body>
  <a href="https://www.lanqiao.cn/">实验楼</a>
</body>

3.Web字体

对于字体的使用来讲,有时候咱们可能并不只仅知足于使用自带的字体。而经过 Web 字体,咱们可使用更多的不一样的文本样式。

首先咱们经过 @font-face 指定要下载的字体文件。

@font-face {
   
   
  font-family: 'Bitstream Vera Serif Bold';
  src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf');
}

而后使用 @font-face 中指定的字体种类名称来将你的定制字体应用到你须要的地方,好比说:

body {
   
   
  font-family: 'Bitstream Vera Serif Bold', serif;
}

完整的代码为:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      @font-face {
   
   
        font-family: 'Bitstream Vera Serif Bold';
        src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf');
      }

      body {
   
   
        font-family: 'Bitstream Vera Serif Bold', serif;
      }
    </style>
  </head>

  <body>
    <div>我爱学习,学习使我快乐!</div>
  </body>
</html>

使用 Web 字体后在浏览器中运行的效果图为:在这里插入图片描述
再来看看没有使用以前是什么样子的:
在这里插入图片描述
注:如今网上有不少免费可使用的 web 字体,你们能够自行百度搜索下载使用在本身的网页当中。好比:Google Web Fonts

3、CSS 样式化区块

1.元素分类

在 HTML 中的标签元素大致被分为三类:块级元素、行内元素、行内块元素。

经常使用的块级元素:

<div>
  <p></p>
  <h1>
    ...
    <h6>
      <ol>
        <ul>
          <table>
            <address>
              <blockquote>
                <form></form>
              </blockquote>
            </address>
          </table>
        </ul>
      </ol>
    </h6>
  </h1>
</div>

常见的行内元素:

<a>
  <span>
    <br />
    <i>
      <em>
        <strong> <label></label></strong></em></i></span
></a>

常见的行内块元素:

<img /> <input />

块级元素

块级元素,顾名思义,该元素呈现“块”状,因此它有本身的宽度和高度,也就是能够自定义 width 和 height,除此以外,块级元素独自占据一行高度(float 浮动除外),通常能够做为其余容器使用,可容纳块级元素和行内元素。

块级元素有如下特色:

  • 每一个块级元素都重新一行开始,而且其后的元素都另起一行。
  • 元素的高度、宽度、行高以及顶和底边间距均可以设置。
  • 元素宽度在不设置的状况下,是它自己父容器的 100%(和父元素宽度一致)。

请添加图片描述

行内元素

行内元素不能够设置宽(width)和高(height),但能够与其余行内元素位于同一行,行内元素内通常不能够包含块级元素。行内元素的高度通常由元素内部的字体大小决定,宽度由内容的长度控制。

行内元素有如下特色:

  • 和其余元素在一行上。
  • 元素的高度、宽度、行高以及顶和底边间距都不能够设置。
  • 元素的宽度就是它包含的文字或图片的宽度,不可改变。

请添加图片描述
行内块元素

行内块级元素,它既具备块级元素的特色,也有行内元素的特色,它能够自由设置元素宽度和高度,也能够在一行中放置多个行内块级元素。好比 input、img 就是行内块级元素,它能够设置高宽以及一行多个。

具体特色以下:

  • 和其余元素在一行上。
  • 元素的高度、宽度、行高以及顶和底边间距均可以设置。

2.区块模型

区块模型也就是咱们常说的盒子模型,而所谓盒子模型就是把 HTML 页面中的元素看做是一个矩形的盒子,也就是一个盛装内容的容器。

盒模型的宽度和高度和咱们日常所说的物体的宽度和高度是不同的。CSS 定义的宽和高,指的是填充以里的内容范围。

所以盒子的宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距。

每一个矩形都由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。咱们用一张图来表示:
在这里插入图片描述

padding(内边距)

padding 内边距位于内容框的外边缘与边界的内边缘之间。padding-top:上内边距,padding-right:右内边距,padding-bottom:下内边距,padding-left:左内边距。

设置内边距的写法:

  • padding:5px 10px 15px 20px;表示上内边距是 5 px,右内边距是 10 px,下内边距是 15 px,左内边距是 20 px。
  • padding:5px 10px 15px;表示上内边距是 5 px,右内边距和左内边距是 10 px,下内边距是 15 px。
  • padding:5px 10px;表示上内边距和下内边距是 5 px,右内边距和左内边距是 10 px。
  • padding:10px;表示全部 4 个内边距都是 10 px。

注:padding 属性接受长度值或百分比值,但不容许使用负值。若是使用百分比值,百分数值是相对于其父元素的 width 计算的。

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      #box1 {
   
   
        width: 200px;
        height: 200px;
        background-color: red;
        padding: 20px 10px 10px 50px;
      }
      #box2 {
   
   
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div id="box1"></div>
    <div id="box2"></div>
  </body>
</html>

在这里插入图片描述
能够看到,一样是设置高宽为 200 像素的盒子,有 padding 的明显要大一些,padding 在边框里面。

border(边框)

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。你能够设置它的粗细,样式和颜色。

边框语法:

border: border-width||border-style||border-color;

例子:

div {
   
   
  border: 2px solid red;
}

这条代码能给 div 设置边框粗细为 2px、样式为实线、颜色为红色的边框。

注意:border-style(边框样式)的经常使用样式有:dashed(虚线)、dotted(点线)、solid(实线).

你能够按照上右下左的格式,分别写出元素的各个边框的属性。

例子:

div {
   
   
  border-style: solid;
  border-width: 15px 5px 15px 5px;
}

也能够简写为:

div {
   
   
  border-style: solid;
  border-width: 15px 5px;
}

注:和前面 padding 的简写方式同样,有遗忘的能够往前面看看哟。

也能够单独设置一个方向的边框:

div {
   
   
  border-top: 1px solid red;
}
/*只给上边框设置一像素的红色实线*/

以此类推:

border-right:右边框
border-left:左边框
border-bottom:下边框

边框的颜色可使用任何类型的颜色值,例如能够是命名颜色,也能够是十六进制和 RGB 值:

p {
   
   
  border-style: dashed;
  border-color: yellow rgb(25%, 35%, 45%) #909990 red;
}

注:默认的边框颜色是元素自己的前景色。若是没有为边框声明颜色,它将与元素的文本颜色相同。另外一方面,若是元素没有任何文本,假设它是一个表格,其中只包含图像,那么该表的边框颜色就是其父元素的文本颜色(由于 color 能够继承)。这个父元素极可能是 body、div 或另外一个 table。

margin(外边距)

外边距(margin)表明 CSS 框周围的外部区域,称为外边距。和 padding 相似,也有 margin-top、margin-right、margin-bottom 和 margin-left。写法仿照 padding。

注:与 padding 不一样的是 margin 能够是负值。

外边距合并问题:

简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将造成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出如今另外一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。

外边距合并示例图:
在这里插入图片描述

高级的框操做

溢流:
当你使用绝对的值设置了一个框的大小(如,固定像素的宽/高),容许的大小可能不适合放置内容,这种状况下内容会从盒子溢流。咱们使用 overflow 属性来控制这种状况的发生。

经常使用的值:

  • auto:当内容过多的时候溢流的内容被隐藏,而后出现滚动条,让咱们滚动查看全部的内容。
  • hidden: 当内容过多,溢流的内容被隐藏。
  • visible: 当内容过多,溢流的内容被显示在盒子的外边。
    例子:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
   
   
        width: 500px;
        height: 2.5em;
        padding: 1em 1em 1em 1em;
        border: 1px solid black;
      }

      .one {
   
   
        overflow: auto;
      }

      .two {
   
   
        overflow: hidden;
      }

      .three {
   
   
        overflow: visible;
      }
    </style>
  </head>

  <body>
    <p class="one">
      我爱学习,学习使我快乐!我爱学习,学习使我快乐!
      我爱学习,学习使我快乐!我爱学习,学习使我快乐!
      我爱学习,学习使我快乐!我爱学习,学习使我快乐!
      我爱学习,学习使我快乐!我爱学习,学习使我快乐!
    </p>

    <p class="two">
      我爱学习,学习使我快乐!我爱学习,学习使我快乐!
      我爱学习,学习使我快乐!我爱学习,学习使我快乐!
      我爱学习,学习使我快乐!我爱学习,学习使我快乐!
      我爱学习,学习使我快乐!我爱学习,学习使我快乐!
    </p>

    <p class="three">
      我爱学习,学习使我快乐!我爱学习,学习使我快乐!
      我爱学习,学习使我快乐!我爱学习,学习使我快乐!
      我爱学习,学习使我快乐!我爱学习,学习使我快乐!
      我爱学习,学习使我快乐!我爱学习,学习使我快乐!
    </p>
  </body>
</html>

在浏览器运行效果展现图:
在这里插入图片描述

3.背景

元素的背景是指,在元素内容、内边距和边界下层的区域。而在咱们前面学习样式化列表的时候已经接触过 background 属性了。
在这里插入图片描述

  • 背景颜色:经过 background-color 属性设置,首先,大多数元素的背景色是 transparent(透明色),而不是 white(白色),设置了背景颜色后,元素的内容依然是可读的,不少时候,咱们须要都须要设置背景色来帮助咱们,好比前面介绍样式化列表的 list-style-position 属性 inside 值的效果就使用到了背景色。
    在这里插入图片描述
    注:源码在样式化列表章节,此处的图片是为了演示背景色的做用与重要性。
  • 背景重复:background-repeat 容许您指定背景图像是如何重复的。默认值是 repeat,图像将在整个背景中水平和竖直地重复。可是大多数状况下咱们是不须要重复的,所以常常在使用背景图片的时候设置为 no-repeat。此外还有两个值,repeat-x: 图像将在整个背景中水平地重复。repeat-y: 图像会在背景下垂直地重复。
  • 背景位置:background-position 容许咱们在背景中任意位置放置背景图像。除了上面图片所给的值,咱们还能够自定义值,使用两个经过空格分格的值,指定图像的水平(x)和垂直(y)坐标,图像的左上角为原点(0,0),x 坐标从左到右,y 坐标从上到下。
  • background-image 还有一组可用的值:颜色渐变。经过 linear-gradient() 函数设置,函数至少须要用逗号分隔的三个参数——背景中渐变的方向,开始的颜色和结尾的颜色。

例如:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box {
   
   
        width: 100px;
        height: 100px;
        background-image: linear-gradient(to bottom, red, blue);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

运行效果:
在这里插入图片描述
注:这个渐变将从上到下,从顶部的红色开始,而后平稳过渡到底部的蓝色。 渐变的方向能够经过关键字来指定方向 (to bottom,to right, to bottom right 等)或者使用角度值 (0 deg 至关于 to top,90 deg 至关于 to right,直到 360 deg,它再次至关于 to top )。

4.图片

咱们在 HTML 模块中学习了 img 标签来添加图片,如今咱们来了解它的一些经常使用的 CSS 属性。

  • height:定义图片的高度。
  • width:定义图片的宽度。
  • border:定义图片周围的边框。

例子:

<img src="/小牛马.jpg" width="px" height="200px" border="1" />

注:上述例子中图片引用地址为相对地址。

5.表格

咱们前面已经学习了如何制做表格,如今咱们来说讲表格的一些样式,让咱们的表格更加美观。

  • 表格边框:一样的咱们使用 border 属性为表格设置边框。

例子:

table,
th,
td {
   
   
  border: 2px solid red;
}
  • 折叠边框:使用 border-collapse 属性设置是否将表格边框折叠为单一边框。

例子:

table {
   
   
  border-collapse: collapse;
}
  • 表格的宽度和高度:正如你所预料的同样,咱们使用 width 和 height 属性设置表格的高度和宽度。

例子:

table {
   
   
  width: 50%;
}

th {
   
   
  height: 50px;
}
  • 表格文本对齐的方式:经过 text-align 属性设置水平对齐方式,取值有 left(左对齐)right(右对齐)和 center(居中对齐),经过 vertical-align 属性 设置垂直对齐方式,取值有:top(顶端对齐)bottom(底部对齐)和 middle(居中对齐)。

例子:

td {
   
   
  height: 50px;
  vertical-align: top;
}
  • 表格内边距:经过为 td 和 th 元素设置 padding 属性,控制表格中内容和边框的距离。

例子:

td {
   
   
  padding: 30px;
}
  • 表格颜色:经过 color 设置表格文本颜色,经过 background-color 设置表格背景颜色。

例子:

table,
td,
th {
   
   
  border: 1px solid blue;
}

th {
   
   
  background-color: red;
  color: yellow;
}
  • 表格标题位置:经过 caption-side 属性设置表格的标题位置,它的取值有:top(默认值。把表格标题定位在表格之上),bottom(把表格标题定位在表格之下)和 inherit(规定应该从父元素继承 caption-side 属性的值)。

表格综合案例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      table,
      td {
   
   
        border: 1px solid blue;
      }

      td {
   
   
        background-color: red;
        color: yellow;
        text-align: left;
        vertical-align: bottom;
        padding: 30px;
      }

      table {
   
   
        width: 200px;
        height: 100px;
        border-collapse: collapse;
      }

      caption {
   
   
        caption-side: bottom;
      }
    </style>
  </head>

  <body>
    <table>
      <caption>
        我是标题
      </caption>
      <tr>
        <td>one</td>
        <td>two</td>
      </tr>
      <tr>
        <td>three</td>
        <td>four</td>
      </tr>
    </table>
  </body>
</html>

在浏览器中的运行效果图为:
在这里插入图片描述

6.轮廓

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的做用。

  • outline-color 设置轮廓的颜色。取值和其他颜色的取值同样。
  • outline-style 设置轮廓的样式。

取值以下:
在这里插入图片描述

  • outline-width 设置轮廓的宽度。它的值有:
  1. thin 规定细轮廓。
  2. medium 默认取值规定中等的轮廓。
  3. thick 规定粗的轮廓。
  4. length 容许你自定义轮廓粗细的值。
  5. inherit 规定应该从父元素继承轮廓宽度的设置。
  • outline 上面三个属性的连写。

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      p {
   
   
        outline: red dotted thick;
        width: 100px;
        height: 50px;
      }
    </style>
  </head>

  <body>
    <p>好嗨哟</p>
  </body>
</html>

在浏览器中运行的效果为:
在这里插入图片描述

7.盒子阴影

经过 box-shadow 属性设置盒子阴影。

box-shadow 有四个值:

  • 第一个值是水平偏移量(水平阴影):即向右的距离,阴影被从原始的框中偏移(若是值为负的话则为左)。
  • 第二个值是垂直偏移量(垂直阴影):即阴影从原始盒子中向下偏移的距离(或向上,若是值为负)。
  • 第三个值是模糊半径(影子大小):即在阴影中应用的模糊度。
  • 第四个值是阴影的基本颜色。你可使用任何长度和颜色单位来定义这些值。

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .shadow {
   
   
        box-shadow: 5px 5px 5px red;
        width: 200px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div class="shadow">小牛马</div>
  </body>
</html>

在浏览器中的运行效果为:
请添加图片描述
多个盒子阴影:使用逗号隔开。

例子:

box-shadow: 1px 1px 1px yellow, 2px 2px 1px yellow, 3px 3px 1px blue, 4px 4px
    1px blue, 5px 5px 1px black, 6px 6px 1px black;

使用 inset 关键字,把它放在一个影子声明的开始,使它变成一个内部阴影,而不是一个外部阴影。好比咱们为前面的例子加上 inset 关键字,最后的运行效果就变成下面这样了:

请添加图片描述
源码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        .shadow {
   
   
            box-shadow: inset 5px 5px 5px red;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="shadow">大牛吗</div>
</body>
</html>

8.圆角边框

使用 border-radius 属性来建立圆角。

例子:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .radius {
   
   
        width: 200px;
        height: 200px;
        border: 1px;
        background-color: red;
        border-radius: 50%; /*将正方形变成圆*/
      }
    </style>
  </head>

  <body>
    <div class="radius"></div>
  </body>
</html>

注:border-radius 的值除了用百分号(%)还能够用 length,好比:border-radius:25px;。

效果图:
在这里插入图片描述

9.练习

要求:盒子的宽高设置一个合适的,盒子相对于浏览器水平居中,而且距离顶端设置合适的距离,文字相对于盒子水平垂直居中。文字的颜色和盒子颜色同样,增长一个文字阴影让它显示出来。设置圆角边框,设置一个 1 px 的实线边框,边框颜色比盒子略微深一点。设置盒子阴影,一个外部阴影,一个内部阴影。大体要求达到,其他的值设置能够自行调整,不必定非要与案例同样。完成后的大体效果以下:
在这里插入图片描述
源码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box {
   
   
        width: 200px;
        height: 100px;
        color: red;
        background-color: red;
        text-align: center;
        line-height: 100px;
        margin: 100px auto;
        text-shadow: 2px 2px 5px black;
        border-radius: 20px;
        border: 1px solid crimson;
        box-shadow: 2px 2px 5px black, inset 2px 2px 5px black;
      }
    </style>
  </head>
  <body>
    <div class="box">我爱学习,身体棒棒!</div>
  </body>
</html>

四. CSS选择器

1.什么是选择器

每一条 CSS 样式声明 (定义)由两部分组成,形式以下:

选择器{
   
   
    样式;
}

在 {} 以前的部分是“选择器”,“选择器”是咱们的 {} 中的“样式”的做用对象。例如:

p {
   
   
  color: red;
}

表示字体为红色的样式做用于 p 选择器。

2. 标签选择器

标签选择器也叫元素选择器。其实就是 html 代码中的标签,好比 、、

、。

语法格式为:

标签名 {
   
   
  属性1: 属性值1;
  属性2: 属性值2;
  ...;
}

好比咱们写个简单的 p 标签,里面随便写一句话,而后咱们设置文字的颜色为红色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
   
   
        color: red;
      }
    </style>
  </head>
  <body>
    <p>小牛马</p>
  </body>
</html>

请添加图片描述

3.类选择器

类选择器,是对 HTML 标签中 class 属性进行选择。CSS 类选择器的选择符是 “.”。

类选择器命名规范:不能是纯数字,不能是标签名,不建议使用汉字。通常是点+对应样式描述。

例如:.shadow。

一样的拿前面的例子来讲,咱们为 p 标签 加上一个 class 属性,而后经过 class 属性设置它的背景色为黄色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
   
   
        color: red;
      }
      .bgc {
   
   
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p class="bgc">小牛马</p>
  </body>
</html>

效果:
请添加图片描述

4.id 选择器

id 是对 HTML 标签中 id 属性进行选择。id 选择器的选择符是 “#”。 任何元素均可以使用 id 属性设置惟一的 id 名称。这是选择单个元素的最有效的方式。

特别须要注意的是 id 选择器具备惟一性,也就是说同一个 HTML 页面不能有相同的 id 名称(使用多个相同的 id 选择器,浏览器不会报错可是不符合 W3C 标准)。

能够这样理解:一我的的名字(class 类名)能够有不少重名的,可是身份证号(id 名称)只能有一个惟一的,不能重复的。

语法格式为:

#id名 {
   
   
  属性1: 属性值1;
  属性2: 属性值2;
  ...;
}

咱们为前面的例子设置一个 id 属性,经过 id 属性来设置高度。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
   
   
        color: red;
      }
      .bgc {
   
   
        background-color: yellow;
      }
      #height {
   
   
        height: 100px;
      }
    </style>
  </head>
  <body>
    <p class="bgc" id="height">小牛马</p>
  </body>
</html>

效果:
请添加图片描述

5.通配符选择器

通配符选择器用“*”号表示,他是全部选择器中做用范围最广的,能匹配页面中全部的元素。其基本语法格式以下:

*{
   
   
    属性1:属性值1;
    属性2:属性值2;
    ...
}

咱们通常使用通配符选择器定义 CSS 样式,清除全部 HTML 标记的默认边距。

* {
   
   
  margin: 0; /* 定义外边距*/
  padding: 0; /* 定义内边距*/
}

其余例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
   
   
        color: red;
      }
    </style>
  </head>
  <body>
    <p>小牛</p>
    <span>小马</span>
    <strong>666</strong>
  </body>
</html>

请添加图片描述

7.标签指定式选择器

标签指定式选择器又称交集选择器,由两个选择器构成,其中第一个必须是标签选择器,第二个为 class 选择器或 id 选择器。两个选择器之间不能有空格。简单记忆为:而且的意思。即…又…的意思,好比 p.one 选择的是类名为 one 的段落标签。

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
   
   
        color: red;
      }
      p.one {
   
   
        color: blue;
      }
      p#two {
   
   
        color: yellow;
      }
    </style>
  </head>
  <body>
    <p>小牛马</p>
    <p class="one">小牛马</p>
    <p id="two">小牛马</p>
  </body>
</html>

运行效果为:
请添加图片描述

8.后代选择器

后代选择器又叫包含选择器,用来选择元素或元素组的后代。其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .one #two p {
   
   
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="one">
      <div id="two">
        <p>小牛马</p>
      </div>
    </div>
  </body>
</html>

9.子代选择器

与后代选择器相比,子元素选择器只能选择做为某个元素的子元素。子选择器使用大于号(>)做为子结合符。

例如选择 p 元素的子元素 strong 元素,为其设置样式。你能够这么写:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      p > strong {
   
   
        color: red;
      }
    </style>
  </head>
  <body>
    <p>
      <strong>小牛马</strong>
      <strong>小牛马</strong>
    </p>
    <p>
      <em>
        <strong>小牛马</strong>
        <strong>小牛马</strong>
      </em>
    </p>
  </body>
</html>

效果:
请添加图片描述

注:上述例子中,只有第一个 p 标签中的两个 strong 元素变成了红色,而第二个 p 标签中的 两个 strong 元素不受影响。

而若是改为后代选择器,上诉例子中的 style 标签里面改为下面的代码,其他代码不变:

<style>
    p strong {
   
   
        color: red;
    }
</style>

最终运行效果:

请添加图片描述
注:从上述两个例子中咱们能够看出,子代选择器只选择指定标签的第一代子元素或者理解为它的直接后代(只指定儿子,而无论孙子),后代选择器是做用于全部子后代元素(不仅儿子,还能够选择到孙子,重孙子等等)。

10.并集选择器

并集选择器是各个选择器经过逗号链接而成的,任何形式的选择器(包括标签选择器、class 类选择器、id 选择器等),均可以做为并集选择器的一部分。若是某些选择器定义的样式彻底相同,或部分相同,就能够利用并集选择器为它们定义相同的 CSS 样式。简单记忆为:和的意思。

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      p,
      #one,
      .two {
   
   
        color: red;
      }
    </style>
  </head>
  <body>
    <p>我爱学习</p>
    <span id="one">我爱运动</span>
    <strong class="two">我爱睡觉</strong>
  </body>
</html>

运行效果为:
在这里插入图片描述
注:上述例子表示 p 标签和 id 名为 one 的标签 和 class 名为 two 的标签的样式为:颜色为红色。

11.属性选择器

属性选择器是根据元素的属性及属性值来选择元素。经常使用的几种属性选择器:
在这里插入图片描述
例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
   
   
        color: blue;
      }
      p[title='one'] {
   
   
        color: red;
      }
      p[title~='two'] {
   
   
        color: green;
      }
      p[title|='three'] {
   
   
        color: pink;
      }
    </style>
  </head>

  <body>
    <p title="five">我爱学习</p>
    <p title="one">我爱运动</p>
    <p title="one two">我爱吃饭</p>
    <p title="three-four">我爱睡觉</p>
  </body>
</html>

运行效果为:
在这里插入图片描述

12.伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果。

经常使用的伪类。

  • :link 应用于未被访问过的连接。IE6 不兼容,解决此问题,直接使用 a 标签。
  • :hover 应用于有鼠标指针悬停于其上的元素。在 IE6 只能应用于 a 链接,IE7+ 全部元素都兼容。
  • :active 应用于被激活的元素,如被点击的连接、被按下的按钮等。
  • :visited 应用于已经被访问过的连接。

例子:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      /*a:link{
   
   
            color: red;
        }*/
      /*连接默认状态*/
      a {
   
   
        color: red;
        text-decoration: none;
      }
      /*连接访问以后的状态*/
      a:visited {
   
   
        color: yellow;
      }
      /*鼠标放到连接上显示的状态*/
      a:hover {
   
   
        color: blue;
        text-decoration: line-through;
      }
      /*连接激活的状态*/
      a:active {
   
   
        color: pink;
      }
    </style>
  </head>
  <body>
    <a href="">xiaoniuma</a>
  </body>
</html>

注:咱们可能会遇到被点击访问过的超连接再也不具备 hover 和 active 了,解决办法是改变 CSS 属性的排列顺序,L-V-H-A(link-visited-hover-active)。能够运行一下,而后更改 L-V-H-A 的顺序后,看看效果。

13.CSS 层叠性和继承性

层叠性

层叠性是指多种 CSS 样式的叠加。而最终什么选择器在层叠中胜出遵循下列规则。

  • !important 具备最大优先级。也就是说任何状况下,只要定义了它,它的样式最终就会被应用。

例子:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      #syl {
   
   
        color: yellow;
        font-size: 10px;
      }

      .box {
   
   
        color: green;
        font-size: 60px;
      }

      div {
   
   
        color: red !important;
        font-size: 60px !important;
      }
    </style>
  </head>

  <body>
    <div class="box" id="xnm" style="font-size:12px; color:yellow;">小牛马</div>
  </body>
</html>

运行效果为:
请添加图片描述

  • 源代码出现次序。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        .box2 {
   
   
            font-size: 100px;
            color: blue;
        }
        .box {
   
   
            font-size: 60px;
            color: pink;
        }
    </style>
</head>
<body>
<div class="box box2 ">小牛马</div>
</body>
</html>

请添加图片描述

注:这里的前后次序不是说 class 里面类名的前后次序,而是说定义样式的前后顺序。上述例子中先定义的 box2 类样式,再定义的 box 类样式,最后显示的是 box 类中的样式。

  • 优先级:
  1. 规则(1):行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式。
  2. 规则(2):important > 内联 > id > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承。另外权重会叠加,因此为了便于理解,权重设置以下: - 1 表示标签选择器的权重;- 10 表示类选择器的权重;- 100 表示 id 选择器的权重;- 1000 表示内联样式的权重。

注:权重相同时,CSS 遵循就近原则。也就是说靠近元素的样式具备最大的优先级,或者说排在最后的样式优先级最大。全部都相同时,声明靠后的优先级大。

例子:

#header #left ul li.first a
权重为100+100+1+1+10+1=213

继承性
继承性就是指咱们写 CSS 样式表的时候子元素会继承父元素的某些样式,好比文本颜色和字号。下面看个简单的例子,帮助理解:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .box {
   
   
        font-size: 15px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>小牛马</span>
    </div>
  </body>
</html>

运行效果:
请添加图片描述
注:想要设置一个可继承的属性,只需将它应用于父元素便可。全部字相关的均可以继承,好比:color、text-系列、font-系列、line-系列等。并非全部的 CSS 属性均可以继承,例如:边框、外边距、内边距、背景、定位、元素宽高属性就不能继承。全部盒子相关的属性都不能继承例如:a 标签,h1 标签不会实现继承。

五.CSS 布局模型

1.布局模型概述

布局模型与盒模型同样都是 CSS 最基本、 最核心的概念。但布局模型是创建在盒模型基础之上,又不一样于咱们常说的 CSS 布局样式或 CSS 布局模板。CSS 三种基本网页布局模型:流动模型(Flow)、浮动模型(Float)、层模型(Layer)。

2.流动模型

流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动布局模型具备 2 个比较典型的特征:

  1. 块状元素都会在所处的包含元素内,自上而下按顺序垂直延伸分布,由于在默认状态下,块级元素的宽度都为 100%,实际上,块状元素都会以行的形式占据位置(每个便签都显示着本身原本默认的那个宽高)。
  2. 在流动模型下,行内元素都会在所处的包含元素内从左到右水平分布显示(内联元素可不像块级元素独占一行的)

3.浮动模型

块状元素都是独占一行,若是如今咱们想让两个块状元素并排显示,怎么办呢?设置元素浮动就能够实现。 任何元素在默认状况下是不能浮动的,但能够用 CSS 定义为浮动,如 div、p、table、img 等元素均可以被定义为浮动。以下代码能够实现两个 div 元素一行显示。

<head>
  <style>
    div {
   
   
      width: 200px;
      height: 200px;
      border: 2px blue solid;
      float: left;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
</body>

请添加图片描述
脱标

特别须要注意的是,设置了浮动的元素,脱离标准流(脱标)。下面来一个具体的例子。

首先写三个不浮动的 div。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box {
   
   
        width: 600px;
        height: 300px;
        border: 2px dashed green;
      }
      .box1,
      .box2,
      .box3 {
   
   
        width: 200px;
        height: 100px;
      }
      .box1 {
   
   
        background-color: red;
      }
      .box2 {
   
   
        background-color: yellow;
      }
      .box3 {
   
   
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
  </body>
</html>

在这里插入图片描述
而后咱们给 box2 盒子(黄色的盒子),设置右浮动来看看效果:

.box2 {
   
   
  background-color: yellow;
  float: right;
}

在这里插入图片描述
结论:box2 盒子(黄色的盒子)脱离了文档流而且向右移动,直到它的右边缘碰到包含框的右边缘。而 box3 盒子(蓝色的盒子)则替代了原来 box2 的位置。

给 box2 盒子(黄色的盒子),设置左浮动来看看效果:
在这里插入图片描述

结论:box2 盒子(黄色的盒子)脱离了文档流而且左右移动,直到它的左边缘碰到包含框的左边缘。由于它再也不处于文档流中,因此它不占据空间,实际上覆盖住了 box3 盒子,使 box3 盒子从视图中消失。咱们能够理解为 box2 盒子像羽毛同样飘在 box3 盒子上面,挡住了 box3 盒子。

3.清除浮动

当父容器没有设置高度,里面的盒子没有设置浮动的状况下会将父容器的高度撑开。一旦父容器中的盒子设置浮动,脱离标准文档流,父容器立马没有高度,下面的盒子会跑到浮动的盒子下面。出现这种状况,咱们须要清除浮动。

首先咱们写一个示例,不设置浮动,第一个盒子的父元素不设置高度。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box {
   
   
        width: 600px;
        border: 2px dashed green;
      }
      .box1,
      .box2 {
   
   
        width: 200px;
        height: 100px;
      }
      .box1 {
   
   
        background-color: red;
      }
      .box2 {
   
   
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1"></div>
    </div>
    <div class="box2"></div>
  </body>
</html>

在这里插入图片描述
而后咱们修改上面的例子,给 box1 盒子设置一个左浮动。再来看看效果。

在这里插入图片描述
咱们发现 box2 盒子跑到 box1 盒子下面去了,这个时候咱们就须要清除浮动带来的不利影响了。

清除浮动的方法有不少,最多见的用得最多的方法:使用伪元素来清除浮动,是在浮动元素的父元素上设置伪元素,此处是 box 上设置。

.clearfix:after {
   
   
  content: '';
  /*设置内容为空*/
  height: 0;
  /*高度为0*/
  line-height: 0;
  /* 行高为0*/
  display: block;
  /*将文本转为块级元素*/
  visibility: hidden;
  /*将元素隐藏*/
  clear: both; /*清除浮动*/
}

.clearfix {
   
   
  zoom: 1;
  /*为了兼容IE*/
}

清除浮动后的效果:在这里插入图片描述
注:是在浮动元素的父级元素上设置伪元素,也就是说咱们把 <class=“box”> 改为 <class=“box clearfix”>,在其余地方使用的时候,也是只须要在标签中添加上一个 class 名 clearfix,并直接复制上述清除浮动的伪元素代码便可。固然咱们这里还能够直接给父元素加上高度,来解决这个不利影响,不过通常不建议这么作,由于有时候咱们也不知道高度具体是多少,容易出问题,因此仍是建议用伪元素来清除浮动。

4.层模型

层模型有三种形式:相对定位、绝对定位、固定定位。

层模型-绝对定位

绝对定位语法为

position:absolute;

绝对定位有如下特色:

  • 绝对定位以浏览器左上角为基准设置位置
  • 当一个盒子包含在另外一个盒子中,父盒子未设置定位,子盒子以浏览器左上角为基准设置位置; 当父盒子设置定位,子盒子以父盒子左上角为基准设置位置
  • 绝对定位不占空间位置(相似于浮动)
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      div {
   
   
        width: 200px;
        height: 200px;
        border: 5px red solid;
        position: absolute;
        left: 100px; /*相对于浏览器向左偏移100像素*/
        top: 80px; /*相对于浏览器向上偏移80像素*/
      }
    </style>
  </head>
  <body>
    <div></div>
    <!-- 相对于浏览器进行定位 -->
  </body>
</html>

请添加图片描述
相对定位

相对定位语法为

position:relative;

相对定位有如下特色:

  • 相对定位以元素自身的位置为基准设置位置
  • 相对定位要占空间位置
  • 通常子元素设置绝对定位,父元素设置相对定位(子绝父相)

栗子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .box1 {
   
   
        width: 200px;
        height: 100px;
        position: relative;
        border: 1px dashed green;
      }
      .box2 {
   
   
        width: 100px;
        height: 50px;
        position: absolute;
        border: 1px dashed blue;
        top: 20px;
        left: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>

效果图:
在这里插入图片描述
固定定位

固定定位表现相似于绝对定位,只有一个主要区别:绝对定位固定元素是相对于 元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口自己。固定定位也不占空间位置,语法为:

position:fixed;

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      p {
   
   
        position: fixed;
        top: 200px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <p>小牛马</p>
  </body>
</html>

注:复制这段代码到编辑器中运行,而后调整浏览器的视口大小,会发现,不管怎么变,p 标签所在的位置始终距离浏览器视口的左距离为 100px,上距离为 200px。

介绍 top, bottom, left, right

使用 top, bottom, left 和 right 来精确指定要将定位元素移动到的位置,这些属性的值可使用逻辑上指望的任何单位:px,cm,%等。也可使用负值。

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素老是会处于堆叠顺序较低的元素的前面。用于处理当多个元素重叠的时候,哪些元素设置在其余元素的顶部。特别须要注意的是元素可拥有负的 z-index 属性值,属性值没有单位,只有数字。z-index 仅能在定位元素上奏效(例如 position:absolute;)

例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box {
   
   
        position: absolute;
        left: 50px;
        top: 20px;
        z-index: -1;
        background-color: red;
        width: 200px;
        height: 200px;
      }
      .box1 {
   
   
        position: absolute;
        left: 80px;
        top: 20px;
        z-index: 2;
        background-color: pink;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
    <div class="box1"></div>
  </body>
</html>

效果:
请添加图片描述

6、CSS3介绍

1.什么是 CSS3

CSS3 是CSS(层叠样式表)技术的升级版本,于 1999 年开始制订,2001 年 5 月 23 日 W3C 完成了 CSS3 的工做草案,主要包括盒子模型、列表模块、超连接方式、语言模块、背景和边框、文字特效、多栏布局等模块 。

CSS 演进的一个主要变化就是 W3C 决定将 CSS3 分红一系列模块。浏览器厂商按 CSS 节奏快速创新,所以经过采用模块方法,CSS3 规范里的元素能以不一样速度向前发展,由于不一样的浏览器厂商只支持给定特性。但不一样浏览器在不一样时间支持不一样特性,这也让跨浏览器开发变得复杂 。

(来自百度百科。)

2.CSS3 的好处

CSS3 给咱们带来了什么好处呢?简单的说,CSS3 把不少之前须要使用图片和脚原本实现的效果、甚至动画效果,只须要短短几行代码就能搞定。好比圆角,图片边框,文字阴影和盒阴影,过渡、动画等。 CSS3 简化了前端开发工做人员的设计过程,加快页面载入速度。

3.浏览器引擎前缀

在阅读 CSS 代码的时候可能会发现这样的代码:

-webkit-transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
transition: width 2s;

其实上述的 css 代码会执行的只有一条,浏览器只会响应其中的一条,而后忽略其它几条。 你是否是会感到疑惑,一个 transition 属性会有这么多种写法,-webkit- 、-moz- 、-o- 这些都是什么呢?仍是说这些不是一种属性。 -webkit- 、-moz- 、-o- 这些其实就是咱们这里要讲到的前缀。这里的前缀是浏览器引擎前缀( Vendor prefix ),它是浏览器公司在新的或者是正在实验中的 CSS3 功能变为 CSS3 规范以前,提供一种对该功能的支持方式。

介绍一下这些浏览器引擎前缀:

  • moz- :Firefox 等使用 Mozilla 引擎的浏览器。
  • -webkit- :Safari 、 Chrome 等使用 Webkit 引擎的浏览器。
  • -o- :Opera 浏览器早期。
  • -ms- :IE 和 Edge 等 。

浏览器引擎前缀的使用方法也一目了然,将前缀放到属性名前便可。这些前缀并不是都是须要的,由于有些属性已经被大部分浏览器所支持。可是通常状况下加上这些前缀是不会有问题的,只要记得把不带前缀的放在最后一条便可。

7、CSS3 元素属性升级

1.背景

在 CSS3 中,背景的样式做了一些升级调整,让咱们能够更好的控制背景元素的样式。这里主要介绍如下几个调整:

  • background-size
  • background-origin
  • background-clip

background-size

background-size 指定背景图像的大小,取代了之前背景图像的大小由实际大小决定。背景图像的大小能够是像素或是百分比大小。

background-size 的语法为:

background-size: length|percentage|cover|contain;
描述
length 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。若是只给出一个值,第二个是设置为 auto(自动)
percentage 以父元素的百分比来设置背景图像的宽度和高度,如 background-size:50% 50%;。第一个值设置宽度,第二个值设置高度。同 length 的用法,若是只给出一个值,那么第二个值会被设置为 auto。
cover 把背景图像扩展到能够彻底覆盖背景区域为止,图片的某些部分可能会没法显示。
contain 使背景图片的高度和宽度彻底适应内容区域。
<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      div {
   
   
        border: 2px solid;
        margin: 50px;
        width: 200px;
        height: 200px;
        padding: 50px;
        <!--读者自行导入图片哈,注意路径的存放-->
        background-image: url('image.png');
        background-size: 100% 100%;
        /* 如须要查看其它效果,可将注释中的内容替换上面的 background-size */
        /* background-size:100px 200px; */
        /* background-size:50% 50%; */
        /* background-size:cover; */
        /* background-size:contain; */
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

运行结果图为:
请添加图片描述
background-origin

background-origin 的语法为:

padding-box|border-box|content-box;

background-origin 字面理解是背景图片起点的意思,它规定 background-position 属性相对于什么位置来定位。它有三个值:

描述
padding-box (默认)背景图片从盒模型的 padding-box 左上角开始绘制,即背景图片相对于内边距框来定位。
border-box 背景图片从盒模型的 border-box 左上角开始绘制,即背景图片相对于边框和来定位。
content-box 背景图片从盒模型的 content-box 左上角开始绘制,即背景图片相对于内容框来定位。

这里用上一个例子中的代码来演示 background-origin 不一样值的效果,为了对比背景图片的不一样的起始位置,使用图片的原尺寸,即删除 background-size :

<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      /* background-origin: border-box */
      div {
   
   
        border: 2px solid;
        margin: 50px;
        width: 200px;
        height: 200px;
        padding: 50px;
        background-image: url('image.png');
        background-repeat: no-repeat;
        background-origin: border-box;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

运行效果图为:请添加图片描述

<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      /* background-origin: content-box */
      div {
   
   
        border: 2px solid;
        margin: 50px;
        width: 200px;
        height: 200px;
        padding: 50px;
        background-image: url('image.png');
        background-repeat: no-repeat;
        background-origin: content-box;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

请添加图片描述

能够发现,background-origin 设置为 content-box 和 border-box 的区别,一个是从盒模型的 content-box 的左上角开始绘制,一个是从盒模型 border-box 左上角开始绘制。

注意:若是背景不是 no-repeat,这个属性无效,他会从边框开始显示。

background-clip

background-clip 的语法为:

background-clip: border-box|padding-box|content-box;

background-clip 与 background-origin 能够取到的值相同,它们的功能大体相同。可是二者存在一些细微的差异。当它们的值都为 border-box 时,虽然都是从盒模型的边框左上角开始绘制背景图片,可是 background-clip 绘制出来的背景图片不会覆盖左方和上方的边框,而 background-origin 绘制出来的背景图片则会覆盖左方和上方的边框。

<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      /* background-origin: border-box */
      div {
   
   
        border: 2px solid;
        margin: 50px;
        width: 200px;
        height: 200px;
        padding: 50px;
        background-image: url('image.png');
        background-repeat: no-repeat;
        background-clip: border-box;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

2.边框

CSS3 中,针对边框的样式做了一些升级调整,这里主要讲解三个属性:

  • border-radius
  • border-image
  • box-shadow

border-radius

在 CSS2 中添加边框圆角是一件很困难的事情,咱们须要在每一个角落使用不一样的图像。可是,在 CSS3 中,咱们只须要使用属性 border-radius 就能够建立圆角。

border-radius: 20px; /*全部的角都使用半径为20px的圆角*/
<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      div {
   
   
        margin: 20px;
        border: 2px solid;
        border-radius: 20px;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div><p>border-radius</p></div>
  </body>
</html>

在浏览器中运行效果图为:
在这里插入图片描述

border-radius 属性实际上是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 四个属性的简写模式,四个数值的书写顺序是:左上角、右上角、右下角、左下角。

  1. 当 border-radius 只设置一个值,即将该值应用到元素的四个角上。
  2. 当 border-radius 设置两个或三个值时,按照对角线相同原则,如:
<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      div {
   
   
        margin: 20px;
        border: 2px solid;
        border-radius: 20px 50px; /*省略了左下和右下,按照对角线相同的原则,应为 20px 50px 20px 50px*/
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div><p>border-radius</p></div>
  </body>
</html>

在这里插入图片描述
3. border-radius 按照语法的完整写法实际上是 border-radius:10px 10px 10px 10px / 10px 10px 10px 10px; ,前面四个表示圆角的水平半径,后面四个表示圆角的垂直半径。

除了为边框添加圆角,你还能够将 border-radius属性运用到图片上来制做你的圆角图片。

注意: border-radius 能够用 px 单位,也能够用百分比或者 em,但目前的兼容性不太好。

border-image
使用属性 border-image ,咱们可使用图片来建立一个边框。语法为:

border-image: source(url) slice width outset repeat;
  • ource:所使用图片的路径。
  • slice:图片边框向内偏移。
  • width:图片边框宽度。
  • outset:边框图像区域超出边框的量。
  • repeat:图像边框是否应该平铺(repeat)、铺满(round)或拉伸(stretch)。
<!DOCTYPE html>
<html>
  <head>
    <title>xiaoniuma</title>
    <style type="text/css">
      /* background-origin: border-box */
      div {
   
   
        border: 40px solid;
        margin: 50px;
        width: 200px;
        height: 200px;
        padding: 50px;
        border-image: url('image.png') 30 30 stretch;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

**box-shadow
**
属性 box-shadow 用于给盒子添加阴影,语法与 text-shadow 有些类似:

box-shadow: 水平阴影 垂直阴影 模糊阴影 阴影尺寸 阴影颜色 inset;

与 text-shadow 相比,水平阴影、垂直阴影、模糊阴影的做用和 text-shadow 的对应属性相同,另外 box-shadow 多了阴影尺寸和 inset。

  • 水平阴影:规定水平阴影的位置(阴影与盒子的水平偏移,正值向右偏移,负值向左偏移),必选项。
  • 垂直阴影:规定垂直阴影的位置(阴影与盒子的垂直偏移,正值向下偏移,负值向上偏移),必选项。
  • 模糊阴影:规定模糊的距离,可选项;值越大,模糊半径越大,阴影也就越大越淡。
  • 阴影尺寸:阴影尺寸就是阴影外延出去的总长度。
  • inset:阴影默认是向外发散的,inset 参数的做用就是使外阴影变为内阴影(能够写在参数的第一个和最后一个,其余位置是无效的)。
  • 阴影颜色:规定阴影颜色,可选项;如不规定该项的值,则使用 UA(用户代理)自行选择的颜色。若是想保持跨浏览器的一致性,阴影的颜色就须要明确的被指定为一种。

注:参数的顺序不要乱写。

<!DOCTYPE html>
<html>
  <head>
    <title>shiyanlou</title>
    <style type="text/css">
      .shadow1 {
   
   
        float: left;
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: #eee8cd;
        box-shadow: 0 0 0 10px #000;
        /*将除阴影尺寸以外的数值都设置为0,观察阴影尺寸的效果*/
      }
      .shadow2 {
   
   
        float: left;
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: #eee8cd;
        box-shadow: 20px 20px 10px #000;
        /*水平阴影和垂直阴影都为正值,阴影在原盒子右下方*/
      }
      .shadow3 {
   
   
        float: left;
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: #eee8cd;
        box-shadow: -20px -20px 10px #000;
        /*水平阴影和垂直阴影都为负值,阴影在原盒子左上方*/
      }
      .shadow4 {
   
   
        float: left;
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: #eee8cd;
        box-shadow: 0 0 100px #000 inset;
        /*除了模糊阴影外的值都设置为 0 ,另外使用参数 inset ,阴影在盒子内部*/
      }
      .shadow5 {
   
   
        float: left;
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: #eee8cd;
        box-shadow: -40px 0 100px red, /*左边阴影*/ 0 -40px 100px #000,
          /*上边阴影*/ 40px 0 100px blue, /*右边阴影*/ 0 40px 100px yellow; /*下边阴影*/
        /*盒子的多阴影,设置了上下左右四个阴影*/
      }
    </style>
  </head>
  <body>
    <div class="shadow1">
      将除阴影尺寸以外的数值都设置为0,能够看到阴影尺寸就是阴影外延出去的长度,至关于增长了
      border 的宽度。须要注意的是,box-shadow 不占据空间,因此阴影尺寸虽然增长了
      border 的宽度,但它并非 border。
    </div>
    <div class="shadow2">水平阴影和垂直阴影都为正值,阴影在原盒子右下方</div>
    <div class="shadow3">水平阴影和垂直阴影都为负值,阴影在原盒子左上方</div>
    <div class="shadow4">
      除了模糊阴影外的值都设置为 0 ,另外使用参数 inset ,阴影在盒子内部
    </div>
    <div class="shadow5">盒子的多阴影,设置了上下左右四个阴影</div>
  </body>
</html>

在浏览器中运行效果图为:

在这里插入图片描述
模糊阴影和阴影尺寸的区别

模糊阴影:其值只能是为正值,若是其值为 0 时,表示阴影不具备模糊效果,其值越大阴影的边缘就越模糊。

阴影尺寸:其值能够是正负值,若是值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

九.CSS3 文本

颜色之 RGBA

RGB 是一种色彩标准,是由红®、绿(G)、蓝(B)的变化以及相互叠加来获得各式各样的颜色。RGBA 是在 RGB 的基础上增长了控制 alpha 透明度的参数。

语法:

color:rgba(R,G,B,A)

取值:

  • R:红色值,正整数 | 百分数。
  • G:绿色值,正整数 | 百分数。
  • B:蓝色值,正整数 | 百分数。
  • A:Alpha 透明度,取值 0~1 之间。

以上 R、G、B 三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并不是全部浏览器都支持使用百分数值。A 为透明度参数,取值在 0~1 之间,不可为负值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      div {
   
   
        width: 50px;
        height: 50px;
        background-color: rgba(255, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <p>设置透明度为30%的红色</p>
    <div></div>
  </body>
</html>

请添加图片描述

2.text-shadow

属性 text-shadow 用于给文本添加阴影,语法为:

text-shadow: 水平阴影 垂直阴影 模糊阴影 阴影颜色;
  • 水平阴影:规定水平阴影的位置(阴影与文本的水平偏移,正值向右偏移,负值向左偏移),必选项
  • 垂直阴影:规定垂直阴影的位置(阴影与文本的垂直偏移,正值向下偏移,负值向上偏移),必选项
  • 模糊阴影:规定模糊的距离,可选项;值越大,模糊半径越大,阴影也就越大越淡
  • 阴影颜色:规定阴影颜色,可选项;如不规定该项的值,则使用 UA(用户代理)自行选择的颜色。若是想保持跨浏览器的一致性,阴影的颜色就须要明确的被指定为一种。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .shadow1 {
   
   
        margin: 50px;
        color: green;
        text-shadow: 20px 20px 3px #000;
        /* 水平和垂直阴影都为正值,阴影呈如今原文本右下方 */
      }
      .shadow2 {
   
   
        margin: 50px;
        color: green;
        text-shadow: -20px -20px 7px #000;
        /* 水平和垂直阴影都为负值,阴影呈如今原文本左上方 */
      }
      .shadow3 {
   
   
        margin: 50px;
        color: green;
        text-shadow: 0 0 50px #000;
      }
      .shadow4 {
   
   
        margin: 50px;
        color: green;
        /*多重阴影,每一个边的阴影用逗号隔开,阴影的应用顺序为从前到后,第一个指定的阴影在顶部*/
        text-shadow: -40px 0 10px red, /*左边阴影*/ 0 -40px 10px #000,
          /*上边阴影*/ 40px 0 10px blue, /*右边阴影*/ 0 40px 10px yellow; /*下边阴影*/
      }
    </style>
  </head>
  <body>
    <h1 class="shadow1">水平和垂直阴影都为正值,阴影呈如今原文本右下方</h1>
    <h1 class="shadow2">水平和垂直阴影都为负值,阴影呈如今原文本左上方</h1>
    <h1 class="shadow3">
      没有设置水平与垂直阴影,阴影扩散的范围就是模糊半径的范围
    </h1>
    <h1 class="shadow4">多阴影,设置了上下左右四个边的阴影</h1>
  </body>
</html>

在这里插入图片描述
能够尝试修改参数值,体会数值正负对水平阴影和垂直阴影的影响,以及模糊阴影对模糊半径范围的影响。

3. text-overflow

文本框常常会出现文本溢出的状况,在只有单行文本框,文本又出现溢出的状况,这时候就须要 text-overflow 来处理这些溢出的文本了。

text-overflow 有三个取值:

  • clip :修剪文本。
  • ellipsis :显示省略符号来代替被修剪的文本。
  • string :使用给定的字符串来代替被修剪的文本。
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .item1 {
   
   
        white-space: nowrap;
        border: 1px solid;
        width: 150px;
        overflow: hidden;
        text-overflow: clip;
      }
      .item2 {
   
   
        white-space: nowrap;
        border: 1px solid;
        width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /*
        .item3{
   
   
            white-space: nowrap;
            border: 1px solid;
            width: 150px;
            overflow: hidden;
            text-overflow: "i'm string";
        }
        字符串替代溢出字符的方式目前只有 Firefox 9.0+ 支持,大部分浏览器都不支持该溢出替换方式。
        */
    </style>
  </head>
  <body>
    <div class="item1">hhhhhhhhhhhhhhhhhhhhhhhh</div>
    <div class="item2">hhhhhhhhhhhhhhhhhhhhhhhh</div>
    <!-- <div class="item3">hhhhhhhhhhhhhhhhhhhhhhhh</div> -->
  </body>
</html>

运行效果图为:
在这里插入图片描述
能够发现,item1 中溢出的文本直接被截断,文本框边缘还出现了截断一半的 h 字母,由于 text-overflow 设置为 clip ;一样的,item2 中溢出的文本采用省略号代替,由于 text-overflow 设置为了 ellipsis。因为大部分浏览器都不支持溢出使用字符串替代的方式,且实验楼 Web IDE 提供的浏览器内核不是 Gecko ,因此咱们将这种方式注释起来,感兴趣的同窗能够在本身主机的 Firefox 浏览器中运行调试。

3.overflow-wrap & word-break

overflow-wrap 和 word-break 均可以起到对单词的换行做用,前者用来代表是否容许浏览器在单词内进行短句,例如出现了一个很长的 url 或者单词,因为找不到天然段据点空格或标点符号而产生了溢出,这时候就可使用 overflow-wrap 来解决这个问题;word-break 则是用于代表怎样在单词内进行短句。

overflow-wrap

overflow-wrap 经常使用的有两个取值:

  • normal:浏览器保持默认处理
  • break-word:容许在长单词内进行换行
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
   
   
        margin: 50px;
        border: 1px solid;
        width: 100px;
        overflow-wrap: break-word;
      }
      .div2 {
   
   
        margin: 50px;
        border: 1px solid;
        width: 100px;
        overflow-wrap: normal;
      }
    </style>
  </head>
  <body>
    <div class="div1">Hello world!veryveryveryveryverylongword isn't it?</div>
    <div class="div2">Hello world!veryveryveryveryverylongword isn't it?</div>
  </body>
</html>

运行效果图为:
在这里插入图片描述
能够看到,句子中出现了一个很长的单词,属性 overflow-wrap 设置为 break-word,即容许从中间断开,没有出现溢出的状况,在句子开始的 Hello World!中,能够看到这两个单词是处于两行,也就是说若是把它们放在一行内会出现溢出的状况,break-word 不会拆散短单词,因此这里出现了换行;属性 overflow-wrap 设置为 normal 时,采用浏览器默认的换行方式,出现了溢出。

word-break

word-break 有三个取值:

  • normal:保持浏览器默认换行方式
  • break-all:代表对于 non-CJK(非中文/日文/韩文)文本,可在任意字符间断行
  • keep-all:CJK 文本不断行,non-CJK 文本表现同 normal 。展开一点来讲就是只能在半角空格或连字符处换行,也就是说,keep-all 只能在语句的正常语句起始处和单词起始处换行,若是 non-CJK 单词过长,使用值 keep-all 就有可能形成文本框溢出
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .item1 {
   
   
            margin: 20px;
            border: 1px solid;
            width: 100px;
            word-break: normal;
        }
        .item2 {
   
   
            margin: 20px;
            border: 1px solid;
            width: 100px;
            word-break: break-all;
        }
        .item3 {
   
   
            margin: 20px;
            border: 1px solid;
            width: 100px;
            word-break: keep-all;
        }
    </style>
</head>
<body>
<div class="item1">
    我爱学习,我爱橘猫烧鲷鱼鱼鱼!Hello world!veryveryveryveryverylongword
    isn't it?
</div>
<div class="item2">
    我爱学习,我爱橘猫烧鲷鱼鱼鱼!Hello world!veryveryveryveryverylongword
    isn't it?
</div>
<div class="item3">
    我爱学习,我爱橘猫烧鲷鱼鱼鱼!Hello world!veryveryveryveryverylongword
    isn't it?
</div>
</body>
</html>

运行效果图为:请添加图片描述
第一个文本框的 word-break 属性设置为 normal,能够看到,浏览器默认换行是 CJK 换行,non-CJK 换行方式是在半角空格连字符的地方换行,长单词不换行。 第二个文本框的 word-break 属性设置为 break-all,能够看到 CJK 和 non-CJK 文本被随意拆分换行,不会出现文本框溢出,可是 non-CJK 文本也失去原有的样子; 第三个文本框的 word-break 属性设置为 keep-all,因为只能在半角空格或连字符处换行,因此过长的 non-CJK 文本产生了溢出现象,可是每一个单词都能在一行内呈现,另外,设置为 keep-all 时,CJK 文本是不断行的,在第一个逗号的地方产生了换行,第二行的我爱实验楼楼楼楼楼中间没有半角空格或连字符,因此没有换行产生了溢出,直到感叹号的地方才产生换行。

十.CSS3 动画和过渡

1.渐变

在 CSS3 以前,渐变效果须要图像来完成,这增大了下载时间和带宽的使用。 CSS3 的渐变是由浏览器生成的,因此其更具优点。

CSS3 定义了两种类型的渐变:

  • 线性渐变
  • 径向渐变

渐变属于 image 类型,因此渐变只能在可使用 image 的地方使用。

线性渐变

渐变至少是一种颜色朝另外一种颜色变化,可让你在两个或多个指定的颜色之间显示平稳的过渡。因此必须至少定义两种颜色节点。同时,能够给出颜色变化的方向,线性渐变的语法以下:

background: linear-gradient(to direction | angle, color-stop1, color-stop2...);

线性渐变 - 从上到下(默认状况下)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      #box1 {
   
   
        width: 300px;
        height: 200px;
        background-color: red; /* 浏览器不支持时显示 */
        background-image: linear-gradient(#e66465, #9198e5);
      }
    </style>
  </head>
  <body>
    <p>从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:</p>

    <div id="box1"></div>
  </body>
</html>

请添加图片描述

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      #box1 {
   
   
        width: 300px;
        height: 200px;
        background-color: red; /* 浏览器不支持时显示 */
        background-image: linear-gradient(to right, #e66465, #9198e5);
      }
    </style>
  </head>
  <body>
    <p>从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:</p>

    <div id="box1"></div>
  </body>
</html>

请添加图片描述
其实就是加上了 to right 这个值。

线性渐变-对角

能够经过指定水平和垂直的起始位置来制做一个对角渐变。下面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到黄色:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      #box1 {
   
   
        width: 300px;
        height: 200px;
        background-color: red; /* 浏览器不支持时显示 */
        background-image: linear-gradient(to bottom right, red, yellow);
      }
    </style>
  </head>
  <body>
    <p>从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:</p>

    <div id="box1"></div>
  </body>
</html>

请添加图片描述

径向渐变

径向渐变由它的中心定义。为了建立一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也能够指定渐变的中心、形状(圆形或椭圆形)、大小。默认状况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

background-image: radial-gradient(
  shape size at position,
  start-color,
  ...,
  last-color
);

径向渐变 - 颜色结点均匀分布(默认状况下)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      #box1 {
   
   
        width: 300px;
        height: 200px;
        background-color: red; /* 浏览器不支持的时候显示 */
        background-image: radial-gradient(
          red,
          yellow,
          blue
        ); /*  标准的语法(必须放在最后)*/
      }
    </style>
  </head>
  <body>
    <p>从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:</p>

    <div id="box1"></div>
  </body>
</html>

请添加图片描述
径向渐变 - 颜色结点不均匀分布

<style>
  #box1 {
   
   
    width: 300px;
    height: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red 25%, yellow 35%, pink 60%);
  }
</style>

请添加图片描述
设置形状

<style>
  #box1 {
   
   
    width: 300px;
    height: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(circle, red 25%, yellow 35%, pink 60%);
  }
</style>

请添加图片描述
因为不一样的渲染引擎实现渐变的语法不一样,这里只针对线性渐变的 W3C 标准语法来分析其用法,其他能够查阅相关资料。

2.过渡

在 CSS3 中,咱们若是想要实现一种样式到另外一种样式的转变,无需再使用 Flash 动画或者是 JavaScript ,CSS3 为咱们提供了过渡的效果。

transition

属性 transition 应用于元素的过渡效果,使用时须要指定但愿过渡的属性以及过渡持续的时间。

transition属性对应了四个值:

transition: transition | transition-duration | transition-timing-function |
  transition-delay;
  • transition-property 规定了应用于过渡效果的 CSS 属性的名称,默认值为 all 。
  • transition-duration 规定了过渡持续的时间,默认值为 0s。也就是说,若是不指定过渡时间,那么将不会产生过渡效果。
  • transition-timing-function 规定了过渡效果的时间曲线,如 ease (默认):慢速开始,中间变快,慢速结束。liner :匀速运动。
  • transition-delay 规定了过渡效果的延迟时间,默认为 0s 。

transition-timing-function 有一些经常使用的值:

  • linear:匀速,至关于(cubic-bezier(0,0,1,1))。
  • ease:慢速开始,而后变快,而后慢速结束,至关于(cubic-bezier(0.25,0.1,0.25,1))。
  • ease-in:慢速开始,至关于(cubic-bezier(0.42,0,1,1))。
  • ease-out:慢速结束,至关于(cubic-bezier(0,0,0.58,1))。
  • ease-in-out:慢速开始,慢速结束,至关于(cubic-bezier(0.42,0,0.58,1))。
  • cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义本身的值,取值范围是 0 ~ 1。

当指定多个属性的过渡效果时,用逗号隔开便可:

transition: width 2s ease-in-out, height 2s ease-in-out;
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
   
   
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
        opacity: 0.5;
        transition: 2s ease-in-out;
        /*transition-property 默认为 all,因此将应用到 width 和 height 上*/
      }
      .div1:hover {
   
   
        width: 400px;
        height: 400px;
        opacity: 1;
      }
      .div2 {
   
   
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: cyan;
        opacity: 0.5;
        transition: height 2s cubic-bezier(0.25, 0.1, 0.25, 1);
        /*transition-property 只指定了 height,因此 width 的改变不会使用过渡效果;cubic-bezier(0.25,0.1,0.25,1) 至关于 ease,慢速开始,而后变快,慢速结束。*/
      }
      .div2:hover {
   
   
        width: 400px;
        height: 400px;
        opacity: 1;
      }
      .div3 {
   
   
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: orange;
        opacity: 0.5;
        transition: 2s ease-in-out 2s;
        /*transition-delay 设置为 2s,当鼠标移到该盒子上,过渡效果将会延迟 2s 开始、结束*/
      }
      .div3:hover {
   
   
        width: 400px;
        height: 400px;
        opacity: 1;
      }
      .div4 {
   
   
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: grey;
        opacity: 0.5;
        transition: ;
        /*全部属性使用默认值,transition-timing-function 的默认值为 0s,因此 div4 无过渡效果*/
      }
      .div4:hover {
   
   
        width: 400px;
        height: 400px;
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="div1">div1 transition: 2s ease-in-out;</div>
    <div class="div2">
      div2 transition: height 2s cubic-bezier(0.25,0.1,0.25,1);
    </div>
    <div class="div3">div3 transition: 2s ease-in-out 2s;</div>
    <div class="div4">div4 transition: ;</div>
  </body>
</html>

将鼠标挪动到矩形上观察效果。

能够发现,div1 的持续时间设置为 2s,效果采用 ease-in-out,其他为默认值,因此 opacity、width、height 的改变都会采用过渡效果;div2 中指定了过渡的属性为 height,因此其它两个属性不会使用过渡效果;div3 设置了 transition-delay,过渡效果的开始和结束都会延迟相应的时间;div4 全部的值都使用默认值,包括持续时间 0s,因此 div4 无过渡效果,变化会很是生硬。

自行改变 transition 的值查看效果。

3. 2D 、3D 转换

CSS3 转换能够对元素进行移动、缩放、转动、拉长或拉伸。在前面的章节中咱们已经学习了 CSS3 的过渡效果,在本节中,咱们将结合过渡功能对 CSS3 的 2D 、3D 转换进行学习。

  • 2D 转换
  • 3D 转换

转换有下列属性:

  • transform: 将 2D 或 3D 转换应用到元素上去
  • transform-origin:能够改变被转换元素的位置
transform-origin: x-axis y-axis z-axis;
/*
x-axis:定义视图在 X 轴的位置,left | center | right | length | %
y-axis:定义视图在 Y 轴的位置,top | center | bottom | length | %
z-axis:定义视图在 Z 轴的位置,length
*/
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
   
   
        width: 300px;
        height: 300px;
        margin: 200px;
        border: 2px solid;
        text-align: center;
      }
      .div1 div {
   
   
        width: 300px;
        height: 300px;
        background: lightgreen;
        transform: rotate(45deg);
      }
      .transform-origin div {
   
   
        transform-origin: 10% 10%;
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <div>变换基点在默认位置</div>
    </div>
    <div class="div1 transform-origin">
      <div>变换基点在 10% 10% 位置</div>
    </div>
  </body>
</html>

运行效果图为:

在这里插入图片描述
在这里插入图片描述
能够看到两个变换的基点有了明显的不一样,第二个将变换基点设置到 10% 10% 的位置,变换也出现了不一样。

  • transform-style:规定被嵌套元素如何在 3D 空间中显示
transform-style: flat | preserved-3d;
/*
flat:子元素将不保留 3D 位置
preserved-3d:子元素将保留 3D 位置
在实现一些 3D 效果的时候,通常都要声明为 preserved-3d
*/
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
   
   
        width: 200px;
        height: 200px;
        border: 1px solid #bbb;
        margin: 100px;
        /* 在父元素中设置transform-style: preserve-3d; */
        transform-style: preserve-3d;
        transform: perspective(600px);
      }
      .div1 div {
   
   
        width: 200px;
        height: 200px;
        background: lightgreen;
        transform: rotateX(60deg);
      }
      .div2 {
   
   
        width: 200px;
        height: 200px;
        border: 1px solid #bbb;
        margin: 100px;
        /* 在父元素中设置transform-style: flat; */
        transform-style: flat;
        transform: perspective(600px);
      }
      .div2 div {
   
   
        width: 200px;
        height: 200px;
        background: lightgreen;
        transform: rotateX(60deg);
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <div></div>
    </div>
    <div class="div2">
      <div></div>
    </div>
  </body>
</html>

在这里插入图片描述
能够看到,div1 和 div2 除了 transform-style 属性以外,其它彻底相同,一个保留了 3d 效果,一个未保留 3d 效果。

  • perspective:规定 3D 元素的透视效果,与 perspective-origin 结合使用,能够改变 3D 元素的底部位置,在实现一些 3D 效果,这一项是必不可少的。
perspective: number | none;
/*
number:单位 px,元素距离视图的距离
none:默认值,0,无透视
*/
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
   
   
        width: 300px;
        height: 300px;
        margin: 50px;
        border: 1px solid #bbb;
      }
      .div1 div {
   
   
        width: 100%;
        height: 100%;
        background: lightgreen;
        transform: perspective(600px) rotateY(45deg);
        /*设置了透视和变换方式*/
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <div></div>
    </div>
  </body>
</html>

行效果图为:
在这里插入图片描述

  • perspective-origin:规定 3D 元素的底部位置
perspective-origin: x-axis y-axis;
/*
x-axis:定义该视图在 X 轴上的位置。默认为 50%。left|center|right|length|%
y-axis:定义该视图在 Y 轴上的位置。默认为 50%。top|center|bottom|length|%
将透视汇集点改变到其余位置。
*/
  • backface-visibility:定义元素在不面对屏幕时是否可见
backface-visibility: visible|hidden;
/*
visible:背面可见
hidden:背面不可见
*/
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      div {
   
   
        width: 200px;
        height: 200px;
        background: lightgreen;
        transform: rotateY(180deg);
        /* 将 div 元素都翻转 180deg,翻转到背面 */
      }
      .div1 {
   
   
        backface-visibility: hidden;
      }
      .div2 {
   
   
        backface-visibility: visible;
      }
    </style>
  </head>
  <body>
    <div class="div1">div1 backface-visibility: hidden;</div>
    <div class="div2">div2 backface-visibility: visible;</div>
  </body>
</html>

运行效果图为:
在这里插入图片描述
能够看到,两个 div 块在翻转后都是背面朝向咱们,当咱们设置 div1 的 backface-visibility: hidden 时,div1 就不可见了,只有 div2 是可见的。

2D 转换
2D 转换有如下几种经常使用方法:

  • translate(x,y) :根据原始位置的 x 、y 轴位置,分别偏离 x 、y 的距离。
  • rotate(angle) :根据给定的 angle 大小,顺时针旋转,若是 angle 为负,则逆时针旋转。
  • scale(x,y) :根据 x 、y 的值,对应的放大宽度和高度。
  • skew(angle,angle) :根据给定的两个角度,分别在水平方向和垂直方向倾斜,第二个角度默认为 0 。
  • matrix() :matrix 变换涉及到了线性代数的知识,在此不做讲述。感兴趣的同窗能够自行了解。
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
   
   
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
        opacity: 0.5;
        transition: 2s;
      }
      .div1:hover {
   
   
        transform: translate(30px, 40px);
        /*translate(x,y)*/
        opacity: 1;
      }
      .div2 {
   
   
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: cyan;
        opacity: 0.5;
        transition: 2s;
      }
      .div2:hover {
   
   
        transform: rotate(180deg);
        /*rotate(angle)*/
        opacity: 1;
      }
      .div3 {
   
   
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: orange;
        opacity: 0.5;
        transition: 2s;
      }
      .div3:hover {
   
   
        transform: skew(20deg, 30deg);
        /*skew(angle,angle)*/
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
  </body>
</html>

把鼠标移动到矩形上,观察效果。

3D 转换

3D 转换语法与 2D 转换语法较为相似

  • translate3d(x,y,z):定义 3D 转化,给出三个值,分别应用于三个坐标轴上
  • translateX(x):定义 3D 转化,仅用于 X 轴
  • translateY(y):定义 3D 转化,仅用于 Y 轴
  • translateZ(z):定义 3D 转化,仅用于 Z 轴
  • scale3d(x,y,z):定义 3D 缩放转换
  • scaleX(x):定义 3D 缩放转换,仅用于 X 轴
  • scaleY(y):定义 3D 缩放转换,仅用于 Y 轴
  • scaleZ(z):定义 3D 缩放转换,仅用于 Z 轴
  • rotate3d(x,y,z,angle):定义 3D 旋转
  • rotateX(angle):定义沿 X 轴的 3D 旋转
  • rotateY(angle):定义沿 Y 轴的 3D 旋转
  • rotateZ(angle):定义沿 Z 轴的 3D 旋转
  • perspective:定义 3D 转换元素的透视视图
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .div1 {
   
   
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
        opacity: 0.5;
        transition: 2s;
      }
      .div1:hover {
   
   
        /*X 轴旋转*/
        transform: rotateX(180deg);
        opacity: 1;
      }
      .div2 {
   
   
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: cyan;
        opacity: 0.5;
        transition: 2s;
      }
      .div2:hover {
   
   
        /*Y 轴伸缩*/
        transform: scaleY(2);
        opacity: 1;
      }
      .div3 {
   
   
        margin: 50px;
        width: 200px;
        height: 200px;
        background-color: orange;
        opacity: 0.5;
        transition: 2s;
      }
      .div3:hover {
   
   
        /*X 轴移动*/
        transform: translateX(50%);
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
  </body>
</html>

把鼠标移动到盒子上,观察效果。

4.动画

动画是使元素从一种样式逐渐变化为另外一种样式的效果。在 CSS3 中 ,咱们能够建立动画,取代以往的网页动画图象。

@keyframes

在 CSS3 标准下,咱们使用 @keyframes 规则来建立动画。咱们无需将动画的每一帧都描绘出来,只须要给出变化的关键帧,而后给出变化时间,其他的等待它自动计算完成就能够了。 @keyframes 里描述了动画的关键帧的相关属性,语法以下:

@keyframes 动画名称 {
   
   
  0% {
   
   
    /*css code 描述关键帧属性*/
  }
  25% {
   
   
    /*css code 描述关键帧属性*/
  }
  50% {
   
   
    /*css code 描述关键帧属性*/
  }
  75% {
   
   
    /*css code 描述关键帧属性*/
  }
  100% {
   
   
    /*css code 描述关键帧属性*/
  }
}

动画建立完成后,咱们使用 animation 属性将动画绑定到对应的元素上去,并给出运行时间,就完成了一个简单的动画。

<!DOCTYPE html>
<html>
  <head>
    <title>s</title>
    <style type="text/css">
      @keyframes myfirstcartoon {
   
   
        0% {
   
   
          background-color: lightgreen;
        }
        25% {
   
   
          background-color: blue;
        }
        50% {
   
   
          background-color: orange;
        }
        75% {
   
   
          background-color: red;
        }
        100% {
   
   
          background-color: yellow;
        }
      }
      body {
   
   
        animation: myfirstcartoon 5s;
      }
    </style>
  </head>
  <body></body>
</html>

CSS3 动画还有不少有趣的属性:

  • animation:动画属性的简写属性,除了 animation-play-state 属性。
  • animaiton-name:规定 @keyframes 动画的名称。
  • animation-duration:规定动画一个周期的时间,默认为 0。
  • animaiton-timing-function:规定动画的速度曲线。默认为 ease。
  • animaiton-delay:规定动画的播放延迟时间。
    animaiton-iteration-count:规定动画播放次数,默认为 1。取值为 infinite 时,动画被无限次播放。
  • animation-direction:规定动画是否在下一周期逆向播放,默认为 normal。取值为 normal 时,动画正常播放,取值为 alternate 时,动画轮流反向播放。
  • animation-play-state:规定动画是否正在运行或暂停,默认为 running;暂停时为 paused。
  • animation-fill-mode:规定动画在播放以前或以后,其动画效果是否可见。取值为 none 时,不改变默认行为;取值为 forwards 时,在动画完成后,保持最后一个属性;取值为 backwards 时,在动画开始以前应用开始属性值;取值为 both 时,向前向后的模式都将被启用。

咱们可使用 animaiton 来简写动画的这些属性:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      @keyframes myfirstcartoon {
   
   
        0% {
   
   
          background-color: lightgreen;
        }
        25% {
   
   
          background-color: blue;
        }
        50% {
   
   
          background-color: orange;
        }
        75% {
   
   
          background-color: red;
        }
        100% {
   
   
          background-color: yellow;
        }
      }
      body {
   
   
        animation: myfirstcartoon 5s ease-in-out 1s infinite alternate;
        /*上述值分别对应了:name duration timing-function delay iteration-count direction*/
      }
    </style>
  </head>
  <body></body>
</html>

注:建立好的动画须要使用 animation 绑定到一个选择器上,不然动画不会运行;而且,须要给出运行时间,由于时间默认值是 0s ,若是不给出时间,动画将一样不会运行。

十一.CSS3布局

1.Flex 布局

Flex 是 Flexible Box(弹性盒子)的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器均可以指定为 Flex 布局。

div {
   
   
  display: flex;
}

行内元素也可使用 Flex 布局

span {
   
   
  display: inline-flex;
}

Webkit 内核的浏览器,必须加上 -webkit 前缀。

div {
   
   
  display: -webkit-flex; /* Safari */
  display: flex;
}

弹性布局是一种当页面须要适应不一样的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

2.基本概念

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称“容器”。它的全部子元素自动成为容器成员,称为 Flex 项目(flex item),简称“项目”。
在这里插入图片描述
容器默认存在两根轴:水平的主轴和垂直的交叉轴

容器属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

子元素属性

  • flex
  • align-self

3.flex-direction

flex-direction 属性指定了主轴线的方向,子元素默认是按照主轴线排列的,因此 flex-direction 也指定了弹性子元素在弹性容器中的排列方式, 有如下四个值:

  • row :(默认)横向从左到右排列。
  • row-reverse :顾名思义,从右向左横向排列,反向。
  • column : 纵向从上往下排列。
  • column-reverse : 纵向从下往上排列。

下面使用值 row 操做属性 flex-direction:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
   
   
        display: flex;
        flex-direction: row;
        width: 400px;
        height: 450px;
        background-color: green;
      }
      .item {
   
   
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

运行的效果图为:
请添加图片描述

如图所示,三个子元素按照值 row 的排列方式,在容器的横向从左到右排列。

当咱们修改 flex-direction 为 column , 在容器的纵向从上往下排列。

4.flex-wrap

弹性盒子默认状况下全部子元素都是排在一行上的,但容器大小有限,颇有可能出现子元素被截断的状况,这时候就须要换行,flex-wrap 就是用来操做子元素换行的属性。flex-wrap 有如下三个值:

  • nowrap :(默认) 不换行。
  • wrap :换行,第一行排满后自动换到第二行。
  • wrap-reverse :换行,与 wrap 不一样的是若是出现换行,换行后的元素在第一行上方。

下面使用值 wrap 来操做属性 flex-wrap :

<style>
  .container {
   
   
    display: flex;
    flex-wrap: wrap;
    width: 350px;
    height: 450px;
    background-color: green;
  }
  .item {
   
   
    background-color: red;
    width: 120px;
    height: 100px;
    margin: 20px;
  }
</style>

运行效果图为:
请添加图片描述
当咱们的父元素(flex-container)宽度为 35px 时,子元素(flex item)为 120px,父元素的一排排不满三个盒子,那么设置 wrap 属性就可以换行,第一行排满后自动换到第二行。

而若是咱们强制不换行,设置 nowrap 属性值:
请添加图片描述
子元素的宽度就会被自动减小,挤在一行。

5.flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的简写形式,默认值为 row nowrap。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
   
   
        display: flex;
        flex-flow: row wrap;
        /*从左往右 换行*/
        width: 350px;
        height: 350px;
        background-color: green;
      }
      .item {
   
   
        background-color: red;
        width: 120px;
        height: 100px;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

运行效果图为:
请添加图片描述

6.justify-content

子元素在容器中默认是以左对齐的布局排列在主轴线上的,属性 justify-content 用来调整子元素在主轴线上的对齐方式,它有如下五个值:

  • flex-start :左对齐
  • flex-end :右对齐
  • center :居中
  • space-between :两端对齐,项目之间的间隔都相等。
  • space-around :每一个项目两侧的间隔相等。因此,项目之间的间隔比项目与边框的间隔大一倍。

在这里插入图片描述
在这里插入图片描述

使用值 space-between 来操做属性 justify-content :

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
   
   
        display: flex;
        justify-content: space-around;
        width: 400px;
        height: 250px;
        background-color: green;
      }
      .item {
   
   
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

运行效果图为:
请添加图片描述
容器的宽度为 400px,三个子元素的宽度和加上它们的边框小于 400px,因此不会出现换行。

7.align-items

与主轴垂直的轴咱们称它为交叉轴,属性 align-items 用于定义子元素在交叉轴上的排列方式,它有下列五个值:

  • flex-start :交叉轴的起点对齐。
  • flex-end :交叉轴的终点对齐。
  • center :交叉轴的中点对齐。
  • baseline :项目的第一行文字的基线对齐。
  • stretch :若是子元素未设置高度或设置为 auto ,子元素将占满整个容器高度。
    在这里插入图片描述
    在这里插入图片描述
    使用值 flex-end 来操做属性 align-items :
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
   
   
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 400px;
        height: 250px;
        background-color: green;
      }
      .item {
   
   
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

运行效果图为:
在这里插入图片描述
注:这里的 flex-direction 设置为 column ,即主轴线的方向是垂直的,即交叉轴的方向是水平的;align-items 设置为 flex-end,即子元素在交叉轴结束位置上的边界对齐,交叉轴的结束位置在右侧,因此三个子元素在右边界上对齐。

8.align-content

align-content属性定义了多根轴线的对齐方式。若是项目只有一根轴线,该属性不起做用。,align-content 有如下六个值:

  • flex-start :与交叉轴的起点对齐。
  • flex-end :与交叉轴的终点对齐。
  • center :与交叉轴的中点对齐。
  • space-between :与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around :每根轴线两侧的间隔都相等。因此,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch:轴线占满整个交叉轴。

下面使用值 center 来操做属性 align-content :

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
   
   
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        width: 200px;
        height: 600px;
        background-color: green;
      }
      .item {
   
   
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

运行效果图为:

在这里插入图片描述
注:该处设置 flex-wrap 换行属性为 wrap,容许换行。align-content 属性在容器内不存在换行时不产生效果,因此咱们将容器的 width 设置为 200px,一行只能放下一个子元素。align-content:center 表示每一行在交叉轴上居中排列,三个子元素只是在交叉轴上居中排列,由于咱们没有设置主轴线的对齐方式,若是咱们将 CSS 代码修改成以下所示,其他代码不变,那么子元素的排列效果就会发生变化。

.container {
   
   
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 200px;
  height: 600px;
  background-color: green;
}
.item {
   
   
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 10px;
}

运行效果图为:
在这里插入图片描述
能够看到,三个子元素的排列已经彻底居中了。

9.flex

flex 属性其实是三个属性的简写形式:

flex: flex-grow || flex-shrink || flex-basis;

因此在介绍 flex 以前,先介绍这三个属性各自的特性。

flex-grow

当容器比子元素大不少,子元素的宽高又设置的很小,这个时候即便水平垂直居中,整个布局看起来仍然很奇怪:

在这里插入图片描述
又或者根据实际的须要,子元素须要将容器占满。这个时候,咱们就可使用属性 flex-grow 来操做。 flex-grow 是设置子元素如何分配容器的剩余空间的属性。

假设容器的宽度为 400px,A 元素的宽度为 100px,B 元素的宽度也为 100px。

  • 当 flex-grow 的值为 0 (默认),子元素不会分配剩余空间,因此 A 和 B 的宽度仍然是 100px 。
  • 当 flex-grow 的值为 1 ,子元素平均分配剩余空间,即:剩余宽度为 200px ,A 和 B 各分配获得 100px ,A 和 B 的宽度都变为了 200px 。
  • 当 flex-grow 的值大于 1,则按照各自所占的比例分配剩余空间。例如 A 元素的 flex-grow = 1 ,B 元素的 flex-grow = 2 ,则 A 分配到 1/3 的剩余空间,即 1/3 * 200px ,B 元素同理。
<!DOCTYPE html>
<html>
  <head>
    <title>shiyanlou</title>
    <style>
      .container {
   
   
        display: flex;
        justify-content: center;
        width: 600px;
        height: 200px;
        background-color: green;
      }
      .item {
   
   
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 10px;
      }
      .item1 {
   
   
        flex-grow: 3;
      }
      .item2 {
   
   
        flex-grow: 6;
      }
      .item3 {
   
   
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">item1</div>
      <div class="item item2">item2</div>
      <div class="item item3">item3</div>
    </div>
  </body>
</html>

运行效果图为:
在这里插入图片描述
三个子元素按照比例分配了剩余的空间,造成了上图的布局。

flex-shrink
与 flex-grow 相反,当容器太小,子元素过大时,属性 flex-shrink 用来缩小子元素。 假设容器的宽度为 300px ,A 元素的宽度为 200px ,B 元素的宽度也为 200px 。

  • 当 flex-shrink 的值为 0 ,子元素不会缩小,可能会致使元素溢出容器。
  • 当 flex-shrink 的值为 1 (默认),子元素会按照一样的比例缩小自身的大小。A 的宽度 = (200-100*(2001/(2001+200*1)))= 150 。B 元素也同理。
  • 当 flex-shrink 的大于 1 ,子元素会按照给定的比例缩小自身的大小。例如 A 的 flex-shrink 设置为 2 ,B 的 flex-shrink 设置为 3 ,则 A 的宽度 = (200-100*(2002/(2002+200*3)))= 160 。B 元素也同理。
<!DOCTYPE html>
<html>
  <head>
    <title>shiyanlou</title>
    <style>
      .container {
   
   
        display: flex;
        justify-content: center;
        width: 300px;
        height: 200px;
        background-color: green;
      }
      .item {
   
   
        background-color: red;
        width: 200px;
        height: 100px;
        margin: 10px;
      }
      .item1 {
   
   
        flex-shrink: 3;
      }
      .item2 {
   
   
        flex-shrink: 6;
      }
      .item3 {
   
   
        flex-shrink: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">item1</div>
      <div class="item item2">item2</div>
      <div class="item item3">item3</div>
    </div>
  </body>
</html>

运行效果图为:
在这里插入图片描述

flex-basis

flex-basis 用于设置子元素的宽度,规定子元素的基准值,若是子元素另外设置了 width ,会被该属性的值覆盖。 flex-basis 有几个特殊的取值,咱们介绍其中的 auto 取值(默认)。当 flex-basis 取值为 auto 时,若是子元素的宽度不为 auto ,那么子元素的宽度就设置为自身的宽度;若是子元素的宽度设置为 auto ,那么子元素的宽度就根据子元素的内容来自动布局。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
   
   
        display: flex;
        justify-content: center;
        width: 400px;
        height: 200px;
        background-color: green;
      }
      .item {
   
   
        background-color: red;
        flex-basis: auto;
        width: auto;
        height: 100px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

运行效果图为:

在这里插入图片描述

10.align-self

属性 align-self 可使某个子元素的对齐方式与其它的子元素不一样,能够覆盖 align-items 的值。align-self 的取值与 align-items 的取值相比只多了一个 auto ,其他均与 align-items 相同。 下面咱们操做一下属性 align-self:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .container {
   
   
        display: flex;
        align-items: flex-start;
        width: 400px;
        height: 250px;
        background-color: green;
      }
      .item {
   
   
        background-color: red;
        width: 100px;
        height: 100px;
        margin: 10px;
      }
      .item1 {
   
   
        align-self: inherit;
      }
      .item2 {
   
   
        align-self: flex-end;
      }
      .item3 {
   
   
        align-self: inherit;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">item1</div>
      <div class="item item2">item2</div>
      <div class="item item3">item3</div>
    </div>
  </body>
</html>

运行效果图为:
在这里插入图片描述

11.多媒体查询

媒体类型

CSS3 的多媒体查询继承了 CSS2 的多媒体类型的全部思想,取代了查找设备的类型,CSS3 根据设置自适应显示,CSS3 有如下几种多媒体类型:

  • all :用于全部的多媒体类型设备。
  • print :用于打印机。
  • screen :用于电脑屏幕、智能手机、平板等。
  • speech :用于屏幕阅读器。

@media 的语法为:

@media not|only mediatype and (expressions) {
   
   
  /*css code here*/
}

下面操做一下 @media:

<!DOCTYPE html>
<html>
  <head>
    <title>shiyanlou</title>
    <style type="text/css">
      @media screen and (min-width: 480px) {
   
   
        body {
   
   
          background-color: red;
        }
      } /*窗口尺寸大于480px,背景颜色为红色*/
      @media screen and (min-width: 720px) {
   
   
        body {
   
   
          background-color: lightgreen;
        }
      } /*窗口尺寸大于720px,背景颜色为绿色*/
    </style>
  </head>
  <body></body>
</html>

调整浏览器的窗口大小,观察背景颜色的变化。

媒体查询使用方法

媒体查询能在不一样的条件下使用不一样的样式,使页面在不一样在终端设备下达到不一样的渲染效果。媒体查询有其本身的使用规则。具体来讲,媒体查询的使用方法以下。

@media 媒体类型and (媒体特性){
   
   你的样式}

使用媒体查询必需要使用 @media 开头,而后指定媒体类型(也能够称为设备类型),随后是指定媒体特性(也能够称之为设备特性)。媒体特性的书写方式和样式的书写方式很是类似,主要分为两个部分,第一个部分指的是媒体特性,第二部分为媒体特性所指定的值,并且这两个部分之间使用冒号分隔。

媒体特性是经过 min/max 来表示大于等于或小于作为逻辑判断,接下来一块儿来看看媒体查询在实际项目中经常使用的方式。

1.最大宽度 max-width

max-width 是媒体特性中最经常使用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效

@media screen and (max-width: 400px) {
   
   
  .box {
   
   
    display: none;
  }
}

上面表示的是:当屏幕小于或等于 400px 时,页面中的 .box 都将被隐藏。

2.最小宽度 min-width

min-width 与 max-width 相反,指的是媒体类型大于或等于指定宽度时,样式生效。

@media screen and (min-width: 1000px) {
   
   
  .box {
   
   
    width: 400px;
  }
}

上面表示的是:当屏幕大于或等于 1000px 时,容器 .box 的宽度为 980px。

3.多个媒体特性使用

媒体查询可使用关键词 and 将多个媒体特性结合在一块儿。也就是说,一个媒体查询中能够包含 0 到多个表达式,表达式又能够包含 0 到多个关键字,以及一种媒体类型。

@media screen and (min-width: 700px) and (max-width: 1000px) {
   
   
  .box {
   
   
    width: 500px;
  }
}

当屏幕在 700px~1000px 之间时,容器 .box 的宽度为 500px。

4.not 关键词

使用关键词 not 是用来排除某种制定的媒体类型,也就是用来排除符合表达式的设备。换句话说,not 关键词表示对后面的表达式执行取反操做。

@media not print and (max-width: 1200px) {
   
   
  .box {
   
   
    width: 500px;
  }
}

在除打印设备和设备宽度小于 1200px 下全部设备中,容器 .box 的宽度为 500px。

12.用户界面

相比 CSS2 ,CSS3 增长了一些新的特性来调整元素尺寸、框尺寸和外边框。

  • resize
  • box-sizing
  • outline-offset

resize

属性 resize 容许用户调整元素的尺寸,可是须要将元素的 overflow 属性设置为 auto 、hidden 或 scroll,resize 属性才能生效。

resize 有如下四个值:

  • none :用户没法调整元素尺寸。
  • both :用户能够调整元素的高度和宽度。
  • horizontal :用户能够调整元素的宽度。
  • vertical :用户能够调整元素的高度。

4下面使用值 both 操做属性 resize:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      div {
   
   
        overflow: auto; /* auto 、hidden or scroll*/
        border: 2px solid;
        width: 300px;
        height: 250px;
        resize: both;
      }
    </style>
  </head>
  <body>
    <div>
      <p>用户能够调整该元素的大小</p>
    </div>
  </body>
</html>

运行效果图为:
在这里插入图片描述

box-sizing

属性 box-sizing 和盒子模型有关,它容许用户以特定的方式定义匹配某个区域的特定元素。

box-sizing 有如下三个值:

  • content-box :(默认)设置属性为该值时,设定的高度和宽度值只应用到 content 内容上,不包括 padding 和 border。
  • border-box :设置属性为该值时,设定的高度和宽度应用到 content + padding + border 上,也就是说若是要获得 >* content 的宽高须要减去 padding 和 border。
    inherit :继承父元素的 box-sizing 取值。

下面对比一下 content-box 和 border-box:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .container {
   
   
        width: 660px; /* width = item1.width + 2 * item1.border + item2.width */
        height: 310px; /* height = item1.height + 2 * item1.border */
        display: flex;
        flex-flow: row wrap;
        border: 2px solid;
      }
      .content-box {
   
   
        box-sizing: content-box;
        border: 30px solid yellow;
        width: 300px;
        height: 250px;
      }
      .border-box {
   
   
        box-sizing: border-box;
        border: 30px solid blue;
        margin-top: 30px;
        width: 300px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="content-box">item1</div>
      <div class="border-box">item2</div>
    </div>
  </body>
</html>

运行效果图为:
在这里插入图片描述
item1 和 item2 的边框都设置为 30px,宽高都设置成相同数值。按照 box-sizing 的属性规定,item1 的 box-sizing 为 content-box,item1 最终的宽高应该为设置的宽高加上边框和填充的大小,填充默认为 0,则 item1 最终的宽高应该为 360px 310px。item2 的 box-sizing 为 border-box,item2 最终的宽高就等于设置的宽高 300px 250px。运行后能够发现,item2 content 高加 padding 高加 border 高等于 item1 content 高,符合咱们的预期。若是还有些疑惑,能够利用 container 的宽度计算一下 item1 和 item2 的宽度,会发现结果如上述对 box-sizing 属性描述的同样。

outline-offset

属性 outline-offset 对轮廓进行偏移,并在边框边缘进行绘制,轮廓不会占用空间,而且不必定是矩形。 下面操做 outline-offset 属性:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      div {
   
   
        margin: 100px;
        width: 200px;
        height: 200px;
        border: 2px solid;
        outline: 2px solid green;
        outline-offset: 20px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

运行效果图为:
在这里插入图片描述

十二.CSS3 选择器

1.经常使用选择器

CSS 的经常使用选择器包括了通配符选择器、元素选择器、类选择器等。

CSS3 中新增了一个经常使用选择器:

  • 通用兄弟元素选择器(E~F)

E 和 F 属于同一父元素以内,而且 F 在 E 以后,通用兄弟选择器会选择符合这样排列的全部的 F 元素。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .test ~ p {
   
   
        background: red;
      }
    </style>
  </head>
  <body>
    <div>
      <p>1</p>
      <p class="test">2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
    </div>
    <p>8 out of div</p>
  </body>
</html>

在浏览器中运行效果图为:
在这里插入图片描述
能够看到,选择器

.test ~ p {
   
   
  background: red;
}

选择了 p.test 元素后的全部兄弟元素 <p> ,因为 <p>8 out of div </p> 和前七个 <p> 不是兄弟元素,因此未被选中。

2.属性选择器

E[attr^=“value”]

它与 E[attr=“value”]很相似,只不过多了一个 ^ ,该选择器选择属性名为 attr ,属性值以 value 开头的元素。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      a[title^='test'] {
   
   
        background: red;
      }
    </style>
  </head>
  <body>
    <a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
    <a href="https://www.lanqiao.cn" title="testaaa">title="testaaa"</a><br />
    <a href="https://www.lanqiao.cn" title="aaatest">title="aaatest"</a><br />
    <a href="https://www.lanqiao.cn" title="aaaaa">title="aaaaa"</a><br />
  </body>
</html>

运行效果图为:
在这里插入图片描述
能够看到前两个 <a> 标签的 title 都是以 test 开头,它们都被选择器选中了。

E[attr$=“value”]

该选择器选择属性名为 attr,属性值以 value 结尾的元素。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      a[title$='test'] {
   
   
        background: red;
      }
    </style>
  </head>
  <body>
    <a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
    <a href="https://www.lanqiao.cn" title="testaaa">title="testaaa"</a><br />
    <a href="https://www.lanqiao.cn" title="aaatest">title="aaatest"</a><br />
    <a href="https://www.lanqiao.cn" title="aaaaa">title="aaaaa"</a><br />
  </body>
</html>

运行效果图为:
在这里插入图片描述
能够看到第一个和第三个 <a> 标签的 title 都是以 test 结尾,它们都被选择器选中了。

E[attr=“value”]

该选择器选择属性名为 attr,属性值包含 value 的元素。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      a[title*='test'] {
   
   
        background: red;
      }
    </style>
  </head>
  <body>
    <a href="https://www.lanqiao.cn" title="test">title="test"</a><br />
    <a href="https://www.lanqiao.cn" title="testaaa">title="testaaa"</a><br />
    <a href="https://www.lanqiao.cn" title="aaatest">title="aaatest"</a><br />
    <a href="https://www.lanqiao.cn" title="aaaaa">title="aaaaa"</a><br />
  </body>
</html>

运行效果图为:
在这里插入图片描述
能够看到前三个 <a> 标签的 title 都包含 test ,它们都被选择器选中了。

3.伪类选择器

E:root
该选择器选择文档的根节点,效果和设置 html 相同

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      :root {
   
   
        background: lightgreen;
      }
      /*
    与下列样式效果相同
    html{
   
   
        background: lightgreen;
    }
    */
    </style>
  </head>
  <body></body>
</html>

运行效果图为:
在这里插入图片描述

E:nth-child(n)
该选择器选择 E 元素父元素的第 n 个子元素。n 有两种取值:

  1. n 取值为整数
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      p:nth-child(3) {
   
   
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p>1</p>
    <a href="">2</a>
    <p>3</p>
    <p>4</p>
  </body>
</html>

运行效果图为:
在这里插入图片描述
选择器选取了 <p> 的父元素的第三个子元素。

注:这些子元素不必定是同种类型,如上述例子中,父元素的第二个子元素是 <a> ,它与其它 <p> 是兄弟元素。另外,当该选择器取整数时,只能取正整数。

  1. n 取值为表达式
    当取值为表达式时,变量只能使用 n,而且 n 从 0 开始依次加一,即取值为表达式时,选择器选择多个值,[n=0,1,2,3…]。当计算结果小于等于 0 或 大于子元素总数时,不选取元素。
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      p:nth-child(2n + 1) {
   
   
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p>1</p>
    <a href="">2</a>
    <p>3</p>
    <p>4</p>
  </body>
</html>

运行效果图为:
在这里插入图片描述
表达式为 2n-1,[n=0,1,2,3…],计算结果为 nth-child(1),nth-child(3)…,因此该选择器选择了第一个和第三个元素。

注:使用表达式时,CSS3 提供了两个特殊值:odd 和 even。odd 至关于 2n+1,even 至关于 2n。

E:nth-last-child(n)
与 E:nth-child(n) 相比多了一个 last,其实该选择器与前者十分类似,只不过前者是从前日后计数第 n 个,该选择器是从最后一个往前计数。

<!DOCTYPE html>
<html>
  <head>
    <title>=</title>
    <style type="text/css">
      p:nth-last-child(2n + 1) {
   
   
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p>1</p>
    <p>2</p>
    <a href="">3</a>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </body>
</html>

运行效果图为:
在这里插入图片描述
能够看到,从最后一个元素往前计数,第一个、第三个、第五个元素都被选择器选中。

E:nth-of-type(n)
该选择器与 E:nth-child(n) 语法相同,在选择的元素上有些区别。该元素选择的是与 E 相同类型的兄弟元素.
例子:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      p:nth-of-type(2n + 1) {
   
   
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p>1th of ele,1th of p</p>
    <p>2th of ele,2th of p</p>
    <a href="https://www.lanqiao.cn">3th of ele,1th of a</a>
    <p>4th of ele,3th of p</p>
    <p>5th of ele,4th of p</p>
    <p>6th of ele,5th of p</p>
  </body>
</html>

运行效果图为:
在这里插入图片描述
该选择器选择的是与 p 类型相同的兄元素,表达式为 2n+1,即选择奇数项元素,能够看到第一个第三个第五个 p 元素都被选中了。

E:nth-last-of-type(n)
该选择器与以前的 E:nth-last-child(n) 相相似,它与上一个选择器 E:nth-of-type(n) 选择元素的方式相同,只不过计数是从最后一个符合条件的兄弟元素开始往前计数。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      p:nth-last-of-type(2n + 1) {
   
   
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p>1th of ele,1th of p</p>
    <p>2th of ele,2th of p</p>
    <a href="https://www.lanqiao.cn">3th of ele,1th of a</a>
    <p>4th of ele,3th of p</p>
    <p>5th of ele,4th of p</p>
    <p>6th of ele,5th of p</p>
    <p>7th of ele,6th of p</p>
  </body>
</html>

运行效果图为:
在这里插入图片描述

E:last-child
该选择器选择 E 元素的父元素的最后一个子元素:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      p:last-child {
   
   
        background: red;
      }
    </style>
  </head>
  <body>
    <p>wo</p>
    <p>shi</p>
    <p>xiao</p>
    <p>niu</p>
    <p>ma</p>
  </body>
</html>

注:该选择器须要知足父元素的最后一个元素和 E 才会选取,不然不会选取.

E:first-of-type
该选择器选择 E 元素父元素的子元素的第一个与 E 元素类型一致的元素。

E:last-of-type
该选择器选择 E 元素父元素的子元素的最后一个与 E 元素类型一致的元素。

E:only-child
该元素选择的是 E 是其父元素惟一的子元素.

E:only-of-type
该选择器选择的是 E 是其父元素惟一的子元素类型

E:empty
该选择器选择的是空元素。

E:target
该选择器选择的是一个 id 与 当前 url 匹配的元素

E:not(s)
该选择器匹配不符合参数选择器 s 描述的元素。

E:enabled & E:disabled
该选择器匹配的是元素的可用和禁用状态.

E:checked
该选择器通常用于 radio-button 或 checkbox,选择它们的 checked 状态.


总结

我敲!七万多字,后头不想写栗子了,阔以去菜鸟教程或者W3C找案例嗷