CSS3
文章目录
前言
一、开发商前缀
| 前缀 | 开发商 |
|---|---|
| -moz- | FireFox |
| -webkit- | Chrome、Safari、Opera （三个浏览器内核都是webkit） |
| -ms- | IE |
| -o- | Opera旧版15之前 |
二、静态样式
2.1 Web字体
-
Google Fonts
http://www.googlefonts.cn/link标签引入 font-family设置
2.2 背景background
2.2.1 支持多背景
background-image：url（“ ”），url（“ ”）...
2.2.2 各背景位置
background-position：position-1.position-2....
2.2.3 各背景的平铺方式
background-repeat：repeat-1，repeat-2.....
.decoratedBox{
margin:50px;
padding:20px
background-image：url（“top-left.png”），url（“right-bottom.png”）;
background-position：left top,right bottom;
background-repeat：no-repeat,no-repeat;
}
2.3 渐变
2.3.1 线性渐变 linear-gradient（）
-
语法
background-image: linear-gradient（to direction/angle ，color1 【percentage1】，color2 【percentage2】….） direction：八个方向，默认起点在top angle：底线为0deg percentage：起点
2.3.2 径向渐变 radial-gradient（）
-
语法
background-image: radial-gradient(【shape size at position】, start-color, ..., last-color); -
参数
shape：圆的类型 ellipse (默认): 指定椭圆形的径向渐变。 circle ：指定圆形的径向渐变 size：定义渐变的大小 farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边 position：定义渐变的位置。 （1）位置名词 center（默认）：设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。 （2）自定义位置 percentage1 percentage2 percentage1：距离左边的距离 percentage2：距离顶部的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变与径向渐变</title>
<style>
.box1{
width: 100px;height: 100px;background-image: linear-gradient(to left,red,blue);float:left}
.box2{
width: 100px;height: 100px;background-image: linear-gradient(red,blue);float:left}
.box3{
width: 100px;height: 100px;background-image: linear-gradient( to right bottom,red,blue);float:left}
.box4{
width: 100px;height: 100px;background-image: linear-gradient(60deg,red,blue);float:left}
.box5{
width: 100px;height: 100px;background-image: linear-gradient(red 40% ,blue 70%);float:left}
.box6{
width: 100px;height: 100px;background-image: radial-gradient(circle,red 30%,yellow 50%,blue 80%);float:left}
.box7{
width: 100px;height: 100px;background-image: radial-gradient(circle,white,blue);float:left}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
</body>
</html>
2.3.3 循环渐变 repeating-radial-gradient（）/ repeating-linear-gradient（）
最重要的是限制渐变的大小（用起点），以使其可以循环
background-image: repeating-linear-gradient（to direction/angle ，color1 【percentage1】，color2 【percentage2】….）
background-image: repeating-radial-gradient(【shape size at position】, start-color, ..., last-color);
.box7{
width: 100px;height: 100px;background-image: repeating-radial-gradient(circle,yellow,green 10%);float:left}
2.4 圆角border-radius
2.4.1 border-radius：每个角内切圆半径
-
语法
两个值：左上右下 右上左下 四个值：左上 右上 右下 左下 -
圆（容器宽和高相同）
border-radius：50% -
椭圆（容器宽是高的两倍）
border-radius：width / height -
上半圆（容器宽是高的两倍 ）
border-radius ：height height 0 0 -
侧半圆（容器高是宽的两倍 ）
border-radius ：width 0 0 width
2.4.2 border【-top / bottom】【- left / right】-radius：针对某一个角
-
语法
适合用来表示不规则图形 两个值：水平半径 垂直半径 一个值：水平半径和垂直半径为指定值
2.5 阴影shadow
2.5.1 text-shadow：文字阴影
-
语法
text-shadow（x，y，blur，color，x2，y2，blur，color2...） x：向右移动x个单位 y：向下移动y个单位 blur：模糊度，单位px，值越大就越模糊 color：不写阴影颜色默认和字体颜色相同，可以改其值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字阴影</title>
<style>
.div1{
font-size: 20px;color: blue;text-shadow: 5px 5px 5px red,-5px -5px 5px green}
</style>
</head>
<body>
<div class="div1">hello css3</div>
</body>
</html>
2.5.2 box-shadow：盒子阴影
-
语法
box-shadow（x y blur spread color 【inset】，x2 y2 blur2 spread2 color2 【inset】） x：阴影向右移动x个单位 y：阴影向下移动y个单位 blur：模糊度，值越大越模糊，单位px spread：增大模糊边界之前实心颜色面积，值越大，面积越大 color inset：内阴影，不写默认外阴影，写了outset无效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<style>
.div1{
width: 100px;height: 100px;background-color: red;box-shadow: 10px 10px 10px 5px black }
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
2.6 透明度opacity
2.6.1 方式1：rgba（）
rgba（0~255，0~255，0~255，0~1）
2.6.2 方式2：opacity
-
IE：filter:alpha(opacity=“value”)
0~100 -
现代浏览器：opacity
0（透明）~ 0.5（半透明）~ 1（不透明）
2.6.3 区别
方式1：可以让指定的样式透明，而不影响其他样式
方式2：占空间，且所有的子内容都会透明
三、动态样式
3.1 transition过渡
3.1.1 transition-property: 规定设置过渡效果的css属性的名称
如果要全部属性则用all
3.1.2 transition-duration: 规定完成过渡效果需要多少时间
单位：秒/毫秒
3.1.3 transition-delay: 规定过渡效果的延迟时间
单位：秒/毫秒
延迟则数值为正数，提前则负数
如果是提前的话，当要开始的时候直接变为当前秒数的样式，没有延迟。就是说，如果提前两秒的话，那么当过渡开始的时候直接变为两秒的时候应该有的样式。
3.1.4 transition-timing-function:规定速度效果的速度曲线
linear：匀速
ease： 默认值，速度逐渐慢下来
ease-in：加速
ease-out：减速
cubic-bezier：先加速后减速
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
div{
width:100px;
height:100px;
background-color:red;
transition-property:all;
transition-duration:3s;
transition-delay:-1s;
transition-timing-function:ease-in;
//复合写法： transition:all 3s -1s ease-in;
}
div:hover{
width:200px;height:200px;background-color:blue}
</style>
</head>
<body>
<div></div>
</body>
3.1.5 复合样式
transition：属性 完成时间 延迟时间 速度曲线
属性和曲线不写就默认all 和linear
transition属性不能添加在hover伪类上
3.1.6 常常与transition有联系的样式
opacity透明度
shadow阴影
渐变
transform变形
3.1.7 触发方式
1、hover/focus伪类定义新的样式，移入移出或聚焦造成过渡的动画效果
2、js操控该对象的样式
3.2 transform变换
3.2.1 translate：位移
-
语法（单位：px）
translate（valuex，valuey） x，y方向都有位移 translate（value） 默认一个值是x方向的位移 translateX（x） x方向的位移 translateY（y） y方向的位移 translateZ（z） 正值向前，负值向后
3.2.2 scale：缩放
-
语法（单位：比例值）
scale（value） 写一个值就是宽高都缩放 scaleX（x） 在x轴缩放x倍，-1的话会左右相反（镜像翻转） scaleY（y） 在y轴缩放y倍 -1的话会倒放 scaleZ（z） 在z轴缩放z倍（立体元素的厚度）
3.2.3 rotate：旋转
-
语法（单位：角度deg）
rotate（value deg） 和rotateZ是相同效果， rotateX（x deg） 正值则沿着x轴向上翻转，负值则沿着x轴向左翻转 rotateY（y deg） 正值则沿着y轴向右翻转，负值则沿着y轴向左翻转 rotateZ（z deg） 正值则沿着z轴按顺时针旋转，负值则沿着z轴按逆时针旋转
3.2.4 skew：斜切
-
语法（单位：角度deg）
skew（value deg） 与skewX效果相同 skew（x deg，y deg） skewX与skewY效果都有 skewX（x deg） 水平方向保持不变，垂直方向正值向左倾斜，负值向右倾斜 skewY（y deg） 垂直方向保持不变，水平方向正值向下倾斜，负值向上倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>位移与缩放</title>
<style>
.box1{
width: 100px;height: 100px;background-color: red;transform: skewX(30deg);float: left;margin: 60px;}
.box2{
width: 100px;height: 100px;background-color: red;transform: skewY(30deg);float: left;margin: 50px;}
.box3{
width: 100px;height: 100px;background-color: red;float: left;margin: 50px;}
.box4{
width: 100px;height: 100px;background-color: red;float: left;transform: translate(100px) skew(45deg)}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
3.2.5 transform-origin：基点的位置（变形的基准位置）
-
语法
transform-origin：x y 【z（3d的时候才需要设置z）】
3.2.6 变形操作只能添加给块元素，但是不能添加给内联元素
行内元素设置width和height无效，变形操作的底层操作对象都是宽高
3.2.7 复合写法
复合写法：可以同时添加多个变形操作
例：transform: translate(100px) skew(45deg) scale（2） rotate（90deg）
3.2.8 执行顺序（后写的先执行）
先写的translate不会受到后面的变形操作的影响
后写的translate（）会受到先写的rotate、scale、skew的影响
translate（）会位移（位移*缩放）的长度
translate（）会在rotate的角度的方向位移相应的长度，再进行旋转
translate（）会在skew的角度的方向位移相应的长度，再进行斜切
3.3 animation动画
3.3.1 animation-name
设置动画的名字（自定义的名字）
3.3.2 animation-duration
动画的持续时间
3.3.3 animation-delay
动画的延迟时间
3.3.4 animation-iteration-count
动画的重复次数，默认值就是1，单位是数值，infinite无限次数
3.3.5 animation-timing-function
动画的运动方式
linear：匀速
ease： 默认值，速度逐渐慢下来
ease-in：加速
ease-out：减速
cubic-bezier：先加速后减速
3.3.6 animation-fill-mode
规定动画播放的之前或之后，其动画效果是否可见
none（默认值）：在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards：在延迟的情况下，让0%在延迟前生效
forwards：在运动结束的之后，停在结束位置
both：backwards和forwards同时生效
注：
运动结束后，默认停留在初始位置上
3.3.7 animation-direction
属性定义是否应该轮流反向播放动画
alternate：一次正向（0%~100%），一次反向（100%~0%）
reverse：永远都是反向，从100%~0%
normal（默认值）：永远都是正向，从0%~100%
3.3.8 复合写法
animation：name duration delay count function mode direction
3.3.9 keyframes定义动画过程
animation定义在元素内，动画过程要写在@keyframes内
3.3.10 引入animate.css的样式开发
工具animate.css，引入各种动画样式
查看样式效果访问https://animate.style/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation动画</title>
<style>
.div1{
width: 300px;height: 300px;border: black 1px solid;margin: 0 auto}
.div2{
width: 100px;height: 100px;background-color: red;
animation:myBox 10s 0s 1 linear }
@keyframes myBox {
0%{
transform: translate(0,0) rotate(45deg) }
25%{
transform: translate(300px,0)}
50%{
transform: translate(300px,300px) rotate(90deg) }
75%{
transform: translate(0,300px)}
100%{
transform: translate(0,0) scale(0.5) }
}
.div3{
width: 100px;height: 100px;background-color: red;animation: mybox 1s 0s infinite;
animation-fill-mode: forwards;animation-direction: alternate;
}
@keyframes mybox {
0%{
transform: translate(0,0)}
100%{
transform: translate(100px,0)}
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
<div class="div3"></div>
</body>
</html>
四、布局
4.1分栏布局
4.1.1 column-count
分栏的个数
4.1.2 column-width
分栏的宽度
4.1.3 column-gap
分栏的间距
4.1.4 column-rule
分栏的边线
和边框语法一样
4.1.5 column-span
合并分栏的个数
全部则为all
4.1.6 em才是首选单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>column布局</title>
<style>
.box1{
width: 800px;height: 400px;border: 1px black solid;margin: 30px auto;
column-count: 4;
column-width: 100px;
column-rule: 1px gray solid;
column-gap: 20px;
}
.box1 h2{
column-span: all;text-align: center}
</style>
</head>
<body>
<div class="box1">
<h2>CSDN</h2>
<p>中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。</p>
<p>旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSDN APP、CSDN学院APP；新媒体矩阵微信公众号：CSDN资讯、程序人生、GitChat、CSDN学院、AI科技大本营、区块链大本营、CSDN云计算、GitChat精品课、人工智能头条、CSDN企业招聘.. </p>
<p>涵盖CSDN资讯、AI科技大本营、区块链大本营、GitChat、GitChat精品课、程序人生、人工智能头条、Python大本营、CSDN学院等，覆盖各个专业技术领域，为IT开发者和从业人员提供资讯、学习、交流、互动和分享平台。</p>
<p>CSDN学院是CSDN旗下的在线学习平台，集合了各领域资深技术专家，为广大学员提供优质的在线课程及技术直 播。同时利用互联网优势，精心推出了人工智能、区块链、Python全栈、Web全栈、大数据等实训班，帮助学员系 统提升专业技能。</p>
</div>
</body>
</html>
4.2 移动端之百分比布局/流式布局
4.2.1 应用场景：应对窗口大小缩放的方案
4.2.2 特点：高度固定,宽度自适应（百分比）
4.2.3 设计细节
对于大的轮播图等,宽度100%自适应
对于小图标或者文本,一般都是固定宽高大小
对于大屏幕来说,有些布局元素会显得很长。这时候需要将外边距固定
先写固定布局，再创建流式布局
4.2.4 流式图片
宽度限定为容器的最大宽度，max-width：100%
如果要有外边距：则样式应该是
box-sizing：border-box
margin：单位百分比
4.2.5 流式排版
把所有px数值都转为em单位
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hangge.com</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.leftColumn {
width: 33.3%;
float: left;
background-color:yellow;
height:300px;
}
.rightColumn {
width: 66.7%;
float: left;
background-color:#7FFF9B;
height:300px;
}
.container{
width:90%;
height:300px;
margin:0 5%;
}
</style>
</head>
<body>
<div class = "container">
<div class="leftColumn">left</div>
<div class="rightColumn">right</div>
</div>
</body>
</html>
4.2 响应式布局
4.2.1 同一套页面可以兼容不同分辨率的设备
4.2.2 设计原则
页面元素宽度不用px作为单位，而是尽量使用百分比。
页面框架之间使用流式布局，也就是用float属性，这样当元素超出屏幕宽度的时候会滑倒下面而不是撑出水平滚动条。
注意图片的大小，尤其是宽度，同样尽量使用百分比
先做好PC端的样式，然后使用css中的@media媒体查询来适配不同的终端。将页面栅格化
4.2.3 媒体查询
-
媒介类型
all：用于所有设备 print：用于打印机和打印浏览 screen：用于电脑屏幕 speech：应用于屏幕阅读器等发生设备 -
媒体特性
and：和 not：非 min-width：最小宽度，用于给桌面浏览器调整窗口 max-width：最大宽度，用于给桌面浏览器调整窗口，常用 min-device-width：设备最小宽度，适应不同移动浏览器视口大小 max-device-width：设备最大宽度，适应不同移动浏览器视口大小，常用 orientation：竖屏还是横屏，常用 portrait 竖屏 landscape：横屏 <link>：link标签满足某条件才生效
4.2.5 防止样式非意外叠加（边界值问题）
@media (not max-width:600px) and (max-width:700px)
//在（600，700】px之间(方法1)
@media (max-width:600px) and (max-width:699.99px)
//在600~699.99px之间(方法2)
4.2.6 替换整个样式表
当样式修改不多时仅仅用@media执行即可
修改样式较多时需要创建一个新的样式表便于管理，link标签中用media属性查询
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
4.2.7 识别特定的设备
- 像素比（物理像素除以css像素）-webkit-min-device-pixel-ratio
-webkit-min-device-pixel-ratio为1.0：
1.所有非Retina的Mac
2.所有非Retina的iOS设备
3.Acer Iconia A500
4.Samsung Galaxy Tab 10.1
5.Samsung Galaxy S
-webkit-min-device-pixel-ratio为1.3：
1. Google Nexus 7
-webkit-min-device-pixel-ratio为1.5：
1.Google Nexus S
2.Samsung Galaxy S II
3.HTC Desire
4.HTC Desire HD
5.HTC Incredible S
6.HTC Velocity
7.HTC Sensation
-webkit-min-device-pixel-ratio为2.0：
1.iPhone 4
2.iPhone 4S
3.iPhone 5
4.iPad (3rd generation)
5.iPad 4
6.所有Retina displays 的MAC
7.Google Galaxy Nexus
8.Google Nexus 4
9.Google Nexus 10
10.Samsung Galaxy S III
11.Samsung Galaxy Note II
12.Sony Xperia S
13.HTC One X
@media screen and ( min-width: 212px){
/*213px显示屏样式 LG Optimus One*/}
@media screen and ( min-width: 319px){
/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */}
@media screen and ( min-width: 359px){
/*360px显示屏样式 索尼Z1*/}
@media screen and ( min-width: 383px){
/*384px显示屏样式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
@media screen and ( min-width: 399px){
/*399px显示屏样式 三星galaxyNote*/}
@media screen and ( min-width: 414px){
/*414px显示屏样式 苹果6plus*/}
@media screen and ( min-width: 423px){
/*424px显示屏样式 LG 4X */}
@media screen and ( min-width: 479px){
/*480px显示屏样式 索尼MT27i Xperia sola*/}
@media screen and ( min-width: 539px){
/*640px显示屏样式 摩托罗拉Droid3/4/Razr Atrix 4g*/}
@media screen and ( min-width: 639px){
/*640px显示屏样式*/}
@media screen and ( min-width: 640px){
/*640px以上显示屏样式*/}
- 例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../project/common-css/common2.css" media=" all and (min-width:500px)">
<style>
#box{
width: 100px; height: 100px;background-color: red;}
@media all and (min-width: 500px){
#box{
background-color: blue;}
}
@media not all and (max-width: 700px){
#box{
background-color: yellow}
}
@media (min-width: 200px) and (max-width: 400px) {
#box{
background-color: green}
}
@media all and (orientation:landscape){
#box{
background-color: pink;}
}
@media all and (min-width:768px){
.mt-md-50{
margin-top: 50px;}
}
@media all and (min-width:968px){
.mt-lg-50{
margin-top:100px;}
}
@media all and (min-width:1200px){
.mt-xl-50{
margin-top: 120px;}
}
</style>
</head>
<body>
<div id="box" class="mt-lg-50"></div>
</body>
</html>