CSS3学习笔记

2018-06-24 01:06:44来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

第一课:
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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:30分钟搞定后台登录界面(103个后台PSD源文件、素材网站)

下一篇:div 显示与隐藏