CSS3学习笔记
第一课：background-attachment:fixed 背景图片不滚动background-image:url(""); 默认允许重复background-repeat:no-repeat repeat repeat-x repeat-ybackground-position:right;//==right和center background-position：0px 0px 更多 也可百分比
CSS3背景background-size:background-originbackground-clip
第二课：文本text-indent:首行缩进text-transform:capitalize;首字母大写 lowercase全部小写 uppercase;全部大写
text-shadow:5px 5px 5px #ffo 影子距离左上距离 清晰度 颜色
text-wrap:normal; 自动换行
第三课：字体font-familyfont-sizefont-weight
CSS3的改进@font-face{ font-family:自己命名 src:url();}下一步直接引用
第四课：链接a:linka:visiteda:hovera:active
text-decoration:none;background-color: 链接的背景颜色
第五课：列表list-style:list-style-image:url("")list-style-postion:inside;往里边缘走list-style-position:outside;往外边缘走border-collapse:collapse;合并边框
第六课：CSS轮廓outlineoutline-coloroutline-style:groove dotted... 突出outline-width：粗细
第七课：基础语法如果值大于一个单词 加""
第八课：盒子模型宽高是内容部分的；
边框的样式border-style:double;dotted
边框的单边样式border-top-style：
border-width:border-top-width:单边框宽度border-color:边框颜色
border-radius:圆角边框box-shadow:边框阴影border-image:边框图片
外边距：接受任何长度单位和百分比
第九课：定位position:relative 相对布局 z-index absolute 绝对布局 不占位置 z-index fixed 相对浏览器 static 偏移量不起作用 z-index:1 谁的值大覆盖在上面
第九课：浮动 float： inherit 从父级继承浮动属性
clear:去掉浮动属性
height:auto 自适应
第十课：选择器
a.class {} .class.class{}
id选择器 id选择器不能结合使用 js需要用到id
[title]{}属性选择器 [title=""]{} [title~=""]{}根据部分属性值，包含单词
a[href=""]{}
子元素选择器 h1>strong{color:red} li+li{} 相邻兄弟元素 可选择紧接 在另一个元素后的元素，且二者有相同的父元素
第十一课： line-height:normal 百分比
max-width 满足单词不拆分 换行 min-width
cursor：auto 默认的 cell 等 设置鼠标指针
display 列表里 横向还是竖向显示 display:inline 一行
visibility：hidden visible 可见效果
第十二课：导航栏a:linked,a:visited{text-decoration:none;font-weight:bold;}a:active,a:hover{backgroundcolor:red;}垂直导航栏
水平导航栏li{display:inline;}
图片透明度 opacity:0 完全透明 1完全不透明
第十三课：CSS动画
2D 3D转换：transform: 浏览器问题注意2D转换方法：translate()transform:translate(100px,100px;)第一个x轴的移动距离，第二y-webkit-transform:translate(100px,100px);chrome safary浏览器支持-ms-transform:translate(100px,100px);ie浏览器支持-o-transform:translate(100px,100px);opera浏览器支持-moz-transform:translate(100px,100px);Firefox浏览器支持
rotate:()旋转transform:rotate(180deg);scale()缩放transform:scale(2,1)第一个为宽 第二高 倍数skew()倾斜transform:skew(20deg,20deg)第一个x轴 第二个y轴matrix()矩阵效果
3D转换方法：rotateXtransform:rotateX(120deg)rotateY
第十四课：动画过渡transitiontransition:width 2s,height 2s,transform 2s;-webkit-transition:width 2s,height 2s,-webkit-transform 2s;
transition-delay:2s;延时执行
第十五课：动画动画时常动画名称animation:anim 5s;-webkit-animation:anim 5s;
@keyframes anim{ 0%{background:red;left:0px;top:0px} 25%{background:blue;left:2px;top:0px}}@-webkit-keyframes anim{ 0%{background:red;left:0px;top:0px} 25%{background:blue;left:2px;top:0px}}
第十六课：多列colume-count:3;-webkit-colume-count:3; 3列colume-gap:50px; 间距colume-rule:5px outset #FF0000; 间距
第十七课:瀑布流colume-width:250px;单列宽///