CSS 全攻略

CSS全稱Cascading Style Sheet。層疊式樣式表。從三年前就開始使用CSS了，但一直以來都小看了它。CSS的出現實際上是一次革命，它試圖將網站的內容與表現分開。
1、CSS的四種實現方式：
1.內嵌式：

2.外鏈式：

3.導入式

3.屬性式：
二.CSS的定義：
選擇對象{屬性1:值1;屬性2:值2;屬性3:值3;屬性n:值n……}
如：
td{font-size:12px;color:#FFFF00}
.myname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
三.四種選擇對象
1.HTML selector (TagName)
2.class selector (.NAME)
3.ID selector (#IDname)
4.特殊對象 (a:hover　a:link　a:visited　a:active)
1.HTML selector
HTML selector就是HTML的置標符，如：DIV、TD、H1。HTML selector的做用範圍是應用了該樣式的全部頁面中的全部該置標符。
例：
td
{
color: #FF0000;
}
-->
注意：在中沒有應用什麼，其中文字自動變紅色。
2.class selector
定義class selector須要往其名稱其加一個點「.」。如「.classname」。class selector的做用範圍是全部包含「class="classname"」的置標符。
例：
.fontRed
{
color: #FF0000;
}
-->
注意：在第二個中沒有「class="fontRed"」，因此文字沒有變紅色。
3.ID selector
定義ID selector須要往其名稱其加一個點「#」。如「#IDname」。ID selector的做用範圍是全部包含「ID="classname"」的置標符。
例：

#fontRed
{
color: #FF0000;
}
-->  
注意：在第二個中沒有「ID="fontRed"」，因此文字沒有變紅色。
4.特殊對象
特殊對象包括四種，是針對連接對象設置的:
a:hover 鼠標移上時的超連接
a:link 常規，非訪問超連接
a:visited 訪問過的超連接
a:active 鼠標點擊時的超連接
特殊對象的做用範圍是全部置標符（這句話有待商榷，由於下面很快就有一種方法能夠把「全部」兩個字推翻）。
例：
a:hover
{
color: #0000FF;
text-decoration: underline;
}
-->
注意下面，頗有用！！！
a.classname:hover
a#IDname:hover
這兩種寫法，是分別配合.classname與#IDname使用的。它的做用範圍變成了全部包含「class="classname"」或「ID="IDname"」的置標符。這種寫法，能夠幫助你在同一頁面中實現多種a:hover效果，能夠看一下藝網的主頁上導航欄文字與普通文章標題在鼠標時的區別。
四.應用：
1.置標符　自動應用
2.特製類　class="NAME"
3.ID   ID="IDname"
4.特殊對象　自動應用
五.CSS屬性
CSS的屬性有不少，像上文中用到最多的color，表示文字的顏色。background-color表示背景色。這個是最主要的，可是由於沒有什麼難度，參考一下相關手冊就能夠了。



註明兩點
第一點：css的方式如今通常都採用外部鏈接，這個用起來方便，編譯起來也方便
第二點：我用的是frontpage2003，不少css的參數都會自動提示，彷佛好像之前我沒有用到過~~dw有的

CSS 標籤屬性/屬性參考
這裏列出了目前支持的樣式表(CSS)標籤屬性。標有星號(*)的標籤屬性可於 Microsoft® Internet Explorer 5 中使用。標有兩個星號(**)的標籤屬性可於 Internet Explorer 5.5 中使用。帶有兩個加號(++)的標籤屬性可於 Internet Explorer 6 中使用。若是某個標籤屬性或屬性已經提交給萬維網協會(W3C)但還沒有做爲標準發佈，則標有「已提交」。若某個標籤屬性或屬性既未提交給 W3C 也不是標準，將標有「擴展」。

CSS 標籤屬性/屬性

行爲屬性 behavior

字體和文本屬性 direction*

direction
font
font-family
font-size
font-style
font-variant
font-weight
ime-mode
layout-grid
layout-grid-char
layout-grid-line
layout-grid-mode
layout-grid-type
letter-spacing
line-break
line-height
min-height ++
ruby-align
ruby-overhang
ruby-position
text-align
text-autospace
text-decoration
text-indent
text-justify
text-kashida-space
text-overflow ++  
text-transform
text-underline-position
unicode-bidi
vertical-align
white-space**
word-break
word-spacing ++(於 Macintosh 版本 4.0 中可用)
word-wrap
writing-mode

顏色和背景屬性 background-attachment
background-color
background-image
background-position
background-position-x
background-position-y
background-repeat
color

版面屬性 border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse*
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
clear
float
layout-flow
margin
margin-bottom
margin-left
margin-right
margin-top
padding
padding-bottom
padding-left
padding-right
padding-top
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
table-layout*
zoom

分類屬性 display

list-style
list-style-image
list-style-position
list-style-type

定位屬性 bottom*

clip
height
left
overflow
overflow-x
overflow-y
position
right*
top
visibility
width
z-index

打印屬性 page**

pageBreakAfter
pageBreakBefore

濾鏡屬性 filter

僞類和其它屬性 :active

@charset
cursor
:first-letter**
:first-line**
@font-face
:hover
@import
!important
:link
@media*
@page**
:visited


實現CSS圖片邊框效果的方法

圖片邊框效果主要有兩種，較簡單的方法是直接在CSS文件中對img定義邊界（border），例如我在CSS中定義了：
img.framed {
padding: 6px;
border: 1px solid #CCC;
background-color: #FFF; }
那麼在HTML文件中，或者在blog更新的時候，針對嵌入的圖片定義class="framed"就會有相應的邊框效果。
上面的方法的優勢是比較簡單，但實現的效果比較單調，並不必定能達到使人滿意的效果和一些特殊效果，例如陰影，色彩變化等等。下面介紹第二種方法，比第一種稍微複雜一些。不少Blogger喜歡在每篇文章中附帶一副固定大小的圖片，圖文並茂的網頁看起來更加生動。這個時候咱們能夠爲圖片設計更加個性化的邊框效果，讓網頁的視覺效果更加豐富，不過這種方法須要對圖片大小進行限制。
實例：CSS圖片邊框效果 - CSS Image Frame
首先須要製做一個邊框效果的背景圖片，而後在CSS中對背景邊框定義圖片替代（Image replacement)和定位和平移。我製做了一個例子，有興趣的朋友能夠下載源文件並在本身的網頁中進行實驗。特別指出，這個效果中圖片尺寸是：163px X 105px



不少朋友會奇怪爲何須要3個框，上圖演示了邊框效果圖在CSS定義中的處理過程，能夠看到，在邊框效果背景文件中的3個框，分別爲默認，鼠標劃過，以及點擊後定義了不一樣的效果。而後經過CSS中的定位平移進行控制。在CSS網頁設計中，圖片替代以及定位平移是常用的技巧，這種方法不但解決了對於不一樣瀏覽器之間的適用性，也避免了負載圖片過大而影響瀏覽速度的問題。更重要的是方便易用，咱們不須要使用Photoshop對全部圖片進行邊框加工而能快速實現邊框效果。 詳細的方法能夠看範例，也歡迎你們提供更多的意見。


有關表格邊框的css語法整理

咱們知道Dreamweaver在表格製做方面作得很是出色，可是在某些時候仍是必須結合css才能達到一些特定效果，下面咱們先把有關表格邊框的css語法整理出來，而後另外介紹怎樣用css美化表格的邊框。

　　有關表格邊框的css語法

　　具體內容包括：上邊框寬度、右邊框寬度、下邊框寬度、左邊框寬度、邊框寬度、邊框顏色、邊框樣式、上邊框、下邊框、左邊框、右邊框、邊框、寬度、高度、有關標籤等。

　　 1.上邊框寬度

　　語法: border-top-width: <值>

　　容許值: thin | medium | thick | <長度>

　　初始值: medium

　　適用於: 全部對象

　　向下兼容: 否

　　上邊框寬度屬性用於指定一個元素上邊框的寬度。值能夠是三個關鍵字其中的一個，都不受字體大小或長度的影響，能夠用於實現成比例的寬度。不容許使用負值。也能夠用在上邊框、邊框的寬度或邊框的屬性略寫。

　　2.右邊框寬度

　　語法: border-right-width: <值>

　　容許值: thin | medium | thick | <長度>

　　初始值: medium

　　適用於: 全部對象

　　向下兼容: 否

　　右邊框寬度屬性用於指定元素的右邊框的寬度。值能夠是三個關鍵字其中的一個，都不受字體大小或長度的影響，能夠用於實現成比例的寬度。不容許使用負值。也能夠用在右邊框、邊框的寬度或邊框的屬性略寫。

　　 3.下邊框寬度

　　語法: border-bottom-width: <值>

　　容許值: thin | medium | thick | <長度>

　　初始值: medium

　　適用於: 全部對象

　　向下兼容: 否

　　下邊框寬度屬性用於指定元素的下邊框的寬度。值能夠是三個關鍵字其中的一個，都不受字體大小或長度的影響，能夠用於實現成比例的寬度。不容許使用負值。也能夠用在下邊框、邊框的寬度或邊框的屬性略寫。

　　 4.左邊框寬度

　　語法: border-left-width: <值>

　　容許值: thin | medium | thick | <長度>

　　初始值: medium

　　適用於: 全部對象

　　向下兼容: 否

　　左邊框寬度屬性用於指定元素的左邊框的寬度。值能夠是三個關鍵字其中的一個，都不受字體大小或長度的影響，能夠用於實現成比例的寬度。不容許使用負值。也能夠用在左邊框、邊框的寬度或邊框的屬性略寫。

　　5.邊框寬度

　　語法: border-width: <值>

　　容許值: [ thin | medium | thick | <長度> ]{1,4}

　　初始值: 未定義

　　適用於: 全部對象

　　向下兼容: 否

　　邊框寬度屬性用一到四個值來設置元素的邊界，值是一個關鍵字或長度。不容許使用負值長度。若是四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。若是給出一個值，它將被運用到各邊上。若是兩個或三個值給出了，省略了的值與對邊相等。 這個屬性是上邊框寬度、右邊框寬度、下邊框寬度和左邊框寬度屬性的略寫。也可使用略寫的邊框屬性。

　　6.邊框顏色

　　語法: border-color: <值>

　　容許值: <顏色>{1,4}

　　初始值: 顏色屬性的值

　　適用於: 全部對象

　　向下兼容: 否

　　邊框顏色屬性設置一個元素的邊框顏色。可使用一到四個關鍵字。若是四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。若是給出一個值，它將被運用到各邊上。若是兩個或三個值給出了，省略了的值與對邊相等。也可使用略寫的邊框屬性。

　　7.邊框樣式

　　語法: border-style: <值>

　　容許值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}

　　初始值: none

　　適用於: 全部對象

　　向下兼容: 否

　　邊框樣式屬性用於設置一個元素邊框的樣式。這個屬性必須用於指定可見的邊框。可使用一到四個關鍵字。若是四個值都給出了，它們分別應用於上、右、下和左邊框的式樣。若是給出一個值，它將被運用到各邊上。若是兩個或三個值給出了，省略了的值與對邊相等。也可使用略寫的邊框屬性。

　　none：無樣式；
　　dotted：點線；
　　dashed：虛線；
　　solid：實線；
　　double：雙線；
　　groove：槽線；
　　ridge：脊線；
　　inset：內凹；
　　outset：外凸。
8.上邊框

　　語法: border-top: <值>

　　容許值: <上邊框寬度> || <邊框式樣> || <顏色>

　　初始值: 未定義

　　適用於: 全部對象

　　向下兼容: 否

　　上邊框屬性是一個用於設置一個元素上邊框的寬度、式樣和顏色的略寫。注意只能給出一個邊框式樣。也可使用略寫的邊框屬性。

　　9.右邊框

　　語法: border-right: <值>

　　容許值: <右邊框寬度> || <邊框式樣> || <顏色>

　　初始值: 未定義

　　適用於: 全部對象

　　向下兼容: 否

　　右邊框屬性是一個用於設置一個元素右邊框的寬度、式樣、和顏色的略寫。注意只能給出一個邊框式樣。也可使用略寫的邊框屬性。　　

　　10.下邊框

　　語法: border-bottom: <值>

　　容許值: <下邊框寬度> || <邊框式樣> || <顏色>

　　初始值: 未定義

　　適用於: 全部對象

　　向下兼容: 否

　　下邊框屬性是一個用於設置一個元素的下邊框的寬度、式樣和顏色的略寫。注意只能給出一個邊框式樣。也可使用略寫的邊框屬性。

　　11.左邊框

　　語法: border-left: <值>

　　容許值: <左邊框寬度> || <邊框式樣> || <顏色>

　　初始值: 未定義

　　適用於: 全部對象

　　向下兼容: 否

　　左邊框屬性是一個用於設置一個元素左邊框的寬度、式樣和顏色的略寫。注意只能給出一個邊框式樣。也可使用略寫的邊框屬性。

　　 12.邊框

　　語法: border: <值>

　　容許值: <邊框寬度> || <邊框式樣> || <顏色>

　　初始值: 未定義

　　適用於: 全部對象

　　向下兼容: 否

　　邊框屬性是一個用於設置一個元素邊框的寬度、式樣和顏色的略寫。

　　邊框聲明的例子包括：

　　H2 { border: groove 3em }
　　A:link { border: solid blue }
　　A:visited { border: thin dotted #800080 }
　　A:active { border: thick double red }

　　邊框屬性只能設置四種邊框；只能給出一組邊框的寬度和式樣。爲了給出一個元素的四種邊框的不一樣的值，網頁製做者必須用一個或更多的屬性，如：上邊框、右邊框、下邊框、左邊框、邊框顏色、邊框寬度、邊框式樣、上邊框寬度、右邊框寬度、下邊框寬度或左邊框寬度。

　　13.寬度

　　語法: width: <值>

　　容許值: <長度> | <百分比> | auto

　　初始值: auto

　　適用於: 塊級和替換元素

　　向下兼容: 否

　　寬度屬性的初始值爲「auto」，即爲該元素的原有寬度(有就是元素本身的寬度)。百分比參考上級元素的寬度。不容許使用負的長度值。

　　14.高度

　　語法: height: <值>

　　容許值: <長度> | auto

　　初始值: auto

　　適用於: 塊級和替換元素

　　向下兼容: 否

　　高度屬性的初始值爲「auto」，即爲該元素的原有高度(有就是元素本身的高度，)。百分比參考上級元素的寬度。不容許使用負的長度值。

　　15.有關標籤

　　table：表格標籤，對整個表格樣式的定義要放在table中；
　　td：單元格標籤，對單元格樣式的定義要放在td中。

css濾鏡隨着網頁設計技術的發展，人們已經不知足於原有的一些HTML標記，而是但願可以爲頁面添加一些多媒體屬性，例如濾鏡的和漸變的效果。CSS技術的飛快發展使這些需求成爲了現實。從如今開始我要爲你們介紹一個新的CSS擴展部分：CSS濾鏡屬性（Filter Properties)。使用這種技術能夠把可視化的濾鏡和轉換效果添加到一個標準的HTML元素上，例如圖片、文本容器、以及其餘一些對象。對於濾鏡和漸變效果，前者是基礎，由於後者就是濾鏡效果的不斷變化和演示更替。當濾鏡和漸變效果結合到一個基本的SCRIPT小程序中後，網頁設計者就能夠擁有一個創建動態交互文檔的強大工具。也就是CSS FILTER+ SCRIPT，    這就說明想要創建動態的文檔還要一些SCRIPT （腳本語言）的基礎。可視化濾鏡屬性只能用在HTML控件元素上。所謂的HTML空間元素就是它們在頁面上定義了一個矩形空間，瀏覽器的窗口能夠顯示這些空間。下面列出了HTML合法的控件和它們的說明。備註：惋惜只有IE4.0以上支持，若是是別的瀏覽器，那就.......元素 說明 BODY 網頁文檔的主體元素，全部的可見範圍都在<BODY>元素內 BUTTON 表單域的按鈕，能夠有「發送(submit)」、「重置(reset)」等形式 DIV 定義了網頁上的一個區域，這個區域的高度、寬度或者絕對位置都是以知的 IMG 圖片元素，經過指定「src"屬性來指定圖片的來源 INPUT 輸入表單域 MARQUEE 移動字幕效果 SPAN 定義了網頁上的一個區域，這個區域的高度、寬度或者絕對位置都是以知的 TABLE 表格 TD 表格數據單元格 TEXTAREA 文本區域 TFOOT 多行輸入文本框 TH 表格標題單元格 THEAD 表格標題 TR 表格行 　IE4.0以上支持的濾鏡屬性表濾鏡效果 描述 Alpha 設置透明度 Blru 創建模糊效果 Chroma 把指定的顏色設置爲透明 DropShadow 創建一種偏移的影象輪廓，即投射陰影 FlipH 水平反轉 FlipV 垂直反轉 Glow 爲對象的外邊界增長光效 Grayscale 下降圖片的彩色度 Invert 將色彩、飽和度以及亮度值徹底反轉創建底片效果 Light 在一個對象上進行燈光投影 Mask 爲一個對象創建透明膜 Shadow 創建一個對象的固體輪廓，即陰影效果 Wave 在X軸和Y軸方向利用正弦波紋打亂圖片 Xray 只顯示對象的輪廓 一、Alpha 濾鏡      語法：{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}    "Alpha"屬性是把一個目標元素與背景混合。設計者能夠指定數值來控制混合的程度。這種「與背景混合」通俗地說就是一個元素的透明度。經過指定座標，能夠指定點、線、面的透明度。他們的參數含義分別以下：     「opacity"表明透明度水準。默認的範圍是從0 到 100，他們實際上是百分比的形式。也就是說，0表明徹底透明，100表明徹底不透明。」finishopacity"是一個可選參數，若是想要設置漸變的透明效果，就可使用他們來指定結束時的透明度。範圍也是0 到 100。「style" 參數指定了透明區域的形狀特徵。其中0表明統一形狀、1表明線形、2表明放射狀、3表明長方形。」STARTX「和」STARTY「表明漸變透明效果的開始X和Y座標。」FINISHX「和」FINISHY「表明漸變透明效果結束X和Y 的座標。效果以下：二、Blur 濾鏡語法：對於HTML：{ilter:blur(add=add,direction=direction,strength=strength)}      對於Script語言： [oblurfilter=] object.filters.blur用手指在一幅還沒有乾透的油畫上迅速劃過期，畫面就會變得模糊。」Blur"就是產生一樣的模糊效果。「ADD」參數是一個布爾判斷「TRUE（默認）」或者「FALSE」。它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進行的，「DIRECTION」參數用來設置模糊的方向。其中0度表明垂直向上，而後每45度爲一個單位。它的默認值是向左的270度。「STRENGTH「值只能使用整數來指定，她表明有多少像素的寬度將受到模糊影響。默認是5個。對於網頁上的字體，若是設置他的模糊」ADD=1「，那麼這些字體的效果會很是好看的。以下：filter:blur(add=ture,direction=135,strength=10）三、FlipH, FlipV 濾鏡   語法：{filter:filph} ,{filter:filpv} 分別是水平反轉和垂直反轉，具體以下：四、Chroma 濾鏡語法：{filter:chroma(color=color)}       使用」Chroma"屬性能夠設置一個對象中指定的顏色爲透明色，參數COLOR即要透明的顏色。下面是蘭色文字，而後用Chroma 濾鏡過濾掉蘭色，就成了下面的樣子。filter:chroma(color=blue)滴水檐坊五、DropShadow 濾鏡語法：{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}「DropShaow"顧名思義就是添加對象的陰影效果。其工做原理是創建一個偏移量，加上較深。"Color"表明投射陰影的顏色，"offx"和"offy"分別是X方向和Y方向陰影的餓偏移量。"Positive"參數是一個布爾值，若是爲「TRUE（非0）」，那麼就爲任何的非透明像素創建可見的投影。若是爲「FASLE（0）」，那麼就爲透明的像素部分創建透明效果六、Glow 濾鏡語法：{filter:glow(color=color,strength)}當對一個對象使用"glow"屬性後，這個對象的邊緣就會產生相似發光的效果。「COLOR」是指定發光的顏色，「STRENGTH」則是強度的表現，能夠從1到255之間的任何整數來指定這個力度。filter:glow(color=red,strength=10) 後的效果 七、Gray ,Invert,Xray 濾鏡語法：{filter:gray} ,{filter:invert},{filter:xray}Gray濾鏡是把一張圖片變成灰度圖；Invert濾鏡是把對象的可視化屬性所有翻轉，包括色彩、飽和度、和亮度值；Xray濾鏡是讓對象反映出它的輪廓並把這些輪廓加亮，也就是所謂的「X」光片。效果以下：、Light  濾鏡語法：Filter{light}這個屬性模擬光源的投射效果。一旦爲對象定義了「LIGHT"濾鏡屬性，那麼就能夠調用它的「方法(Method)"來設置或者改變屬性。「LIGHT"可用的方法有：  AddAmbient      加入包圍的光源 AddCone         加入錐形光源 AddPoint        加入點光源 Changcolor      改變光的顏色 Changstrength   改變光源的強度 Clear           清除全部的光源 MoveLight       移動光源 能夠定義光源的虛擬位置，以及經過調整X軸和Y軸的數值來控制光源焦點的位置，還能夠調整光源的形式（點光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬性。若是動態的設置光源，可能回產生一些意想不到的效果。後面幾頁會有具體範例。九、Mask 濾鏡語法：{filter:mask(color=color)}使用"MASK"屬性能夠爲對象創建一個覆蓋於表面的膜，其效果就象戴者有色眼鏡看物體同樣。十、Shadow 濾鏡語法：{filter:shadow(color=color,direction=direction)}利用「Shadow」屬性能夠在指定的方向創建物體的投影，COLOR是投影色，DIRECTION是設置投影的方向。其中0度表明垂直向上，而後每45度爲一個單位。它的默認值是向左的270度。filter:shadow(color=red,direction=225) filter:shadow(color=blue,direction=225) filter:shadow(color=gray,direction=225) 效果分別以下：十一、Wave 濾鏡 語法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}"wave" 屬性把對象按垂直的波形樣式打亂。默認是「TRUE（非0）」， 「ADD」表示是否要把對象按照波形樣式打亂，「FREQ」是波紋的頻率，也就是指定在對象上一共須要產生多少個完整的波紋，「LIGHTSTRENGTH」參數能夠對於波紋加強光影的效果，範圍0----100，「PHASE」參數用來設置正弦波的偏移量。「STRENGTH」表明振幅大小。