`
zccst
  • 浏览: 3315659 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

[css3]知识点(自己总结版)

阅读更多
作者:zccst

CSS3是一个包含多方面的知识,主要分两大类,一类是在css2基层上改进的,另一类是完全新增的
批注:这里只是提纲,具体知识点可参考:http://zccst.iteye.com/blog/2192532

首先是媒体查询,这个是入口

@media screen and (min-width:400px)



一、在原有基础上改进和升级
1,盒模型
box-sizing: border-box / content-box

display: table / table-cell / box
    table/table-cell与vertical-align=midden用来布局垂直居中的(同top:50%,left:50%,translate:-50% -50%;)
    box相关的有display:box, box-pack(对齐),box-align,box-flex(子元素伸缩)

background: 
    background-clip(裁剪区域),
    background-origin(对齐参考区域),
    background-size(尺寸大小)

border-radius:   border-top-left-radius:100%;
border-shadow:
border-image:


2,文本、列表、表格等HTML元素增强
text-overflow:
text-shadow:



3,增强类选择器
[class=""]

nth-child(n)
:first
:last

::before
::after


二、全新的
1,线性渐变,用于增强网页效果,不需要背景图片了
gradient  n.  倾斜度, 升降率, 坡度  adj. 倾斜的;步行的
短语  pressure gradient 气压梯度  temperature gradient 温度梯度
(1)线性渐变
background: linear-gradient(direction, color-stop1, color-stop2, ...);
默认是从上到下:{height: 200px;background: -webkit-linear-gradient(red, blue);}
还可以从左到右:background: -webkit-linear-gradient(left, red , blue);
还可以对角线Diagonal:background: -webkit-linear-gradient(left top, red , blue);
旋转角度:background: -webkit-linear-gradient(180deg, red, blue);
background: -webkit-linear-gradient(red, green, blue);

http://www.w3cplus.com/css3/new-css3-linear-gradient.html

(2)圆形渐变



2,动画,用来取代Flash效果的
(1) transform  对元素进行旋转、缩放、移动或倾斜
例如:
transform: translate(50px,100px);//打开时已经到坐标(50px,100px)
批注:translate(0,-142%);//x轴不变,y轴向上提示自身高度的1.42倍。相当于把自己从地面站到距地面高度是你身高的1.42倍的位置。如果你的身高是两米,执行完translate(0, -142%),就站在2.82米高的位置。
rotate 沿X,Y,Z轴旋转,其中Z适合用来loading
scale(x,y) 缩放,沿X轴缩放x倍,沿Y轴缩放y倍。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

(2) transition  过渡是元素从一种样式逐渐改变为另一种的效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
例如:transition: width 2s;

(3) animation  , keyframes
-webkit-animation-name: refreshing;
-webkit-animation-duration: 0.7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-delay  在动画开始之前的延迟
animation-direction是否应该轮流反向播放动画。
@keyframes myfirst {
  from {background: red;}
  to {background: yellow;}
}


3,
分享到:
评论

相关推荐

    css3笔记知识点总结

    css3笔记知识点总结

    html+css知识点总结

    html+css知识点总结

    csscss知识点总结

    讲解一些刚入门的有关css的知识点,有助于我们能更容易的学懂css语言,例如表单制作,框架等等。

    HTML、CSS知识点总结

    html、css知识点,归纳整理。包括基本标签、样式、例子、运行环境等。欢迎大家讨论、更正,共同进步!

    css知识点总结包含xmind文件

    首先,网页版的CSS知识点总结可能是一个在线交互式的文档,通过浏览器访问,用户可以方便地浏览、搜索和学习各个CSS概念。这种形式便于动态交互和实时更新,适合网络教学和自我学习。 图片版CSS知识点总结通常是以...

    html+css+javascript知识点总结.docx

    HTML+CSS+JavaScript 知识点总结 HTML 基础知识: 1. HTML 是网页内容的载体,负责承载网页的内容。 2. HTML 标签不区分大小写,但建议使用小写。 3. 一个 HTML 文件由和两部分组成,用于定义文档的头部,用于承载...

    CSS知识点总结

    CSS知识点总结中包含了关于CSS3的基础概念和属性应用的详细说明。CSS,全称为层叠样式表(Cascading Style Sheets),是一种用于描述HTML或XML(包括各种XML方言,如SVG或XHTML)文档的样式的语言。下面将详细介绍...

    CSS知识点总结(脑图)

    从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长,为了满足页面设计者的要求,HTML添加...于是CSS便诞生了。

    完整详细CSS 面试知识点总结

    Css (层叠样式表)是种格式化网页的标准方式, 用于控制设置网页的样式,并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。...本资源完整详细的记录了CSS 面试知识点总结,有需要的朋友可以下载学习。

    CSS的知识点归纳总结

    CSS,全称为层叠样式表(Cascading Style Sheets),是一种用于描述网页呈现样式的标记语言,控制网页的布局、格式和颜色等。...通过上述对CSS知识点的归纳和总结,希望能帮助到大家更好地理解和运用CSS。

    html5和CSS知识点分享

    CSS3和html5的知识点总结,适合入门的朋友预览。是学习CSS3之前,预习的好知识点。

    前端 HTML+CSS+JavaScript 知识点总结

    前端 HTML+CSS+JavaScript 知识点总结

    完整详细CSS 面试知识点总结合集

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的...本资源是CSS 面试知识点总结合集,有需要的朋友可以下载学习。

    CSS3主要知识点总结+HTML5新标签(图文版).pdf

    【CSS3主要知识点总结】 CSS3是CSS的最新版本,引入了大量新的特性和改进,极大地增强了网页设计的灵活性和表现力。以下是CSS3的一些关键知识点: 1. **CSS属性编写顺序** 在编写CSS样式时,建议按照一定的顺序...

    html和css知识点总结.docx

    HTML 和 CSS 是构建网页的基本语言,它们在...这些只是 HTML 和 CSS 的一部分基础知识,实际应用中还涉及到更复杂的布局、响应式设计、浏览器兼容性以及性能优化等方面。持续学习和实践是成为优秀前端开发者的关键。

    pycharm中显示CSS提示的知识点总结

    我们用pycharm写CSS的时候,是不是苦于没有提示,那么pycharm中如何显示CSS提示呢?下面小编给大家分享一下。 首先点击左上角的file菜单,选择Setting 接着选择Editor下面的Inspections选项,如下图所示 然后在...

    HTML 5+css 基础知识点自我总结.xmind

    新手html css 基础知识总结

    HTML+CSS的入门知识点总结

    HTML+CSS入门知识点总结 HTML(HyperText Markup Language)是用于创建网页的标准标记语言,而CSS(Cascading Style Sheets)是用于控制网页样式的语言。本文将总结HTML+CSS的入门知识点,涵盖HTML的基本结构、CSS...

Global site tag (gtag.js) - Google Analytics