CSS3 语法总结

最新推荐文章于 2022-03-31 19:07:29 发布

RaspberryfC.

最新推荐文章于 2022-03-31 19:07:29 发布

阅读量466

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/weixin_44952214/article/details/109165919

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS 简介

1. CSS是什么？

CSS 指层叠样式表（Cascading）
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

2. CSS解决的问题
样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

CSS语法

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

在这里插入图片描述

选择器：选择器通常是您需要改变样式的 HTML 元素
每条声明由一个属性和一个值组成
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
声明总是以分号(；)结束，声明总是以大括号（{}）括起来。

2. CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束

CSS Id 和 Class

1. id 和 class 选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

2. id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

3. class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
所有拥有 center 类的 HTML 元素均为居中:

.center {text-align:center;}

你也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:

p.center {text-align:center;}

HTML中引入CSS样式

1. 行内样式
使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

缺点:

仅对当前的HTML标签其作为
不能起到内容与表现分离
没有体现出CSS的优势，因此不推荐使用

2. 内部样式 CSS代码写在<head>的<style>标签中

<style>
        h1{color: green; }
</style>

优点：
方便在网页面中修改样式

缺点：
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底。

3. 外部样式
CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式：
1）链接式
链接外部样式表

<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>

在这里插入图片描述

2）导入式
导入外部样式表

<head>
……
<style type="text/css">
@import url("style.css");
</style>
</head>

3）链接式与导入式的区别：
1. <link/>标签属于XHTML，@import是属于CSS2.1
2. 使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示，效果一样。
3. 使用@import导入的CSS文件，客户端先显示HTML结构，再把CSS文件加载到网页当中
4. @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

4. 3种样式的优先级
行内样式 > 内部样式表 > 外部样式表就近原则

CSS3 基本选择器

1. 标签选择器
HTML标签作为标签选择器的名称

< h1 > … < h6 > 、< p > 、 < img />

在这里插入图片描述
2. 类选择器

.class { font size : 16px ; }
< 标签名 class = “类名称” > 标签内容 < / 标签名 >

在这里插入图片描述
指定类选择器目标标签
为class选择器指定目标标签

    span.red {     
        color:red;
    }

上述示例为标签span定义了一个类选择器red
定义的样式只能在当前标签范围内使用

3. ID选择器

#id{font-size:16px;}
<标签名 id = “id名称”>标签内容</标签名>

在这里插入图片描述
为ID选择器指定目标标签

div#top {     
        width:100%;
    }

定义的样式只能在当前标签范围内使用

4. 3种选择器的优先级
ID选择器>类选择器>标签选择器

CSS3 高级选择器

1. 层次选择器
在这里插入图片描述
后代选择器

body p{  background: red;  }

在这里插入图片描述

子选择器

 body>p{  background: pink;  }

在这里插入图片描述

相邻兄弟选择器

 .active+p {  background: green;  }

在这里插入图片描述
通用兄弟选择器

.active~p{  background: yellow;  }

在这里插入图片描述
2. 结构伪类选择器

示例：

ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}

在这里插入图片描述
使用E F:nth-child(n)和E F:nth-of-type(n)的关键点：
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置

3. 属性选择器

属性选择器——匹配属性名

 a[id] { background: yellow; }

在这里插入图片描述
属性选择器——匹配属性值

 a[id=first] { background: red; }

在这里插入图片描述
属性选择器——前缀匹配

 a[href^=http] { background: red; }

在这里插入图片描述
属性选择器——后缀匹配

 a[href$=png] { background: red; }

在这里插入图片描述
属性选择器——模糊匹配

 a[class*=links] { background: red; }

在这里插入图片描述

编辑网页文本

1. 字体样式（font）的书写
在这里插入图片描述
font-family属性

p{font-family:Verdana,"楷体";}

body{font-family: Times,"Times New Roman", "楷体";}

在这里插入图片描述
CSS 英文通用字体系列

font-size属性
单位: px（像素）、cm、mm、em、rem、pt、pc

