第一课:
background-attachment:fixed 背景图片不滚动
background-image:url(""); 默认允许重复
background-repeat:no-repeat repeat repeat-x repeat-y
background-position:right;//==right和center
background-position:0px 0px 更多 也可百分比
CSS3背景
background-size:
background-origin
background-clip
第二课:文本
text-indent:首行缩进
text-transform:capitalize;首字母大写 lowercase全部小写
uppercase;全部大写
text-shadow:5px 5px 5px #ffo 影子距离左上距离
清晰度 颜色
text-wrap:normal; 自动换行
第三课:字体
font-family
font-size
font-weight
CSS3的改进
@font-face{
font-family:自己命名
src:url();
}
下一步直接引用
第四课:链接
a:link
a:visited
a:hover
a:active
text-decoration:none;
background-color: 链接的背景颜色
第五课:列表
list-style:
list-style-image:url("")
list-style-postion:inside;往里边缘走
list-style-position:outside;往外边缘走
border-collapse:collapse;合并边框
第六课:CSS轮廓
outline
outline-color
outline-style:groove dotted... 突出
outline-width:粗细
第七课:基础语法
如果值大于一个单词 加""
第八课:盒子模型
宽高是内容部分的;
边框的样式
border-style:double;dotted
边框的单边样式
border-top-style:
border-
border-top-单边框宽度
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转换方法:
rotateX
transform:rotateX(120deg)
rotateY
第十四课:动画过渡transition
transition: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-250px;单列宽///