CSS简介

image-20211130110019853

CSS概念

  • CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表

  • CSS文件后缀名为.css

  • CSS用于HTML文档中元素样式的定义

为什么需要CSS

使用css的唯一目的就是让网页具有美观一致的页面

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）

image-20211129154503132

选择器通常是您需要改变样式的 HTML 元素

每条声明由一个属性和一个值组成

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

1
2
3
4
5
6
<style>
    h1{
        color: blue;
        font-size: 12px;
    }
</style>

实时效果反馈

1.下列关于CSS基础语法描述错误的是：

A CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

B 选择器通常是您需要改变样式的 HTML 元素

C 每条声明由一个属性和一个值组成

D 属性与属性值之间用分号隔开

答案

1=>D

CSS的引入方式

image-20211130111128496

CSS3新特性

image-20220428000457846

圆角

使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”

border-radius 属性，可以使用以下规则：

  1. 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
  2. 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  3. 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  4. 一个值： 四个圆角值相同
1
2
3
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div{
    margin: 10px;
}
.box1 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
.box2 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
.box3 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

阴影

box-shadow 向框添加一个或多个阴影。

1
box-shadow: h-shadow v-shadow blur color;
值 描述
h-shadow 必选，水平阴影的位置
v-shadow 必选，垂直阴影的位置
blur 可选，模糊距离
color 可选，阴影的颜色

image-20211209100532071

1
<div class="box"></div>
1
2
3
4
5
6
7
.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 10px 10px green;
}

给阴影添加一个模糊效果

image-20211209100710034

1
2
3
4
5
6
7
.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 10px 10px 5px green;
}

三个方向的阴影效果

image-20211209100828270

1
2
3
4
5
6
7
.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

实时效果反馈

1.将一个正方形盒子改成圆形，下列哪个设置可以实现：

A {border:50%;}

B {border-radius:50%;}

C {border-radius:50px;}

D {border:50px;}

2.完成一个水平垂直阴影位置为0，模糊度为10px，颜色为黑色半透明：

A box-shadow: 0px 0px 10px rgba(0,0,0,0.5);

B box-shadow: 0px 0px rgba(0,0,0,0.5);

C box-shadow: 0px 10px 10px #000;

D box-shadow: 10px 10px 0px rgba(0,0,0,0.5);

答案

1=>B 2=>A

动画

image-20211209150150127

动画是使元素从一种样式逐渐变化为另一种样式的效果

您可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%

0% 是动画的开始，100% 是动画的完成。

@keyframes创建动画

使用@keyframes规则，你可以创建动画

1
2
3
4
5
6
7
8
9
10
11
@keyframes name {
    from|0%{
    	css样式
    }
    percent{
    	css样式
    }
    to|100%{
    	css样式
    }
}

name：动画名称，开发人员自己命名；

percent：为百分比值，可以添加多个百分比值；

animation执行动画

1
animation: name duration timing-function delay iteration-count direction;
值 描述
name 设置动画的名称
duration 设置动画的持续时间
timing-function 设置动画效果的速率（如下）
delay 设置动画的开始时间（延时执行）
iteration-count 设置动画循环的次数，infinite为无限次数的循环
direction 设置动画播放的方向（如下）
animation-play-state 控制动画的播放状态：running代表播放，而paused代表停止播放
timing-function值 描述
ease 逐渐变慢（默认）
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
direction值 描述
normal 默认值为normal表示向前播放
alternate 动画播放在第偶数次向前播放，第奇数次向反方向播放

切换背景颜色

1
<div class="animation"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.animation {
    width: 300px;
    height: 300px;
    background-color: red;
    animation: anima 5s linear 5s infinite;
}
.animation:hover {
    animation-play-state: paused;
}
@keyframes anima {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blueviolet;
    }
}

呼吸效果

1
<div class="box"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.box {
    width: 500px;
    height: 400px;
    margin: 40px auto;
    background-color: #2b92d4;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    animation: breathe 2700ms ease-in-out infinite alternate;
}
@keyframes breathe {
    0% {
        opacity: .2;
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1)
    }
    50% {
        opacity: .5;
        box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76)
    }
    100% {
        opacity: 1;
        box-shadow: 0 1px 30px rgba(59, 255, 255, 1)
    }
}

实时效果反馈

1.动画属性中，iteration-count: infinite 属性的作用是：

A 设置动画效果时间

B 设置动画效果速率

C 设置动画的开始时间

D 设置动画无限循环

答案

1=>D

媒体查询

image-20211210145646235

媒体查询能使页面在不同在终端设备下达到不同的效果

媒体查询会根据设备的大小自动识别加载不同的样式

设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。 

1
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

参数解释

  1. width = device-width 宽度等于当前设备的宽度
  2. initial-scale 初始的缩放比例（默认设置为1.0）
  3. maximum-scale 允许用户缩放到的最大比例（默认设置为1.0）
  4. user-scalable 用户是否可以手动缩放（默认设置为no）

媒体查询语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@media screen and (max-width: 768px) {
	/* 设备小于768px加载样式 */
    body{
        background-color: red;
    }
}
@media screen and (max-width: 992px) and (min-width: 768px) {
     /* 设备小于768px但小于992px加载样式  */
     body{
     	background-color: pink;
     }
}
@media screen and (min-width: 992px) {
	/* 设备大于992px加载样式 */
    body{
    	background-color: green;
   	}
}

实时效果反馈

1.下列代码媒体查询，运行在屏幕宽度为800px的设备上，背景颜色是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media screen and (max-width: 768px) {
    body{
        background-color: red;
    }
}
@media screen and (max-width: 992px) and (min-width: 768px) {
     body{
     	background-color: pink;
     }
}
@media screen and (min-width: 992px) {
    body{
    	background-color: green;
   	}
}

A red(红色)

B pink(粉色)

C green(绿色)

D black(黑色)

答案

1=>B

雪碧图

1

CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

优点

  1. 减少图片的字节
  2. 减少网页的http请求，从而大大的提高页面的性能

原理

  1. 通过background-image引入背景图片
  2. 通过background-position把背景图片移动到自己需要的位置

实例

1
2
<i class="icon1"></i>
<i class="icon2"></i>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.icon1 {
    display: block;
    background-image: url(1.png);
    background-position: -20px 0;
    width: 45px;
    height: 70px;
}
.icon2 {
    display: block;
    background-image: url(1.png);
    background-position: -93px -84px;
    width: 45px;
    height: 70px;
}

字体图标

image-20211210151709114

我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题

常用字体图标库：阿里字体图标库

优点

  1. 轻量性：加载速度快，减少http请求
  2. 灵活性：可以利用CSS设置大小颜色等
  3. 兼容性：网页字体支持所有现代浏览器，包括IE低版本

使用字体图标

  1. 注册账号并登录
  2. 选取图标或搜索图标
  3. 添加购物车
  4. 下载代码
  5. 选择font-class引用
1
<span class="iconfont icon-add-circle"></span>
1
2
3
4
5
<link rel="stylesheet" href="./css/iconfont.css">
.iconfont{
    font-size: 35px;
    color: red;
}