网页编程和设计 CSS3

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量239 收藏
点赞数 1
分类专栏： java后端 文章标签： 前端 css3 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56349691/article/details/130689890
版权

目录

一、css3简介

1.1CSS概念 

1.2为什么需要CSS

1.3语法

二、css引入方式

2.1内联样式（行内样式）

2.2内部样式

2.3外部样式（推荐）

三、选择器

3.1全局选择器

3.2元素选择器

3.3类选择器

3.4ID选择器

3.5合并选择器

3.6选择器的优先级

3.7关系选择器

 3.7.1后代选择器

3.7.2子代选择器

3.7.3相邻兄弟选择器

3.7.4通用兄弟选择器

四、字体属性

4.1color

4.2font-size

4.3font-weight

4.4font-style

4.5font-family

五、背景属性

5.1background-color

5.2background-image

5.3background-repeat

5.4background-size

5.5background-position

六、文本属性

6.1text-align

6.2text-decoration

6.3text-transform

6.4text-indent

七、表格属性

7.1border

7.2border-collapse

7.3width、height

7.4text-align

7.5padding

7.6color、background-color

八、盒子模型

九、弹性盒子模型

9.1父元素上的属性

9.1.1display 属性

9.1.2flex-direction属性

9.1.3justify-content 属性

9.1.4align-items 属性

9.2子元素上的属性

9.2.1flex属性

 十、文档流

10.1文档流产生的问题

10.2脱离文档流

10.2.1浮动

10.2.2清除浮动

十一、定位

11.1相对定位

 11.2绝对定位

11.3固定定位

11.4Z-index

 十二、CSS3新特性

12.1圆角

 12.2阴影

 十三、动画

13.1@keyframes创建动画

13.2animation执行动画

13.3切换背景颜色

13.4呼吸效果

十四、媒体查询

十五、精灵图

十六、字体图标

一、css3简介

1.1CSS概念 

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

CSS文件后缀名为.css

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

1.2为什么需要CSS

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

1.3语法

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

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

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

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

<style>
  h1{
    color: blue;
    font-size: 12px;
   }
</style>

二、css引入方式

2.1内联样式（行内样式）

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

温馨提示

缺乏整体性和规划性，不利于维护，维护成本高

<p style="background: orange; font-size: 24px;">CSS<p>

2.2内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。

温馨提示

单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

<head>
  <style> 
    h1 { 
      background: red; 
    } 
  </style>
</head>

2.3外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部.

<link rel="stylesheet" type="text/css" href="xxx.css">

三、选择器

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

3.1全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化.

*{
   margin: 0;
   padding: 0;
 }

3.2元素选择器

HTML文档中的元素，p、b、div、a、img、body等。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”.

p{
  font-size:14px;
}

再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变为红色字体，那么我可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择器。

<p>学完了<span>前端</span>，继续学Java</p>
span{
    color: red;
}

温馨提示

  1. 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等
  2. 无论这个标签藏的多深，一定能够被选择上
  3. 选择的所有，而不是一个

3.3类选择器

规定用圆点 . 来定义，针对你想要的所有标签使用，比较灵活。

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
    width:800px;
}

class属性的特点

  1. 类选择器可以被多种标签使用
  2. 类名不能以数字开头
  3. 同一个标签可以使用多个类选择器。用空格隔开

3.4ID选择器

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以 # 来定义

<h2 id="mytitle">你好</h2>
#mytitle{
   border:3px dashed green;
}

特别强调

  1. ID是唯一的
  2. ID不能以数字开头

3.5合并选择器

语法：选择器1,选择器2,...{ }

作用：提取共同的样式，减少重复代码.

.header, .footer{
  height:300px;
}

3.6选择器的优先级

CSS中,权重用数字衡量

元素选择器的权重为: 1

class选择器的权重为: 10

id选择器的权重为: 100

内联样式的权重为: 1000 

优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

3.7关系选择器

 3.7.1后代选择器

 选择所有被E元素包含的F元素，中间用空格隔开

ul li{
  color:green;
}
<ul>
   <li>宝马</li>
   <li>奔驰</li>
</ul>
 <ol>
   <li>奥迪</li>
</ol>

  

3.7.2子代选择器

选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

div>a{
  color:red
}
<div> 
  <a href="#">子元素1</a>
  <p> <a href="#">孙元素</a> </p>
  <a href="#">子元素2</a>
</div>

3.7.3相邻兄弟选择器

选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择

h1+p{
  color:red;
}
<h1>h1元素</h1> 
<p>第一个元素</p> 
<p>第二个元素</p>

 