h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}

font-style属性
normal、italic和oblique

font-weight 属性
在这里插入图片描述
字体属性顺序：
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

font 属性：

p span{font:oblique bold 12px "楷体";}

2. 文本属性
在这里插入图片描述
文本颜色 color属性

color:#A983D8;
color:#FC6;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);
color:red;

HSL
在这里插入图片描述
文本修饰和垂直对齐
文本装饰：text-decoration属性

在这里插入图片描述
垂直对齐方式
vertical-align属性：middle、top、bottom

文本阴影
在这里插入图片描述

使用CSS设置超链接

超链接伪类
格式：标签名:伪类名{声明;}
示例：

a:hover {
	color:#B46210;
	text-decoration:underline;
}

使用CSS设置超链接
在这里插入图片描述

列表样式

在这里插入图片描述
所有不同的 CSS 列表项标记：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}

ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}

ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}

</style>
</head>

<body>
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

背景样式

在这里插入图片描述
背景重复方式：
background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺

背景定位：
在这里插入图片描述
背景属性background：

背景尺寸

CSS3 渐变

线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
在这里插入图片描述
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
CSS3渐变兼容
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
在这里插入图片描述

盒子模型

在这里插入图片描述
边框颜色 color

边框 border

边框粗细 width
border-width
thin
medium
thick
像素值
示例：

border-top-width:5px; 
border-right-width:10px; 
border-bottom-width:8px; 
border-left-width:22px; 
border-width:5px ; 
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;

边框样式 style

border-top-style:solid; 
border-right-style:solid; 
border-bottom-style:solid; 
border-left-style:solid; 
border-style:solid ; 
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;

边框属性 border
同时设置边框的颜色、粗细和样式

border:1px solid #3a6587;
border: 1px dashed red;

2）外边距 margin
margin-top
margin-right
margin-bottom
margin-left
margin

margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;

3）内边距 padding
padding-left
padding-right
padding-top
padding-bottom
padding

padding-left:10px; 
padding-right: 5px; 
padding-top: 20px; 
padding-bottom:8px; 
padding:20px 5px 8px 10px ; 
padding:10px 5px; 
padding:30px 8px 10px ; 
padding:10px;

4）盒子模型的尺寸
在这里插入图片描述
5） box-sizing

border-box

width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border: 1px;
box-sizing: border-box;

在这里插入图片描述

width值包括 padding 和 border
父元素的盒模型确定盒模型尺寸大小，子元素是无法撑开父元素的盒模型，只能在盒模型剩余空间展示。

content-box

width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border: 1px;
box-sizing: content-box(默认值);

在这里插入图片描述

width值不包括 padding 和 border
盒模型尺寸会以内容优先自动扩展，内部子元素超过父元素给定的尺寸大小，会将父元素撑大。

圆角边框

1）语法

border-radius: 20px  10px  50px  30px;

在这里插入图片描述
2）圆形
利用border-radius属性制作圆形的两个要点

元素的宽度和高度必须相同
圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

 div{
            width: 100px;
            height: 100px;
            border: 4px solid red;
            border-radius: 50%;
        }

在这里插入图片描述
3）半圆
利用border-radius属性制作半圆形的两个要点

