CSS3笔记-加强版 / 憋错料

属性选择器:

E[attr]只使用属性名，但没有确定任何属性值

E[attr="value"]指定属性名，并指定了该属性的属性值

E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写

E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的

E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的

E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value

E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）

备注：IE7及以上支持;

结构性伪类选择器：

E:nth-child(n) 表示E父元素中的第n个字节点

p:nth-child(odd){background:red}/*匹配奇数行*/

p:nth-child(even){background:red}/*匹配偶数行*/

p:nth-child(2n){background:red}

E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算

E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E

E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算

E:empty 表示E元素中没有子节点。注意：子节点包含文本节点

E:first-child 表示E元素中的第一个子节点

E:last-child 表示E元素中的最后一个子节点

E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的

E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的

E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点

E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

伪类选择器：

E:target 表示当前的URL片段的元素类型，这个元素必须是E

E:disabled 表示不可点击的表单控件

E:enabled 表示可点击的表单控件

E:checked 表示已选中的checkbox或radio

E:first-line 表示E元素中的第一行

E:first-letter 表示E元素中的第一个字符

E::selection表示E元素在用户选中文字时

E:before 生成内容在E元素前

E:after 生成内容在E元素后

before和after中的content填写要添加的内容

E:not(s) 表示E元素不被匹配

E~F表示E元素其后的F元素

新增颜色模式:

rgba:

r Red 红 0-255

g Green 绿 0-255

b Blue 蓝 0-255

a Alpha 透明 0-1

实例: 背景透明，文字不透明(只给背景加上rgba)

问题：注意边框颜色透明有问题

Hsl：

H Hue 色调任意数值

S saturation 饱和度 0%-100%

L Lightness 亮度 0%-100%

文字阴影：

text-shadow：x y blur color, …,…

参数：

x 横向偏移

y 纵向偏移

blur 模糊距离

color 阴影颜色

文本阴影如果加很多层，会很卡很卡很卡

文字阴影应用

最简单用法

text-shadow:2px 2px 4px black

阴影叠加

text-shadow:2px 2px 0px red, 2px 2px 4px green;

先渲染后面的，再渲染前面的

几个好玩的例子

层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;

文字移入模糊：

h1{ font:100px/200px "微软雅黑"; text-align:center; color:#000; text-shadow:0 0 0 rgba(0,0,0,1); border:1px solid #000; transition:1s;}

h1:hover{color:rgba(0,0,0,0);text-shadow:0 0 100px rgba(0,0,0,0.5);}

文字描边：

-webkit-text-stroke:宽度颜色

新增文本功能（浏览器全兼容）：

direction 定义文字排列方式(全兼容)

rtl 从右向左排列

ltr 从右向左排列

注意要配合unicode-bidi (文字排列顺序)一块使用

text-overflow 定义省略文本的处理方式

clip 无省略号

ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap(文本不换行)一块使用)

弹性盒模型：

注意在使用弹性盒模型的时候
父元素必须要加display:box 或 display:inline-box

box-orient 定义盒模型的布局方向:
参数：
horizontal 水平显示
vertical 垂直方向

box-direction 元素排列顺序:
参数：
normal 正序
reverse 反序
box-ordinal-group (数字，1最先)设置元素的具体位置

box-flex 定义盒子的弹性空间：
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
.box div:nth-of-type(1){-webkit-box-flex:1;}
.box div:nth-of-type(2){-webkit-box-flex:3;} // 分成四份，第一个占1份，第二个占3份

box-pack 对盒子富裕(空白无元素)的空间进行管理：
参数：
start 所有子元素在盒子左侧显示，富裕空间在右侧
end 所有子元素在盒子右侧显示，富裕空间在左侧
center 所有子元素居中
justify 富余空间在子元素之间平均分布

box-align 在垂直方向上对元素的位置进行管理：
参数：
star 所有子元素在居顶
end 所有子元素在居底
center 所有子元素垂直居中

盒模型阴影：

box-shadow:[inset] x y blur [spread] color
参数：
[inset]：可选，投影方式，inset：内投影；默认：外投影。
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径。先扩展原有形状，再开始画阴影
color：颜色

box-reflect 倒影：
参数：
direction 方向 above|below|left|right;
距离
渐变（可选）-webkit-linear-gradient(red 0,blue 100%)

resize 自由缩放：
参数：
both 水平垂直都可以缩放
horizontal 只有水平方向可以缩放
vertical 只有垂直方向可以缩放
注意：一定要配合overflow:auto 一块使用

怪异盒子：

box-sizing 盒模型解析模式
content-box 标准盒模型 width/height=border+padding+content
corder-box 怪异盒模型 width/height=content

