当前位置:首页 >> 其它课程 >>

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


总结+HTML5 新增标签

目录: 1、CSS 属性编写顺序 2、CSS3 属性(内核前缀) 3、position 相对/绝对定位 4、overflow:scroll 等的区别 5、display 属性应用 6、盒模型计算方法和 Bug 7、CSS3 新增加的结构标签 8、蒙版,变形,过渡,动画等 CSS3 效果

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-align,white-space, content 6 其他 cursor/z-index/zoom 7 css3 属性:trandsform/transition/animation/box-shadow/border-radius 8 链接的样式请严格按照如下顺序添加: a:link-->a:visited-->a:hover-->a:active(LoVeHAte) * 书写的 CSS 代码的时候请注意按照显示 自身 文本的书写顺序来书写!
分享 2014-4-1 HTML5 上课笔记

2、CSS3 属性(内核前缀)

Mozilla 内核 WebKit 内核 Opera 内核 Trident 内核

css 前缀-moz; css 前缀-webkit ;(谷歌已换用 blink 内核) css 前缀 -o ; (欧朋已换用 blink 内核) css 前缀 -ms ;

CSS3 新属性:

1)边框 ① border-colors
相关属性 border-top-colors border-right-colors border-bottom-colors border-left-colors

② border-image



stretch 拉伸方式来填充边框背景图 | repeat 平铺 图片碰到边界时超出截断 | round 平铺,图片会工具边框的尺寸动态调整图片大小直至刚 好铺满整个边框

<style> .wrap { height: 100px; width: 100px; border: 20px solid; /*border-image: url('border-image.png') 30 30 repeated;简写形式*/ border-image: url('border-image2.png') repeat; border-image-slice:30 30; text-align: center; } </style>

③ border-radius 相关属性 border-radius: 1-4 length | % / 1 border-radius 数值为合模型的一半就变成圆 , 记住: 不是相对于合模型的 width (如: 965x1611) , 而是整个框才是 <style> .wrap { height: 500px;

width: 500px; border: 50px solid; border-radius: 250px; } </style>

结果就显示的不是正圆,所以 border-radius: 300px; 才能显示正圆,加上 border 的值

'/'前面表示水平方向,后面表示垂直方向。每个方向都可以用 1~4 个值,缩写的规则遵循?左上开始, 顺时针旋转/ 只能写一个 2)阴影

1.文本阴影 text-shadow(不需要判断浏览器)

text-shadow:2px 3px 2px #000; 文字阴影的结构是按照以下顺序:X--偏移,Y--偏移,模糊,和颜色; text-shadow:-2px -3px 2px rgba(0, 118, 160, .25); 设置为负值,X -偏移阴影转移到左侧。设置为负值偏移 Y -转移阴影顶端。颜色可以用 RGBA 值。 text-shadow:0px 1px 0px #fff,0px -p1x 0px #000; 文字阴影的列表(以逗号分隔),1px 的顶部和底部 1px 的阴影。
text-shadow:水平偏移量 垂直偏移量 阴影模糊值 颜色, 水平偏移量 垂直偏移量 阴影模糊值 颜色;(多个阴影用,隔开) eg: .con2 p { font-size: 90px; color:#fff;

text-shadow: -1px -1px 1px rgba(0,0,255,1), -2px -2px 1px rgba(0,0,254,0.5), -6px -6px 10px rgba(0,0,252,0.2); }

2.盒阴影 box-shadow(不需要判断浏览器)

盒阴影的使用语法结构与文本阴影类似,如 box-shadow: 5px 5px 5px rgba(255,15,255,0.5); 但是,盒阴影多了个属性:外延值,inset, 如 box-shadow: 5px 5px 25px rgba(0,0,255,0.5) inset;

补充个知识点: background:transparent; 等 价 background:rgba(0,0,0,0); color: transparent; 等价 color:rgba(0,0,0,0);

3)背景图 1.CSS3 蒙版(需要判断浏览器)

实现上面的效果,需要用到一张蒙版图,注意这张图中间不透明,跟平时 PS 设计蒙版不一样,

不透明的区域显示出来的效果就变为要的效果

代码: .wrap img{ height: 160px; width: 160px; background: #F00; background: url(teacher_li.jpg); -webkit-mask-image:url(pro_pho_show_pic.png); -webkit-mask-position:50% 50%; -webkit-mask-repeat:no-repeat; } 缩写:-webkit-mask:url(pro_pho_show_pic.png) 50% 50% no-repeat; -webkit-mask-clip 蒙版裁剪位置 -webkit-mask-origin 蒙版原点位置 蒙版是能够应用渐变的。 但是因为浏览器兼容的问题比较严重, 通常不使用渐变作为蒙版的属性值, 而是使用有?透明度梯度?的图片替代掉渐变,产生同样的功能。

2. 多重背景

background-image: url(teacher_li.jpg),url(teacher_li.jpg);

3. CSS3 渐变 css3 实现背景颜色线性渐变 div{ width:500px; border:1px solid #FA0; background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00); /*横向渐变*/ background:-webkit-gradient-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00); /*纵向渐变*/ -webkit-background-clip:text; /*只有 webkit 内核支持 text 的剪切模式*/ color:transparent; } 4. CSS3 倒影 -webkit-box-reflect
1.方向 -webkit-box-reflect: 2.距离 below/above/left/right

3.透明度

-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%, rgba(0,0,0,0.6) 100%)

★4)CSS3 变形 transform

