CSS3学习笔记

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）（以value开头不是）

IE7及以上支持;

<p miaov="leo">leo</p>
<p miaov="dp">杜鹏</p>

p[miaov]{background:red;} //两个都变红
p[miaov=leo]{background:red;} //只有leo都变红
结构性伪类

E:nth-child(n) 匹配E标签的父节点中的第n个子节点且要是类型为E的节点

是从1开始算起，而不是0；
odd/even匹配奇/偶数；
()里可以计算； (3n)/(4n) ; n=1,2,3...

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节点中的第一个子节点

等同于:first-child==:nth-child(1)

E:last-child 匹配E节点中的最后一个子节点

等同于:last-child==:nth-last-child(1)

E:first-of-type 匹配E父节点中的第一个子节点且节点类型是E的节点

等同于:first-of-type==nth-of-type(1)

E:last-of-type 匹配E父节点中的最后一个子节点且节点类型是E的节点

等同于:last-of-type==nth-last-of-type(1)

E:only-child匹配E的父节点中只有一个子节点，而且类型为E的唯一子节点
注意：子节点不包含文本节点

E:only-of-type 匹配E的父节点中唯一一个类型为E的子节点（只有一个E节点，但可以有多个子节点）

是表示一个节点他有很多个子节点，而其中只有一种类型的子节点是唯一的

注意：子节点不包含文本节点

伪类

E:target 匹配当前的URL片段的元素类型，且这个元素必须是E

<a href="#div1">div1</a>
<a href="#div2">div2</a>
<div id="div1">div11</div>
<div id="div2">div22</div>
点击a标签后，URL会从 xxx.html 变成 xxx.html#div1（叫哈希值？），然后:target会匹配到这个#div1

div{display:none;}
div:target{ display:block;}
点击a标签显示对应div

E:not(.box) 类名为box的E节点不被匹配

E~F匹配E元素毗邻的F元素

表单类：
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节点后

selection必须要双冒号，before/after可以单冒号

新增颜色模式 RGBA

在RGB的基础上增加了一个'A'值，代表AlphaA透明度

RGBA放到哪里就哪里透明；

color : rgba(255,255,255,0.5);//文字透明
border : rgba(255,255,255,0.5);//透明

RGBA可以便捷地实现背景透明，里面的文本不透明；
如果不用RGBA，就可能要用两个层叠在一起；

文字阴影 text-shadow

text-shadow：x y blur color;
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色

阴影可以叠加，用,隔开；
text-shadow：x1 y1 blur1 color1,x2 y2 blur2 color2;
注意：先渲染后面的，再渲染前面的，叠加太多层会导致很卡

文字描边：-webkit-text-stroke:宽度 颜色
只支持webkit内核的浏览器；

新增文本功能

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

  • Rtl 从右向左排列（右对齐）
  • Ltr 从右向左排列（左对齐）

配合unicode-bidi 一起使用后变成文字从左/右开始输入；

p{direction:rtl;unicode-bidi:bidi-override;}
<p>妙味课堂</p>

显示：堂课味妙

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

  • clip 无省略号
  • Ellipsis 省略号

注意配合overflow:hidden和white-space:nowrap一起使用

自定义字体

