css学习

速效瘦身瑜伽视频教程（全集）

wuhuaitang — 2009-02-26 13:30:00

速效瘦身瑜伽视频教程（全集）速效瘦身瑜伽视频教学1 速效瘦身瑜伽视频教学2 速效瘦身瑜伽视频教学3 速效瘦身瑜伽视频教学4 速效瘦身瑜伽视频教学5 速效瘦身瑜伽视频教学6 速效瘦身瑜伽视频教学7 速效瘦身瑜伽视频教学8 速效瘦身瑜伽视频教学9 速效瘦身瑜伽视频教学10 速效瘦身瑜伽视频教学11 速效瘦身瑜伽视频教学12 速效瘦身瑜伽视频教学13 速效瘦身瑜伽视频教学14 速效瘦身瑜伽视频教学15 速效瘦身瑜伽视频教学16 速效瘦身瑜伽视频教学17 速效瘦身瑜伽视频教学18 速效瘦身瑜伽视频教学19 速效瘦身瑜伽视频教学20 瑜伽学习推荐：http://yoga.114study.com

全球8大情人节偷欢地

wuhuaitang — 2009-02-11 17:12:00

原文阅读：http://hotel.114study.com/datum_show633699662868975994#ybtg=wuhuaitang 　　浪漫偷欢第一地：沃斯特维克　　私密指数：★★★★★浪漫指数：★★★★ 花金指数：★★★★ 　　入选理由：纬度最高的情人节浪漫小镇，北欧最隐秘的情人节亲历地，一个终年开满鲜花的地方，也是欧洲很多名贵花卉的培育地，最适合年轻朝气喜欢在花丛中寻找情爱的情侣。当hand in hand的情人从一家花坊转到另一家，季节在这里永不更替。　　从荷兰南部城市埃因霍温坐上只有两节车厢的蒸汽小火车，向南行驶半小时，第一个停靠站就是一座小小的镇子沃斯特维克（oisterwijk）。说镇子小，是因为这里只居住着一万多人，镇上很大一部分老房子都空着，而小镇本身的历史可以追溯到中世纪，这些空闲的老房子大部分都是那个年代遗留下来的，风风雨雨几百年，即使衰败，即使荒芜，有它们在，沃斯特维克才有独到的迷人之处，情人们才能在荒烟蔓草中找寻到属于自己的爱情。　　沃斯特维克能让情人心醉神迷的地方不止老房子，小镇还是荷兰着名的“花镇”，荷兰历史上许多奇花异草都在这里培育，再从此地蔓延到世界各地，最着名的就是黑色郁金香和蝴蝶三色堇。尤其是蝴蝶三色堇，开放后的每片花瓣，外形都像一只蝴蝶，是草本植物中的极品，也是每对情人最钟情的礼物。　　从镇北老房区南行，石砖道的尽头是de lind大街，名震欧洲的凯斯．纳吉（kees nagel）花坊就在这条街的六十一号。花坊主人维娜是“荷兰花店联合会”（vbw）的执行董事，用沃斯特维克人的话说：“她从来就不是一个花艺师，也不懂得培育绝世珍品，她的特长是制作干燥花卉。”所以，如果在街上看到情侣们小心翼翼地捧着一丛灰白的芦苇，一束插在铜帽里的脱水向日葵，或者金黄到刺眼的麦穗，那这对情人一定去过凯斯．纳吉花坊。作为地球上纬度最高的情人节浪漫小镇，沃斯特维克有一家略带神秘格调的咖啡馆——“咖啡时间”（cafｅ time），2006年情人节那天下午，一部叫做《惊舞哈利德》（breakdance khalid）的电影在这里开机，影片讲述一个喜欢绘画的孤单女孩从阿姆斯特丹跑出来，荒不择路来到沃斯特维克，在这里，她被咖啡馆抹碟的dj哈利德

网页变幻 - CSS/DIV布局专题讲解 - 第9课

wuhuaitang — 2009-02-02 14:40:00