制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>border-radius制作半圆形</title>
    <style>
        div{
            background: red;
            margin: 30px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 50px;
            border-radius: 50px 50px 0 0;
        }
        div:nth-of-type(2){
            width: 100px;
            height: 50px;
            border-radius:0 0 50px 50px;
        }
        div:nth-of-type(3){
            width: 50px;
            height: 100px;
            border-radius:0 50px 50px  0;
        }
        div:nth-of-type(4){
            width: 50px;
            height: 100px;
            border-radius: 50px 0 0 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

4）扇形
利用border-radius属性制作扇形遵循“三同，一不同”原则

“三同”是元素宽度、高度、圆角半径相同
“一不同”是圆角取值位置不同

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>border-radius制作扇形</title>
    <style>
        div{
            background: red;
            margin: 30px;
        }
        div:nth-of-type(1){
            width: 50px;
            height: 50px;
            border-radius: 50px 0 0 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            border-radius:0 50px 0 0;
        }
        div:nth-of-type(3){
            width: 50px;
            height: 50px;
            border-radius:0 0 50px 0;
        }
        div:nth-of-type(4){
            width: 50px;
            height: 50px;
            border-radius: 0 0 0 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

盒子阴影

在这里插入图片描述

网页布局

常见的网页布局
标准文档流

标准文档流组成：

display属性

在这里插入图片描述
display特性
块级元素与行级元素的转变（block、inline）
控制块元素排到一行（inline-block）
控制元素的显示和隐藏（none）

浮动属性

依次设置三个图片所在
左浮动

.layer01 {
	border:1px #F00 dashed;
	float:left;
}
.layer02 {
	border:1px #00F dashed;
	float:left;
}
.layer03 {
	border:1px #060 dashed;
	float:left;
}

在这里插入图片描述

依次设置layer01和layer02右浮动

.layer01 {
	border:1px #F00 dashed;
	float:right;
}
.layer02 {
	border:1px #00F dashed;
	float:right;
}

在这里插入图片描述

清除浮动

清除左浮动

.layer04 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    width: 200px;
    float: right;
    clear:left;
}

在这里插入图片描述

清除右浮动

.layer04 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    width: 200px;
    float: right;
    clear:right;
}

在这里插入图片描述

清除两侧浮动

.layer04 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    width: 200px;
    float: right;
    clear:both;
}

父级边框塌陷

解决父级边框塌陷后：
如何解决父级边框塌陷

浮动元素后面加空div

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
  <div class="clear"></div>
</div>
.clear{  clear: both;  margin: 0; padding: 0;}

设置父元素的高度

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>
#father {height: 400px; border:1px #000 solid; }

父级添加overflow属性

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>
#father {overflow: hidden;border:1px #000 solid; }

在这里插入图片描述

父级添加伪类after

<div id="father" class="clear">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>
.clear:after{
    content: '';          /*在clear类后面添加内容为空*/
    display: block;      /*把添加的内容转化为块元素*/
    clear: both;         /*清除这个元素两边的浮动*/
}

小结：
清除浮动，防止父级边框塌陷的四种方法：
1）浮动元素后面加空div
简单，空div会造成HTML代码冗余
2）设置父元素的高度
简单，元素固定高会降低扩展性
3）父级添加overflow属性
简单，下拉列表框的场景不能用
4）父级添加伪类after
写法比上面稍微复杂一点，但是没有副作用，推荐使用

在这里插入图片描述

定位网页元素

position属性
static：默认值，没有定位
relative：相对定位
absolute：绝对定位
fixed：固定定位

static 定位
relative 定位
相对自身原来位置进行偏移
偏移设置：top、left、right、bottom

#first {
	background-color:#f2bb6f;
	border:1px #B55A00 dashed;
	position:relative;
	top:-20px;
	left:20px;
}

在这里插入图片描述
相对定位的特性：
相对于自己的初始位置来定位
元素位置发生偏移后，它原来的位置会被保留下来
层级提高，可以把标准文档流中的元素及浮动元素盖在下边

相对定位的使用场景：
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
在这里插入图片描述
设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
设置相对定位的盒子原来的位置会被保留下来

浮动元素设置相对定位
设置第二个盒子右浮动，再设置第一、第二盒子相对定位

#second {
	background-color:#CCF;
	border:1px #0000A8 dashed;
	float:right;
}

在这里插入图片描述

#first {
	background-color:#FC9;
	border:1px #B55A00 dashed;
	position:relative;
	right:20px;
	bottom:20px;}
#second {
	background-color:#CCF;
	border:1px #0000A8 dashed;
	float:right;
	position:relative;
	left:20px;
	top:-20px;}

在这里插入图片描述

绝对定位 absolute