@font-face {
    font-family: 'myFont';//字体名
    src: url('1-webfont.eot');
    src: url('1-webfont.eot?#iefix') format('embedded-opentype'),
         url('1-webfont.woff') format('woff'),
         url('1-webfont.ttf') format('truetype'),
         url('1-webfont.svg#untitledregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

用的时候就这样用：

p{font-family:'myFont';}

用AI等软件创建后字体包后，再转换为兼容的代码就可以用了；

转换字体格式生成兼容代码：fontsquirrel

弹性盒模型

千言万语不如看文档 MDN 使用CSS弹性盒子

新增UI样式

圆角

border-radius
可以有1~4个参数：

  • 1个：都一样
    border-radius: 一样
  • 2个：对角
    border-radius: 左上&右下 右上&左下
  • 3个：斜对角
    border-radius: 左上 右上&左下 右下
  • 4个：全部，顺时针
    border-radius: 左上 右上 右下 左下

默认xy轴半径一样；

border-radius:10px/15px;
这种写法是xy轴半径不一样，x轴为10px，y轴为15px；
/前是设置x轴，/后是设置y轴；
border-radius:10px 20px 30px 40px/15px 25px 35px 45px;

参数可以是像素px或百分比%；

边框图片

border-image
可以有以下参数：

  • border-image-sourceg 引入图片
  • border-image-slice 切割图片
  • border-image-width 边框宽度
  • border-image-repeat 图片的排列方式
    round 平铺,repeat 重复,stretch拉伸
    其中round和repeat一样的；

border-image-slice是把图片切成九宫格，
九宫格的四个角填充到边框对用的四个角，
中间一格正常不显示，当使用了-webkit前缀时可以显示，填充到元素内容区（相当于背景了），
其余格默认拉伸显示，可以通过border-image-repeat设置；

这些参数可以简写在border-image中：

-webkit-border-image:url(border.png) 27 27 round stretch;

一条边框还可以有多种颜色（只在火狐下实现了）：

-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;
多少个颜色参数就多少个颜色；

更多详细看 CSS3 border-image详解、应用及jQuery插件

线性渐变

渐变可以应用于任何使用背景图片的地方。这意味着在CSS样式中，渐变相当于背景图片，在理论上可在任何使用url() 值的地方采用，比如最常见的background-image、list-style-type以及前面介绍的CSS3的图像边框属性border-image。但直到目前为止，仅在背景图片中得到最完美的支持。

linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)
最早支持CSS3渐变的是Webkit内核的浏览器，后来有W3C的标准语法，这里写的是标准语法；

  • ：通过角度来确定渐变的方向。0度表示渐变方向从下向上，90度表示渐变方向从左向右。如果取值为负值，其角度按顺时针方向旋转。
  • 关键词：通过关键词来确定渐变的方向。比如“to top”、“to right”、“to bottom”和“to left”。这些关键词对应的角度值为“0deg”、“90deg”、“180deg”和“270deg”。除了使用“to top”、“top left”之外，还可以使用“top left”左上角到右下角、“top right”左上角到右下解等。
  • 第二个和第三个参数，表示颜色的起始点和结束点。大家可以在从中插入更多的颜色值。

颜色值用RGBA时可以设置透明度，同时可以设置多个渐变颜色：

box{
  background-image:-webkit-linear-gradient(
    to left,
    rgba(255,0,0,0) 0%,
    rgba(255,0,198,0.8) 93%,
    rgba(255,0,198,0) 100%);
}

IE11下就不支持linear-gradient了，需要用这个方法实现，且颜色能有两个，方向只有上到下和左到右：

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

除了线性渐变，还有径向渐变、重复线性渐变和重复径向渐变；

更多详细请看 CSS3渐变——线性渐变

新增背景属性

多背景

css3多重背景依然是不支持IE9以下系列版本。其他高级浏览器都是支持的。

p{background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px yellow;}

每个背景用,隔开；

背景尺寸
background-size:length|percentage|cover|contain;
  • length
    设置背景图像的高度和宽度。
    第一个值设置宽度，第二个值设置高度。
    如果只设置一个值，则第二个值会被设置为 "auto"。
  • percentage
    以父元素的百分比来设置背景图像的宽度和高度。
    第一个值设置宽度，第二个值设置高度。
    如果只设置一个值，则第二个值会被设置为 "auto"。
    测试
  • cover
    把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
    背景图像的某些部分也许无法显示在背景定位区域中。
    测试
  • contain
    把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
背景定位

background-origin 属性规定 background-position 属性相对于什么位置来定位。

background-origin: padding-box|border-box|content-box;
  • padding-box
    背景图像相对于内边距框来定位。（默认值）
  • border-box
    背景图像相对于边框盒来定位。
  • content-box
    背景图像相对于内容框来定位。

注意：如果背景图像的background-attachment属性为 "fixed"，则该属性没有效果。

背景裁切

属性规定背景的绘制区域。

background-clip: border-box|padding-box|content-box;
  • border-box
    背景被裁剪到边框盒。（默认值）
  • padding-box
    背景被裁剪到内边距框。
  • content-box
    背景被裁剪到内容框。

IE下还有一个text的属性，只显示文字区的内容，其他被裁切：-webkit-background-clip:text;

遮罩

-webkit-mask-image
-webkit-mask-position
-webkit-mask-repeat
webkit下有这三个属性可以实现遮罩，其他内核也有自己的实现方法；

过渡 transition

过渡transition是一个复合属性，包括下面这四个子属性：

  • transition-property
    过渡属性(默认值为all)
  • transition-duration
    过渡持续时间(默认值为0s)
  • transiton-timing-function
    过渡函数(默认值为ease函数)
  • transition-delay
    过渡延迟时间(默认值为0s)

过渡transition的这四个子属性只有transition-duration是必需值且不能为0。
其中，transition-duration和transition-delay都是时间。
当两个时间同时出现时，第一个是transition-duration，第二个是transition-delay；
当只有一个时间时，它是transition-duration，而transition-delay为默认值0；

transition-property:

  • none: 没有指定任何样式
  • all: 默认值，表示指定元素所有支持transition-property属性的样式
  • transition-property: 可过渡的样式，可用逗号分开写多个样式
transition:width 3s, background 3s;

注意：不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果

transition-delay和transition-duration:

  • 该属性不能为负值
  • 若该属性为0s则为默认值，若为0则为无效值。所以必须带单位
  • 该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间

transition-timing-function:
过渡时间函数用于定义元素过渡属性随时间变化的过渡速度变化效果。

过渡时间函数共三种取值，分别是关键字、steps函数和bezier函数；

  • steps函数 点击看参数
    steps步进函数将过渡时间划分成大小相等的时间时隔来运行

  • bezier(贝塞尔)曲线
    贝塞尔曲线通过p0-p3四个控制点来控制，其中p0表示(0,0)，p3表示(1,1)
    可通过 网站 生成

  • 关键字 其实是bezier函数或steps函数的特殊值
    ease：（快慢快）默认值
    linear：（匀速）
    ease-in：(加速)
    ease-out：（减速）
    ease-in-out：（和ease类似，但比ease幅度大）
    step-start: 直接位于结束处。相当于steps(1,start)
    step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)

