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浮动

1. 浮动float属性可用的值
   
   • left 元素向左浮动
   • right 元素向右浮动
   • none 元素不浮动
   • inherit:从父级继承浮动属性
2. 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;//每列之间的宽度和颜色
}