3.7.4通用兄弟选择器

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择

h1~p{
  color:red;
}
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>

四、字体属性

CSS字体属性定义字体，颜色、大小，加粗，文字样式。

4.1color

规定文本的颜色

  div{ color:red;}
  div{ color:#ff0000;}
  div{ color:rgb(255,0,0);}
  div{ color:rgba(255,0,0,.5);}

4.2font-size

设置文本的大小

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

温馨提示

chrome浏览器接受最小字体是12px

4.3font-weight

设置文本的粗细

值描述
bold定义粗体字符
bolder定义更粗的字符
lighter定义更细的字符
100~900定义由细到粗 400等同默认，而700等同于bold
H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}

4.4font-style

指定文本的字体样式

值描述
normal默认值
italic定义斜体字

4.5font-family

font-family属性指定一个元素的字体

温馨提示

每个值用逗号分开

如果字体名称包含空格，它必须加上引号

font-family:"Microsoft YaHei","Simsun","SimHei";

五、背景属性

CSS背景属性主要有以下几个

属性描述
background-color设置背景颜色
background-image设置背景图片
background-position设置背景图片显示位置
background-repeat设置背景图片如何填充
background-size设置背景图片大小属性

5.1background-color

该属性设置背景颜色

<div class="box"></div>
.box{
  width: 300px;
  height: 300px;
  background-color: palevioletred;
}

5.2background-image

设置元素的背景图像

元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分

<div class="box"></div>
.box{
  width: 600px;
  height: 600px;
  background-image: url("images/img1.jpg");
}

5.3background-repeat

该属性设置如何平铺背景图像

值说明
repeat默认值
repeat-x只向水平方向平铺
repeat-y只向垂直方向平铺
no-repeat不平铺
.box{
  width: 600px;
  height: 600px;
  background-color: #fcc;
  background-image: url("images/img1.jpg");
  background-repeat: no-repeat;
}

5.4background-size

该属性设置背景图像的大小