css3分栏布局:

column-width 每一栏目的宽度
column-count 栏目的列数
column-gap 栏目相隔的距离
column-rule 栏目的间隔线

css3响应式布局:

媒体类型
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech ‘听觉‘类似的媒体类型
tty 不适用像素的设备
tv 电视

关键字
and
not not关键字是用来排除某种制定的媒体类型
only only用来定某种特定的媒体类型

媒体特性
(max-width:600px)
(max-device-width: 480px) 设备输出宽度
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips

样式引入

外部引入css写法：
横屏
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
竖屏
<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">
屏幕大于800px时：
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 800px)">
屏幕大于600px小于800px时：
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
屏幕小于600px时：
<link rel="stylesheet" type="text/css" href="styleC.css" media="screen and (max-width: 600px)">

页面内style样式写法：
@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}

为移动设备添加 viewport：

移动端的头部标签和meta大全：

<!DOCTYPE html> 
<html lang="zh-cmn-Hans"> 
<head>

<meta charset=‘utf-8‘>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<meta name="description" content="不超过150个字符"/>

<meta name="keywords" content=""/>

<meta name="author" content="name, [email protected]"/>

<meta name="robots" content="index,follow"/>

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

<meta name="apple-mobile-web-app-title" content="标题">

<meta name="apple-mobile-web-app-capable" content="yes"/>

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>

<meta name="msapplication-TileColor" content="#000"/>

<meta name="msapplication-TileImage" content="icon.png"/>

圆角：

border-radius: 1-4个数字 / 1-4个数字

前面是水平，后面是垂直

不给“/”则水平和垂直一样

border-radius: 10px/5px; 类似椭圆

参数个数：

用法

1个：都一样

border-radius: 一样

2个：对角

border-radius: 左上&右下右上&左下

3个：斜对角

border-radius: 左上右上&左下右下

4个：全部，顺时针

border-radius: 左上右上右下左下

边框：

边框图片 border-image

border-image-sourceg 引入图片

border-image-slice 切割图片

border-image-width 边框宽度

border-image-repeat 图片的排列方式

round 平铺,repeat 重复,stretch拉伸

边框颜色 border-colors

线性渐变:

线性渐变格式：

linear-gradient([<起点> || <角度>,]? <点>, <点>…)

linear-gradient(60deg,red 0,blue 50%,green 100%)//由红渐变到蓝再渐变到绿

repeating-linear-gradient：平铺

参数：

起点：从什么方向开始渐变 left、top、left top 默认：top。

角度：从什么角度开始渐变 xxx deg的形式

点：渐变点的颜色和位置 black 50%，位置可选

加入<点>的位置：

top, red 40%, green 60%

top, red 50%, green 50%

同一个位置两个点——直接跳变

也可以用px

配合rgba：

top, rgba(255,255,255,1), rgba(255,255,255,0)

加入背景图片：

background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

只能用在背景上：

IE：filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ffffff‘,endColorstr=‘#ff0000‘,GradientType=‘1‘);

径向渐变：

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);

起点：可以是关键字（left,top,right,bottom），具体数值或百分比

形状： ellipse、circle

大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;

注意firefox目前只支持关键字

背景：

多背景，逗号分开：

background: url(a.jpg) 0 0, url(b.jpg) 0 100%;

背景尺寸：

background-size:x y

background-size:100% 100%

cover 放大

contain 缩小

background-origin ： border | padding | content

border-box：从border区域开始显示背景。

padding-box：从padding区域开始显示背景。

content-box：从content区域开始显示背景。

background-clip

border：从border区域向外裁剪背景。

padding：从padding区域向外裁剪背景。

content：从content区域向外裁剪背景。

no-clip：从border区域向外裁剪背景。

text: 除了设置透明文字的部分，其余部分都已经被裁减掉

遮罩：

mask-image

mask-position

mask-repeat

实例：特殊形状的幻灯片效果

w3c标准：

-ms-transform:translate(100px,100px); //-ms代表IE内核识别码（360属于IE内核）

-moz-transform:translate(100px,100px);//-moz代表火狐【Firefox】内核识别码

-webkit-transform:translate(100px,100px); //-webkit代表谷歌【Chrome】和苹果【safari】内核识别码

-o-transform:translate(100px,100px); //-o代表欧朋【opera】内核识别码

transform:translate(100px,100px); //统一标识语句

transition过渡:

参数：
transition-property 要运动的样式（all || [attr] || none）
transition-duration 运动时间
transition-delay 延迟时间
transition-timing-function 运动形式
ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） http://matthewlein.com/ceaser/