绝对定位的特性：
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移；
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位；
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响；
元素位置发生偏移后，它原来的位置不会被保留下来。

绝对定位的使用场景：
一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

绝对定位不设置偏移量：
设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况
固定定位 fixed
偏移设置： left、right、top、bottom
类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>fixed的使用</title>
    <style>
        body{
        height: 1000px;
        }
        div:nth-of-type(1) {  /*第一个div设置绝对定位*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2) {  /*第二个div设置固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
}

在这里插入图片描述
固定定位的特性：
相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动

固定定位的使用场景
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

z-index属性
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方

网页中的元素都含有两个堆叠层级
未设置绝对定位时所处的环境，z-index是0
设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定
改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可
CSS设置元素透明度

CSS3 变形

CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果
每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。
在这里插入图片描述

2D位移 —— translate()
平移函数，基于X、Y坐标重新定位元素的位置

translateX（tx）
表示只设置X轴的位移

translateY（ty）
表示只设置Y轴的位移
2D缩放 —— scale(sx,sy);
sx：横向坐标（宽度）方向的缩放量
sy：纵轴坐标（高度）方向的缩放量
scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等
scaleX(sx)：表示只设置X轴的缩放

scaleY(sy)：表示只设置Y轴的缩放
2D倾斜
skew(ax, ay);
ax：水平方向（X轴）的倾斜角度
ay：垂直方向（Y轴）的倾斜角度

可以仅设置沿着X轴或Y轴方向倾斜
skewX（ax）：表示只设置X轴的倾斜
skewY（ay）：表示只设置Y轴的倾斜
2D旋转
rotate(a);
参数a单位使用deg表示
参数a取正值时元素相对原来中心顺时针旋转

rotate( )函数只是旋转，而不会改变元素的形状。 skew( )函数是倾斜，元素不会旋转，会改变元素的形状

CSS3 过渡

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡
在这里插入图片描述

过渡属性（ transition-property ）
定义转换动画的CSS属性名称
IDENT：指定的CSS属性（width、height、background-color属性等）
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
过渡所需的时间
定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）
过渡动画函数（ transition-timing-function ）
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）
过渡延迟时间（ transition-delay ）
指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
0：默认值，元素过渡效果立即执行
过渡的触发机制
1）伪类触发
：hover
：active
：focus
：checked
2）媒体查询：通过@media属性判断设备的尺寸，方向等
3）JavaScript触发：用JavaScript脚本触发
使用transition实现过渡动画的使用步骤
在默认样式中声明元素的初始状态样式
声明过渡元素最终状态样式，如悬浮状态
在默认样式中通过添加过渡函数，添加一些不同的样式

CSS3 动画

animation动画简介
animation实现动画主要由两个部分组成
通过类似Flash动画的关键帧来声明一个动画
在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
CSS3动画的使用过程
1）设置关键帧

写兼容的时候浏览器前缀是放在@keyframes中间例如：@-webkit-keyframes、@-moz- keyframes
2）调用关键帧

动画的播放次数（animation-iteration-count）
值通常为整数，默认值为1
特殊值infinite，表示动画无限次播放
动画的播放方向（animation-direction）
normal，动画每次都是循环向前播放
alternate，动画播放为偶数次则向前播放
动画的播放状态（animation-play-state）
running将暂停的动画重新播放
paused将正在播放的元素动画停下来
动画发生的操作（animation-fill-mode）
forwards表示动画在结束后继续应用最后关键帧的位置
backwards表示会在向元素应用动画样式时迅速应用动画的初始帧
both表示元素动画同时具有forwards和backwards的效果

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>
</html>

RaspberryfC.

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS3 语法总结

知识点CSS 简介CSS语法CSS Id 和 ClassHTML中引入CSS样式CSS3 基本选择器CSS3 高级选择器编辑网页文本使用CSS设置超链接列表样式背景样式CSS3 渐变CSS 简介1. CSS是什么？ CSS 指层叠样式表（Cascading）样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个2. C
复制链接

扫一扫