目录
1.选择器
CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
1.1 属性选择器
属性选择器:属性是相对于标签而言,所谓属性选择器就是根据指定名称的属性的值来查找元素。
- E[attr]:拥有attr属性的E标签。eg.li[style]:查找拥有style属性的li标签
- E[attr=value]:拥有attr属性并且属性值为value的E标签(=是严格匹配)。eg.li[class=red]:查找拥有class属性并且值为red的li标签
- E[attr*=value]:拥有attr属性并且属性值中包含(可以在任意位置)value的E标签。eg.li[class*=red]:查找拥有class属性并且属性值包含red的li标签
- E[attr^=value]:拥有attr属性并且属性值以value开头的E标签。
- E[attr$=value]:拥有attr属性并且属性值以value结束的E标签。
- E[attr|=value]:有attr属性并且属性值以value开头的E标签,该值必须是整个单词。
1.2 兄弟选择器
- element1+element2:element1 之后紧跟其后的element2元素。两种元素必须拥有相同的父元素。eg. .first + li:添加了.first样式的标签的相邻的li元素
- element1~element2:element1 之后出现的所有element2。两种元素必须拥有相同的父元素,但是 element2 不必直接紧随 element1。eg. .first ~ li:添加了.first样式的元素之后的所有兄弟li元素
1.3 伪类选择器
1.E:first-child:查找E元素的父元素的第一个子元素E,不会限制查找的元素的类型。
2.E:last-child:查找E元素的父元素中最后一个子元素E,不会限制查找的元素的类型。
3.E:first-of-type:查找E元素的父元素的第一个子元素E,限制查找的元素的类型,过滤掉其它类型的元素。
4.E:last-of-type:查找E元素的父元素的第一个子元素E,限制查找的元素的类型。
5.E:nth-child(n):第n个子元素E,不限制查找类型。
6.E:nth-last-child(n):倒数第n个子元素E,不限制查找类型。
7.E:nth-child(even):所有偶数,不限制查找类型。
8.E:nth-child(odd):所有奇数,不限制查找类型。
9.E:nth-of-type(n):第n个子元素E,限制类型。
10.E:nth-last-of-type(n):倒数第n个子元素E,限制类型。
11.E:nth-of-type(even):所有偶数,限制类型。
12.E:nth-of-type(odd):所有奇数,限制类型。
注意:n:默认取值范围为0~子元素的长度,但是当n<=0时,选取无效。
n可是多种形式:nth-child(2n)、nth-child(2n+1)、nth-of-type(-n+5)等
eg.为前、后5个li元素添加样式
分析
n=0,-n+5=5;
n=1,-n+5=4;
n=2,-n+5=3;
n=3,-n+5=2;
n=4,-n+5=1;
n=5,-n+5=0;(无效)
所以前、后五个元素应用了样式
13.E:empty:没有任何的内容,连空格都没有的E元素。
14.E:target:可以为锚点目标元素添加样式,当目标元素被触发为当前锚链接的目标时,调用此伪类样式
1.4 伪元素选择器
1.E::before:定义在一个元素的内容之前插入content属性定义的内容与样式
2.E::after:定义在一个元素的内容之后插入content属性定义的内容与样式
注意:
- 默认是行级元素,如果想设置宽高,就必须转换为块级元素(三种转换方式:display:block或float:** 或position:**)
- 必须添加content属性,哪怕不设置内容,也需要content:"",否则后期不可见
- E:after、E:before 在旧版本浏览器(IE6/7/8)里是伪类,在新版本浏览器里是伪元素,新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理。(建议规范书写::)
<style>
*{
padding: 0;
margin: 0;
}
body{
padding: 200px;
}
div:nth-of-type(1){
width: 300px;
height: 200px;
background-color: red;
float: left;
}
div:nth-of-type(2){
width: 100px;
height: 200px;
background-color: blue;
float: left;
position: relative;
}
div:nth-of-type(2)::before{
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
left: -10px;
top: -10px;
}
div:nth-of-type(2)::after{
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
left: -10px;
bottom: -10px;
}
</style>
<body>
<div></div>
<div></div>
</body>
3.E::first-letter:文本的第一个字母或字(应用:首字下沉)
4.E::first-line:文本第一行
5.E::selection:可改变选中文本的样式
2.颜色设置
- 预设值:background-color: red;
- 十六进制:background-color: #c9ffa6;
- rgb(R,G,B):background-color: rgb(255,150,0);
- hsl(H,S,L):background-color: hsl(300,100%,50%);
HTML5中添加了一些新的颜色的表示方式
1.RGBA(R,G,B,A);
RGBA在RGB的基础上多了控制alpha透明度的参数
RGBA比元素设置CSS的透明度(opacity:0-1,只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度;transparent 不可调节透明度,始终完全透明)更好,它可以不影响整个元素的透明度,也不会影响到元素其他的属性。
语法:
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数| 百分数
A:透明度。取值0~1之间(0:透明;1:不透明)
正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。
红绿==>黄,绿蓝==>青,红蓝==>紫,红绿蓝==>白
eg.background-color: rgba(255,0,255,0.2);
2. HSLA(H,S,L,A):
此色彩模式与HSL相同,只是在HSL模式上新增了Alpha透明度
语法:
H:Hue(色调,色相)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 – 360,过渡为:(红橙黄绿青蓝紫红)
S:Saturation(饱和度)。指色彩的纯度,越高色彩越纯,低则逐渐变灰,取值为:0.0% - 100.0%
L:Lightness(亮度)。取值为:0.0% - 100.0%,50%是平衡值,一般建议保留50%
A:Alpha(透明度)。取值0~1之间(0:透明;1:不透明)
eg.background-color: hsla(300,50%,50%,1);
3.文本阴影:text-shadow
这个属性可以有两个作用,产生阴影和模糊主体。这样在不使用图片时,能给文字增加质感。
语法:(可以多个阴影叠加)
text-shadow:[Color X Offset Y Offset Blur],[Color X Offset Y Offset Blur]...
或者
text-shadow:[X Offset Y Offset Blur Color],[X Offset Y Offset Blur Color]...
说明:
- Color:阴影颜色
- X Offset:阴影的水平偏移距离。正值:阴影向右偏移;负值:阴影向左偏移
- Y Offset:阴影的垂直偏移距离。正值:阴影向下偏移;负值:阴影向上偏移
- Blur:阴影的模糊值。不可以是负值,值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0
4.盒模型:box-sizing
1.在默认情况下,CSS设置的盒子宽度仅仅是内容区的宽度,而非盒子的宽度。同样,高度类似。真正盒子的宽度和高度(在页面呈现出来的):
- padding + border + width = 盒子的宽度
- padding + border + height = 盒子的高度
很明显,这不直观,很容易出错,造成网页中其它元素的错位。
2. CSS3中可以通过box-sizing来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变
- content-box:设置的width属性值仅仅是内容的宽度,盒子的最终的宽高值在width的基础上再加上padding和border的宽度(对象的实际宽度=设置的width值+border+padding)
- border-box:设置的width属性值就是盒子的最终的宽度,包含了border和padding和内容(对象的实际宽度=设置的width值),如果添加了padding和border,那么真正放置内容的区域会减小,但是它可以稳固页面的结构
3.浏览器的兼容性:IE8及以上版本支持该属性,Firefox 需要加上:-moz-,低版本的IOS和Android浏览器需要加上:-webkit-
5.边框圆角:border-radius
border-radius可以通过值来定义样式相同的角,也可以对每个角分别定义
- border-radius:*px——四个角的圆角值都一样
- border-radius:*px *px *px *px——左上; 右上;右下;左下
- border-radius:*px *px—— 左上、右下;右上、左下
- border-radius:*px *px *px——左上;右上、左下;右下
单个圆角的设置:除了同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值,表示水平半径与垂直半径相等;如果设置2个值,第一个值表示水平半径,第二个值表示垂直半径。
另一种方法设置圆角:border-radius:水平x方向/垂直y方向
以“/”进行分隔,遵循“1,2,3,4”规则,“/”前面的1~4个用来设置横轴半径(分别对应横轴1、2、3、4位置 ),“/”后面1~4个参数用来设置纵轴半径(分别对应纵轴1、2、3、4位置 )
1.制作椭圆(四个方向上都是一致的对称圆角)
border-top-right-radius: 100px 50px;
border-bottom-left-radius: 100px 50px;
border-bottom-right-radius: 100px 50px;
border-top-left-radius: 100px 50px;
等价:
2.非对称圆角
6.案例:Android机器人
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Android机器人</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #ccc;
}
.content{
width: 500px;
height: 500px;
border: 1px solid red;
margin:50px auto;
}
.an_header{
width: 250px;
height: 125px;
background-color: darkgreen;
margin: 10px auto;
/*添加圆角*/
border-radius: 125px 125px 0 0;
position: relative;
}
/*使用伪元素添加眼睛*/
.an_header:before,
.an_header:after{
/*1.一定设置content属性*/
content: "";
/*2.如果需要设置宽度就应该转换其为块级元素,它默认是行级元素 float display position*/
position: absolute;
bottom: 40px;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #fff;
}
.an_header:before{
left: 70px;
}
.an_header:after{
right: 70px;
}
.an_body{
width: 250px;
height: 250px;
background-color: darkgreen;
border-radius: 0 0 20px 20px;
margin:0 auto;
position: relative;
}
/*手臂*/
.an_body:before,
.an_body:after{
content: "";
position: absolute;
top: 20px;
background-color: darkgreen;
width: 30px;
height: 180px;
border-radius: 10px;
}
.an_body:before{
left:-40px;
}
.an_body:after{
right:-40px;
}
.an_footer{
width: 250px;
height: 100px;
position: relative;
margin:0 auto;
/* background: #fff;*/
}
/*脚*/
.an_footer:before,
.an_footer:after{
content: "";
position: absolute;
top: 0;
background-color: darkgreen;
width: 30px;
height: 90px;
border-radius: 0 0 10px 10px;
}
.an_footer:before{
left: 50px;
}
.an_footer:after{
right: 50px;
}
</style>
</head>
<body>
<div class="content">
<div class="an_header"></div>
<div class="an_body"></div>
<div class="an_footer"></div>
</div>
</body>
</html>
7.边框阴影:box-shadow
box-shadow 属性向边框添加一个或多个阴影(添加多个时用逗号隔开)
语法:box-shadow:h v blur spread color inset;
说明:
- h:必需,允许负值;水平方向的偏移值
- v:必需,允许负值;垂直方向的偏移值
- blur:可选,默认0;模糊距离
- spread:可选 默认0;阴影的尺寸,扩展和收缩阴影的大小,值越大,阴影的扩散面积越大
- color:可选,默认黑色;颜色
- inset:可选,默认是外阴影;将外部阴影 (outset) 改为内部阴影
width: 200px; height: 200px display: block background-color: hsla(360,100%,50%,0 color: