Css3 基础知识

Css3 学习笔记

1.背景

属性： background-…

attachment 背景图像是否固定或者随页面的其余部分滚动

color 设置元素的背景颜色

image 把图片设置为背景 url(“1.jpg”);

position 设置背景图片的额其实位置

repeat 设置背景图片是否及如何重复

2.文本

属性：

color 文本颜色

direction 文本方向

line_height 行高

letter-spacing 字符间距

text-algin 对齐元素之中的文本

text-decpration 向文本中添加修饰

text-indent 首行缩进

text-transform 元素中的字母

unicode-bidi 设置文本方向

white-space 元素中空白的处理方式

word-spacing 字间距

3.链接

链接的四种状态：

a:link{
color:#000000;//未被点击之前
}
a:visited{
color: aqua;//点击之后返回
}
a:hover{
color: blue;//鼠标放到上面
}
a:active{
color: yellow;//正在点击时
}

去掉下划线：text-decoration：none

4.列表

list-style 简写列表项

list-style-image 列表项图像

list-style_position 列表标志位置

list-style-type 列表类型

5.表格

6.派生选择器

1.定义：通过依据元素在其位置的上下文关系来定义样式

2.用法：外层标签 内层标签{定义你想要的样式;}

7.id选择器

1.定义：可以为标有id的html元素指定特定的样式，并使用“#” 来定义

8.类选择器

1.以一个点显示，用法简单

9.属性选择器

1.低版本不支持

<!--派生选择器-->
<p title="pclass">
<strong> p标签的样式</strong>
</p>
<p title="p">
<strong> p标签的样式</strong>
</p>
css属性和值选择器
[title=p]{
color:red;
}

10.盒子模型

标准盒子模型图

1.内边距 padding

内边距在content外，边框内，总共有5个属性

padding
padding-bottom
padding-top
padding-left
padding-right

2.边框 border

border-style :定义了10种不同的非继承样式，包括none

border-style:边框的样式
border-bottom-style
border-top-style
border-left-style
border-right-style
border-width：边框的宽度
border-color：边框的颜色
以上两种同样有四个属性
border-radius：圆角边框
box-shadow：边框阴影
border-image：边框图片

3.外边距 margin

围绕在内容边框的区域就是外边距，外边距默认为透明区域，外边距接受任何长度单位，百分数值

margin
margin-bottom
margin-top
margin-left
margin-right

4.外边距合并

合并就是一个叠加的概念

11.Css定位

1.定义：改变元素在页面上的位置

2.定位机制：

普通流：元素按照其在Html中的位置顺序决定排布的过程

浮动：

绝对布局：

3.定位的属性：

position 放在...位置上：
static，relative，absolute，fixed
top 向上偏移量
left ...
right  ...
bottom 向下偏移量
overflow 溢出其区域发生的事情
clip 显示的形状
vertical-align垂直对齐方式
z-index 设置元素的堆叠顺序

12.Css浮动

浮动float属性可用的值

left 元素向左浮动

right 元素向右浮动

none 元素不浮动

inherit:从父级继承浮动属性

clear属性

去掉浮动属性（包括继承来的属性）

clear属性值:

(1). left right 去除元素向左向右浮动

(2). both 二者均去除

(3) inherit:从父级继承clear的值

13.Css的动画

动画设置完毕后必须要设置相应的浏览器设置，否则不生效！

1. 2D效果

/*平移*/
.div02{
transform: translate(100px,100px);
-webkit-transform: translate(200px,100px);/*safari chrome*/
-ms-transform:translate(200px,100px);/*IE*/
-o-transform:translate(200px,100px);/*opera*/
-moz-transform:translate(200px,100px);/*FireFox*/
}
/*旋转*/
.div02{
transform: rotate(180deg);
-webkit-transform: rotate(240deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
-moz-transform:rotate(200deg);
}
/*缩放*/
.div02 {
transform: scale(1, 2);
-webkit-transform: scale(2, 2);
-ms-transform: scale(2, 2);
-o-transform: scale(1, 2);
-moz-transform: scale(2, 2);
}
/*倾斜*/
.div02{
transform: skew(20deg,20deg);
-webkit-transform: skew(20deg,20deg);
-ms-transform: skew(20deg,20deg);
-o-transform: skew(20deg,20deg);
-moz-transform:skew(20deg,20deg);
}

2. 3D效果

.div02{
transform: rotateX(120deg);
transform: rotateY(120deg);
-webkit-transform:  rotateX(120deg);
-ms-transform:  rotateX(120deg);
-o-transform:  rotateX(120deg);
-moz-transform: rotateX(120deg);
}

3. 动画的过渡效果：实现鼠标放置上去后div旋转变化的同时变大为原来的2倍

div{
width: 100px;
height: 100px;
background-color: blue;
/*宽度变化时间为2s，高度变化时间为2s，整个动画变化的时间为2s*/
-webkit-transition: width 2s,height 2s,-webkit-transform 2s;
transition: width 2s,height 2s,transform 2s;
transition-delay: 2s;/*延时过渡效果*/
}
/*当鼠标放到这个区域是开始执行*/
div:hover{
width: 200px;
height: 200px;
transform: rotate(360deg);/*旋转360度*/
-webkit-transform:rotate(360deg) ;
}

4. Css3的动画：需要遵循@keyframes规则：时长、名称

div{
width: 100px;
height: 100px;
background-color: red;
position: relative;
<!--整个动画持续5s，且重复执行-->
animation: anim 5s infinite alternate;
-webkit-animation: anim 5s infinite alternate;
}
@keyframes anim{
0%{
background: red;
left: 0px;
top:0px;
}
25%{
background:blue;
left: 200px;
top: 0px;
}
50%{
background:yellow;
left: 200px;
top: 200px;
}
75%{
background: #00ff00;
left: 0px;
top: 200px;
}
100%{
background: #ff00ff;
left: 0px;
top: 0px;
}
}
@-webkit-keyframes anim {
0%{
background: red;
left: 0px;
top:0px;
}
25%{
background:blue;
left: 200px;
top: 0px;
}
50%{
background:yellow;
left: 200px;
top: 200px;
}
75%{
background: #00ff00;
left: 0px;
top: 200px;
}
100%{
background: #ff00ff;
left: 0px;
top: 0px;
}
}

5. 动画-多列

.div1{
-webkit-column-count:3;//总共分为几个列
-moz-column-count:3;
column-count:3;
-webkit-column-gap:30px;//每列之间间隔的距离
-moz-column-gap:30px;
column-gap:30px;;
column-rule: 5px outset #ff00ff;//每列之间的宽度和颜色
}