相关推荐:http://www.114study.com/?ybtg=wuhuaitang 本节课时长13分01秒，下载文件15.4兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。在上一课的电子相册中用CSS控制实现了两种不同的相册模式，而本身的HTML结构却没有任何修改。本课将继续拓展这种思路，以网上常见的博客首页为例，用CSS实现更绚丽的网页变幻。同样保持页面的HTML不变，通过分别调用三个外部CSS文件，实现三个完全不同的页面效果，蓝色经典、清明上河图、交河古城，分别如图所示。三个布局相当复杂的页面，看起来完全不同，而他们的HTML代码确实完全相同的，区别只在于使用了不同的CSS，从这个例子可以把CSS的优势体现的淋漓尽致了!

CSS排版 - CSS/DIV布局专题讲解 - 第8课

wuhuaitang — 2009-02-02 14:39:00

友情推荐:http://www.114study.com/?ybtg=wuhuaitang 本节课时长15分22秒，下载文件17.2兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。上一课中主要讲解了CSS对页面中各个元素的定位，本课在此基础上，从页面的整体排版出发，介绍CSS排版的观念和具体方法，包括CSS排版的整体思路、两种具体的排版结构、电子相册的几种版式制作，以及与传统表格排版方法的比较。 1．CSS排版观念 CSS的排版是一种很新的排版理念，完全有别于传统的排版习惯。它将页面首先在整体上进行 div 标记的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。通过CSS排版的页面，更新十分的容易，甚至是页面的拓扑结构，都可以通过修改CSS属性来重新定位。我们在这里主要介绍CSS排版的整体思路，为后续课程的进一步介绍打下基础。希望大家能够掌握以下几个方面的内容：将页面用div分块设计各块的位置用CSS定位 2．固定宽度且居中的版式宽度固定而且居中的版式是网络中最常见的排版方式之一，我们在这里利用CSS排版的方式制作这种通用的结构，并采用两种方法分别予以实现。首先像上一节描述的一样，将所有页面内容用一个的大 div 包裹起来，指定该 div 的id为container，这个id在整个页面中是唯一的。虽然大部分浏览器并不限制重复id的使用，但非常不建议同一个页面中出现重复id，因为重复id会使得javascript等脚本语言在寻找对象时发生混乱。 3．左中右版式将页面分割为左中右三块也是网上常见的一种排版模式，我们在这里以此结构为例巩固CSS排版的方法，页面结构如图所示。 4．块的背景色问题在前面提到的页面左中右的结构，虽然在整体上将页面进行了排版，但细节处理仍然有不足之处。如果给#left、#middle、#right都设置背景颜色就会发现，仅仅按照上例中的设置，#left、#right的背景都没有延伸到页面的底端，而是仅仅覆盖了内容的部分。这种背景颜色的问题在CSS排版中经常会遇到，我们在这里给出通用的解决办法，首先按照上节中最后一段代码的方式将中间三块放入一个父块#mainbox中，然后同样把页面中所有的块放入到一个大的父块#

理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课

wuhuaitang — 2009-02-02 14:33:00

友情推荐:http://www.114study.com/?ybtg=wuhuaitang 本节课时长14分17秒，下载文件11.7兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。在网页设计时，能否控制好各个模块在页面中的位置是非常关键的。在前面的课程中，已经对CSS的基本使用有了一定的了解。本课在此基础上对CSS定位作详细的介绍，并介绍重要的div标记，讲解利用CSS + div对页面元素进行定位的方法，并分析CSS排版中的盒子模型以及二维三维定位等。 1．div标记与span标记在使用CSS排版的页面中， div 与 span 是两个常用的标记。利用这两个标记，加上CSS对其样式的控制，可以很方便的实现各种效果。我们在这里从二者的基本概念出发，介绍这两个标记的用法与区别。希望大家能够掌握以下几个方面的内容： div与span的概念 div与span的区别 2．盒子模型盒子模型是CSS控制页面时一个很重要的概念。只有很好的掌握了盒子模型以及其中每个元素的用法，才能真正的控制页面中各元素的位置。我们在这里主要介绍盒子模型的基本概念，并讲解CSS定位的基本方法。所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大。换句话说，可以通过调整盒子的边框、距离等参数，来调节盒子的位置。一个盒子模型由content（内容）、border（边框）、padding（间隙）、margin（间隔）这四部分组成，如图所示。一个盒子的实际宽度（或高度）是由content + padding + border + margin组成的。在CSS中可以通过设定width和height的值来控制content的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding、margin。因此只要利用好盒子的这些属性，就能够实现各种各样的排版效果。 3．元素的定位网页中各种元素都必须有自己合理的位置，从而搭建出整个页面的结构。我们在这里围绕CSS定位的几种原理方法，进行深入的介绍，包括position、float、z-index等。需要说明的是，这里的定位不是用 table 进行排版，而是CSS的方法对