二,三维变形的变形方式:四种方法 旋转——缩放——平移——扭曲

旋转(1 个值) rotate rotate(30deg)

缩放(1 个值) scale

平移(2 个值) translate 针对 2D 平面平移

扭曲(2 个值) skew

可以取值正, translate(x,y) 负,小数

rotateX(30deg); 缩放的 rotateY(30deg); 值,X 为负时, rotateZ(30deg); 字体先沿 Y 轴 翻转再缩放 缩放的 值,Y 为负时, 字体先沿 X 轴 翻转再缩放
旋转:-webkit-transform: rotate(120deg); 平移:-webkit-transform: translate(20px, 10px);
★①

translateX

translateY

skew(30deg,15deg); skewX(30deg); skewY(15deg);

-moz-transform: translateX(20px); ④scale(-1,-1);等价 scale(-1);

缩放:-webkit-transform: scale(1.1,0.5); X 方向缩放 1.1 倍,Y 方向缩放 0.5 倍 scale(1,1); ② scale(-1,1); ③scale(1,-1);

① transform:变形种类;的名称(对应的属性值),多个种类之间使用空格分隔。一个()中的属性值之间用逗号 分隔。 ② 二维平面的旋转,旋转围绕点进行,而旋转正方向默认为顺时针方向 ③ 默认的旋转中心就是这个块的正中心,可以通过 transform-origin 去改变旋转中心,通过 left top、数值、百 分比改变旋转中心 ④ scale(<number>[, <number>]);表示使元素在 X 轴和 Y 轴同时缩放。<number>表示缩放倍数,可以是正数,负数 scaleX(<number>):表示只在 X 轴(水平方向)缩放元素。 scaleY(<number>):表示只在 Y 轴(垂直方向)缩放元素。 和小数。 负数是先翻转元素然后再缩放。 包含两个参数, 如果缺少第二个参数, 那么第二个参数的值等于第一个参数。

scaleZ(<number>):表示只在 Z 轴缩放元素。前提是元素本身或者元素的父元素设定了透视值(perspective: 100;) 5.视角:-webkit-persepective:0; 0 没设置 (值) 800px;
属性。

通常在 body 元素下
Chrome 和 Safari 支持替代的 -webkit-perspective

CSS3 perspective 属性: 目前浏览器都不支持 perspective 属性。

6. backface-visibility: visible | hidden; 定义当元素不面向屏幕时是否可见。可用在扑克牌旋转上。

【W3CSchool 资料】
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。 translate3d(x,y,z) translateX(x) translateY(y) translateZ(z) scale3d(x,y,z) scaleX(x) scaleY(y) scaleZ(z) rotate3d(x,y,z,angle) rotateX(angle) rotateY(angle) rotateZ(angle) perspective(n) 定义 3D 转化。 定义 3D 转化,仅使用用于 X 轴的值。 定义 3D 转化,仅使用用于 Y 轴的值。 定义 3D 转化,仅使用用于 Z 轴的值。 定义 3D 缩放转换。 定义 3D 缩放转换,通过给定一个 X 轴的值。 定义 3D 缩放转换,通过给定一个 Y 轴的值。 定义 3D 缩放转换,通过给定一个 Z 轴的值。 定义 3D 旋转。 定义沿 X 轴的 3D 旋转。 定义沿 Y 轴的 3D 旋转。 定义沿 Z 轴的 3D 旋转。 定义 3D 转换元素的透视视图。

★ 7)CSS3 过渡

trabsition

参与过渡的属性、过渡时间、过渡方式(动画类型) 延迟时间 【需要写前缀】 一般情况下, transition 添加在基本效果上, 而不是 hover 效果中。 css 原状态和 hover 状态设置为两种不同的样式,然后通过 CSS3 过渡进行‘渐变’处理 padding、color 所有浏览器都支持渐变
transition 属性是一个简写属性,用于设置四个过渡属性: ? transition-property 哪个属性实现过渡如:width ? transition-duration 完成过渡效果需要多少秒/毫秒 ? transition-timing-function 速度效果的运动曲线, 如 linear 、 ase-in 、 ease 、 ease-out 、 ease-in-out 、 cube-bezier(贝塞尔曲线) ? transition-delay 规定过渡开始前等待几秒

简写:transition:width 2s ease;

★ 8)CSS3 动画

animation 表示无限循环

animation 基本参数与 transition 完全相同,第一个参数表示的是调用哪个动画 infinite

