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

超强 Photoshop打造东方神秘面具
已确认:番茄花园版WinXP作者被拘留
Flash制作“小丑吹泡泡”趣味动画
解析蜜罐技术要点及其潜的在问题
非凡魅力 Escada08秋冬少女装设计
焦点文章
相关文章
 本栏目最新文章
·详细解读标准网页中的Meta标签
·网页制作:用零框架技术加密网页
·网页制作:深入Table(表格)世界
·总结:08年网页设计的十条最新经验
·网络营销网站功能设计的五点心得
 精彩回放
·3DSMAX打造书本翻开效果
·共享上网技巧应用四则
·陪酒女浸泡在酒里的青春
·美女的性感靓丽婚纱设计
·妖冶身姿 死或生3壁纸
·剿灭Win XP下的29个烦恼
·黑客必备 NET命令大全
·用PS制作精致绝伦的红酒
 精彩推荐
 今日软件下载
·企业级即时通信平台 腾讯通RTX
·极品时刻表含春运临时列车数据
·下载管理器 BitComet 比特彗星
·边下边看想看就看风行网络电影
·超级图文影音转换器 Konvertor
 往日推荐
·手工破解网吧多种限制
·Windows 网络管理技巧
·WMP 10使用技巧三则
·女孩问你帅不帅 要小心
·注册表优化XP 20招
·制作XP万能ghost光盘
·WMP10火拼DVD播放器
·街头霸王图片集中营
·五大搜索引擎横向评测
·防御计算机病毒十大步骤

论坛精华
·实例分析:一款汽车 
·眼泪、五官、闪电、 
·史上最强最多 photo 
·PS打造动感马力汽车 
·photoshop快捷键大全 
·Photoshop抠图完全大 
热点推荐
打造绚丽北极光
麻辣动态签名
Flash视频编程
章子怡月历桌面
热点关注
·误杀游戏 厂商大战一触即发
·SEO从入门到精通视频教程
·Photoshop数码照片处理案例
·3DSMAX室内渲染实例视频教程
·鹏哥特色教程之C#入门到精通
·Dreamwaver CS3 视频教程
·JAVA-J2ME移动开发实战教学
·爱淘课局域网基础视频教程
·瑞星卡卡上网助手 正版免费
Photoshop把照片处理成逼真水墨画
往日推荐
打造火焰文字
鹏哥C#教程
美女怀旧照片
3D室内渲染
焦点关注