CSS3入门

1.入门

先看一个例子

h1 {
	/* 这是注释*/
	color:red;
	font-weight:bold;
	font-style:italit;
}

标签名{
	属性：属性值；
}

1
2
3
4
5
6
7
8
9
10
11

内嵌式：写在标签内

外链式：单独存为.css文件，用link引入他。

2.选择器

class选择器，用”点“

.warning{
}
.spec{
}
"warning spe">可以用空格隔开，以便被多个选择器选中 
1
2
3
4
5

原子类

.fs12{
	font-size:12px;
}
.fs14{
	font-size:14px;
}
.fs16{
	font-size:16px;
}
"fs18 color-green">

1
2
3
4
5
6
7
8
9
10
11

2.1伪类
激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持 CSS 的浏览器中以不同的方式显示出来

a:link {
	/* 未访问的链接 */
}
a:visited {
	/* 已访问的链接 */
}
a:hover {
	/* 当有鼠标悬停在链接上 */
}
a:active {
/* 点击鼠标不松手的效果 */
}
1
2
3
4
5
6
7
8
9
10
11
12

新增伪类
:empty 表示选择空元素，空元素是指标签里面没有内容的元素。
:focus 表示选择当前获得焦点的表单元素
:enable 表示选择当前有效的表单元素。所谓有效的表单元素，就是标签上没有添加disabled这个属性的表单元素
:diable表示选择当前无效的表单元素。所谓无效的表单元素，就是指在表单元素上面添加了disabled属性，此时这个表单就是无效的
:checked

	div:empty{
		color:red;
	}
	input:focus{
		color:yellow;
	}
	.inputClass:enable{
		color:green;
	}
1
2
3
4
5
6
7
8
9

2.2复合选择器

• 后代选择器 ：用空格表示后代

.box p{
	color:red;
}

 选择类名为box 后代为p的标签(后代不一定是儿子）
1
2
3
4
5

<div class = "box">
<p>被选中的内容p>
div>
<p>不被选中p>
1
2
3
4

• 并集选择器 ：用逗号

2.2标签选择器和id选择器
标签选择器：常用于标签的初始化。

ul {
	list-style:none;
}
a {
	text-decoration: none;
}
1
2
3
4
5
6

id唯一，id选择器用#

#para1 {
	color: red;
}

1
2
3
4

2.3层叠性和样式计算
层叠性的冲突
id的个数 > class的个数 > 标签的个数
按正则比较大小
（0，0，0）

p {
	color:red;
}
#para1{
	color:blue;
}
.spec{
	color:green;
}


1
2
3
4
5
6
7
8
9
10
11

提升权重

p{
	color: red !important;
}
1
2
3

2.4 伪元素
用双冒号表示，表示虚拟动态创建的元素。

	a::before{
		content:"前缀“；
	}
	a::after{
		content:"后缀“；
	}
	a::selection{
		bgc: red;
		/* 用鼠标选中时颜色变红 */
	}

1
2
3
4
5
6
7
8
9
10
11

2.5属性选择器
alt属性是对图片的描述

2.6序号选择器

2.7元素关系选择器

3 文本和字体属性

• color
• font-开头的
• list-开头的
• text-开头的
• line-开头的

重叠选中就近原则,继承不如直接选中
段落和行相关属性
text-indent属性：首行文本内容之前的缩进量。
line-height属性：行高。
行高 = 盒子高 单行文本垂直居中
text-align:center 水平居中

p{
	text-indent: 2em;
	line-height: 1.5
}
1
2
3
4

font合写属性

p{
	font: 20px/1.5 Arial
	/* 字号/行高 字体 */
}
1
2
3
4

字体属性
font-family
后面的是后备字体，后面能用用后面，不然就用前面。
一般英文字体在前面

p{
	font-family:serif, "Times New Roman", "微软雅黑";
}
1
2
3

文本属性

4.盒子模型

== 所有标签都可以看成矩形盒子==，由width、height、 border、 margin构成

margin的塌陷现象
竖直有塌陷，水平没有
默认margin清除

	*{
		margin: 0;
		padding: 0;
	}
body, ul, p{
	margin:0;
	padding:0;
}
1
2
3
4
5
6
7
8

盒子的水平居中margin:auto

.bos{
	margin: 0 auto;
}
1
2
3

盒模型计算

box-sizing:border-box;属性
添加box-sizing属性后，盒子的height、width就变成了实际宽高，padding、border内缩。

.bos{
	box-sizing:border-box;
	width:200px;
	height:200px;
	border:10px;
	padding:10px;
}
实际大小：160 X 160


1
2
3
4
5
6
7
8
9
10

display属性

行内块：img标签input标签，既能并排显示，也能设置宽高。

行内元素和块级元素的相互转换：

• display:block;将元素转换为块级元素
• display:inline;将元素转为行内元素
• display:inline-block;将元素转为行内块

a{
	display:blocl:
}
好几个超链接垂直显示。
1
2
3
4

