博文
设置图片效果 - CSS/DIV专题讲解 - 第1课(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课(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.c......
CSS基本语法与核心概念 - CSS基本知识 - 第2课(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课(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的最佳编码方式(2009-01-20 21:16:00)
摘要：新建一个简单的HTML测试文件，下面来测试ul li标签
Example Source Code [www.52css.com]
<ul>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
</ul>
测试一，定义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;heigh......
为什么对容器设置float又要设置display:inline(2009-01-20 21:12:00)
摘要：看了很多网站，经常看到<li></li>标签内设置了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结合起来(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]
<a href=”link1.htm” onfocus=”this.blur()”>link1</a>
<a href=”link2.htm” onfocus=”this.blur()”>link2</a>
<a href=”link3.htm” onfocus=”this.blur()”>link3</a>
粗看或许还体现不出采用expressio......
杂谈24则CSS网页布局开发小技巧(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在某些方面还是有用武之地的，在遇到内容为......
CSS布局中以图换字几种方法的优劣分析(2009-01-20 13:58:00)
摘要：CSS布局中的以图换字，52CSS.com也进行过介绍，其实是为了保证页面的可读性，这样既有利于搜索引擎，又有利于结构查看。
由于这种方式被大多数人所认同，所以方法也越来越多：
一、使用text-indent的负值，将内容移出容器；
二、使用display:none，将内容隐藏；
三、使用padding将文字挤出容器之外，并将超出的部分hidden;
四、使用font设置超小字体，达到隐藏内容的目的。
一、看起来蛮简单，但其实有几个不理想的地方，比较吃资源；在ie5下面会出现滞后背景无法显示；内容为超链接时，长长的黑色虚框。不过这种方式比较常用。52CSS.com也进行过介绍：
CSS经典技巧：text-indent隐藏文字（以图换字）
{以图换字是CSS布局中非常常用的一种手段，因为图片文字有时候比可选的文字的表达效果更好！
因此，某些文字标题是用图片来表达的。但写一个img标签实在不雅，为了照顾蜘蛛，我们使用浏览器障眼法。
于是用最常用的text-indent：
css:
Example Source Code [www.52css.com]
h4 a{background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png) left top no-repeat;width:300px;height:75px;text-indent:300px; white-space:nowrap; overflow:hidden;}
Xhtml:
Example Source Code [www.52css.com]
<h4><a href="#">css网页布局w3c标准</a></h4>
但你会发现，在IE6中，没有得到期望的效果，背景图片和文字都被隐藏了（IE7也是这样，其它的未做测试）。
解决办法至少有两个：
Example Source Code [www.52css.com]......
通过W3C XHTML1.0及CSS标准需要注意的九个问题(2009-01-19 16:30:00)
摘要：总结出通过W3C XHTML1.0标准需要注意的九个问题：
一、在 <div class=tzh>I am TZH!</div> 这段语句中有什么错误？
标点符号问题。这其实也是大家最容易忽视的问题，其实就是小小的两个引号，就造成了这个错误。虽然很多浏览器在不加引号的情况下仍然能正确识别渲染。但是这样想要通过严格的W3C XHTML国际标准是不可能的，请大家记住等号后面一定要接引号。正确写法：<div class="tzh">I am TZH!</div>
二、在 <SPAN class="tzh">TZH is me!</SPAN> 这段语句
中有什么错误？
大小写注意。这和第一个问题一样，都是特别容易忽视的细节问题。在W3C标准中是绝对不允许大写的，其中我仍记得我在检测一段javascript代码的时候，由于为了让自己一目了然写出的onLoad也被判断成了错误，原因就是L不能大写。正确写法：<span class="tzh">TZH is me!</span>
三、在 <p>I am TZH!</p><br><p>TZH is me!</p> 这段语句中有什么错误？
<br />标签问题。对于强制换行标签<br />来说，很多新手都分不清它和<br>的区别，甚至在FCKeditor编辑器中有时都会时不时冒出个<br>来充当<br />。虽然同样很多浏览器都能自动纠错，将<br>作为<br />识别。但最好的编辑方法还是推荐大家使用Dreamweaver进行编辑，当你按下Ctrl+Enter，就会自动写上一个<br />。正确写法： <p>......