值说明
length设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
percentage计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
cover保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain保持图片纵横比并将图像缩放成适合背景定位区域的最大大小
.box{
  width: 600px;
  height: 600px;
  background-image: url("images/img1.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

5.5background-position

值说明
left top左上角
left center左 中
left bottom左 下
right top右上角
right center右 中
right bottom右 下
center top中 上
center center中 中
center bottom中 下
x% y%第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%。默认是0% 0%
xpos ypos单位是像素
.box{
  width: 600px;
  height: 600px;
  background-color: #fcc;
  background-image: url("images/img1.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

六、文本属性

6.1text-align

指定元素文本的水平对齐方式

值描述
left文本居左排列，默认值
right把文本排列到右边
center把文本排列到中间
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

6.2text-decoration

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等

值描述
underline定义下划线
overline定义上划线
line-through定义删除线
h1 {text-decoration:overline} 
h2 {text-decoration:line-through} 
h3 {text-decoration:underline}

6.3text-transform

text-transform 属性控制文本的大小写

值描述
captialize定义每个单词开头大写
uppercase定义全部大写字母
lowercase定义全部小写字母
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

6.4text-indent

text-indent 属性规定文本块中首行文本的缩进

p{
    text-indent:50px;
}

温馨提示

负值是允许的。如果值是负数，将第一行左缩进

七、表格属性

使用 CSS 可以使 HTML 表格更美观

7.1border

指定CSS表格边框，使用border属性

table, td { 
  border: 1px solid black; 
}

7.2border-collapse

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。实际上就是将双边框变为单边框。

table { border-collapse:collapse; }
table,td { border: 1px solid black; }

7.3width、height

width和height属性定义表格的宽度和高度

table { width:100%; } 
td { height:50px; }

7.4text-align

表格中的文本对齐和垂直对齐属性

text-align属性设置水平对齐方式，向左，右，或中心

td { text-align:right; }

7.5padding

如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性。就是文字和上下左右边框之间的间隙大小。

td { padding:15px; }

7.6color、background-color

table, td, th { border:1px solid green; } 
td { background-color:green; color:white; }

八、盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

外边距（margin），边框（border），内边距（padding），和实际内容（content）

  1. Margin(外边距) - 两个元素之间的距离，外边距是透明的（两个值：第一个值上下，第二个值左右）
  2. Border(边框) - 围绕在内边距和内容外的边框
  3. Padding(内边距) - 设置内容和边框之间的距离（两个值：第一个值上下，第二个值左右）
  4. Content(内容) - 盒子的内容，显示文本和图像

如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离

div{
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 2px solid red;
  margin: 10px;
  background: green;
}
<div></div>

九、弹性盒子模型

弹性盒子是 CSS3 的一种新的布局模式

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

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

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

弹性容器通过设置 display属性的值为 flex将其定义为弹性容器

弹性容器内包含了一个或多个弹性子元素

温馨提示

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>
<style>
  .flex-container {
    display: flex;  //设置容器为弹性布局
    width: 400px;
    height: 250px;
    background-color: lightgrey;
   }
  .flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
   }
</style>

 ​​

温馨提示

默认弹性盒里内容横向摆放

9.1父元素上的属性

9.1.1display 属性

display:flex;开启弹性盒

display:flex;属性设置后子元素默认水平排列

9.1.2flex-direction属性

flex-direction 属性指定了弹性子元素在父容器中的位置

flex-direction: row | row-reverse | column | column-reverse

  1. row：横向从左到右排列（左对齐），默认的排列方式

  2. row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面

  3. column：纵向排列

  4. column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

.flex-container {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

9.1.3justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

justify-content: flex-start | flex-end | center
  1. flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
  2. flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放
  3. center 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）
.flex-container {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 250px;
  background-color: lightgrey;
}

9.1.4align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

align-items: flex-start | flex-end | center
  1. flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
  2. flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
  3. center 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）

  .flex-container {
            display: flex;
            justify-content: center;
            width: 400px;
            height: 250px;
            background-color: lightgrey;
            align-items: flex-end;
        }

9.2子元素上的属性

9.2.1flex属性

flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

默认为0，即如果存在剩余空间，也不放大

如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%

<div class="flex-container">
   <div class="flex-item1">flex item 1</div>
   <div class="flex-item2">flex item 2</div>
   <div class="flex-item3">flex item 3</div> 
</div>
<style>
    .flex-container {
    display: flex;
    width: 400px;
    height: 250px;
    background-color: gold;
   }
  .flex-item1 {
    height: 150px;
    background-color: red;
    flex: 1;
   }
  .flex-item2 {
    height: 150px;
    background-color: green;
    flex: 2;
   }
  .flex-item3 {
    height: 150px;
    background-color: blue;
    flex: 1;
   }
</style>

 十、文档流

文档流是文档中可显示对象在排列时所占用的位置/空间

例如：块元素自上而下摆放，内联元素，从左到右摆放

标准流里面的限制非常多，导致很多页面效果无法实现

  1. 高矮不齐，底边对齐

  2. 空白折叠现象

    1. 无论多少个空格、换行、tab，都会折叠为一个空格
    2. 如果我们想让img标签之间没有空隙，必须紧密连接

10.1文档流产生的问题

高矮不齐，底边对齐

<span>我是文本内容</span>
<img src="1.jpg" alt="">
img{
  width: 200px;
}

空格折叠

<span>我是文本    内容</span>
<img src="1.jpg" alt="">
复制
img{
  width: 200px;
}

元素无空隙

<span>我是文本内容</span>
<img src="1.jpg" alt=""><img src="1.jpg" alt="">
复制
img{
  width: 200px;
}

如果我们现在就要并排顶部对齐，那该怎么办呢？办法是：移民！脱离标准流！

10.2脱离文档流

使⼀个元素脱离标准文档流有三种方式

  1. 浮动
  2. 绝对定位
  3. 固定定位

10.2.1浮动

浮动的定义

float属性定义元素在哪个方向浮动，任何元素都可以浮动。

值描述
left元素向左浮动
right元素向右浮动

浮动的原理

  1. 浮动以后使元素脱离了文档流
  2. 浮动只有左右浮动，没有上下浮动

元素向左浮动

脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象.

.container{
  width: 200px;
  height: 200px;
  background-color: #81c784;
}

.box{
  width: 100px;
  height: 100px;
  background-color: #fff176;
  float: left;
}
<div class="box"></div>
<div class="container"></div>

元素向右浮动 

.container{
  width: 200px;
  height: 200px;
  background-color: #81c784;
}
.box{
  width: 100px;
  height: 100px;
  background-color: #fff176;
  float: right;
}
<div class="box"></div>
<div class="container"></div>

所有元素向左浮动

当所有元素同时浮动的时候，会变成水平摆放，向左或者向右

.box{
  width: 100px;
  height: 100px;
  background-color: #fff176;
  float: left;
  margin: 0 5px;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

当容器不足时

当容器不足以横向摆放内容时候，会在下一行摆放

.container{
  width: 250px;
  height: 300px;
  border: 1px solid red;
}
.box{
  width: 100px;
  height: 100px;
  background-color: #fff176;
  float: left;
  margin: 5px;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

10.2.2清除浮动

浮动副作用

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，

  1. 浮动元素会造成父元素高度塌陷
  2. 后续元素会受到影响
.container{
  border: 1px solid red;
}
.box{
  width: 100px;
  height: 100px;
  background-color: #fff176;
  float: left;
  margin: 5px;
}
<div class="container">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>


 <style>
.box{
  width: 100px;
  height: 100px;
  background-color: #fff176;
  float: left;
  margin: 5px;
}
.nav{
  width: 100px;
  height: 100px;
  background-color: red;
}
 </style>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="nav"></div>

清除浮动

当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用

解决方案有很多种

  1. 父元素设置高度
  2. 受影响的元素增加clear属性
  3. overflow清除浮动
  4. 伪对象方式

父元素设置高度

如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小

 <style>
.container{
  height: 300px;
  width: 350px;
  border: 1px solid red;
}
.box{
  width: 100px;
  height: 100px;
  background-color: #fff176;
  float: left;
  margin: 5px;
}
 </style>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

overflow清除浮动

如果有父级塌陷，并且同级元素也收到了影响，可以使用overflow清除浮动

这种情况下，父布局不能设置高度

父级标签的样式里面加: overflow:hidden;clear: both;

 <style>
.container{
  width: 350px;
  border: 1px solid red;
  overflow: hidden;
  clear: both;
}
.box{
  width: 100px;
  height: 100px;
  background-color: #fff176;
  float: left;
  margin: 5px;
}
.nav{
  width: 100px;
  height: 100px;
  background-color: red;
}
 </style>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="nav"></div>

伪对象方式

如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理

为父标签添加伪类after,设置空的内容，并且使用clear:both;

这种情况下，父布局不能设置高度

 <style>
.container {
  width: 350px;
  border: 1px solid red;
}
.container::after {
  content: "";
  display: block;
  clear: both;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #fff176;
  float: left;
  margin: 5px;
}
.nav {
  width: 100px;
  height: 100px;
  background-color: red;
}
 </style>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="nav"></div>

十一、定位

position属性指定了元素的定位类型

值描述
relative相对定位
absolute绝对定位
fixed固定定位

其中，绝对定位和固定定位会脱离文档流

设置定位之后：可以使用四个方向值进行调整位置：left、top、right、bottom

11.1相对定位

 <style>
.box{
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
  left: 100px;
}
 </style>
<div class="box"></div>

 11.2绝对定位

 <style>
.box1{
  width: 200px;
  height: 200px;
  background-color: red;
  position:absolute;
  left: 50px;
}
.box2{
  width: 300px;
  height: 300px;
  background-color: green;
}
 </style>
<div class="box1"></div>
<div class="box2"></div>

11.3固定定位

 <style>
.box1{
  width: 200px;
  height: 200px;
  background-color: red;
  position:fixed;
  left: 50px;
}
.box2{
  width: 300px;
  height: 300px;
  background-color: green;
}
 </style>
<div class="box1"></div>
<div class="box2"></div>

温馨提示

设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。

11.4Z-index

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

<style>
.box1{
  width: 200px;
  height: 200px;
  background-color: red;
  position:absolute;
  z-index: 2;
}
.box2{
  width: 300px;
  height: 300px;
  background-color: green;
  position:absolute;
  z-index: 1;
}
</style>
<div class="box1"></div>
<div class="box2"></div>

 十二、CSS3新特性

12.1圆角

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

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

  1. 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
  2. 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  3. 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  4. 一个值： 四个圆角值相同
   <style>
        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;
        }

    </style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

 12.2阴影

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

box-shadow: h-shadow v-shadow blur color;
值描述
h-shadow必选，水平阴影的位置
v-shadow必选，垂直阴影的位置
blur可选，模糊距离
color可选，阴影的颜色
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #8ac007;
            margin: 50px;
            box-shadow: 10px 10px green;
        }
    </style>
<div class="box"></div>

 给阴影添加一个模糊效果

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #8ac007;
            margin: 50px;
            box-shadow: 10px 10px 5px green;
        }

    </style>
<div class="box"></div>

三个方向的阴影效果

 <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #8ac007;
            margin: 50px;
            box-shadow: 0 10px 30px rgba(0,0,0,.5);
        }


    </style>
<div class="box"></div>

 十三、动画

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

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

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

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

13.1@keyframes创建动画

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


        @keyframes name {
        from|0%{
            css样式
        }
        percent{
            css样式
        }
        to|100%{
            css样式
        }
        }

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

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

13.2animation执行动画

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动画播放在第偶数次向前播放，第奇数次向反方向播放

13.3切换背景颜色

  <style>
        .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;
            }
        }


    </style>
