网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 前端脚本 » 正文

css3,css3新特性

2020-3-17 14:30:43 | 作者:老铁SEO | 0个评论 | 人浏览

  一、指代不同


  1、CSS3:是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案。


  2、CSS:是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。


  二、内容不同


  1、CSS3:主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。


  2、CSS:不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。


  三、特点不同


  1、CSS3:新特征有很多,例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。


  2、CSS:能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。


  css3新特性


  1:CSS3选择器部分


  E[att^="val"]匹配具有att属性、且值以val开头的E元素


  E[att$="val"]匹配具有att属性、且值以val结尾的E元素


  E[att*="val"]匹配具有att属性、且值中含有val的E元素


  E:root匹配文档的根元素。在HTML中,根元素永远是HTML


  E:nth-child(n)匹配父元素中的第n个子元素E


  E:nth-last-child(n)匹配父元素中的倒数第n个结构子元素E


  E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E


  E:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素E


  E:last-child匹配父元素中最后一个E元素


  E:first-of-type匹配同级兄弟元素中的第一个E元素


  E:only-child匹配属于父元素中唯一子元素的E


  E:only-of-type匹配属于同类型中唯一兄弟元素的E


  E:empty匹配没有任何子元素(包括text节点)的元素E


  :target匹配相关URL指向的E元素


  E:enabled匹配所有用户界面(form表单)中处于可用状态的E元素


  E:disabled匹配所有用户界面(form表单)中处于不可用状态的E元素


  E:checked匹配所有用户界面(form表单)中处于选中状态的元素E


  E::selection匹配E元素中被用户选中或处于高亮状态的部分


  E:not(s)匹配所有不匹配简单选择符s的元素E


  E~F匹配E元素之后的F元素


  2、CSS3特效部分1:圆角,阴影,渐变


  border-radius


  box-shadow


  text-shadow


  -webkit-gradient


  3、CSS3特效部分2:背景,边框背景


  background-origin


  background-clip


  background-size


  multiplebackgrounds


  border-image


  4、CSS3特效部分3:变形


  rotate


  X/Y/Z


  scale


  translate


  transform-origin,transition-property,transition-duration,


  transition-timing-function,transition-delay'


  skew


  matrix


  5、CSS3特效部分4:动画


  animation-name


  animation-duration


  animation-timing-function


  animation-delay


  animation-iteration-count


  -webkit-animation-direction


  css3动画属性


  animation-fill-mode:none|forwards|backwards|both;


  none:不改变默认行为。


  forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。


  backwards:在animation-delay所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。


  both:向前和向后填充模式都被应用。


  CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。


  CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性,这也让跨浏览器开发变得复杂。


  css3新增的属性


  h5是html的最新版本,是14年由w3c完成标准制定。增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便。


  -h5新增的标签


  新增元素


  说明


  video表示一段视频并提供播放的用户界面


  audio表示音频


  canvas表示位图区域


  source为video和audio提供数据源


  track为video和audio指定字母


  svg定义矢量图


  code代码段


  figure和文档有关的图例


  figcaption图例的说明


  main


  time日期和时间值


  mark高亮的引用文字


  datalist提供给其他控件的预定义选项


  keygen秘钥对生成器控件


  output计算值


  progress进度条


  menu菜单


  embed嵌入的外部资源


  menuitem用户可点击的菜单项


  menu菜单


  template


  section


  nav


  aside


  article


  footer


  header


  -css3


  css3被划分为模块,最重要的几个模块包括:选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面


  选择器


  框模型


  背景和边框


  border-radius、box-shadow、border-image、


  background-size:规定背景图片的尺寸


  background-origin:规定背景图片的定位区域


  background-clip:规定背景的绘制区域


  文本效果(常用)


  text-shadow:设置文字阴影


  word-wrap:强制换行


  word-break


  css3提出@font-face规则,规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range


  2/3D转换


  transform:向元素应用2/3D转换


  transition:过渡


  动画


  @keyframes规则:


  animation、animation-name、animation-duration等


  用户界面(常用)


  box-sizing、resize


  css3新增伪类


  :nth-child()


  :nth-last-child()


  :only-child


  :last-child


  :nth-of-type()


  :only-of-type()


  :empty


  :target这个伪类允许我们选择基于URL的元素,如果这个元素有一个识别器(比如跟着一个#),那么:target会对使用这个ID识别器的元素增加样式。


  :enabled


  :disabled


  :checked


  :not


  css3动画效果


  主要需要使用-webkit-animation


  如:


  -webkit-animation:gogogo2sinfinitelinear;


  其中gogogo是自己定义的动画帧,2s是整个动画的秒数,infinite是永久循环linear是线性变化(step-end则是无线性变化,直接输出结果)


  代码如下:


  CSS:


  @-webkit-keyframesgogogo{


  0%{


  -webkit-transform:rotate(0deg);


  border:5pxsolidred;


  }


  50%{


  -webkit-transform:rotate(180deg);


  background:black;


  border:5pxsolidyellow;


  }


  100%{


  -webkit-transform:rotate(360deg);


  background:white;


  border:5pxsolidred;


  }


  }


  .loading{


  border:5pxsolidblack;


  border-radius:40px;


  width:28px;


  height:188px;


  -webkit-animation:gogogo2sinfinitelinear;


  margin:100px;


  }

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    相关推荐