分手快乐 发表于 2015-1-16 00:05:20

CSS教程之先容CSS3利用技能5个

网上冲浪无论你用InternetExplorer还是NetscapeNavigator,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。
 CSS3+HTML5是将来的Web,它们都还没有正式到来,固然很多扫瞄器已入手下手对它们供应部分撑持。本文先容了5个CSS3技能,能够帮你完成将来的Web。今朝这些手艺不该该用在正式的客户项目,它们更合适你的团体博客站点,Web计划社区,大概不会有客户向你赞扬的场所。
  1.圆角效果
  

  CSS3新功效中最经常使用的一项是圆角效果,尺度HTML方块工具是90度方角的,CSS3能够帮你完成圆角。
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  border-radius:20px;
  乃至单个角也能够完成圆角,不外Mozilla和Webkit的语法稍有分歧。
  -moz-border-radius-topleft:20px;
  -moz-border-radius-topright:20px;
  -moz-border-radius-bottomleft:10px;
  -moz-border-radius-bottomright:10px;
  -webkit-border-top-rightright-radius:20px;
  -webkit-border-top-left-radius:20px;
  -webkit-border-bottom-left-radius:10px;
  -webkit-border-bottom-rightright-radius:10px;
  所撑持的扫瞄器:Firefox,Safari,Chrome


  2.图形化界限
  

  望文生义,图形化界限就是同意利用图片作为工具的界限,语法以下:
  border:5pxsolid#cccccc;
  -webkit-border-image:url(/images/border-image.png)5repeat;
  -moz-border-image:url(/images/border-image.png)5repeat;
  border-image:url(/images/border-image.png)5repeat;
  这里,border:5px设定了界限的宽度,然后,每一个界限的图片界说告知扫瞄器,利用图片的多年夜一部分来充任界限。界限图片还能够针对每条边独自设置:
  border-bottom-rightright-image
  border-bottom-image
  border-bottom-left-image
  border-left-image
  border-top-left-image
  border-top-image
  border-top-rightright-image
  border-right-image
  撑持的扫瞄器:Firefox3.1,Safari,Chrome.


 3.块暗影与笔墨暗影
  

  暗影效果曾让Web计划师既爱又恨,如今,有了CSS3,你不再必要Photoshop,已有网站在利用这个功效了,如24Wayswebsite.
  -webkit-box-shadow:10px10px25px#ccc;
  -moz-box-shadow:10px10px25px#ccc;
  box-shadow:10px10px25px#ccc;
  前两个属性设置暗影的X/Y位移,这里分离是10px,第3个属性界说暗影的虚化水平,最初一个设置暗影的色彩。笔墨暗影也能够如许设置:
  text-shadow:2px2px5px#ccc;
  撑持的扫瞄器:Firefox3.1,Safari,Chrome(只撑持Box暗影),Opera(只撑持笔墨暗影).前3个数字暗示红绿蓝三色的值,最初一个值代表通明度,别的,我们还可使用opacity完成通明度(今朝的灯箱效果多利用该技能-译者)


 4.利用RGBA完成通明效果
  

  今朝,Web计划中的通明效果次要靠PNG图片完成(但在IE扫瞄器撑持得其实不好-译者),在CSS3,能够间接完成通明效果。
  rgba(200,54,54,0.5);
  background:rgba(200,54,54,0.5);
  color:rgba(200,54,54,0.5);
  color:#000;
  opacity:0.5;
  撑持的扫瞄器:Firefox,Safari,Chrome,Opera(opacity)和IE7(opacity,withfixes).


 5.利用@Font-Face完成定制字体
  

  Web计划中有几种字体是对照平安的,如Arial,Helvetica,Verdana,Georgia,ComicSans(中文的,一样平常来讲宋体是独一平安的-译者),如今,利用CSS3的@font-face能够本人指定字体,不外由于牵涉到版权成绩,实践能用的字体也是无限的(别的,体积复杂的中笔墨体也是一个欠好办理的成绩-译者)。
  语法以下:
  @font-face{
  font-family:Anivers;
  src:url(/images/Anivers.otf)format(opentype);
  }
  撑持的扫瞄器:Firefox3.1,Safari,Opera10andIE7(必要一番周折,假如你不怕贫苦,能够在IE完成这个功效,请参考:makefont-faceworkinIE)
  固然CSS3尚在开辟中,下面提到的这些功效已能够在部分扫瞄器中利用了,特别是Safari。不幸的是,Safari并不是支流扫瞄器。
  Firefox今朝具有大批用户基本,别的,行将推出的Firefox3.1撑持很多CSS3效果,由于Firefox用户的晋级主动性很高,因而,会有很多用户能够提早体验CSS3的新功效。
  GoogleChrome往年方才公布,它基于Webkit引擎,因而和Safari很类似,由于Safari次要用于Mac市场,Chrome能够恰好填补Windows市场的空白。
  依据统计数据,2008年11月止,44.2%的用户利用Firefox,3.1%利用Chrome,2.7%利用Safari,意味着CSS3的部分功效已能够撑持近半Internet用户,而在Web计划圈子,这个比例大概更高,约莫有73.6%(Blog.SpoonGraphics供应的数据)


  6.负面要素
  下面报告的这些CSS3功效会给你的网站带来杰出的效果,但仍有一些负面的要素必需思索:
  InternetExplorer:46%的Internet没法看到这些效果,因而不要将这些器材用于主要的计划。同时包管,在这些效果不起感化的中央,有替换计划可用。
  CSS考证成绩:这些CSS3功效并不是终极版本,今朝分歧的扫瞄器利用分歧标签完成这些功效,大概为你的StyleSheet带来考证上的成绩。
  痴肥代码:由于分歧扫瞄器要利用分歧界说语法,终极将招致你的CSS代码非常痴肥。
  不妥的利用:对这些效果的不妥利用,大概带来一些不良成果,暗影效果特别云云。
  本文国际http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
  中文翻译COMSHARPCMS官方网站(35千米译)

你可以轻松地控制页面的布局。

小女巫 发表于 2015-1-18 05:12:22

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.

山那边是海 发表于 2015-1-26 22:04:51

可以使用 CSS 检查工具进行设计。

分手快乐 发表于 2015-2-4 23:36:13

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。

蒙在股里 发表于 2015-3-1 18:29:37

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。

精灵巫婆 发表于 2015-3-10 23:21:24

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

第二个灵魂 发表于 2015-3-17 16:09:32

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.

海妖 发表于 2015-3-24 13:48:48

滚动条)层属性--溢出(visible/hidden/scroll/auto)
页: [1]
查看完整版本: CSS教程之先容CSS3利用技能5个