steps步进函数为:
steps(<integer>[,start | end]?)
<integer>:用来指定间隔个数(该值只能是正整数)
第二个参数: 该参数可选，默认是end，表示开始值保持一次；若参数为start，表示开始不保持点击返回

transition的多个属性值用逗号分隔开表示可以同时为多个值设置过渡属性：

#test1{
    transition-property: width,background,opacity;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*类似于*/
#test2{
    transition: width 2s linear 200ms,background 500ms ease 0s,opacity 2s linear 200ms;
}

触发方式
一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发（@media触发）和javascript触发。

过渡完成事件
当过渡完成后执行的事件，类似于回调函数；

Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){},false);
firefox(标准下): obj.addEventListener('transitionend',function(){},false);

更多看 深入理解CSS过渡transition

2D变形 transform

变形transform是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操作，还可以通过设置matrix矩阵来实现更复杂的效果。变形transform可以实现2D和3D两种效果。2D变形涉及的属性主要有transform变形函数和transform-origin变形原点。

注意：transform只能应用于: 非inline元素(包括block、inline-block、table、table-cell等)；

变形原点(2维)
变形原点transform-origin是指变形操作所依据的基点。默认情况下，变形原点位于元素的中心点；
transform-origin
只能应用于: 非inline元素(包括block、inline-block、table、table-cell等)；

2维的变形原点transform-origin是由x轴和y轴两个轴的值共同确定的(不考虑3维的情况，z轴的值默认为0)，
有关键字、数值和百分比三种取值：

  • 关键字
    x轴：left: 0% center: 50% right: 100%；
    y轴：top: 0% center: 50% bottom: 100%；
  • 数值
    x轴数值表示在x轴上离0点(元素边框外侧左上角)的偏移量；
    y轴数值表示在y轴上离0点的偏移量；
  • 百分比
    x轴的百分比相对于元素的宽度和(width+横向padding+横向border)，即包含块的宽度；
    y轴的百分比相对于元素的高度和(height+纵向padding+纵向border)，即包含块的高度；
  • 单个值
    当只有一个值时，默认第二个值为center；

