css3学习笔记

1
2
3
4
5
6
7
8
9
10
11
12
13
写作目的:css3是最新版本的css,除了完全向后兼容,css3的新特性极大推动了css在开发中的作用。
本文总结了css3新特性的一些主要内容。包括:
1. 选择器
2. 边框相关
3. 颜色
4. text
5. 背景相关
6. transformation(变换)
7. animation
8. 多列布局
9. 用户接口(resize和offeset)
10. 媒体查询和响应式
11. 盒模型

css3向前兼容需要浏览器前缀

前缀 浏览器
-webkit chrome safari
-moz firefox
-ms IE
-o opera

选择器

  • 属性选择器(在css2的基础上增加了三个属性选择器)
    • E[ att^ = ‘val’ ] :选择匹配元素E,且E元素定义了属性att,且属性值以val开头的任何字符串
    • E[ att$ = ‘val’ ] :选择匹配元素E,且E元素定义了属性att,且属性值以val结尾的任何字符串
    • E[ att* = ‘val’ ] :选择匹配元素E,且E元素定义了属性att,且属性值任意位置包含了val
  • 伪类选择器
    • :root :匹配根元素(在HTML中即为)
    • :not :否定选择器
    • :empty: 选择没有任何内容的元素
    • :target:目标选择器‘
    • :first-child :last-child
    • :nth-child(n)
    • :nth-of-type(n) :某种类型子元素(在父元素的孩子有很多类型时使用)
    • :first-of-type :last-of-type
    • : only-child :父元素只有一个子元素的元素
    • :only-of-type: 一个元素的唯一类型的子元素
    • :enabled :disabled 表单中可用和禁用的元素
    • :checked:表单中被选中的元素
    • :read-only
    • :read-write
  • 伪元素选择器
    • ::selection:鼠标选中的文本
    • ::before和::after:给元素的前后插入内容,与content一起使用

边框相关

  • border-radius
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div.circle{
height:100px;/*与width设置一致 实心圆*/
width:100px;
background:#9da;
border-radius:50%;/*四个圆角值都设置为宽度或高度值的一半*/
}
div.semi-circle{
height:100px; //左半圆
width:50px;
background:#9da;
border-radius:50px 0px 0px 50px;
}
div.test {
height: 50px; //下半圆
width: 100px;
background:#9da;
border-radius: 0px 0px 50px 50px;
}
</style>
</head>
<body>
<div class="circle">
</div>
<br/>
<!--任务部分-->
<div class="semi-circle">
</div>
<div class="test"></div>
</body>
</html>
  • border-image
    三个参数,url:图片路径 切割图片的宽度 图片延伸方式(round:平铺 repeat:重复 stretch:拉伸)
    例子:我们有一张特殊图片
    Alt text
1
2
3
4
5
#border-image{
background:#F4FFFA;
width:210px; height:210px; border:70px solid #ddd;
border-image:url(borderimg.png) 70 repeat
}

效果如下:
Alt text
效果图中没有五,因为是从中心向四周切割的,所以5显示不出来

1
2
3
4
5
6
#border-image {
width:170px;
height:170px;
border:70px solid;
border-image:url(borderimg.png) 70 round;
}

效果如下:
Alt text

1
2
3
4
5
#border-image{
background:#F4FFFA;
width:210px; height:210px; border:70px solid #ddd;
border-image:url(borderimg.png) 70 stretch
}

效果如下:
Alt text

  • box-shadow
    box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
    其中,x,y为必选参数,投影方式省略为外阴影,inset为内阴影
    可以为一个元素添加多个阴影,用逗号隔开

颜色

  • 新增颜色方式
    • rgba(255,255,255,0.5)
    • HSL(0,100% ,30%) :色调 饱和度 亮度 (0RED 120GREEN 240BLUE)
    • HSLA(0,100%,30%,0.3)
    • opacity:透明度
  • gradient
    Linear Gradients (goes down/up/left/right/diagonally)
    Radial Gradients (defined by their center)
    参数: 渐变方向,颜色的起点和终点(可以有多个)
1
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

Alt text

文字

  • text-overflow:clip | ellipsis :用来设置是否使用一个省略标记标示元素内文本的溢出
1
2
3
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
  • word-wrap: normal | break-word
    前者浏览器默认值,表示在控制连续文本换行 后者表示内容将在边界内换行

  • 嵌入字体@font-face
    可以加载服务器端的字体文件
    用法:

1
2
3
4
5
6
7
8
9
@font-face {
font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;
}
p {
font-size :12px;
font-family : "My Font";
/*必须项,设置@font-face中font-family同样的值*/
}
  • text-shadow
    text-shadow: X-Offset Y-Offset blur color;
    • X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;
    • Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;
    • Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;
    • Color:是指阴影的颜色,其可以使用rgba色。

背景相关

  • background-origin :设置图片的原始起始位置(背景必须是no-repeat,否则此属性无效)
    background-origin : border-box | padding-box | content-box;
    Alt text
  • background-clip: 从何处裁剪图片
    background-clip : border-box | padding-box | content-box | no-clip
    Alt text
  • background-size: 设置背景图片的大小
    background-size: auto | <长度值> | <百分比> | cover | contain
    • cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;
    • contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。

transformation

让元素改变形状、大小、位置的效果
css3支持2D和3D变换
transform属性提供了五种函数来满足我们的需求

  • rotate(n) :旋转函数,参数为正负180deg之间,二维
1
2
3
4
5
div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}

Alt text

  • translate(x,y) |translateX(x) | translateY(y):位移函数,x轴向右为正,y轴向下为正
1
2
3
4
5
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}

Alt text

  • scale(x,y) | sacleX(x) | scaleY(y) :缩放函数,参数为倍数
1
2
3
4
5
div {
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}

Alt text

  • skew(m,n) | skewX(m) | skewY(n) :扭曲函数,参数为角度。将一个对象以其中心位置围绕着x轴和y轴按照一定角度倾斜
1
2
3
4
5
div{
-webkit-transform: skew(45deg);
-moz-transform:skew(45deg)
transform:skew(45deg);
}

Alt text

  • matrix(a,b,c,d,e,f) : 矩阵变换(包含了上述几种效果)
1
2
3
4
5
div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Alt text

以上这些方法讲的都是2D变换,他们还有对应的3D变换。
参见 css3transform3D变换

  • transform-origin
    任何一个元素都有默认中心点,位于元素中心,可使用此属性改变。那么以上操作都会以新的中心点来变换
1
2
3
4
.transform-origin div {
-webkit-transform-origin: left top;
transform-origin: left top;
}

transition

平滑的动画效果

  • transition-property:指定过渡或动态模拟的CSS属性
  • transition-duration:指定完成过渡所需的时间
  • transition-timing-function:指定过渡函数
    • ease :由快到慢,逐渐变慢
    • liner :恒速过度
    • ease-in:加速过度
    • ease-out:减速过渡
    • ease-in-out:先加速再减速
  • transition-delay:指定开始出现的延迟时间
1
2
3
4
5
6
div {
transition: width 2s linear 1s;
}
div:hover {
width: 300px;
}

animation

不断改变元素样式的复杂动画

  • animation-delay:动画开始播放的时间
  • animation-direction :播放方向 (normal alternate:偶数向前播放,奇数向后播放)
  • animation-duration:动画播放持续时间
  • animation-fill-mode :动画开始之前和结束之后发生的操作
    • none:默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处
    • forwards:表示动画在结束后继续应用最后的关键帧的位置
    • backwards:会在向元素应用动画样式时迅速应用动画的初始帧
    • both:元素动画同时具有forwards和backwards效果
  • animation-iteration-count :动画播放次数(1|整数|infinite)
  • animation-name :执行由 @keyframes函数定义的动画行为
    • Keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@keyframes wobble {
0% {
margin-left: 100px;
background:green;
}
40% {
margin-left:150px;
background:orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
  • animation-play-state : 播放状态(running|paused)
  • animation-timing-function:播放函数(同transition中的函数)
1
2
3
4
5
6
7
8
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: wobble;
animation-duration: 4s;
}

多列布局

columns:轻松实现报纸多列排版

1
2
3
4
5
6
7
8
9
10
11
.columns {
width: 500px;
padding: 5px;
border: 1px solid green;
margin: 20px auto;
-webkit-columns: 150px 3;
-moz-columns: 150px 3;
-o-columns:150px 3;
-ms-columns: 150px 3;
columns: 150px 3;
}

Alt text

  • column属性
    • width:列宽
    • count:列数
    • gap:列间距
    • rule:列与列的边框宽度
    • span:跨列显示(all | none)

用户接口

  • resize :规定元素是否能被用户拖动大小,增强用户体验
    • none: 不能拖动
    • both:拖动元素在水平和垂直方向同时变化
    • vertical: 仅垂直方向
    • horizontal:仅水平方向
1
2
3
4
5
6
7
textarea {
-webkit-resize: horizontal;
-moz-resize: horizontal;
-o-resize: horizontal;
-ms-resize: horizontal;
resize: horizontal;
}
  • outline :外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现。
    outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit

盒模型

  • box-sizing: content-box | border-box | inherit
    Alt text
  • 弹性盒模型 flex

媒体查询和响应式设计

  • 媒体查询:通过css3来查询媒体,然后调用对应的样式

    • 引入方式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1. link方法
link方法引入媒体类型其实就是在<link>标签引用样式的时候,通过link标签中的media属性来指定不同的媒体类型。如下所示。
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
2. @import方法
@import可以引用样式文件,同样也可以用来引用媒体类型。
@importurl(reset.css) screen;
@importurl(print.css) print;
3. @media方法
@media是CSS3中新引进的一个特性,被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。
1)在样式文件中引用媒体类型:
@media screen {
选择器{/*你的样式代码写在这里…*/}
}
</style>
</head>
  • @media 媒体类型 and (媒体特性){你的样式}
1
2
3
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}
  • 响应式设计RWD
    是提供各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格。
    • 设置viewport
1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Alt text

  • 弹性图片 img {max-width:100%;}
  • 设置断点:设备宽度的临界点。在Media Queries中,其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
  • 屏幕分辨率
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1.1024px显屏
@media screen and (max-width : 1024px) {
/* 样式写在这里 */
}
2.800px显屏
@media screen and (max-width : 800px) {
/* 样式写在这里 */
}
3.640px显屏
@media screen and (max-width : 640px) {
/* 样式写在这*/
}
4.iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
/* 样式写在这 */
}
5.iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) {
/* 样式写在这 */
}
6.iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
/* 样式写在这 */
}