.wrap { height:100px; margin:10px; -webkit-animation:colorChange 10s linear 1.5s infinite; } @-webkit-keyframes colorChange { 0%{ background:#f00;} 10%{ background:#ff0;} }

animation 属性值:
@keyframes animation animation-name animation-duration animation-timing-function 规定动画。 所有动画属性的简写属性,除了 animation-play-state 属性。 规定 @keyframes 动画的名称。 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 规定动画的速度曲线。默认是 "ease"。 规定动画何时开始。默认是 0。 animation-iteration-count animation-direction animation-play-state animation-fill-mode 规定动画被播放的次数。默认是 1。 规定动画是否在下一周期逆向地播放。默认是 "normal" 。逆向

alternate
规定动画是否正在运行或暂停。默认是 "running",暂停时 pause 规定对象动画时间之外的状态。

★CSS3 过渡与动画的区别:

transition animation 1、animation 多两个参数,循环和动画的方式 2、transition 不能自行触发,通过 hover 等动作或结合 JS 进行触发。anmiation 可 以自行运行。 3、transition 可控性较弱,只能指定起始状态和结束状态,而 animation 可以定义多 个关键帧。 4、动画在运行结束之后,需要回到初始状态 5、transition 的作用,可以用一句话来概括,‘平滑’改变 CSS 样式

9.HTML5 新增加标签:

优势:① 语义性好 少类名 ②

有利于 SEO

代码少

文档易读 、搜索引擎能够更好的理解页面中的内容、作为开发者,能够更快更准确的搜索到信息

①<新增标签> article 定义文章 代表文档、页面或者应用程序中独立、完整、可以独自被外部引用的内容 header 定义页眉 figure 一组媒体对象的以及文字 figcaption 定义 figure 的标题 footer 定义页脚 vidio 定义视频 audio 定义音频 embed 插入各种多媒体 progress 显示 js 中耗费的函数进程 aside 定义文章的侧边栏 nav 定义导航 section 定义文档中的区段 time 定义日期和时间 canvas 定义图形,提供画布 command 表示命令按钮 details 表示用户要求得到并可以得到的详细信息 hgroup 定义对网页标题的组合

mark 定义需要突出显示或者高亮的文本 wbr 表示软换行

②新增的 input 元素类型 <email> <url> <range> 输入 E-mail 地址的文本输入框 输入 URL 地址 表示必须输入一定范围内的数字值的文本输入框

<number> 输入数值的文本输入框 artical:定义文章 代表文档、页面或者应用程序中独立、完整、可以独自被外部引用的内容 section: 用于对网站或应用程序中的页面上的内容进行分块, 一个 section 元素通常由内容以及标题组成。 但 section 元素并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用 div 而非 section 元素。


相关文章:
《HTML5+CSS3网站设计基础教程》_教学大纲
掌握 CSS3 中新增加的属性选择器,能够运用属性选择...器的使用,能够在页面中插入所需要的文字或图片内容...知识点 HTML5 多媒体的特性 视频和音频编解码器 ...
HTML5的基础知识-个人整理
HTML5的基础知识-个人整理_计算机软件及应用_IT/...广义论及 HTML5 时,实际指的是包括 HTML、CSS 和...新的标签,这将有助于开发人员定义重要的内容; 3、...
HTML5+JavaScript节课总结
HTML5,JavaScript 和 CSS3 的网页开发应用 技术的...文字图片的运用等,你只有在制作网页之前把这些方面...3.主要技术及知识点的运用,难点问题的解决这里我...
【毕业论文】基于HTML5 CSS3的个人博客系统设计与实现_图文
【毕业论文】基于HTML5 CSS3的个人博客系统设计与实现_互联网_IT/计算机_专业资料。论文,毕业论文,HTML5,CSS3,博客系统,博客系统,设计与实现 ...
HTML5+CSS3的定义(百度百科)
HTML5+CSS3的定义(百度百科)_计算机软件及应用_IT/计算机_专业资料。HTML 超文本...可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排, 图片如何显示...
HTML5+CSS3从入门到精通
HTML5+CSS3从入门到精通_计算机软件及应用_IT/...标签 section div section 和 article 的区别: 标签...搜索表单或相关的 logo 图片(header 元素通常包含 ...
HTML5前端开发知识小结(面试知识大全)
总结:前端综合 知识,HTML基础,HTML5直接要点,CSS...CSS3 新特性 CSS3 实现圆角(border-radius:8px),...CSS 选择器多背景 rgba 5.CSS 定义的权重 标签的...
HTML5期末考试题型
CSS3 中,可以使用 border-raidus 等新增的 5. 如下图为一个 border 为...分别写出 HTML5 新增的语义标签及作用 答: 元素名 作用 表示页面中的一个内容...
HTML5+CSS3笔记
HTML5+CSS3笔记_计算机软件及应用_IT/计算机_专业...会涉及到 段落标签、文本标签、链接标签图片标签等...属性名称说明 _blank 在新窗口或标签页中打开文档 ...
HTML5+CSS3 article标签
网页 新闻 贴吧 知道 音乐 图片 视频 地图 文库 |...HTML5+CSS3 article标签_计算机软件及应用_IT/...CSS3主要知识点总结 HTM... 197人阅读 9页 2...
更多相关标签: