现在的位置: 首页 > 移动开发 > 正文

CSS2和CSS3有哪些用法?css3的特点有哪些

2020年06月09日 移动开发 ⁄ 共 1885字 ⁄ 字号 评论关闭

  在页面设计的时候HTML5知识页面的布局与结构,要实现一个很绚丽漂亮的界面就需要借助CSS。下面学步园小编来讲解下CSS2和CSS3有哪些用法?css3的特点有哪些?

  CSS2和CSS3有哪些用法

  1、css是什么?

  cascadingstylesheet(级联样式表),为网页提供表现形式。按照w3c规范,设计一个网页,应该将网页的数据与结构写在html文件里,网页的外观写在css文件里,而网页的行为写在.js文件里。这样做的目的是将网页的数据,外观,行为分离,方便代码的维护。

  2、css选择器:

  (1)标记选择器(简单选择器)

  (2)class选择器

  .s1{属性名:属性}还有一种有名字的class选择器,如下:

  ?

  1

  div.s1{font-size;120px;}(3)id选择器

  ?

  1

  #d1{font-size:italic;font-weight:900;}

  (4)选择器分组

  h1,h2,h3{//用逗号隔开color:bllue;}(5)选择器的派生

  #d2p{color:red;font-size:300;}CSS中的注释

  /**/样式的优先级:

  外部样式,将样式写在.css文件里

  内部样式,将样式写在.html文件里

  内联样式,将样式写在style=""里面

  发生冲突时:外部样式<内部样式<内联样式。   CSS中的两个关键属性:   (1)display属性   有三个值:   block按块标记的方式显示该标记   inline按行内标记的方式显示该标记   none不显示   ?   1   

hello1

hello2

  (2)position属性

  有三个值:

  static:缺省值。浏览器会将标记按默认的方式摆放(左-右,上-下)。

  absolute:相对父标记(所在的标记)偏移。

  relative:先按照默认的方式摆放,然后再偏移。

  css3的特点有哪些

  1

  

在Firefox浏览器里能看到边框颜色渐变效果

  这个设置边框只在火狐浏览器上支持,运行效果

  可以从css3.0参考书册中看到css3增加了很多样式属性,我们可以参考该手册进行比css2更加绚丽的界面效果,如果配合js还可以实现页面动画制作。

  下面我们再来看看给界面元素创建圆角效果

  在css2中为了实现这种效果,我们需要制作两张图片。代码如下:

  ?

  1

  
a{display:block;height:40px;float:left;font-size:1.2em;padding-right:0.8em;background:url(images/headerRight.png)no-repeatscrolltopright;}aspan{background:url(images/headerLeft.png)no-repeat;display:block;line-height:40px;padding-left:0.8em;}

BoxTitle

  上面的方法虽然解决了问题,但是增加了一个多余的标签,下面我们来看看用css3如何解决:

  ?

  1

  
a{float:left;height:40px;line-height:40px;padding-left:0.8em;padding-right:0.8em;border-top-left-radius:8px;border-top-right-radius:8px;background-image:url(image/headerTiny.png);backgrount-repeat:repeat-x;}

BoxTitle

  以上就是关于“CSS2和CSS3有哪些用法?css3的特点有哪些”的内容,希望对大家有用。更多资讯请关注学步园。学步园,您学习IT技术的优质平台!

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.