首页 | 新闻资讯 | 软件应用 | 图形图像 | 网络应用 | 硬件学堂 | 程序开发 | 安全中心 | 素材下载 | 作者专区 | 学院论坛
精选专题 | 精美壁纸 | 专家答疑 | 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]下一页
关键字:  
您对这篇文章的看法是:    喜欢 反感 支持 反对 加油 鄙视 学习 打击 佩服 漂亮 路过 发表评论
视频教程】 【专题汇总】 【不懂就问我关闭窗口

微软引刀自宫 阉割版Win 7戏耍欧盟
如风如水 Photoshop打造水做的女人
国外Fernando平面设计作品欣赏
上网本伴侣 金山毒霸极速版亲身体验
谷歌宣布将出PC操作系统 与微软竞争
相关文章
 本栏目最新文章
·网站对字体大小的选取也是有学问的
·技巧:教你制作友好的错误页面
·返回404错误页面的合理设置方式
·UCenter Home好友上限与150法则
·SNS网站个性展示:图片幻灯片切换
 精彩回放
·3DSMAX打造书本翻开效果
·共享上网技巧应用四则
·陪酒女浸泡在酒里的青春
·美女的性感靓丽婚纱设计
·妖冶身姿 死或生3壁纸
·剿灭Win XP下的29个烦恼
·黑客必备 NET命令大全
·用PS制作精致绝伦的红酒
 精彩推荐
 今日软件下载
杀毒软件免费随便用
瑞星全功能安全软件2009 基于“云安全”策略和“智能主动防御”技术开发.
www.rising.com.cn
 往日推荐
·推荐“美图秀秀”就能赚Q币
·五大搜索引擎横向评测
·防御计算机病毒十大步骤

论坛精华
·史上最强最多 photo 
·photoshop完美扣图教 
·Photoshop给多斑的人 
·Photoshop将美女照片 
·精灵女孩白夜 
·PhotoShop实例精选电 
热点推荐
绘制逼真金蛋
浪漫婚纱照片
Flash视频编程
Ulead GIF教程
热点关注
·Flash CS4 制作经典小游戏
·C语言程序设计视频教程
·PHP+MYSQL开发视频教程
·Flash CS4从入门到精通教程
·服装设计与效果图绘制教程
·21视频之Fireworks8网页制作
·Vray高级实例应用视频教程
·CorelDRAW14入门到高级教程
·Vray高级实例应用视频教程
全国计算机等级考试二级(VB语言)
往日推荐
网站重构设计
鹏哥C#教程
服装设计教程
PS唯美风景
焦点关注