<div class="animation"></div>

13.4呼吸效果

 <style>
        .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)
            }
        }



    </style>
<div class="box"></div>

十四、媒体查询

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

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

设置meta标签

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

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

媒体查询语法

@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;
   }
}

十五、精灵图

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

优点

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

原理

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

十六、字体图标

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

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

优点

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

使用字体图标

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

张小猿ε٩(๑> ₃ <)۶ з
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5 & CSS3之编程入门经典
12-20
《HTML5&CSS3;编程入门经典》提供了对于最佳实践及技术的手把手指导。作为一本实用参考，《HTML5&CSS3;编程入门经典》深入阐述了为当今多设备多平台环境开发独特的现代网站所需的HTML及CSS最新版本。
CSS3 入门教程
Ifeng_iPhone的博客
09-28 917
css就是样式表，用来给html添加样式的html本身是素颜的，css就是化妆师，让我们html好看点。
HTML+CSS百度网页制作3.0
weixin_65717727的博客
05-22 3620
<!DOCTYPEhtml> <html lang="ch_CN"> <head> <meta charset="UTF-8"> <title>百度首页</title> <style type="text/css"> a { color: black; } a:link { tex...
HTML+CSS制作登录页面
m0_46664046的博客
01-05 2233
HTML+CSS制作登录表单 点击这里预览效果 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html+css制作登录页面</title> <st
通过CSS简单修饰用户登录页面
weixin_64313535的博客
04-22 5123
用CSS和HTML做的一个用户登录页面（附全部代码）
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 31万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
静态网页设计实践（HTML+CSS）
Jcb1906824038的博客
01-10 1375
本文记录了以葫芦娃动画片为主题的静态网页设计实践，基于HTML和CSS前端语言设计编码。
星月编程学习网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
星月编程学习网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar星月编程学习网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar星月编程学习网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
程序员编程写代码CSS3动画.zip
10-15
3. **网页特效**：这暗示这些CSS3和jQuery特效是为网页设计而准备的，可以用于导航菜单、按钮、滑块、加载指示器等各种网页元素，提升用户体验和页面互动性。 根据提供的文件名“jiaoben6901”，虽然具体的内容无法...
大学生网页制作之美食篇html+css静态网页设计
06-14
在“大学生网页制作之美食篇html+css静态网页设计”这个项目中，学生将学习如何运用HTML、CSS以及JavaScript这三种基础的Web开发技术来创建一个以美食为主题的静态网页。这个设计实例对于初学者来说非常实用，因为它...
什么是html+css+js网页设计以及意义
06-04
HTML+CSS+JS网页设计是指利用HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript（简称JS）这三种核心技术来构建和设计网页的一种方法。这种组合不仅能够提供静态的内容展示，还能通过动态交互为用户提供更佳的...
基于CSS的HTML和JavaScript的珠宝设计源码
05-30
本项目是基于CSS的HTML和JavaScript的珠宝设计源码，包含118个文件，主要文件类型为png、css、scss、scssc、html、map、jpg和js。该项目适用于珠宝设计领域，为珠宝设计师和开发者提供了一个丰富的资源库，包含多种...
HTML登录页面
jakelihua
10-27 4万+
本文用最通俗的语言，一步步教会大家CSS构建登录页面。首先构建。
CSS--操作图片与文字
weixin_43578860的博客
04-02 1207
使用CSS操作图片与文字
网站基本布局CSS
m0_46608027的博客
07-24 765
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
Web安全:Web体系架构存在的安全问题和解决方室
程序员-张师傅
07-24 1472
Web体系架构在提供丰富功能和高效服务的同时，也面临着诸多安全问题。这些问题可能涉及数据泄露、服务中断、系统被控制等多个方面，对企业和个人造成不可估量的损失。
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 781
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 329
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 325
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
Div+CSS网页设计基础教程
"《Div+CSS网页设计入门》是一份针对初学者的教程，涵盖了从基础到实践的各种关键知识点，旨在帮助学习者掌握使用div和css进行网页布局的基本技巧。教程通过一系列章节，逐步引导读者了解和应用div+css技术。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张小猿ε٩(๑> ₃ <)۶ з

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值