CSS滤镜的应用 - CSS/DIV布局专题讲解 - 第6课

wuhuaitang — 2009-02-02 14:29:00

友情推荐:http://www.114study.com/?ybtg=wuhuaitang 本节课时长11分38秒，下载文件9.47兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。 CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。由于浏览器IE有着很广的使用范围，因此CSS滤镜也被广大设计者所喜爱。本课主要介绍CSS各个滤镜的使用方法，包括定义滤镜、加载滤镜、实例解析等等。 CSS滤镜的标识符是“filter”，总体上跟其它CSS语句一样，都十分简单，进行滤镜操作必须先定义filter，filtername是滤镜属性名，包括alpha、blur、chroma等多种属性，parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。滤镜分基本滤镜和高级滤镜两种，基本滤镜通常指可以直接作用在对象上，便能立即生效的滤镜，主要有以下几种： 1. Alpha 通道 2. 模糊效果（Blur）2. 移动模糊（Motion Blur）3. 透明色（Chroma）4. 下落阴影（Drop Shadow）5. 对称变换（Flip）6. 光晕（Glow）7. 灰度（Grayscale）8. 反色（Invert）9. 遮罩（Mask）10. 阴影（Shadow）11. X光效果（X－ray）12. 浮雕（Emboss、Engrave）13. 波浪（Wave）高级滤镜指需要配合javascript等脚本语言，能产生更多变幻效果的滤镜，主要包括BlendTrans（渐隐变换）、RevealTrans（变换）、Light（灯光）等。本课主要介绍CSS的基本滤镜，高级滤镜将在“CSS与Javascript的综合应用”一课中继续介绍。

用CSS制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课

wuhuaitang — 2009-02-01 15:56:00

本节课时长10分46秒，下载文件9.98兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。作为一个成功的网站，导航菜单是永远不可缺少的。导航菜单的样式风格往往也决定了整个网站的样式风格，因此很多设计者都会投入很多时间和精力来制作各式各样的导航条，从而体现网站的整体构架。本课围绕菜单的制作，介绍相关的项目列表、菜单变幻、导航栏等的内容。 1. 项目列表传统的HTML语言提供了项目列表的基本功能，包括顺序式列表的 ol 标记，无顺序列表 ul 标记等等。当引入CSS后，项目列表被赋予了很多新的属性，甚至超越了最初设计时它的功能。我们在这里主要围绕项目列表的基本CSS属性进行相关介绍，包括项目列表的编号、缩进、位置等等。希望大家能够掌握以下几个方面的内容：列表的符号图片符号 2. 无需表格的菜单当项目列表的项目符号可以通过list-style-type设置为none时，制作各式各样的菜单、导航条成了项目列表的最大用处之一，通过各种CSS属性变幻可以达到很多意想不到的导航效果。首先看一个实例，其效果如图所示。 3. 菜单的横竖转换导航条不光是竖直排列，很多时候要求页面的菜单能够水平方向显示。通过CSS属性的控制，可以使项目列表的导航条轻松的实现横竖转换，该例效果如图所示。 4. 菜单实例一：百度导航条打开搜索引擎百度的网站，可以看到logo下方的水平导航条。利用本课前面几节所介绍的内容和方法，便可以轻松实现该导航条。我们在这里便通过简单的制作，模拟该效果。 5. 菜单实例二：流行的Tab菜单 Tab风格的菜单导航一直受到广大网站的青睐，网上随处可见各式各样的Tab菜单，图中显示的就是一个Tab菜单。我们在这里通过对导航菜单CSS属性的进一步控制，实现Tab菜单的效果。友情推荐：http://www.114study.com/?ybtg=wuhuaitang

设置页面和浏览器的元素 - CSS/DIV布局专题 - 第4课

wuhuaitang — 2009-02-01 15:55:00

