- 教程-css

[CSS][ 背景样式]--背景不动文字动

12380178@qq.com(wzgirl) — Mon,23 Jan 2006 09:30:02 +0800

留言本里有网友留言说，想要背景不动文字动的效果，类似于以下这个网站中更新页面所使用的。

http://www.lmyangel.com/v6.0/angel.htm
打开这个网站，我们可以看到，这个页面，其实有两种CSS样式组成，分别是：

背景固定不动
表格透明
=====================
在一个页面里，所有的表格都被透明

注：在中间插入代码：

程序代码

background-attachment:fixed; 設定背景圖片固定；

background-position:center 設定背景位置居中

在这里，我们还可以把居中换成其他的，像是上，下，左，右。

语法：background-position:center （top / middle / left / right )可以根据自已的需要变化。

table{filter:Alpha(Opacity=80)} //Opacity設定透明度，數值越小越透明。用上这串代码有个缺点，就是当前页面所有的表格，都会被影响，都会被一起透明。如果只是想页面其中一个表格透明化，请继续往下看：

================
在一个页面里，其中的一个表格被透明

注：在中间插入代码：

程序代码

注：在之间加入以下代码。

程序代码

上面的代码可以看出，是针对被设置的表格透明化，可根据自已的需要设置透明度。

[CSS][ 连接样式]--上下虚线

12380178@qq.com(wzgirl) — Mon,16 Jan 2006 09:28:08 +0800

连接的一种样式，感觉还是很漂亮的。把代码插入到之间。

程序代码

[CSS][ 文字样式]--变幻色彩的文字

12380178@qq.com(wzgirl) — Mon,16 Jan 2006 09:25:07 +0800

不停变幻色彩的文字，非常漂亮。

把以下代码插入到之间

程序代码

把页面里的修改成以下代码

程序代码

把以下代码输入到想要显示文字的地方

程序代码

[CSS][ 文字样式]--文字间隔

12380178@qq.com(wzgirl) — Mon,16 Jan 2006 09:23:19 +0800

此代码可增加文字之间的间隔，还有行距。
把代码插入到之间。

代码如下：

程序代码

letter-spacing : 可设置字间距
line-height : 可设置行间距

九种表格效果

12380178@qq.com(wzgirl) — Sat,14 Jan 2006 09:15:47 +0800

介绍九种比较常用的表格效果。把以下代码插入到任何想要显示表格的地方。

例一：

程序代码

               bgcolor="#ffddee" bordercolor="#ffffff" bordercolordark="#ffffff"
             bordercolorlight="#ff99cc">


                               bordercolordark="#ffffff" bordercolorlight="#ffb9dc" >

例二：

程序代码

例三:

程序代码

      例三

例四:

程序代码

例四

例五:

程序代码

例五

例六:

程序代码

              例六

例七:

程序代码

例七

例八:

程序代码

例八

例九:

程序代码

例九

[CSS][ 图片样式]--点击图片渐湿渐隐

12380178@qq.com(wzgirl) — Fri,13 Jan 2006 09:12:44 +0800

下面的代碼插入到之間！

程序代码

