标签归档:CSS

rgba

rgba: ”

微软的…

http://msdn.microsoft.com/en-us/library/ms532930%28VS.85%29.aspx

<!--[if IE]>

  <style type=\"text/css\">

  .color-block {      background:transparent;      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);      zoom: 1;   }

   </style>

<![endif]-->

HTML编写小经验

在用HTML(HyperText Markup Language,超文本链接标示语言)语言编写Web页面时,由于所用的Web浏览器对HTML支持的程度不同,常常会在HTML语言的运用上产生一些疑问。在此,笔者将学习和实践中获得的几点经验奉献给大家,以供参考。

HTML中的几种常用特殊符号:
符号    替代指令
<(小于符号)  &lt
>(大于符号)  &gt
&(与符号)   &amp
″(双引号)   &quot
不可分的空格  &nbsp

其中,不可分的空格是指两个单词有时会因版面关系而分成两行,此时如果将两个单词之间的空格替代为&nbsp,则它们将总是在一行中。

例1:在HTML中,语句
A+B
3>1
(显示为A+B3>1)
应写为
A+B&ltC
3&gt1

(显示为A+B1)

例2:′&′符一般不使用,只要不产生歧义,就不必用′&amp′替代。如:
′if (ac)′可用语句
if (a&ltb&&b&gtc)表示,而不必用
if (a&ltb&amp&ampb&gtc)表示。
′&lt′则必须用语句&amplt表示,而不能用&lt表示(显示为<)。

例3:替代指令中的英文字母在HTML语句中的大小写必须统一,即或者均为大写,或者均为小写,而不能大小写混合。如:
′<′符可用′&LT′或′&lt′表示,而不能用′&Lt′或′&lT′表示。

笔者所使用的是Netscape Navigator 3?0,在Windows 3?1环境中运行。

用CSS轻松实现网上填空

在网上做有奖信息的时候,经常看见一些注册表单,只有一条线供你填写,就跟做考卷时的填空题一样,很Cool!

其实要做成这样的效果并不难,只需用一段很简短的CSS代码即可搞定!

< style type=”text/css”>
< !–
.xian{BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none}
– >
< /style>

其中代码的作用如下:

“BORDER-LEFT-STYLE:none”: 不显示左边框
“BORDER-RIGHT-STYLE: none”: 不显示右边框
“BORDER-TOP-STYLE: none”: 不显示上边框
“BORDER-bottom-STYLE: none”: 不显示上边框,加上这条,什么边框也没有了

让我们一起来看一个应用实例吧:

< html>
< head>
< title>网上填空< /title>
< style type=”text/css”>
< !–
.xian{BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none ;}
– >
< /style>< !–注:此段为css代码,在这里更改参数可以设置出更cool的效果–>
< /head>
< body bgcolor=”#FFFFFF” text=”#000000″>
隐藏你的边框
< p>用户名:
< input type=”text” name=”name” class=xian> < !–注:class=这条一定要加,设置你的css应用在表单里面– >
< /p>
< /body>
< /html>

实现的效果简洁清爽,怎么样,也改改你的表单吧!

用CSS控制网页总体风格

网页设计中我们通常需要统一网页的整体风格,统一的风格大部分涉及到网页中文字属性、网页背景色以及链接文字属性等等,如果我们应用CSS来控制这些属性,会大大提高网页设计速度,更加统一网页总体效果。

为了达到修改整个网页的目的,我们需要编辑一个外挂式的CSS文档。根据这个文档定义和修改不同CSS属性并在页面元素相同或者相似的网页里调用它。

整体改变页面风格

现在网页中流行宋体的9pt和10.5pt的字体,按快捷键“Shift+F11”打开“CSS Style控制面板”,单击“New Style”按钮,弹出“New Style”对话框,复选“Redefine HTML Tag”的“Type”类型,这时在Tag处会出现“body”、“br”、“cite”等选项,选择“body”后确认。这样我们就建立了一个外挂的CSS文档,在保存对话框中保存为all后就进入“Style Definition for body in all.css”对话框(如图1)。选择“Category”中的“Type”项,定义“Font”为“宋体”、“Size”参数为“9”,其后的下拉框选择“Points”、“Color”自定义为喜好颜色就可以了。当然还可以选择“Category”中的“Background”项来定义“Background”颜色和其他背景属性。这时您会看到页面中内容的整体改变。

< p>

src=”http://www.it.com.cn/f/edu/0410/27/02806css001.jpg”>
图1

偏好元素风格的改变

经过上面的改变有时不免给您带来一定麻烦,如果遇到页面中某个元素,比如突出显示的文字的字体、字号以及颜色怎么办!这里我们就需要再定义一个新的CSS样式单来对其进行控制,右键点击页面编辑区,在弹出快捷菜单中点击“CSS Style/Edit Style Sheet”命令,弹出“Edit Style Sheet”对话框,选择列表中的all.css,点击“New”按钮,在弹出的“New Style”对话框中选择“Make Custom Style(class)”的“Type”类型定义一个自己偏好的CSS控制。如果想更改页面中某一元素的属性,选中它然后右键单击“CSS Styles”面板中“Apply Styles”中刚才定义的CSS,执行“Apply”命令就可以了(如图2)。

