@Lxyour
2018-02-06T21:43:37.000000Z
字数 8424
阅读 1575
CSS3
1.CSS1定义的选择器
选择器 | 类型 | 说明 |
---|---|---|
E | 类型选择器 | 选择指定类型的元素 |
E#id | id选择器 | 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略。 |
E.class | 类选择器 | 选择匹配E的元素,且匹配元素的class属性值为“class”,E选择符可以省略。 |
E F | 包含选择器 | 选择匹配F的元素,且该元素被包含在匹配E的元素内。 |
E:link | 链接伪类选择器 | 选择匹配E的元素,且匹配元素被定义了超链接并未被访问。例:a:link |
E:visited | 链接伪类选择器 | 选择匹配E的元素,且匹配元素被定义了超链接并已被访问。例:a:visited |
E:active | 用户操作伪类选择器 | 选择匹配E的元素,且匹配元素被激活 |
E:hover | 用户操作伪类选择器 | 选择匹配E的元素,且匹配元素正被鼠标经过 |
E:focus | 用户操作伪类选择器 | 选择匹配E的元素,且匹配元素获取了焦点 |
E::first-line | 伪元素选择器 | 选择匹配E元素内的第一行文本 |
E::first-letter | 伪元素选择器 | 选择匹配E元素内的第一个字符 |
2. CSS2定义的选择器
选择器 | 类型 | 说明 |
---|---|---|
* | 通配选择器 | 选择文档中所有元素 |
E[foo] | 属性选择器 | 选择匹配E的元素,且该元素定义了foo属性。E选择符可以省略,表示选择定义了foo属性的任意类型的元素。 |
E[foo="bar"] | 属性选择器 | 选择匹配E的元素,且该元素foo属性值为“bar” |
E[foo~="bar"] | 属性选择器 | 选择匹配E的元素,且该元素定义了foo属性,foo属性值是一个以空格符分隔的列表,其中一个列表的值为“bar”,E选择符可以省略。 |
E[foo!="en"] | 属性选择器 | 选择匹配E的元素,且该元素定义了foo属性,foo属性值是一个用连字符(-)分隔的列表,值以“en”开头。 |
E:first-child | 结构伪类选择器 | 选择匹配E的元素,且该元素为父元素的第一个子元素 |
E::before | 伪元素选择器 | 在匹配E的元素前面插入内容 |
E::after | 伪元素选择器 | 在匹配E的元素后面插入内容 |
E > F | 子包含选择器 | 选择匹配F的元素,且该元素为所匹配E元素的子元素。 |
E + F | 相邻兄弟选择器 | 选择匹配F的元素,且该元素为所匹配E元素后面相邻的位置。 |
3. CSS3新增属性选择器
选择器 | 类型 | 说明 |
---|---|---|
E[foo^="bar"] | 属性选择器 | 选择匹配E的元素,且该元素定义了foo属性,foo属性值以“bar”开始。E选择符可以省略,表示可匹配任意类型的元素。 |
E[foo$="bar"] | 属性选择器 | 选择匹配E的元素,且该元素定义了foo属性,foo属性值以“bar”结束。E选择符可以省略,表示可匹配任意类型的元素。 |
E[foo*="bar"] | 属性选择器 | 选择匹配E的元素,且该元素foo属性值为“bar” |
4. 结构伪类选择器
选择器 | 说明 |
---|---|
E:root | 选择匹配E所在文档的根元素。在(X)HTML文档中,根元素就是html元素,此时该选择器与html类型选择器匹配的内容相同。 |
E:nth-child(n) | 选择所有在其父元素中第n个位置的匹配E的子元素。 注意,参数n可以是数字(1、2、3)、关键字(odd、even)、公式(2n、2n+3)参数的索引从1开始。 tr:nth-child(3)匹配所有表格中第3排的tr; tr:nth-child(2n+1)匹配所有表格的奇数行; tr:nth-child(2n)匹配所有表格的偶数行; tr:nth-child(odd)匹配所有表格的奇数行; tr:nth-child(even)匹配所有表格的偶数行; |
E:nth-last-child(n) | 选择所有在其父元素中倒数第n个位置的匹配E的子元素 |
E:nth-of-type(n) | 选择父元素中第n个位置,且匹配E的子元素。注意,所有匹配E的子元素被分离出来单独排序。非E的子元素不参与排序。参数n可以是数字,关键字、公式。例:p:nth-of-type(1) |
E:nth-last-of-type(n) | 选择父元素中倒数第n个位置,且匹配E的子元素。 |
E:last-child | 选择位于其父元素中最后一个位置,且匹配E的子元素。 |
E:first-of-type | 选择位于其父元素中且匹配E的第一个同类型的子元素。该选择器的功能类似于 E:nth-of-type(1) |
E:last-of-type | 选择位于其父元素中且匹配E的最后第一个同类型的子元素。该选择器的功能类似于 E:nth-last-of-type(1) |
E:only-child | 选择其父元素只包含一个子元素,且该子元素匹配E。 |
E:only-of-type | 选择其父元素只包含一个同类型的子元素,且该子元素匹配E。 |
E:empty | 选择匹配E的元素,且该元素不包含子节点。 |
5. UI状态伪类选择器
选择器 | 说明 |
---|---|
E:enabled | 选择匹配E的所有可用UI元素。 |
E:disabled | 选择匹配E的所有不可用UI元素。 |
E:checked | 选择匹配E的所有可用UI元素。例:input:checked匹配input type为radio及checkbox元素 |
6. CSS3其他选择器
选择器 | 说明 |
---|---|
E~F | 通用兄弟元素选择器类型。 选择匹配F的所有元素,且匹配元素位于匹配E的元素后面。 在DOM结构树中,E和F所匹配的元素应该在同一级结构上。 |
E:not(s) | 否定伪类选择器类型。 选择匹配E的所有元素,且过滤掉匹配s选择符的任意元素。 s是一个简单结构的选择器,不能使用符合选择器, |
E:target | 目标伪类选择器类型。 选择匹配E的所有元素,且匹配元素被相关URL指向。 注意:该选择器是动态选择器,只有存在URL指向该匹配元素时,样式才起效果。例:demo.html#id |
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot);
}
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
.clip{text-overflow:clip; overflow:hidden; white-space:nowrap;
width:200px;background:#ccc;}
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
width:200px; background:#ccc;}
<div class="clip">
不显示省略标记,而是简单的裁切条
</div>
<div class="ellipsis">
当对象内文本溢出时显示省略标记
</div>
div {
-webkit-text-fill-color: black; /*文字内部填充颜色*/
-webkit-text-stroke-color: red; /*文字边界填充颜色*/
-webkit-text-stroke-width: 3px; /*文字边界宽度*/
}
.multi_column_style{
-webkit-column-count: 3; /*表示布局几列*/
-webkit-column-rule: 1px solid #bbb; /*表示列与列之间的间隔条的样式*/
-webkit-column-gap: 2em; /*表示列于列之间的间隔*/
}
color: rgba(255, 0, 0, 0.75);
background: rgba(0, 0, 255, 0.75);
color: hsla( 112, 72%, 33%, 0.68);
border-radius: 15px;
1.线性渐变
左上(0% 0%)到右上(0% 100%)即从左到右水平渐变:
background: #08c;
background: -moz-linear-gradient(top, #0fc 0%, #08c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0fc), color-stop(100%,#08c));
background: -webkit-linear-gradient(top, #0fc 0%,#08c 100%);
background: -o-linear-gradient(top, #0fc 0%,#08c 100%);
background: -ms-linear-gradient(top, #0fc 0%,#08c 100%);
background: linear-gradient(top, #0fc 0%,#08c 100%);
这里 linear 表示线性渐变,从上到下,由红色(#f55b3c)到红色(#d04439)的渐变;同理,也可以有从上到下,任何颜色间的渐变转换。
2. 复杂线性渐变
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));
这里的“color-stop”为拐点.
3. 径向渐变(目标圆半径为 0)
backgroud:
-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));
前面“50,50,50”是起始圆的圆心坐标和半径,“50,50,0”蓝色是目标圆的圆心坐标和半径,“color-stop(0.5,red)”是断点的位置和色彩。这里需要说明一下,和放射由内至外不一样,径向渐变刚好相反,是由外到内的渐变。清单 15 标识的是两个同心圆,外圆半径为 50px,内圆半径为 0,那么就是从黑色到红色再到蓝色的正圆形渐变。
4.背景图片
(1)Background Clip
(2)background-position(就像 background-clip)。
(3)background-size
(4)Background Break
5.多背景图片
div {
background: url(src/zippy-plus.png) 10px center no-repeat,
url(src/gray_lines_bg.png) 10px center repeat-x;
}
此为同一元素两个背景的案例,其中一个重复显示,一个不重复。参考一下效果图:
1.元素和文字的阴影
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
.class2{
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
}
2.反射
.classReflect{
-webkit-box-reflect: below 10px
-webkit-gradient(linear, left top, left bottom, from(transparent),
to(rgba(255, 255, 255, 0.51)));
}
设置也很简单,大家主要关注“-webkit-box-reflect: below 10px”,他表示反射在元素下方 10px 的地方,再配上渐变效果,可见效果图如下:
<div class="boxcontainer">
<div class="item"> 1 </div>
<div class="item"> 2 </div>
<div class="item"> 3 </div>
<div class="item flex"> 4 </div>
</div>
<style>
.boxcontainer {
width: 1000px;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
}
.item {
background: #357c96;
font-weight: bold;
margin: 2px;
padding: 20px;
color: #fff;
font-family: Arial, sans-serif;
}
</style>
注意这里的“display: -webkit-box; display: -moz-box;”,它针对 webkit 和 gecko 浏览器定义了该元素的盒子模型。注意这里的“-webkit-box-orient: horizontal;”,他表示水平排列的盒子模型。此时,我们会看到如下效果:
细心的读者会看到,“盒子”的右侧多出来了很大一块,这是怎么回事呢?让我们再来看一个比较有特点的属性:“flex”, 参考如下代码:
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
看到什么区别了没?在第四个“item 元素”那里多了一个“flex”属性,直接来看看效果吧:
第四个“item 元素”填满了整个区域,这就是“flex”属性的作用。如果我们调整一下“box-flex”的属性值,并加入更多的元素,见如下代码:
<div class="boxcontainer">
<div class="item"> 1 </div>
<div class="item"> 2 </div>
<div class="item flex2"> 3 </div>
<div class="item flex"> 4 </div>
</div>
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
.flex2 {
-webkit-box-flex: 2;
-moz-box-flex: 2;
}
我们把倒数第二个元素(元素 3)也加上“box-flex”属性,并将其值设为 2,可见其效果图如下:
由此可见,元素 3 和元素 4 按比例“2:1”的方式填充外层“容器”的余下区域,这就是“box-flex”属性的进阶应用。
还有,“box-direction”可以用来翻转这四个盒子的排序,“box-ordinal-group”可以用来改变每个盒子的位置:一个盒子的 box-ordinal-group 属性值越高,就排在越后面。盒子的对方方式可以用“box-align”和“box-pack”来设定。
1.transition
<div id="transDiv" class="transStart"> transition </div>
.transStart {
background-color: white;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
}
.transEnd {
background-color: red;
}
这里他说明的是,这里 id 为“transDiv”的 div,当它的初始“background-color”属性变化时(被 JavaScript 修改),会呈现出一种变化效果,持续时间为 0.3 秒,效果为均匀变换(linear)。如:该 div 的 class 属性由“transStart”改为“transEnd”,其背景会由白(white)渐变到红(red)。
2.Transform
.skew {
-webkit-transform: skew(50deg); /*倾斜*/
}
.scale {
-webkit-transform: scale(2, 0.5); /*缩放*/
}
.rotate {
-webkit-transform: rotate(30deg); /*旋转*/
}
.translate {
-webkit-transform: translate(50px, 50px); /*平移*/
}
.all_in_one_transform {
-webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px); /*综合*/
}
3.Animation
@-webkit-keyframes animname {
0% {
Opacity: 0;
Font-size: 12px;
}
100% {
Opacity: 1;
Font-size: 24px;
}
}
.anim1Div {
-webkit-animation-name: animname ;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
首先,定义动画的内容,定义动画“animname”,变化方式为由“透明”(opacity: 0)变到“不透明”(opacity: 1),同时,内部字体大小由“12px”变到“24px”。然后,再来定义 animation 的变化参数,其中,“duration”表示动画持续时间,“iteration-count”表示动画重复次数,direction 表示动画执行完一次后方向的变化方式(如第一次从右向左,第二次则从左向右),最后,“timing-function”表示变化的模式。
其实,CSS3 动画几乎支持所有的 style 变化,可以定义各种各样的动画效果以满足我们用户体验的需要。
这里介绍的 CSS3 主要的新特性,这些特性在 Chrome 和 Safari 中基本都是支持的,Firefox 支持其中的一部分,IE 和 Opera 支持的较少