/*
Gradual-Highlight Image Script-
?Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=20
}

function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if (window.highlighting)
clearInterval(highlighting)
}

下面代碼插入中间，想要顯示圖片的位置！

程序代码

其中 alpha(opacity=40) 是指默认显示的透明度为40%
点击这里查看效果：http://www.wzgirl.com/epapers/004/08.htm

浏览器滚动条(4种）

12380178@qq.com(wzgirl) — Fri,13 Jan 2006 09:07:32 +0800

把以下代碼插入到之間！

朴素型：

程序代码

一侧型：

程序代码

箭形符号：

程序代码

立体型：

程序代码

[CSS][ 知识]--背景属性

12380178@qq.com(wzgirl) — Fri,13 Jan 2006 09:04:01 +0800

■ 背景屬性

背景性質設定可說是 CSS 最強悍的地方，有了這些 CSS，我們甚至可以在一段文字，或一格表格中，套用不同的背景。

■ 屬性分類

BACKGROUND：
設定背景圖片、顏色、混合、透空、捲動、位置、重複
語法：{ BACKGROUND : TRANSPARENT︱( scroll )︱( color )︱URL ( url )︱( position )︱( repeat ) }

BACKGROUND-ATTACHMENT：
設定背景圖片是否捲動 ( 分為 : 捲動、固定 )
語法：{ BACKGROUND-ATTACHMENT : SCROLL︱FIXED }

BACKGROUND-COLOR：
設定背景顏色、透明
語法：{ BACKGROUND-COLOR : TRANSPARENT︱( color ) }
( color ) 可為顏色名稱或 16 進制表示法 - #RRGGBB ( 00 暗 ~ FF 亮 ) 、#RGB ( 0 暗 ~ F 亮 ) 代表紅綠藍強度。

BACKGROUND：
設定背景圖片、顏色、混合、透空、捲動、位置、重複
語法：{ BACKGROUND : TRANSPARENT︱( scroll )︱( color )︱URL ( url )︱( position )︱( repeat ) }

BACKGROUND-POSITION：
設定背景位置 ( 可設單位屬性 : 點 pt、英寸 in、公分 cm、像素 px、百分比 % )
語法：{ BACKGROUND-POSITION : TOP︱MIDDLE︱BOTTOM︱LEFT︱CENTER︱RIGHT︱( length )︱( position ) }

BACKGROUND-REPEAT：
設定背景重複填滿方式
語法：{ BACKGROUND-REPEAT : REPEAT︱REPEAT-X︱REPEAT-Y︱NO-REPEAT }

[CSS][ 知识]--段落属性

12380178@qq.com(wzgirl) — Fri,13 Jan 2006 09:02:49 +0800

■ 段落屬性

利用這些設定可以輕易的控制字距、行高、縮排、凸排、水平對齊、垂直對齊等。這些性質對網頁設計的排版非常有用！

■ 屬性分類

LETTER-SPACING：
設定文字間隙 ( 可設單位屬性 : 點 pt、英寸 in、公分cm、像素 px )
語法：{ LETTER-SPACING : NORMAL︱( length ) }

LINE-HEIGHT：
設定文字行列高度 ( 可設單位屬性 : 點 pt、英寸 in、公分 cm、像素 px、百分比 % )
語法：{ LINE-HEIGHT : NORMAL︱( number )︱( length )︱( percentage ) }

TEXT-ALIGN：
設定調整文字 ( 可設左邊、右邊、置中、整齊 )
語法：{ TEXT-ALIGN : LEFT︱RIGHT︱CENTER︱JUSTIFY }

TEXT-DECORATION：
設定文字裝飾 ( 分為 : 無、加底線、加橫線、加頂線 )
語法：{ TEXT-DECORATION : NONE︱UNDERLINE︱LINE-THROUGH︱OVERLINE }

TEXT-INDENT：
設定文字縮排 ( 可設單位屬性 : 點 pt、英寸 in、公分 cm、像素 px、百分比 % )
語法：{ TEXT-INDENT : ( length )︱( percentage ) }

TEXT-TRANSFORM：
設定文字改變 ( 可設無、第一個字母大寫、大寫、小寫 )
語法：{ TEXT-TRANSFORM : NONE︱CAPITALIZE︱UPPERCASE︱LOWERCASE }

[CSS][ 知识]--连接属性

12380178@qq.com(wzgirl) — Fri,13 Jan 2006 09:01:57 +0800

■ 連結屬性

以往 HTML 文件裡的超連結文字經過瀏覽器的解譯後都會以加底線的方式來顯現，並沒有動態的效果，透過 CSS 之 Anchor Pseudo Classes，大家可以將超連結文字的顯現方式做幾種不同的變化。

例如：http://www.wzgirl.com">温州女孩

以上的超連結經過在瀏覽器畫面上是以加底線的方式顯示。但如果利用 CSS 之 Anchor Pseudo Classes 則可以做出動態的效果，其標籤如下：記得兩個屬性間以 " ; " 隔開。

■ 屬性分類

A:link 是代表普通狀態的連結
A:visited 是代表造訪過的連結
A:link 是代表普通狀態的連結
A:visited 是代表造訪過的連結
A:hover 是代表滑鼠移到連結
A:active 是代表按下去連結
color 是代表連結顏色
font-size 是代表連結文字大小，適用 point(pt) 或是 pixels(px)
text-decoration 是代表文字樣式，none 代表沒有底線