变形函数(2维)
变形transform是一系列变形函数的集合
transform有以下函数：

  • translate() 位移函数
  • scale() 缩放函数
  • rotate() 旋转函数
  • skew() 倾斜函数

注意：位移、缩放、旋转和倾斜这四个操作中除了位移与变形原点无关，其余三个都与变形原点有关；

下面详解各个函数：
位移
translate位移函数可以使元素从原来的位置上移动指定的位移。涉及位移的2d函数共3种，分别是translate()、translateX()、translateY()

注意：元素发生位移后，元素的x轴和y轴跟着也一并移动，若元素再进行其他的变形操作，则要沿着改变后的x轴和y轴进行变形；

位移函数相当于matrix(1,0,0,1,x,y)；

位移函数还可以接受百分比。其中x%相对于元素水平方向的宽度和，y%相对于元素垂直方向的高度和；
注意：IE10浏览器有bug，元素的位移函数的百分比是相对于元素的可视宽高(不包括边框)而言的；

缩放
scale缩放函数可以让元素根据变形原点进行缩放，默认缩放值为1。涉及缩放的2d函数共3种，分别是scale()、scaleX()、scaleY()

注意：当元素被缩放后，若元素要进行位移，数值类型的位移值要乘以该缩放比例；百分比类型的位移值乘以原来的宽度和或高度和转换成数值类型后，再乘以缩放比例；

缩放函数相当于matrix(x,0,0,y,0,0)；

倾斜
skew倾斜函数可以让元素以其变形原点围绕x轴和y轴进行一定角度的倾斜。涉及倾斜的2d函数共3种，分别是skew()、skewX()、skewY()

注意：元素倾斜后，x轴和y轴发生倾斜，若元素要进行其他变形操作，则沿着倾斜后的x轴和y轴进行变形

倾斜函数相当于matrix(1,tany,tanx,1,0,0)；

旋转
rotate旋转函数可以让元素通过指定的角度(deg)根据变形原点进行顺时针旋转，默认为0deg。与skew不同的是，rotate不会改变元素的形状。涉及到旋转的2d函数只有一个，就是rotate()

注意：元素旋转后，元素的x轴和y轴也跟着发生旋转。若元素要进行其他变形操作，则沿着旋转后的x轴和y轴进行变形

旋转函数相当于matrix(cosx,sinx,-sinx,cosx,0,0)；

多值
transform变形可以接受多值，出现多个变形函数时用空格分隔，并且按照从前往后的顺序执行。

如果变形函数不是以多值的形式，多个变形函数的先后关系可以通过多个元素的嵌套关系体现：

<div style="transform:rotate(45deg) translateX(100px)"></div>
相当于
<div style="transform:rotate(45deg)">
  <div style="transform:translateX(100px)"></div>
</div>

更多看 CSS变形transform(2d)

3D变形 transform

3D变形 transform 和2D的基本一样，但要先设置变形样式为3D:transform-style:preserve-3d;

此外还比2D变形多了一个perspective属性；
perspective 属性定义 3D 元素距视图的距离，以像素计。

目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的-webkit-perspective属性。

注意：perspective 属性只影响 3D 转换元素。

同时可以设置景深基点Perspective- origin，有以下三个属性：

  • right
  • left
  • center

动画 animation

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

如需在 CSS3 中创建动画，您需要学习 @keyframes(关键帧) 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

  • 规定动画的名称
  • 规定动画的时长
把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
-o-animation: myfirst 5s;    /* Opera */
}

注意：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

关键帧的时间单位：

  • 百分比：0%、25%、100%等
  • 字符：from(0%)、to(100%)

有以下几个属性：

  • animation 所有动画属性的简写属性，除了 animation-play-state 属性。
  • animation-name 规定 @keyframes 动画的名称。
  • animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
  • animation-timing-function 规定动画的速度曲线。默认是 "ease"。
  • animation-delay 规定动画何时开始。默认是 0。
  • animation-iteration-count 规定动画被播放的次数。默认是 1。
  • animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
  • animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
  • animation-fill-mode 规定对象动画时间之外的状态。
posted @ 2017-05-05 17:57  CHENJIAJIE  阅读(200)  评论(0)  编辑  收藏  举报