< p>

src=”http://www.it.com.cn/f/edu/0410/27/02806css002.jpg”>
图2

统一控制超级链接

超级链接也是网页中经常使用的,而网页的链接色默认都是蓝色,虽然可以更改,但单一色彩在不同背景色的网页上显示就不是那么奏效了,我们来看一下如何用CSS控制网页实现不同的个性链接颜色。在“New Style”对话框中,选择“Use CSS Selector”的“Type”类型,在“Selector”下拉框中会列出“a:link(链接属性)”、“a:hover(鼠标移动到链接上的属性)”、“a:visited(链接被访问后属性)”、“a:active(链接焦点状态下的属性)”4个选项(如图3),这4个选项的设置会控制网页中所有的链接的属性,我们可以分别定义这4个属性,然后添加到“CSS Style”面板中与默认设置不同的CSS控制中,再将其“Apply”到需要改变的链接上就实现了。如果将“Hover”的字体设置的比“Link”稍微大一点,就会出现鼠标移动到链接上时字体变大的效果,试试看是不是很奇妙!

< p>

src=”http://www.it.com.cn/f/edu/0410/27/02806css003.jpg”>

图3

名词解释:CSS即层叠样式表(Cascading Style Sheet)是在网页制作过程中普遍用到的技术。采用了CSS技术控制的网页,设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。Dreamweaver MX推出后,其改进的CSS渲染和设计工具、通过增强CSS面板清晰显示内、外部定义的样式,让用户构建出符合最新CSS标准的站点。

网页字体的美化

本来,我没打算写这篇文。因为许多站长都亲自撰稿,传授秘籍了。但很多网页上的字体仍然没有“美化”效果,想必还是用了软件提供的默认字号,所以我也跟着来嚷嚷两句,凑凑热闹。

比如我吧,设计第一篇网页的时候,就遇到了字体的设置问题。我发现如果用软件约定的字体大小,则显示效果会很难看的。我是用Frontpage2000作网页,在这个微软大加宣传的网络软件里,文本的设置居然是如此令人失望,可能有它的难处,我不知道。总之,当我研究了半天之后,我明白过来:在显示器上,中文字体的字号,最保险的,是9pt,11pt也不错。如果你在word或excel里设置文本的大小,可很容易找到这两种字号。但在Frontpage里,甭想!除非你手工设置“格式”菜单里的“样式”。在“样式”对话框里,你可以对网页的各个部分进行较为自由的“修改”。修改的内容就是“格式”,有“字体”、“段落”、“边框”、“编号方式”和“定位”五种。实际上,这些格式内容,在“格式”菜单里就有的。但在“样式”设置当中,可以得到更大的自主权。不信你就试试,在某一表格内先随便写一段中文,然后打开“格式”菜单里的“字体”设置对话框。看看在字体大小选择中,是否有9pt?没有。直接写上9pt行吗?不行。没辙了?别急,请进入“样式”对话框试试,此对话框的左边是“样式”内容选择,也就是说,让你选择你想手工设置的具体内容。比如你可以选择“td”,即对表格内容进行设置。“样式”对话框的右边有一个“修改”按钮,进入“修改”后,就看到左下角那个讨厌的“格式”按钮了。里面就是上边谈到的五种选择。我们选“字体”。在这个字体对话框中,你可以写入自己想要的字体大小值,直接写入“9pt”,再一路“确定”回来,看看页面上的字体是否听话?
好了,我们总算找到一种完全通过菜单选定字体大小的方法。用这种方法,你可以设置各种尺寸的字体。(这下微软又有理了:谁说我们的软件不是摆脱了编码的麻烦?)然而,这还不算麻烦么?

实际上,如果你对编码这玩意儿不抱成见,肯用心去研究一下,它也不见得有多吓人。还是以上面这个例子来说吧,我们自定义“td”即表格的字体大小为9pt。那么,它的编码是什么样的呢?转到软件界面左下角的HTML显示窗,你将看到网页的HTML编码。一般都叫它HTML代码。
在代码的上方,区之间,有一句“TD{ font-size: 9pt }”。这就是我们刚才费半天劲设置的“表格样式”代码。实际上,如果你记得住,将这一句直接写上去就可以了。

现在,我可以告诉你简单的结果了:在网页字体的大小设置上,只须在每页的区之间加入以下一段代码即可。

关键的问题倒是:究竟我们可以在网页上用几种大小的字体?也就是说,显示器上的网页中,有几种字号是美观的?9pt是公认的字号。绝大多数网页都用它。11pt也好看。问题似乎解决了,可是假如你有一段文字想设置得比9pt更小,咋办?用8pt或7pt行吗?如果你的显示器“桌面显示字体”是大字体,那你会觉得可行。然而且住!大多数显示器不是1024×768分辨率的17寸,而是800×600或者640×480的14、15寸。他们的“桌面显示字体”往往是小字体,这时,8pt或7pt的显示效果会很难看,而且基本上看不清。有别的办法吗?有!

