CSS提供了一些内置的多媒体滤镜特效，使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本容器、以及其他一些对象。Dreamweaver4提供了16种滤镜可供选择，如下图：下面，我们就来看看在Dreamweaver4里如何方便的使用这些CSS滤镜。建立一个自定义样式“.filter”，在Filter下拉框里选Alpha滤镜，我们将“Alpha(Opacity=?, FinishOpacity=?, style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)”...
八、 简单介绍CSS结合JS的运用（针对事件动作）利用CSS配合javascript的可以做很多更酷的动态页面效果，在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先，我们要搞清楚事件和动作的概念。在客户端脚本中，javascript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标时，就触发了一个单击事件或鼠标移动事件，通过对这些事件的响应，可以完成特定的功能（例如，单击按钮弹出对话框...
1. 基本语法CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。基本格式如下：selector {property: value} （选择符 {属性：值}）选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开： body {color: black}选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果...
伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。1. 语法伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：selector:pseudo-class {property: value}（选择符:伪类 {属性: 值}）伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的...
前两章我们了解了CSS的语法，但要想在浏览器中显示出效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读，这里介绍四种在页面中插入样式表的方法：链入外部样式表、内部样式表、导入外表样式表和内嵌样式。 链入外部样式表链入外部样式表是把样式表保存为一个样式表文件，然后在页面中?lt;link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内，如下：<head>……<link rel="styleshee...
1. CSS styles面板通过前面几章的学习，相信大家对CSS有了一定的了解，这一章我们来讲解如何利用Dreamweaver4来创建CSS。首先运行Dreamweaver4，启动后，选择菜单下的Windows->CSS styles（或按Shitf+F11），系统弹出CSS styles管理面板，如下图所示：在CSS styles面板里显示了所有自定义的CSS样式（也就是上面提到的以点开头的类选择符，Dreamweaver4把这样以点开头的类选择符作为自定义样式来使用），可以利用Apply按钮这些CSS样...
CSS教程(一)认识CSS Dreamweaver4是现今最好的网站编辑工具之一，用它来给制作网页的CSS样式表会更简单、更方便。本教程教你如何利用Dreamweaver4在页面中加入CSS，你不用死记硬背的记代码标记，也不用去看很厚的CSS手册，你就可以轻松自如的在网页中运用CSS。不过首先你要对CSS有一定的了解。因此，本教程的前面4章为CSS理论知识，主要是对CSS的全面介绍，希望读者看后对CSS的语法、结构、应用有一个全面的了解；后面4章为DW...
概述Web 兴起之后，关于CSS的介绍和学习资料已经铺天盖地。本文不涉及具体的CSS语法之类的，而是希望从初学者的角度，让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用。什么是 CSS了解一个概念，首先看到的就是它的名字，而往往被忽略的，也是它的名字。CSS (cascading style sheets)，可以翻译成中文 层叠样式表 。从名字可以看出：层叠：说明 样式可以叠加，所以会有优先级样式表：说明CSS是描述样式的，而...
这篇文章主要为大家详细介绍了CSS教程之p垂直居中的多种方法，还包括多行文本垂直居中的方法，感兴趣的小伙伴们可以参考一下在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<capt...
本文介绍CSS基础教程：CSS图文混排，图像签名，多图拼接和图片特效示例学习了CSS布局的定位和浮动，我们可以简单地做出很多排版和内容拼接。今天就来做几个简单的实例展示现在流行的p+CSS布局的方便好用之处 学习了CSS布局的定位和浮动，我们可以简单地做出很多排版和内容拼接。今天就来做几个简单的实例展示现在 流行的p+CSS布局的方便好用之处。顺便也说一下CSS3新增的样式属性box-shadow和属性transform。 一图文混排 <!DOCTYPE...
由于是布局教程例子，在版面的细节上没有花更多时间精细修饰，不过我觉得模板的版面不错，懂CSS的可以下载进行更细致的美工将会是一个很不错的网页，初步学习的可以下载来修改修改属性参数从而更形象掌握属性的特性，以达到更深掌握CSS的目的。 CSS是不是真的很难学?其实 由于是布局教程例子，在版面的细节上没有花更多时间精细修饰，不过我觉得模板的版面不错，懂CSS的可以下载进行更细致的美工将会是一个很不错的网页，初步学习的...
这篇文章主要介绍了将页脚固定在页面底部的CSS实战,其中注意一下CSS清理浮动的问题,需要的朋友可以参考下页脚的位置问题网页的页脚（footer），也就是通常用来放置帮助链接及版权信息的地方。页脚自然是应该位于页面底部的，但依照一般的做法，如果位于页脚之前的网页内容比较少，或者说使用了一个垂直分辨率较大的显示器，就有可能出现页脚看起来不在页面底部的情况，如下图。由于页脚基本上是一个网站的所有页面公用的部分，不同...
一、图片边框border在“CSS边框border”这一节我们详细讲解了边框border属性。在CSS中，对于图片的边框，我们也是使用border属性来定义。语法：border-width:像素值;border-style:属性值;border-color:颜色值; 注：或者使用border简洁写法，如“border:1px solid gray;”。说明：如果大家忘了border属性，请自行回去复习一下。举例1：<!DOCTYPE html> <head><title>图片边框border</title><style type="text/css">img{width:60px...
Hello！前一篇文章给大家介绍了CSS3教程-2D 转换，不知道大家学的怎么样呢？接下来给大家介绍CSS3教程-3D 转换。3D 转换：CSS3 允许您使用 3D 转换来对元素进行格式化。在本文中，您将学到两种 3D 转换方法：rotateX()；rotateY()。它如何工作？转换是使元素改变形状、尺寸和位置的一种效果。您可以使用 2D 或 3D 转换来转换您的元素。浏览器支持：Internet Explorer 10 和 Firefox 支持 3D 转换。Chrome 和 Safari 需要前缀 -webk...
今天呢，翠儿姐给大家讲解CSS3教程-边框的最后一种属性：border-image 属性。本文主要介绍了这款属性的定义以及用法，希望在前端开发工作中可以帮到需要帮助的同学。看一下具体实例：将图片规定为包围 div 元素的边框：div { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; }浏览器支持：Internet Explo...