首页 | 新闻资讯 | 软件应用 | 图形图像 | 网络应用 | 硬件学堂 | 程序开发 | 安全中心 | 素材下载 | 作者专区 | 学院论坛
精选专题 | 精美壁纸 | 专家答疑 | Flash剧场 | Photoshop | 名词解释 | 梦幻桌面 | PS高手进阶 | QQ区 | 图书 | 黑客教材
Flash教程| 卡通制作 | AutoCAD | 3DMax实例 | PS视频教程| 网页制作 | CorelDRAW| Firework | 滤镜与实例 | 全部视频教程
当前位置:eNet硅谷动力 > 学院频道 > 设计技巧

CSS样式表学习从门到精通
2004-04-06 15:26 来源:eNet论坛
【简 介】
CSS是Cascading Style Sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义,它是一种设计网页样式的工具。借助CSS的强大功能,网页将在您丰富的想象力下千变万化。
    
加入收藏  设为首页

  CSS是Cascading Style Sheets(层叠样式表单)的简称。不过大家都把它称作样式表,它是一种设计网页样式的工具。借助CSS的强大功能,网页将在您丰富的想象力下千变万化。  

  
请添加描述


  
请添加描述


  看到上面的两幅图片,您可能会认为这是用photoshop或者是其他图形处理软件制作的吧。可是上面的例子却完全是用CSS编写的。我们来看一下它的源代码(仔细看就很简单):

    <html>
     <head>
      <title>css word</title>
        <style>//*CSS样式定义开始*//
        <!--
        div
        {width:200; filter                             blur(add=true,direction=135,strengh=20);
        } //*定义DIV范围内的样式,包括宽度(width)、模糊滤镜属性(blur)*//       -->

        </style>//*样式定义结束*//
     </head>
     <body>
     <div>//*以下的区域内采用<head>中<style>里面定义的格式*//
     <p style="font-size:48;font-style:bold;
     color:red;">hongen </p>
     //*定义字体样式(font-style),包括字体大小(size)、粗细(bold)、颜色       (color)*//
     </div>
     </body>
    </html>   

  上面的代码中以红色显示的是注释部分,用于帮助您更好的理解代码的含义。上面的这一段代码产生的是如图2的效果。而其中字体的模糊效果就是运用了CSS的滤镜功能。滤镜功能是CSS非常有趣也非常吸引人的一个功能,我们将在后面的章节中介绍。

  实际上CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的:

  选择符{属性:属性值}

  看,是不是很简单,只有三部分。

  我们结合上面的代码来讲解,比如上面代码的<head>…</head>中,使用<style>来指定样式。

  一般说来,<style>下面的CSS语句是以注释语句的形式书写的,也就是上面代码中的<!-- … -->符号包含的部分。所以,上面的例子中定义页面样式的语句是:

  div{width:200;filter:blur(add=true,direction=35,strengh=20);}

  在上面的语句中,DIV是选择符,选择符可以是HTML中任何的标识符,比如P、DIV、IMG甚至BODY都可以作为选择符。

  这里用DIV做选择符,就是说在HTML中,编辑在<DIV>中的页面格式将以上面语句中大括号内定义的格式显示。

  括号内的WIDTH和FILTER就是属性。

  WIDTH定义了DIV区域内的页面的宽度,200是属性值。

  FILTER定义了滤镜属性,BLUR是它的属性值,该属性值产生的是一种模糊效果,其小括号内定义的是BLUR属性值的一些参数。

  ADD参数有两个值:True和False。分别指定图片是否被设置成模糊效果。


[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26] [27]下一页
关键字:  
您对这篇文章的看法是:    喜欢 反感 支持 反对 加油 鄙视 学习 打击 佩服 漂亮 路过 发表评论
视频教程】 【专题汇总】 【不懂就问我关闭窗口
 网友留言
请您输入您要使用的昵称:
  留言仅代表个人观点,请对自己的言论和行为负责  
2011款Brabus E V12 Cabriolet
如何破解无线路由器、WEP密码
58将推出短租平台日租对抗蚂蚁短租
瘦身全攻略 减小Win7体积三个方法
Photoshop调出美女图片纯美淡黄色
相关文章
 本栏目最新文章
·域名不能访问的可能性原因分析
·IIS6和IIS7对静态文件gzip压缩方式
·新手经验:网站备案流程和注意事项
·用JS防止网站被挂IFRAME木马
·Adsense屏蔽GOOGLE自己广告的设置
 精彩回放
· 用Ps打造一只精美的千纸鹤
· Ps打造美女图片非主流色调
· Ps画笔画出美丽的水墨荷花
· Ps打造柔美的外景美女图片
· Ps给多斑的美女保细节磨皮
· Ps打造精美的彩妆花饰美女
· Ps打造荒野美女非主流效果
· Ps鼠绘清爽的卡通美女插画
 今日软件下载
杀毒软件免费随便用
瑞星全功能安全软件2009 基于“云安全”策略和“智能主动防御”技术开发.
www.rising.com.cn
 往日推荐
·广州车展:人气车模排行榜
·青春洋溢:“海藻”私密写真
·Photoshop 最简易磨皮方法

论坛精华
·操盘手主力版免费 选股更精准
·酷6K歌 与美女一起在线视频K歌
·找寻同城有缘人 在线万人同K歌
·美图秀秀图像处理工具最新版
·瑞星全功能安全软件2011下载
·愤怒的小鸟 绿色中文版 下载
热点推荐
打造梦幻美女
鼠绘古装美女
调出美女色调
Photoshop教程
热点关注
·Firework CS5 视频教程
·一个月,成就电脑高手之路
·《从实例学VC》视频教程
·2D游戏原画设计视频教程
·ASP.NET编程技巧范例大全
·Java软件开发高级视频教程
·C++从新手到高手视频教程
·C#语言基础视频教程
·Vray高级实例应用视频教程
往日推荐
练成C++高手
获奖3D图赏
ASP项目实战
PS发黄老照片
焦点关注
风尚视觉