本节课时长10分35秒，下载文件10.1兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。网页中除了上面课程提到的文字、图片、表格、表单等还有许多其它元素，例如超链接、鼠标、滚动条等等。这些元素无疑使得整个网络更加的丰富多采。本课主要介绍网页中这些元素的CSS效果，配合前面课程的内容，使得网页能更好的吸引用户。 1. 丰富的超链接特效超链接是网页上最普通不过的元素，通过超链接能够实现页面的跳转、功能的激活等等，因此超链接也是与用户打交道最多的元素之一。我们在这里主要介绍超链接的各种效果，包括超链接的各种状态、伪属性、按钮特效等等。希望大家能够掌握以下几个方面的内容：动态超链接按钮式超链接浮雕式超链接 2. 鼠标特效通常在浏览网页时，用户看到的鼠标指针不外乎箭头、手形、以及I字形，而通常在Windows环境下实际看到的鼠标种类要比这个多得多。CSS弥补了HTML语言在这方面的不足，通过cursor属性可以设置各式各样的鼠标样式。希望大家能够掌握以下几个方面的内容： CSS控制鼠标箭头鼠标变幻的超链接 3. 页面滚动条当页面的内容比较多，浏览器中的窗口或者子窗口在一屏内显示不完时，就会出现滚动条，供读者翻页。对于IE浏览器，可以单独设置滚动条的样式风格，从而使其更加配合网站的整体设计。我们在这里重点讲解滚动条的组成，以及相关的CSS属性。相关推荐：http://www.114study.com/?ybtg=wuhuaitang

设置表格与表单的样式 - CSS/DIV布局专题讲解 - 第3课

wuhuaitang — 2009-01-31 17:11:00

本节课时长12分0秒，下载文件12.1兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。表格与表单是网页上最常见的元素，表格除了显示数据外，还常常被用来排版。而表单则作为与用户交互的窗口，时刻都扮演着信息获取和反馈的角色。本课围绕表格和表单介绍CSS设置其样式的方法，以及利用CSS实现各种特效的技巧。 1. 控制表格表格作为传统的HTML元素，一直受到网页设计者们的青睐。使用表格来表示数据、制作调查表等在网络中屡见不鲜。同时因为表格框架的简单、明了，使用没有边框的表格来排版，也受到很多设计者的喜爱。我们在这里主要介绍CSS控制表格的方法，包括表格的颜色、标题、边框、背景等。希望大家能够掌握以下几个方面的内容：表格中的标记表格的颜色表格的边框 2. 表格实例一：隔行变色当表格的行列都很多、数据量很大的时候，单元格如果采用相同的背景色，用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色，使得奇数行和偶数行的背景颜色不一样，达到数据一目了然的目的。本例最终效果如图所示。 3. 表格实例二：鼠标经过时变色的表格对于长时间审核大量数据、浏览表格的用户来说，即使是隔行变色的表格，阅读时间长了仍然会感到疲劳。如果数据行能够动态的根据鼠标来变色，就使得页面充满了生机，最大程度的减少用户疲倦。 4. 表格实例三：日历日历是日常生活中必不可少的东西，而作为备忘录的日历在桌面、网络上都越来越流行。通过CSS设定表格的属性，可以很轻松的实现各种日历的效果。我们在这里通过简单的实例，进一步熟练CSS控制表格的各种方法。本例最终效果如图所示。 5. CSS与表单表单是网页与用户交互所不可缺少的元素，传统的HTML中对表单元素的样式控制很少，仅仅局限于功能上的实现。我们在这里围绕CSS控制表单进行详细介绍，包括表单中各个元素的控制，与表格配合制作各种效果等等。希望大家能够掌握以下几个方面的内容：表单中的元素像文字一样的按钮七彩的下拉菜单 6. 综合实例一：直接输入的Excel表格作为公司、单位的各种年度报表，往往数据量都很大，如果也都像普通表单一样逐项填写，势必造成网页的冗长。而Excel表格在本地机器操作时一

设置网页背景 - CSS/DIV布局专题讲解 - 第2课

wuhuaitang — 2009-01-31 17:08:00