办法很简单,告诉你另一种大小的字体表示法,即:“12px”。它比9pt字号要小,而且在不同的显示器上,看上去都挺好。所以,你只要将上面代码中的9pt改为12px就行了。但你可能会问:我不想要整张网页都改成12px,而只想让某一段文字是12px,那又如何是好?

对单独文本的改动可用这样的方法:在这一段文本的开头位置(我是指在代码页),加入这样一句代码:

如此,这一段文字就是12px的小字体了。OK?

最后,捎带着讲一下“粘贴代码”的问题。你肯定会拿这些代码去粘贴的,因为很方便。我们在制作网页时,常常需要作这样的粘贴。在粘贴代码时,如果你的代码是直接从其它网页上copy的,则在粘贴时软件很有可能把代码看作文本,这时,代码不起作用,而且,你会在网页上看到你刚粘贴上的代码。如果是这种情况,可以先将copy的代码粘贴到写字板上,再copy一次,然后贴入网页代码区内,问题将得到解决。

好了,就写这么多吧,我后背都酸了。

自定多姿多彩的网页链接下划线

自定多姿多彩的网页链接下划线

CSS本身没有直接提供变换HTML链接下划线的功能,但只要运用一些技巧,我们还是可以让单调的网页链接下划线变得丰富多彩。

一、基本原理

首先,自定义HTML链接下划线的第一步是创建一个图形,在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景,可以使用透明的.gif图形。

其次,如果下划线图形的高度较大,则必须适当增加文本的高度,使得一行文本的底部与下一行文本的顶部之间有较大的空间,例如p { line-height: 1.5; }。

第三,为显示出自定义的下划线,必须隐藏默认的下划线,即a { text-decoration: none; }。

第四,为链接元素设置下划线图形,构造出自定义的下划线。假设下划线图形是underline.gif,则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。

第五,我们要让下划线图形在水平方向反复出现,但不能在垂直方向重复出现,否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为:a { background-repeat: repeat-x; }。

第六,为保证图形出现在链接文字的下方(不管字体的大小),用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形,可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角,CSS代码为:a { background-position: 100% 100%; }。

第七,为了在链接文本的下方给自定义图形留出空间,必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关,但一般而言,可以先让底部空白等于下划线图形的高度,必要时再作调整。例如:a { padding-bottom: 4px; }。

第八,由于下划线图形放在链接元素的底部,必须保证链接不折行(如允许链接跨越多个行,则只有下面一行的链接文本下面会有自定义的下划线)。用CSS的white-space属性可以防止链接文字折行,即a { white-space: nowrap; }。

综上所述,为链接元素定义CSS样式属性的完整例子如:

a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}

如果要让自定义下划线只在鼠标停留时出现,只要把原来直接设置在链接元素上的CSS background属性改到:hover ,例如:

a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}

a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}

体验DW MX 2004 CSS新功能

体验DW MX 2004 CSS新功能

CSS是制作网页效果必不可少的东西,字体的颜色定义、表格的样式定义、图片的特效等等都少不了它。但在Dreamweaver的早期版本中CSS的编辑功能并不是很强大,有时候不得不借助一些类似于TopStyle的第三方工具来完成CSS的编写。

现在有了Dreamweaver MX 2004(简称DW MX 2004),情况就完全不同了!

首先我们给页面链接一个已经编写好的CSS文件,这里的操作与老版本Dreamweaver的方法是相同的(图1)。

链接好后,和老版本不同的地方就出来了:从页面属性对话框中的Style、Class里可以预览设置CSS风格的效果(图2)。原来DW MX 2004已经学习了TopStyle的特点:对于表格定义,CSS效果会在Class中预览,而对于行、列以及文字CSS特效则在Style中出现,这样大大提高了效率。

< p>

src=”http://www.it.com.cn/f/edu/0411/30/198999494846616655612.gif”>

通过新的CSS功能,还可以很方便地控制页面所有色彩的调用以及效果的实施,整个页面的转换界面、风格也不会像以前那样复杂了。一个表格的三个不同的风格完全是通过DW MX 2004 的CSS编辑功能,在几分钟内完成的! (如图3)

显示你个性的鼠标指针

显示你个性的鼠标指针

许多游戏玩家一定会对游戏中的动态鼠标指针有很深的印象,其实只要一句简单的CSS(层叠样式表),你也能在网页上实现这种效果。
首先,你需要一个鼠标指针文件,可以通过单击“开始”→点击“查找”→键入“.ani”或“.cur”(不含双引号),也可以到网上下载你喜欢的指针。注:.ani是动态效果的指针文件;.cur?是静态效果的指针文件。

下面是两种实现个性鼠标的方法。

1.定义所有超链接的指针

把cursor:url(指针文件的路径)加入到超链接的CSS文件中。
如:a {color:#000000; cursor:url(指针文件的路径);}?

2.定义个别链接的指针

把style=”cursor:url(指针文件的路径)”放进<a>的容器中。
如:<a href=”指定链接地址” style=”cursor:url(指针文件的路径)”>链接文字</a>

现在保存文件,预览一下你网页的个性鼠标指针吧!