例如：宽度在1s变宽，接着高度在2s变高，接着背景颜色改变（高度延迟了1s，这一秒钟宽度正在变化）
.box{width:100px;height:100px;background:red; transition:1s width,2s 1s height,3s 3s background;}
.box:hover{width:500px;height:300px;background:blue;}

过渡完成事件：

Webkit内核： obj.addEventListener(‘WebkitTransitionEnd‘,function(){},false);

firefox: obj.addEventListener(‘transitionend‘,function(){},false);

添加过渡完成事件：在transition完成之后触发
function addEnd(obj,fn)
{
obj.addEventListener(‘WebkitTransitionEnd‘,fn,false);
obj.addEventListener(‘transitionend‘,fn,false);
}
移除过渡完成事件：
function removeEnd(obj,fn)
{
obj.removeEventListener(‘WebkitTransitionEnd‘,fn,false);
obj.removeEventListener(‘transitionend‘,fn,false);
}

2D变换 transform：

rotate() 旋转函数取值度数（deg）
transform-origin 旋转的基点，改变元素 x 和 y 轴，默认是center中心点。
skew() 倾斜函数取值度数
skewX()
skewY()
scale() 缩放函数取值正数、负数和小数
scaleX()
scaleY()
translate() 位移函数
translateX()
translateY()

transform 执行顺序问题：后写的变换先执行

matrix(a,b,c,d,e,f) 矩阵函数

默认：matrix(1,0,0,1,0,0)

通过矩阵实现缩放

x轴缩放 a=x*a c=x*c e=x*e;

y轴缩放 b=y*b d=y*d f=y*f;

通过矩阵实现位移

x轴位移: e=e+x

y轴位移: f=f+y

通过矩阵实现倾斜

x轴倾斜: c=Math.tan(xDeg/180*Math.PI)

y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

通过矩阵实现旋转

a=Math.cos(deg/180*Math.PI);

b=Math.sin(deg/180*Math.PI);

c=-Math.sin(deg/180*Math.PI);

d=Math.cos(deg/180*Math.PI);

变换兼容IE9以下IE版本只能通过矩阵来实现：

filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod=‘auto expand‘);

IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d

3D变换：

transform-style：preserve-3d 给父级添加，建立3D空间

perspective：100px; 景深,离变换元素的垂直距离为100px

perspective- origin 景深基点,观察的角度，默认是center

transform 新增函数

rotateX()

rotateY()

rotateZ()

translateZ()

scaleZ()

animation：

1、animate——关键帧：

关键帧——keyframes

类似于flash

只需指明两个状态，之间的过程由计算机自动计算

关键帧的时间单位

数字：0%、25%、100%等；

字符：from(0%)、to(100%)；可以只有to

格式

@keyframes 动画名称

{

动画状态

}

2、animate——调用动画

调用的标签(#div1、xxx:hover之类的)

eg：调用.box元素在4s内以无限次、匀速、一正一倒序执行domove动画

.box{-webkit-animation:4s domove infinite linear alternate;}

必要属性:

animation-name 动画名称（关键帧名称）

animation-duration 动画持续时间

例如：

-webkit-animation:miaov 4s;

-webkit-animation-name: ‘miaov‘;

-webkit-animation-duration: 4s;

可选属性:

animation-play-state 播放状态（ running 播放和paused 暂停）

animation-timing-function动画运动形式：

linear 匀速。

ease 缓冲。

ease-in 由慢到快。

ease-out 由快到慢。

ease-in-out 由慢到快再到慢。

cubic-bezier(number, number, number, number) 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-delay动画延迟

只是第一次

animation-iteration-count重复次数：

infinite为无限次

animation-direction 播放前重置：

动画是否重置后再开始播放

alternate 动画直接从上一次停止的位置开始执行

normal 动画第二次直接跳到0%的状态开始执行

3、animate——和JS结合

通过class:

在class里加入animation的各种属性

直接给元素加-webkit-animation-xxx样式

animation的问题:

写起来麻烦

没法动态改变目标点位置

动画end事件：

obj.addEventListener(‘webkitAnimationEnd‘, function (){}, false);

obj.addEventListener(‘animationend‘, function (){}, false);

时间： 2024-10-10 12:31:54

CSS3笔记-加强版

CSS3笔记-加强版的相关文章

CSS3笔记【不定时更新】

图解css3 -- 笔记2

css3笔记

前端CSS3笔记

CSS3 笔记四（Transforms）

css3 笔记

CSS3笔记和CSS实用技巧

CSS3笔记（一）

CSS3 笔记五（Buttons）