本节课时长12分36秒，下载文件14.2兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。任何一个网上的页面，它背景的颜色、基调往往是给用户的第一印象，因此在页面中控制背景通常是网站设计时一个很重要的步骤。本课在合理运用文字、图片等的基础上，重点介绍CSS控制背景颜色、图片等的方法。 1.背景颜色 256×256×256种RGB色彩组成了整个绚丽多姿的网络，任何一个页面都有它的背景色来突出其基调，微软的蓝色、Google的白色、世纪坛的墨绿、圣诞网站的火红等等都给人们留下很深刻的印象。我们在这里主要通过实例，介绍CSS设置页面背景颜色的方法。希望大家能够掌握以下两个方面的内容：页面背景色用背景色给页面分块 2.背景图片不单单是各种颜色，网页背景同样也可以使用图片。通过CSS可以对背景图片进行很精确的控制，包括位置、重复方式等等。我们在这里围绕背景图片的使用，对CSS的编写方法作进一步介绍。希望大家能够掌握以下几个方面的内容：页面的背景图背景图的重复背景图片的位置固定背景图片添加多个背景图片背景样式综合设置 3. 背景综合一：我的个人主页个人主页是网络上记录自己、展现自己的一种很好的形式，很多用户在网上都拥有自己的页面。个人主页可以作为宣传自己的方式，也可以用来写网络日记，汇总学习心得，记录每天生活的点点滴滴。我们在这里通过制作几米风格的个人主页，进一步学习CSS控制网页背景在实际中的运用方法，本例的最终效果如图所示。 4. 背景综合二：古词《念奴娇赤壁怀古》通过添加各种标记，可以让页面拥有多个背景，如果运用得当还可以得到各种效果。我们在这里以古词为例，进一步巩固页面背景的使用方法。本例最终效果如图所示。相关推荐：http://www.114study.com/?ybtg=wuhuaitang

设置图片效果 - CSS/DIV专题讲解 - 第1课

wuhuaitang — 2009-01-31 16:58:00

本节课时长11分23秒，下载文件16.3兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。在五彩缤纷的网络世界中，各种各样的图片组成了丰富多彩的页面，能够让人更直观的感受网页所要传达给用户的信息。本课介绍CSS设置图片风格样式的方法，包括图片的边框、对齐方式、图文混排等，并通过实例综合文字、图片的各种运用。 1.图片样式作为单独的图片本身，它的很多属性可以直接在HTML中进行调整，但是通过CSS统一管理，不但可以更加精确的调整图片的各种属性，还可以实现很多特殊的效果。我们在这里主要讲解CSS设置图片基本属性的方法，为进一步深入探讨打下基础。希望大家能够掌握以下两个方面的内容：图片边框图片缩放 2.图片的对齐当图片与文字同时出现在页面上的时候，图片的对齐方式就显得尤其的重要。如何能够合理的将图片对齐到理想的位置，成为页面是否整体协调、统一的重要因素。我们在这里从图片水平对齐和竖直对齐两方面出发，分别介绍CSS设置图片对齐方式的方法。希望大家能够掌握以下两个方面的内容：横向对齐方式纵向对齐方式 3.图文混排 Word中文字与图片有很多排版的方式，在网页中同样可以通过CSS设置实现各种图文混排的效果。我们在这里在上一课文字排版和上几节图片对齐等的基础上，介绍CSS图文混排的具体方法。希望大家能够掌握以下两个方面的内容：文字环绕设置图片与文字间距 4.图文混排实例：八仙过海我们在这里通过具体实例，进一步巩固图文混排的方法，并运用到实际的网站制作中。该例以介绍中国传统的八仙为题材，充分利用CSS图文混排的方法，实现页面的效果。本例最终效果如图所示。相关推荐：http://www.114study.com/?ybtg=wuhuaitang

设置丰富的文字效果 - CSS基本知识 - 第3课

wuhuaitang — 2009-01-21 21:23:00