元素的隐藏

display:none; 彻底放弃元素
visibility:hidden;元素不可见，但是位置保留

5.浮动和定位

浮动的概念:可以用来实现并排。

并排的盒子都要设置浮动。父盒子要有足够的宽度，不然子盒子会掉下去。
浮动的顺序贴靠特性：子盒子会按顺序贴靠，如果没有足够空间，就会寻找再前一个兄弟元素。


先贴2，不够，再贴1.
浮动的元素一定能设置宽高。
浮动的元素不再区分块级、行内元素，一律能设置宽高。
右浮动：float:right;

使用浮动实现网页布局

• 垂直显示的盒子，不要设置浮动，只有并排显示的盒子才设置浮动。
• 不要节约盒子

BFC概念:页面上的一个隔离的独立容器，容器内的子元素不会影响到外面的元素。

• 方法四：overflow:hidden;
  
  
  
  定位
• 相对定位:盒子可以相对自己原来的位置进行调整。postion:relative

	.box1{
		position:relative;
		top:100px;
		left:100px;
	}
向右下移动100px;
1
2
3
4
5
6

相对定位用来微调位置。
导航栏小项目

• 绝对定位：盒子可以在浏览器中以坐标进行位置精确描述，拥有自己的绝对位置。
  position:absolute
  
  
  
  
  

	div{
		position: relative;
		margin: 40px auto;
	}
	p{
		width:80px;
		height:80px;
		bgc:red;
		postion: absolute;
		top: 50%;
		left:50;
		margin-top: -40px;
		margin-left: -40px;
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

堆叠顺序z-index属性
数值大的压住数值小的

• 固定定位：不管页面如何卷动，它永远固定在那里。position:fixed
  

6.边框与圆角

border属性

	p{
		border: 1px solid red;
	}
	/* 线宽 线型 颜色   */
1
2
3
4

线型： dotted 、 solid 、 dashed

小属性方便你层叠大属性

四个方向的边框


去掉边框
border-left: none;
利用边框制作三角形

.box1{
	width:0px;
	height:0px;
	border: 30px solid transparent;
	border-top-color: red;
	}
1
2
3
4
5
6

盒子阴影

box-shadow属性

7 背景与渐变

background-image属性
用来设置背景图片，图片路径要写到url（）括号内。

会被拉伸

backgroud-size属性




backgroud-repeat: no-repeat; 留白经常和contain一起用
background-clip属性背景裁切
以下三个常用值：

背景固定

	.box{
		background-position: center center;
		/* 这个非常常用，可以把图片放在中间位置 */
	}
1
2
3
4

css精灵

css精灵可以减少http请求数， 加快网页显示速度。缺点：不方便测量，后期改动麻烦。

线性渐变：

径向渐变：

8.变形

	transform-origin:0 0;
	transform: rotate(90deg);
	/* 以坐上角为中心旋转90度 */
1
2
3

.pic:hover{
	transform: scale(2);
}
/* 鼠标一碰就放大 */
1
2
3
4

IE6相对定位
IE9位移变形

制作一个正方体

<style>
.box {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            perspective: 300px;
            position: relative;
        }

        .box p {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }

        .box p:nth-child(1) {
            background-color: rgba(219, 56, 211, 0.486);
            /* 前面 */
            transform: translateZ(100px);
        }

        .box p:nth-child(2) {
            background-color: rgba(42, 128, 199, 0.486);
            /* 顶面 */
            transform: rotateX(90deg) translateZ(100px);
        }

        .box p:nth-child(3) {
            background-color: rgba(56, 219, 83, 0.486);
            /* 背面 */
            transform: rotateX(180deg) translateZ(100px);
        }

        .box p:nth-child(4) {
            background-color: rgba(213, 216, 32, 0.486);
            /* 底面 */
            transform: rotateX(-90deg) translateZ(100px);
        }

        .box p:nth-child(5) {
            background-color: rgba(236, 82, 102, 0.486);
            /* 侧面 */
            transform: rotateY(90deg) translateZ(100px);
        }

        .box p:nth-child(6) {
            background-color: rgba(119, 17, 236, 0.486);
            /* 侧面 */
            transform: rotateY(-90deg) translateZ(100px);
        }
    style>
head>

<body>
    <div class="box">
        <p>p>
        <p>p>
        <p>p>
        <p>p>
        <p>p>
        <p>p>
    div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

9.过渡与动画

.box1{
	width:300px;
	height: 200px;
	bgc:orange;
	transition: width 5s linear 0s;
	}
.box1:hover{
	width:800px;
	}
1
2
3
4
5
6
7
8
9

				2D动画过度 
 .box{
 	width:200px;
 	height: 100px;
 	bgc:orange;
 	transition:tranform 2s linear 0s;
 	}
 .box:hover{
 	tranform: rotate(360deg) scale(1.5);
 	}
1
2
3
4
5
6
7
8
9
10

超级链接不从父亲继承颜色