CSS3学习笔记

第一课：
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-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转换方法：
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-width:250px;单列宽///

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有