本节课时长13分58秒，下载文件14.0兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。文字是网页设计种永远不可缺少的元素，各种各样的文字效果遍布在整个英特网中。本课从基础的文字设置出发，详细讲解CSS设置各种文字效果的方法，然后再进一步讲解段落排版的相关内容。 CSS文字样式使用过Word编辑文档的用户一定对会注意到，Word可以对文字的字体、大小、颜色等各种属性进行设置。CSS同样可以对HTML页面中的文字进行全方位的设置。我们在这里在上两章的基础上主要介绍CSS设置文字各种属性的基本方法。希望大家能够掌握以下几个方面的内容：字体文字大小文字颜色文字粗细斜体文字的下划线、顶划线、删除线英文字母大小写文字实例一：模拟Google公司logo 前面对CSS设置文字的各种单独效果进行了详细的介绍，我们在这里通过一个简单的实例，将各种效果综合运用，达到基本模拟Google公司logo的效果。文字实例二：制作页面的五彩标题对于任何文章，标题的作用是显而易见的。在页面中标题的设计往往也决定着整个页面的风格样式。我们在这里以CSS设计标题为例，进一步介绍CSS在控制文字时的各种方法和技巧。对于我们在这里中使用的一些CSS属性，前面课程可能还没有涉及，读者不必深究，在以后的课程都将详细介绍。 CSS段落文字段落是由一个个文字组合而成的，同样是网页中最最重要的组成部分，因此前面提到的文字属性，对于段落同样适用。但CSS针对段落也提供了很多样式属性，我们在这里将通过实例进行详细介绍。希望大家能够掌握以下几个方面的内容：段落的水平对齐方式段落的垂直对齐方式行间距和字间距首字放大段落实例：百度搜索搜索引擎一直都是在网上冲浪必不可少的工具，而搜索引擎在显示搜索结果时如何能让用户一目了然的找到关键字，是每一个搜索网站在排版时都必须认真对待的，而各种搜索结果恰恰都只是文字段落为主。作为国内搜索引擎霸主之一的百度一直保持着友好的用户界面。我们在这里通过具体实例，模拟Baidu搜索的显示结果，进一步巩固CSS文字、段落的排版方法。友情推荐：http://www.114study.com/?

CSS基本语法与核心概念 - CSS基本知识 - 第2课

wuhuaitang — 2009-01-21 11:21:00

本节课时长14分54秒，下载文件11.9兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。上一课对CSS如何引入HTML页面进行了介绍，本课重点介绍CSS如何控制页面中的各个标记。从控制HTML标记的不同方法入手，介绍各种选择器的概念，以及选择器的声明等，最后介绍CSS继承在实际设计中的运用。 CSS选择器选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。希望大家能够掌握以下几个方面的内容：标记选择器类别选择器 ID选择器选择器声明在利用CSS选择器控制HTML标记时，除了每个选择器的属性可以一次声明多个，选择器本身也可以同时声明多个，并且任何形式的选择器包括标记选择器、class类别选择器、ID选择器等都是合法的。我们在这里主要介绍选择器集体声明的各种方法，以及选择器之间的嵌套关系。希望大家能够掌握以下两个方面的内容：集体声明选择器的嵌套的继承学习过面向对象语言的用户，对于继承（Inheritance）的概念一定不会陌生。在CSS语言中继承并没有C++、Java等语言中的那么复杂，简单的说就是将各个HTML标记看作一个个容器，其中被包含的小容器会继承所包含它的大容器的风格样式。我们在这里从页面各个标记的父子关系出发，详细的讲解CSS的继承。希望大家能够掌握以下两个方面的内容：父子关系 CSS继承的运用相关推荐:更多学习资料>>>>>>>>>>>>>>>

CSS基本知识 - 第1课

wuhuaitang — 2009-01-21 11:15:00

大家好，如果说目前在Web设计和开发技术领域，什么是非常“火”的新技术，CSS/DIV页面的布局无疑是其中之一。我们一共将分大约20讲，对CSS/DIV网页设计进行讲解，首先将从基础入手，然后分若干个技术专题进行分析，接着将探讨一些更为深入的话题，最后通过几个综合实例为大家的实际操作进行一些指导。本节课时长9分11秒，下载文件7.75兆字节。下载的视频文件为FLV格式，推荐使用“Riva Flv Player”软件播放，点击这里下载。今天开始第一课。 1．CSS的概念对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。 CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。从CSS对标记的控制入手，讲解CSS的初步知识以及编辑方法。希望大家能够掌握下一面几个方面的内容：标记的概念传统HTML的缺点 CSS的引入如何编辑CSS 浏览器与CSS 2．使用CSS控制页面在对CSS有了大致的了解后，便希望使用CSS对页面进行全方位的控制。我们在这里主要介绍如何使用CSS控制页面，以及其控制页面的各种方法，包括行内样式、内嵌式、链接式、导入式等。并最后探讨各种方式的优先级问题。希望大家能够掌握以下几个方面的内容：行内样式内嵌式链接式导入样式各种方式的优先级问题 3．体验CSS 我们在这里通过一个简单的实例，初步体验CSS是如何控制页面的，对页面从无到有，并使用CSS实现

