CSS3复习

CSS3:模块化更新模式

发布时间:2001-5-23

属性:(1)文本:{

字体

          颜色:英文、16进制、完整写法、缩略写法、rgb:数字、百分比(0%-100%)

                    大小:百分比、数字+单位、英文、默认大小为16px====1em

            行高:数字+单位

          字重:数字、英文

          字间距:letter-spacing

          词间距:word-spacing

        }

(2)布局:display、float、overflow、position

      (3)盒模型:宽度/高度、边框、内边距、外边距

      border:宽度、样式、颜色、圆角、边框图片

    (4)动画:{

         变换:tranform

        简单动画:transition{

                简单动画的效果,必须触发后才执行:hover

                     确认能够执行过渡效果的属性名称,默认是所有

                动画的执行时间,动画执行的类型,(贝塞尔曲线),延迟的时间

                }

        复杂动画:{

             复杂的动画效果,默认都是自动执行

             动画名称,调用之前必须使用@keyframes先声明定义一个动画效果

             执行动画所花费的时间

             动画的类型,定义或者根据默认设置选择,默认值为:ease

             延迟时间(自定义)、循环次数(数字进行设置,默认值为1)、是否反向、动画结束后的状态

            }

       (5)字体图标:显示效果像个图片图标格式,其实是字体

             优点:提高网页性能,无限放大不矢真

       (6)媒体查询:@media,响应式页面

         CSS3扩展:960网格系统:PC端、静态页面

         bootstrap:移动设备优先、响应式页面        

         less:动态CSS 

时间: 2024-11-02 23:49:25

CSS3复习的相关文章

整理一下以前学习的Html+css3复习笔记

一.html5新特性 常用语义标签:nav footer header section mark 功能标签 video audio iframe canvas(画布和绘图功能) input新type:url/number/range/Date(date, month, week, time等)/search/color 二.css3 1 边框 border-radius:不同的赋值方法; box-shadow:10px 10px 5px red; border-image:赋值内容; borde

复习css3的部分属性

利用css3实现一个半月形的西瓜,利用queue实现吃西瓜的动画.练习例子 css3: 1.圆角 border-radius:100%; border-top-left-radius:5px; 2.变形 2D旋转:transform: rotate(25deg);(正角度为顺时针,负角度为逆时针). 3D旋转:transform: rotateX(25deg);-----效果为div的高度变小,90deg时高度为0. 3D旋转:transform: rotateY(25deg);-----效果为

复习css3的部分属性和jquery的queue方法

利用css3实现一个半月形的西瓜,利用queue实现吃西瓜的动画.练习例子 css3: 1.圆角 border-radius:100%; border-top-left-radius:5px; 2.变形 2D旋转:transform: rotate(25deg);(正角度为顺时针,负角度为逆时针). 3D旋转:transform: rotateX(25deg);-----效果为div的高度变小,90deg时高度为0. 3D旋转:transform: rotateY(25deg);-----效果为

CSS3主要知识点复习总结+HTML5新增标签

1.显示属性,自身属性,文本属性 推荐样式编写顺序 1 显示属性 :display,list-style,position,float,clear [注意按照横着的顺序] 2 自身属性(合模型):width,height,margin,padding,border,background(第3点)     3 背景:background     4 行高:line-height     5 文本属性:color,font,text-decoration,text-align,vertical-al

css3快速复习

选择器边框.阴影 border-radius: 50%; 设置正圆形背景的改变CSS3重要的新东西: ● transition 过度,让一个元素从一个样式,变为另一个样式,不再是干蹦了,而是有动画,均匀的完成. transition属性要写给元素的原来样式中, transition:要过度的css属性 时长 是否匀速 延迟; 比如:transition:all 1s ease 0s;如果要匀速,写linear transition属性什么时候能够触发?? :hover可以触发过渡 JS直接控制元

使用HTML5和CSS3开发电子商务网站——复习

目录: 第一章:HTML5基础 1.1 HTML5文件的基本结构和W3C标准 1.2 网页的基本标签 1.3 图像标签 1.4 超链接标签 第二章:列表.表格与媒体元素 2.1 列表 2.2 表格 2.3 HTML5的媒体元素 2.4 HTML5的结构元素 2.5 <iframe>框架 第三章:表单 3.1 表单概述 3.2 表单的高级应用 3.3 表单的初级验证 第四章:初识CSS3 4.1 CSS概述 4.2 CSS3的基本语法 4.3 在HTML中引入CSS样式 4.4 CSS3的选择器

那些熟悉又陌生的 css2、css3 样式,持续复习

initial关键字:    除了 Internet Explorer,其他的主流浏览器都支持 initial 关键字. Opera 15 之前的版本不支持 initial 关键字. initial 关键字用于设置 CSS 属性为它的默认值. initial 关键字可用于任何 HTML 元素上的任何 CSS 属性. overflow : 所有主流浏览器都支持 overflow 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit&quo

CSS3秘笈复习:第十一章

1.text-align与vertical-align: text-align控制水平方向的定位,关键字是left.right.center和justify. vertical-align控制垂直方向的定位,关键字是top.baseline.middle或bottom. 两者的区别是,vertical-align不会被继承,因此只能直接用到<th>和<td>标签上. 2.控制表格单元之间的空格:CSS提供了border-spacing属性来控制这条间隙.将该属性应用到表格本身,并且

CSS3秘笈复习:十三章&amp;十四章&amp;十五章&amp;十六章&amp;十七章

第十三章 1.在使用浮动时,源代码的顺序非常重要.浮动元素的HTML必须处在要包围它的元素的HTML之前. 2.清楚浮动: (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮动元素.关键字:left.right或both. (2).浮动外围元素:让包含浮动元素的<div>也浮动.选择这种方法一定要在浮动容器后面的任何元素中添加一个clear属性,确保浮动元素落到容器的下方. (3).利用overflow : hidden.另一种常见的方法是在外围的样式中添加以下属性: