css3新特性
css3选择器
- 属性选择器(IE7及以上支持)
E[attr]表示存在attr属性即可;
E[attr=val]表示属性值完全等于val
E[attr~=val]表示的一个单独的属性值 这个属性值是以空格分隔的
E[attr|=val]表示的要么一个单独的属性值 要么这个属性值是以“-”分隔的
E[attr*=val]表示的属性值里包含val字符并且在“任意”位置
E[attr^=val]表示的属性值里包含val字符并且在“开始”位置
E[attr$=val]表示的属性值里包含val字符并且在“结束”位置
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.box{
width: 1500px;
height: 150px;
border: 1px solid black;
margin: 0 auto;
margin-top: 150px;
display: flex;
justify-content:space-around;
padding-top: 20px;
}
.a1{
width:130px;
height: 130px;
background-color:red;
border-radius:50%;
text-align: center;
font-size: 40px;
}
.a1[id]{
background-color: #ff00de;
}
.a1[lang="add"]{
background-color: blue;
}
.a1[title~="ad"]{
background-color: aqua;
}
.a1[]
</style>
<div class="box">
<a class="a1" id="a" >1</a>
<a class="a1" title="b" >2</a>
<a class="a1" id="c">3</a>
<a class="a1" title="d" >4</a>
<a class="a1" id="e" lang="add">5</a>
<a class="a1" id="f" lang="eee">6</a>
<a class="a1" target="baa">7</a>
<a class="a1" title="ad dfg" >8</a>
<a class="a1" target="dcc" >9</a>
<a class="a1" title="ad sdf" >10</a>
</div>
总结: 属性选择器中有波浪(〜)时属性值有value时就相匹配,没有波浪(〜)时属性值要完全是value时才匹配。
E[attr=”value”]和E[attr*=”value”]是最实用的,其中E[attr=”value”]能帮我们定位不同类型的元素,特别是表单form元素的操作,而E[attr*=”value”]能在网站中帮助我们匹配不同类型的文件。
②伪类
E:nth-child(n) 表示E的父元素中的第n个子节点,且类型为E
(重要) 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
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
E:last-child 表示E父元素中的最后一个子节点,且类型为E
重要: E:first-of-type 表示E父元素中的第一个E子节点
E:last-of-type 表示E父元素中的最后一个E子节点
E:only-child表示E父元素中只有一个子节点。注意:不包含文本节点
E:only-of-type 表示E父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:不包含文本节点
a:nth-child(3){
background-color:pink;
}
a:nth-child(odd){
background-color: black;
color: green;
}
a:nth-child(even){
background-color: green;
color: aqua;
}
a:nth-last-child(3){
background-color: blue;
}
E:target 表示当前的URL片段的元素类型(id被a的href链接并被点击),这个元素必须是E
下面的三个伪类选择器一般用于输入框:
E:disabled 表示不可点击(获取焦点)表单控件
E:enabled 表示可点击(获取焦点)的表单控件
E:checked 表示已选中的checkbox或radio
<style type="text/css">
form{
width: 160px;
height: 200px;
border: 1px solid black;
}
li{
width: 160px;
height:60px ;
background-color: indigo;
margin-bottom: 4px;
}
p{
width: 100px;
height: 70px;
background-color: dimgray;
}
li:target{
color: blue;
background-color: yellowgreen;
}
form:first-line{
background-color: violet;
}
</style>
<body>
<p><a href="#new1">选一</a></p>
<p><a href="#new2">选二</a></p>
<p><a href="#new3">选三</a></p>
<form>
<li id="new1">1</li>
<li id="new2">2</li>
<li id="new3">3</li>
</form>
</body>
用伪类选择符(E:checked)实现多选框
<style type="text/css">
input:checked+span{
background-color: red;
}
input:checked+span:after{
content: "选我";
}
</style>
<ul>
<li><input type="checkbox" value="0" /><span>蓝色</span></li>
<li><input type="checkbox" value="1" /><span>红色</span></li>
<li><input type="checkbox" value="2" /><span>黑色</span></li>
</ul>
效果
**<重要>**E::selection表示E元素在用户选中文字时,只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性).
demo:用伪类选择符(E::selection)
<style type="text/css">
p{
font-size: 15px;
}
p::selection{
color: #ff00de;
background-color: indigo;
}
p::before{
content: "插入文字";
background-color: yellowgreen;
}
p::after{
content: "不选就算了";
background-color: yellowgreen;
}
</style>
渐变(gradient)
渐变分为线性渐变(linear-gradient)和径向渐变(radial-gradient)
- 线性渐变
由于线性渐变在不同浏览器中的使用方法不同,所以用浏览器区分
a.线性渐变在Mozilla下的应用
语法:-moz-linear-gradient( [<point>
||<angle>
,]? <stop>
,<stop>
[,<stop>
]* )
其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。如图所示:
div{
width: 200px;
height:200px;
background: -moz-linear-gradient(top,red,yellow);
}
效果图:
b.线性渐变在Webkit下的应用
语法
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则
demo
-webkit-linear-gradient(top,#ccc,#000);//新式写法
background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));
c.线性渐变在Opera下的应用
语法:
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */
参数:-o-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。
- 径向渐变
语法:
-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
径向渐变到目前还不支持Opera的内核浏览器,所以径向渐变都是在firefox,safari,chrome底下进行测试完成的。
demo:
background: -moz-radial-gradient(#ace, #f96, #1E90FF);
background: -webkit-radial-gradient(#ace, #f96, #1E90FF);
效果图:
旋转(transform)
Transform用来向元素应用各种2D和3D转换,属性允许我们对元素进行旋转、缩放、移动或倾斜等操作。
语法:
transform有两个值,一个是none;一个是transform-function。多个transform-function之间用空格隔开。
transform:none|<transform-function>+;
旋转
a.2D旋转
语法:transform:rotate(45deg);
单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,语法中的意思是顺时针旋转45°。b.3D旋转:
语法:transform:rotate3d(x,y,z,a);
rotate3d()中取值说明:
x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
rotate3d可以分别写成三个旋转函数,功能等同:
rotateX(a)函数功能等同于rotate3d(1,0,0,a)
rotateY(a)函数功能等同于rotate3d(0,1,0,a)
rotateZ(a)函数功能等同于rotate3d(0,0,1,a)
缩放
a.2D缩放
语法:transform: scale(0.5); 或 transform: scale(0.5, 2);
参数表示缩放倍数;
一个参数时:表示水平和垂直同时缩放该倍率
两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。
scale还可以分别写,scaleX和scaleY,分别定义水平和垂直的缩放比例。
b.3D缩放
语法:transform:scale3d(sx,sy,sz);
其取值说明如下:
sx:横向缩放比例;
sy:纵向缩放比例;
sz:Z轴缩放比例;
scale3d()函数单独使用时没有任何效果,需要配合其他的变形函数一起使用才会有效果。scale3d可以拆分成三种写法,分别是scaleX()、scaleY()、ScaleZ()。
定位
a.2D偏移
(1)语法
transform:translate(sx,sy);
sx:向X轴方向偏移的数值。
sy:向Y轴方向偏移的数值。
用法:transform: translate(45px) 或者 transform: translate(45px, 150px);参数表示移动距离,单位px。
一个参数时:表示水平方向的移动距离;
两个参数时:第一个参数表示水平方向的移动距离,第二个参数表示垂直方向的移动距离。
translate还可以分别写,translateX(),translateY(),分别给水平方向和垂直方向定义偏移距离。
b.3D偏移:translate3d()
语法:transform:translate3d(tx,ty,tz);
其属性值取值说明如下:
tx:代表横向坐标位移向量的长度;
ty:代表纵向坐标位移向量的长度;
tz:代表Z轴位移向量的长度,此值不能是一个百分比值,如果取值为百分比值,将会无效。
translate3d可以拆分成三种写法,分别是translateX()、translateY()、translateZ()。
- 倾斜:skew()
语法:transform: skew(30deg); 或 transform: skew(30deg, 30deg);
参数表示倾斜角度,单位deg。
一个参数时:表示水平方向的倾斜角度;也就是Y轴往X轴倾斜。
两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。第二个参数也就是说X轴往Y轴倾斜。
skew还可以分开写,skewX是Y轴往X轴倾斜,skewY是X轴往Y轴倾斜。
新增颜色模式<重要>
Rgba
r Red 红 0-255
g Green 绿 0-255
b Blue 蓝 0-255
a Alpha 透明 0-1
文字阴影(text-shadow)
text-shadow 的属性:text-shadow:x y blur color, …
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
①外发光
<style type="text/css">
body{
padding: 0;
margin: 0;
}
h1{
margin-left:400px;
margin-top: 100px;
font-size: 60px;
color: blueviolet;
text-shadow: 0 0 20px red;
}
</style>
②辉光效果
<style type="text/css">
body{
padding: 0;
margin: 0;
}
h1{
margin-left:400px;
margin-top: 100px;
font-size: 60px;
color: blueviolet;
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 40px #ff00de,
0 0 70px #ff00de;
}
</style>
盒模型阴影(box-shadow)
box-shadow:给元素块添加周边阴影效果,可以使用一个或多个投影,如果使用多个投影时必须需要用逗号“,”分开。(text-shadow是给文本添加阴影效果)
属性至多有6个参数设置
阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;设置阴影类型为“inset”时,其投影就是内阴影;
X-offset:是指阴影水平偏移量,其值可以是正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;
Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部;
阴影模糊半径:此参数是可选值,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小
阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的chrome浏览器为无色,也就是透明,建议不要省略此参数。
兼容问题:Mozilla内核的要加-moz,webkit内核的加-webkit。最新版的Firefox和Google Chrome浏览器都无需加前缀。
①单边效果
<style type="text/css">
body{
padding: 0;
margin:0;
}
.shadow{
width: 150px;
height: 150px;
margin: 0 auto;
margin-top: 100px;
background-color: plum;
-moz-box-shadow:-2px 0 3px red ,
0 -2px 3px green,
2px 0 3px blue,
0 2px 3px yellow;
box-shadow: -2px 0 3px red ,
0 -2px 3px green,
2px 0 3px blue,
0 2px 3px yellow;
-webkit-box-shadow:-2px 0 3px red ,
0 -2px 3px green,
2px 0 3px blue,
0 2px 3px yellow;
}
</style>
②四边具有相同的阴影效果
<style type="text/css">
body{
padding: 0;
margin:0;
}
.four{
width: 150px;
height: 150px;
margin: 0 auto;
margin-top: 100px;
background-color: plum;
box-shadow: -2px 0 8px red ,
0 -2px 8px red,
2px 0 8px red,
0 2px 8px red;
</style>
实现圆角( border-radius)
border-radius可分为多个属性值(默认方向顺时针)
border-radius-top-left /左上角/
border-radius-top-right /右上角/
border-radius-bottom-right /右下角/
border-radius-bottom-left /左下角/
单个属性值
代码如下
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: plum;
border-radius:10px;
}
</style>
效果图
多个属性值
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: plum;
border-radius:10px 10px 0px 50px ;
}
</style>
效果图
border-radius的优势不仅仅在制作圆角的边框,还是利用border-radius属性来画圆和半圆。
① 半圆
<style type="text/css">
.semi-circle{
width: 200px;
height: 100px;/*高度是宽度的一半*/
background-color: plum;
border-radius:100px 100px 0 0;/*左上和右下至少为高度值*/
}
</style>
②实心圆
将四个角设置为高度或宽度的一半
<style type="text/css">
.circle{
width: 200px;
height: 200px;
background-color: plum;
border-radius: 50%;
}
</style>
Webfont(@font-face)
webfont:即在线字体或者网络字体,是CSS3中的一个模块,主要是把自定义的特殊字体嵌入到网页中。无需安装,无需下载,直接在线使用。web font技术需要通过CSS的@font-face语句引入在线字体。
@font-face你可以在页面中嵌入不同的自定义字体,为不同的元素应用不同的字体。
@font-face语法:
@font-face {
font-family: <your-webfont-name>;
src: <source> <format> [, <source> <format>];
[font-weight: <weight>;]
[font-style: <style>;]
}
常见的字体格式及format如下:
format:
浏览器支持情况
demo:定义字体
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?'); /* 兼容IE9以上 */
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /*兼容IE8以下*/
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
在页面中就可以正常使用icomoom
div.title {
font-family: 'icomoon'
}
媒体查询(Media query)
1.媒体类型(Media Type)
用于定义不同媒体类型在不同CSS属性时的样式表现。
语法:
@media screen and (width: 888px) {
p {
color: gold;
}
}
其中,
@media是关键字(可以将其理解成css的一种语法糖,跟@import类似)
screen,这个关键字就是我们所说的媒体类型(这里screen其实就是电脑屏幕)
width: 888px,需要查询的CSS属性
表达的意思是:当页面在电脑屏幕上展现时,且屏幕的width(宽度)属性为888px时,设置所有的p标签元素的字体颜色为gold
常见的媒体类型:
常用的有all、print、screen这几种类型。其中screen要属于最常用的媒体类型了。
在具体使用media type时,我们还可以使用not或者only这两个关键字修饰媒体类型,only表示只对某类型使用,not表示除了某类型之外的所有设备类型生效。
2.媒体查询(Media query)
语法:
@media screen and (width: 888px) {
/* your css code */
}
查询页面的width属性,当其宽度为888px时,将应用特别设置的样式。
可查询属性表:
从表中可以看出还有max-与min-作为前缀进行查询
@media screen and (min-width: 961px) and (max-width: 1200px) {
p {
color: pink;
}
}
上面代码的含义是指,当展现页面的宽度大于960px且小于1200px时,将p标签的字体颜色设置为粉色。
其他常见问题
box-sizing
控制元素和模型的解析模式,默认值为content-box
属性值:
content-box:让元素维持标准的盒模型,元素宽高分别由border+padding+content决定,设置的width和height指的是center的部分宽高
border-box::让元素维持IE传统盒模型,设置的width和height属性指border+padding+content。
link与@import的区别
link属于HTML标签,除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,而@import是由css提供 ,就只能加载CSS
当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。
- @import只有在IE5以上的才能识别。而link标签无此问题。
- link的权重高于@import
css的伪类与伪元素
伪类:用于向某些选择器添加特殊的效果
伪元素:用于将特殊的效果添加到某些选择器
伪类种类
伪元素种类
两者的区别
用伪类 :first-child 和伪元素 ::first-letter 来进行比较。
伪类:first-child
<style type="text/css">
p>i:first-child{
color: #ff5555;
}
</style>
<p>
<i>first</i>
<i>second</i>
</p>
效果图:
不使用伪类时,达到上面的效果则需要
.first-child {color: red}
<p>
<i class="first-child">first</i>
<i>second</i>
</p>
伪元素::first-letter
<style type="text/css">
p::first-letter{
color: #ff5555;
}
</style>
<p>
I am stephen lee.
</p>
效果图:
不使用伪元素时,达到上面的效果则需要
.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>
伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。
margin折叠
外边距折叠是相邻的两个或多个元素(含有子元素的情况)的外边距会在垂直方向上合并成一个一个外边距。
margin折叠的计算
1.折叠的margin都是正值:取其中 margin 较大的值为最终 margin 值。
2.折叠的 margin 都是负值:取的是其中绝对值较大的,然后,从 0 位置,负向位移。
3.折叠的 margin 中有正值,有负值:先取出负 margin 中绝对值中最大的,然后和正 margin 值中最大的 margin 相加。
4.相同大小的负数:同相同大小正数。-30px与-30px折叠,折叠后为-30px。
5.不同大小负数: 取绝对值较大的负数。-30px与-20px折叠,折叠后为-30px。
外边距折叠情况
无子元素的相邻兄弟元素
两个元素之间没有被其他非空元素隔开时触发外边距折叠。
1.两个元素的margin均为正值,则两个元素之间的margin=max(margin1,margin2);
2.两个元素的margin负值,则两者之间的margin=min(margin1,magin2)
3.两个元素中有margin为正值,有一个为负值,则两者之间的margin=margin1+margin2
子元素与父元素发生的外边距折叠
父元素无外边框(border)、无内边距(padding),且父元素与子元素之间无非空元素或文本信息时(子元素上边与父元素上边之间无非空元素文本信息,子元素下边与父元素下边之间可可以有非空元素和文本信息),折叠的基线为父元素最上的边或最下的边。
计算规则同上
- 元素自身的 margin-bottom 和 margin-top 相邻时也会折叠
- 绝对定位元素,float元素,inline-box元素,overflow : hidden不会和垂直方向上的其他元素margin折叠–其实就是可以生成新的BFC
margin折叠的消除
1.BFC块级格式化上下文阻止外边距折叠,设置display:inline-block形成BFC
2.父子DIV顶部外边距折叠解决方法
- 给父元素div设置边框
- 父元素div设置padding
- 给父元素div设置overflow–其实是生成了一个新的BFC