CSS实例讲解li标签的间距问题及li的最佳编码方式

wuhuaitang — 2009-01-20 21:16:00

新建一个简单的HTML测试文件，下面来测试ul li标签 Example Source Code [www.52css.com]

菜单一
菜单一
菜单一
菜单一
菜单一
菜单一

测试一，定义css为如下代码，效果如下 Example Source Code [www.52css.com] body{font-size:12px;margin:0}ul{list-style:none;margin:0;padding:0;width:120px;}ul li{background:green;height:20px;}ul li a{color:#fff;padding:0 0 0 10px;} 发现在IE5和IE5.5下左边都产生了空白，并且在IE5下，LI之间的行距产生空白,如下图1 测试二，定义css为如下代码， Example Source Code [www.52css.com] body{font-size:12px;margin:0}ul{list-style:none;margin:0;padding:0;}ul li{background:green;height:20px;width:120px;}ul li a{color:#fff;padding:0 0 0 10px;} 和测试一相比

为什么对容器设置float又要设置display:inline

wuhuaitang — 2009-01-20 21:12:00

看了很多网站，经常看到

标签内设置了float:left又设置display:inline。　　既然设置了float:left，那标签内的元素都会向左浮动了。　　为什么又要设置display:inline。既然设置了float:left，那该标签已具有块状元素的特征了，又设置内联元素，不是有矛盾吗？　　例如：　　http://www.52css.com/article.asp?id=845　　里一个css的定义 Example Source Code [www.52css.com] ul li { float:left; margin:0 12px 12px 0; display:inline;} 　　display:inline的意思是基线显示　　可以消除IE6和IE7下的浮动BUG　　display:inline 可以消除IE6双倍边距的BUG。　　可以参考：IE中怎么会出现双倍边距？　　http://www.52css.com/article.asp?id=144 相关推荐:http://www.114study.com/?ybtg=wuhuaitang

css expression属性将javascript与css结合起来

wuhuaitang — 2009-01-20 21:10:00

关于css expression，在IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样　　　给元素固有属性赋值　　例如，你可以依照浏览器的大小来安置一个元素的位置。 Example Source Code [www.52css.com] #myDiv {position: absolute;width: 100px;height: 100px;left: expression(document.body.offsetWidth - 110 + “px”);top: expression(document.body.offsetHeight - 110 + “px”);background: red;} 　　给元素自定义属性赋值　　例如，消除页面上的链接虚线框。通常的做法是： Example Source Code [www.52css.com] link1link2link3 　　粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？　　采用expr

杂谈24则CSS网页布局开发小技巧

wuhuaitang — 2009-01-20 14:03:00

在CSS网页布局开发中，会有很多小技巧，但新手朋友往往对此很不熟悉。在某一两个小问题上，或许纠缠很长时间才能搞明白，虽然在的文档中，多次提及过这方面的内容，但依然有很多朋友在这些问题上犯错。我们今天看看这些CSS技巧，认真读一读，或许您并不能完全理解，您可以在进行搜索，扩展您所想要得到的知识，相信您会有很多收获！　　一、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。　　二、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次。对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为id的权重要比class大。　　三、一个兼容性调整（IE和Mozilla）的笨办法：初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。　　临时解决方法：选择符{属性名：B ！important；属性名：A} 或许有时候并没有效果。你可以在搜索更多的BUG解决方法。　　四、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding　　五、li标签前面的图标推荐使用background-image，而不是list-style-image.　　六、IE分不清继承关系和父子关系的差别，全部都是继承关系。　　七、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。等你以后修改你的CSS的时候就知道为什么要这么做了。另外提醒您，不要太疯狂了。　　八、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。因为图片丢失了，也可以保持文字的可读性。　　九、定义链接的四种状态要注意先后顺序： Link Visited Hover Active　　十、与内容无关的图片请使用background.时刻记住表现与内容分离。　　十一、定义颜色可以缩写#8899FF=#89F　　十二、table在某些方面还是有用武之地的，在遇到内容为数据表格时，不要对它产生憎恨的心理。　　十三、