|
CSS全稱Cascading Style Sheet。層疊式樣式表,。從幾年前就開始使用CSS了,，但一直以來都小看了它。CSS的出現(xiàn)其實是一次革命,，它試圖將網(wǎng)站的內(nèi)容與表現(xiàn)分開。
一,、CSS的四種實現(xiàn)方式： 1.內(nèi)嵌式： 2.外鏈?zhǔn)剑? 3.導(dǎo)入式 4.屬性式： 二.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的置標(biāo)符,，如：DIV、TD,、H1,。HTML selector的作用范圍是應(yīng)用了該樣式的所有頁面中的所有該置標(biāo)符。 例： td { color: #FF0000; } --> 注意：在中沒有應(yīng)用什么,，其中文字自動變紅色,。 2.class selector 定義class selector需要往其名稱其加一個點“.”。如“.classname”,。class selector的作用范圍是所有包含“class="classname"”的置標(biāo)符,。 例： .fontRed { color: #FF0000; } --> 注意：在第二個中沒有“class="fontRed"”，所以文字沒有變紅色,。 3.ID selector 定義ID selector需要往其名稱其加一個點“#”,。如“#IDname”。ID selector的作用范圍是所有包含“ID="classname"”的置標(biāo)符,。 例： #fontRed { color: #FF0000; } --> 注意：在第二個中沒有“ID="fontRed"”,，所以文字沒有變紅色,。 4.特殊對象 特殊對象包括四種，是針對鏈接對象設(shè)置的: a:hover 鼠標(biāo)移上時的超鏈接 a:link 常規(guī),，非訪問超鏈接 a:visited 訪問過的超鏈接 a:active 鼠標(biāo)點擊時的超鏈接 特殊對象的作用范圍是所有置標(biāo)符（這句話有待商榷,，因為下面很快就有一種方法可以把“所有”兩個字推翻）。 例： a:hover { color: #0000FF; text-decoration: underline; } --> 注意下面,，很有用?。?！ a.classname:hover a#IDname:hover 這兩種寫法,，是分別配合.classname與#IDname使用的。它的作用范圍變成了所有包含“class="classname"”或 “ID="IDname"”的置標(biāo)符,。這種寫法,，可以幫助你在同一頁面中實現(xiàn)多種a:hover效果，可以看一下藝網(wǎng)的主頁上導(dǎo)航欄文字與普通文章標(biāo)題在 鼠標(biāo)時的區(qū)別,。 四.應(yīng)用： 1.置標(biāo)符 自動應(yīng)用 2.特制類 class="NAME" 3.ID ID="IDname" 4.特殊對象 自動應(yīng)用 五.CSS屬性 CSS的屬性有很多,，像上文中用到最多的color，表示文字的顏色,。background-color表示背景色,。這個是最主要的，但是因為沒有什么難度,，參考一下相關(guān)手冊就可以了,。 注明兩點 第一點：css的方式現(xiàn)在一般都采用外部連接，這個用起來方便,，編譯起來也方便 第二點：我用的是frontpage2003,，很多css的參數(shù)都會自動提示，似乎好像以前我沒有用到過~~dw有的 CSS 標(biāo)簽屬性/屬性參考 這里列出了目前支持的樣式表(CSS)標(biāo)簽屬性,。標(biāo)有星號(*)的標(biāo)簽屬性可于 Microsoft® Internet Explorer 5 中使用,。標(biāo)有兩個星號(**)的標(biāo)簽屬性可于 Internet Explorer 5.5 中使用。帶有兩個加號(++)的標(biāo)簽屬性可于 Internet Explorer 6 中使用,。如果某個標(biāo)簽屬性或?qū)傩砸呀?jīng)提交給萬維網(wǎng)協(xié)會(W3C)但尚未作為標(biāo)準(zhǔn)發(fā)布,，則標(biāo)有“已提交”。若某個標(biāo)簽屬性或?qū)傩约任刺峤唤o W3C 也不是標(biāo)準(zhǔn),，將標(biāo)有“擴(kuò)展”,。 CSS 標(biāo)簽屬性/屬性 行為屬性 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 有關(guān)表格邊框的css語法整理 我們知道Dreamweaver在表格制作方面做得非常出色，但是在某些時候還是必須結(jié)合css才能達(dá)到一些特定效果,，下面我們先把有關(guān)表格邊框的css語法整理出來,，然后另外介紹怎樣用css美化表格的邊框。 有關(guān)表格邊框的css語法 具體內(nèi)容包括：上邊框?qū)挾?、右邊框?qū)挾?、下邊框?qū)挾?、左邊框?qū)挾取⑦吙驅(qū)挾?、邊框顏色,、邊框樣式、上邊框,、下邊框,、左邊框、右邊框,、邊框,、寬度、高度,、有關(guān)標(biāo)簽等,。 1.上邊框?qū)挾? 語法: border-top-width: <值> 允許值: thin | medium | thick | <長度> 初始值: medium 適用于: 所有對象 向下兼容: 否 上邊框?qū)挾葘傩杂糜谥付ㄒ粋€元素上邊框的寬度。值可以是三個關(guān)鍵字其中的一個,，都不受字體大小或長度的影響,，可以用于實現(xiàn)成比例的寬度。不允許使用負(fù)值,。也可以用在上邊框,、邊框的寬度或邊框的屬性略寫,。 2.右邊框?qū)挾? 語法: border-right-width: <值> 允許值: thin | medium | thick | <長度> 初始值: medium 適用于: 所有對象 向下兼容: 否 右邊框?qū)挾葘傩杂糜谥付ㄔ氐挠疫吙虻膶挾?。值可以是三個關(guān)鍵字其中的一個，都不受字體大小或長度的影響,，可以用于實現(xiàn)成比例的寬度,。不允許使用負(fù)值,。也可以用在右邊框、邊框的寬度或邊框的屬性略寫,。 3.下邊框?qū)挾? 語法: border-bottom-width: <值> 允許值: thin | medium | thick | <長度> 初始值: medium 適用于: 所有對象 向下兼容: 否 下邊框?qū)挾葘傩杂糜谥付ㄔ氐南逻吙虻膶挾取Ｖ悼梢允侨齻€關(guān)鍵字其中的一個,，都不受字體大小或長度的影響，可以用于實現(xiàn)成比例的寬度。不允許使用負(fù)值,。也可以用在下邊框,、邊框的寬度或邊框的屬性略寫。 4.左邊框?qū)挾? 語法: border-left-width: <值> 允許值: thin | medium | thick | <長度> 初始值: medium 適用于: 所有對象 向下兼容: 否 左邊框?qū)挾葘傩杂糜谥付ㄔ氐淖筮吙虻膶挾取Ｖ悼梢允侨齻€關(guān)鍵字其中的一個,，都不受字體大小或長度的影響，可以用于實現(xiàn)成比例的寬度,。不允許使用負(fù)值,。也可以用在左邊框、邊框的寬度或邊框的屬性略寫,。 5.邊框?qū)挾? 語法: border-width: <值> 允許值: [ thin | medium | thick | <長度> ]{1,4} 初始值: 未定義 適用于: 所有對象 向下兼容: 否 邊框?qū)挾葘傩杂靡坏剿膫€值來設(shè)置元素的邊界，值是一個關(guān)鍵字或長度,。不允許使用負(fù)值長度,。如果四個值都給出了，它們分別應(yīng)用于上,、右,、下和左 邊 框的式樣。如果給出一個值,，它將被運(yùn)用到各邊上,。如果兩個或三個值給出了,，省略了的值與對邊相等。 這個屬性是上邊框?qū)挾?、右邊框?qū)挾?、下邊框?qū)挾群妥筮吙驅(qū)挾葘傩缘穆詫?。也可以使用略寫的邊框?qū)傩浴? 6.邊框顏色 語法: border-color: <值> 允許值: <顏色>{1,4} 初始值: 顏色屬性的值 適用于: 所有對象 向下兼容: 否 邊框顏色屬性設(shè)置一個元素的邊框顏色?？梢允褂靡坏剿膫€關(guān)鍵字。如果四個值都給出了,，它們分別應(yīng)用于上、右,、下和左邊框的式樣,。如果給出一個值，它將被運(yùn)用到各邊上,。如果兩個或三個值給出了,，省略了的值與對邊相等,。也可以使用略寫的邊框?qū)傩浴? 7.邊框樣式 語法: border-style: <值> 允許值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} 初始值: none 適用于: 所有對象 向下兼容: 否 邊框樣式屬性用于設(shè)置一個元素邊框的樣式。這個屬性必須用于指定可見的邊框,?？梢允褂靡坏剿膫€關(guān)鍵字,。如果四個值都給出了,，它們分別應(yīng)用于 上、 右,、下和左邊框的式樣,。如果給出一個值，它將被運(yùn)用到各邊上,。如果兩個或三個值給出了,，省略了的值與對邊相等。也可以使用略寫的邊框?qū)傩浴? none：無樣式,； dotted：點線,； dashed：虛線； solid：實線,； double：雙線,； groove：槽線； ridge：脊線,； inset：內(nèi)凹,； outset：外凸。 8.上邊框 語法: border-top: <值> 允許值: <上邊框?qū)挾?gt; || <邊框式樣> || <顏色> 初始值: 未定義 適用于: 所有對象 向下兼容: 否 上邊框?qū)傩允且粋€用于設(shè)置一個元素上邊框的寬度,、式樣和顏色的略寫,。注意只能給出一個邊框式樣。也可以使用略寫的邊框?qū)傩浴? 9.右邊框 語法: border-right: <值> 允許值: <右邊框?qū)挾?gt; || <邊框式樣> || <顏色> 初始值: 未定義 適用于: 所有對象 向下兼容: 否 右邊框?qū)傩允且粋€用于設(shè)置一個元素右邊框的寬度,、式樣,、和顏色的略寫。注意只能給出一個邊框式樣,。也可以使用略寫的邊框?qū)傩浴? 10.下邊框 語法: border-bottom: <值> 允許值: <下邊框?qū)挾?gt; || <邊框式樣> || <顏色> 初始值: 未定義 適用于: 所有對象 向下兼容: 否 下邊框?qū)傩允且粋€用于設(shè)置一個元素的下邊框的寬度,、式樣和顏色的略寫,。注意只能給出一個邊框式樣。也可以使用略寫的邊框?qū)傩浴? 11.左邊框 語法: border-left: <值> 允許值: <左邊框?qū)挾?gt; || <邊框式樣> || <顏色> 初始值: 未定義 適用于: 所有對象 向下兼容: 否 左邊框?qū)傩允且粋€用于設(shè)置一個元素左邊框的寬度,、式樣和顏色的略寫。注意只能給出一個邊框式樣,。也可以使用略寫的邊框?qū)傩浴? 12.邊框 語法: border: <值> 允許值: <邊框?qū)挾?gt; || <邊框式樣> || <顏色> 初始值: 未定義 適用于: 所有對象 向下兼容: 否 邊框?qū)傩允且粋€用于設(shè)置一個元素邊框的寬度,、式樣和顏色的略寫。 邊框聲明的例子包括： H2 { border: groove 3em } A:link { border: solid blue } A:visited { border: thin dotted #800080 } A:active { border: thick double red } 邊框?qū)傩灾荒茉O(shè)置四種邊框,；只能給出一組邊框的寬度和式樣,。為了給出一個元素的四種邊框的不同的值，網(wǎng)頁制作者必須用一個或更多的屬性,，如：上邊框,、右邊框、下邊框,、左邊框,、邊框顏色、邊框?qū)挾?、邊框式樣,、上邊框?qū)挾取⒂疫吙驅(qū)挾?、下邊框?qū)挾然蜃筮吙驅(qū)挾取? 13.寬度 語法: width: <值> 允許值: <長度> | <百分比> | auto 初始值: auto 適用于: 塊級和替換元素 向下兼容: 否 寬度屬性的初始值為“auto”,，即為該元素的原有寬度(有就是元素自己的寬度)。百分比參考上級元素的寬度,。不允許使用負(fù)的長度值,。 14.高度 語法: height: <值> 允許值: <長度> | auto 初始值: auto 適用于: 塊級和替換元素 向下兼容: 否 高度屬性的初始值為“auto”，即為該元素的原有高度(有就是元素自己的高度,，),。百分比參考上級元素的寬度。不允許使用負(fù)的長度值,。 15.有關(guān)標(biāo)簽 table：表格標(biāo)簽,，對整個表格樣式的定義要放在table中； td：單元格標(biāo)簽,，對單元格樣式的定義要放在td中,。 css濾鏡 隨著網(wǎng)頁設(shè)計技術(shù)的發(fā)展，人們已經(jīng)不滿足于原有的一些HTML標(biāo)記,，而是希望能夠為頁面添加一些多媒體屬性,，例如濾鏡的和漸變的效果。CSS技術(shù) 的 飛快發(fā)展使這些需求成為了現(xiàn)實,。從現(xiàn)在開始我要為大家介紹一個新的CSS擴(kuò)展部分：CSS濾鏡屬性（Filter Properties),。使用這種技術(shù)可以把可視化的濾鏡和轉(zhuǎn)換效果添加到一個標(biāo)準(zhǔn)的HTML元素上,，例如圖片、文本容器,、以及其他一些對象,。對于濾鏡和 漸變效果，前者是基礎(chǔ),，因為后者就是濾鏡效果的不斷變化和演示更替,。當(dāng)濾鏡和漸變效果結(jié)合到一個基本的SCRIPT小程序中后，網(wǎng)頁設(shè)計者就可以擁有一個 建立動態(tài)交互文檔的強(qiáng)大工具,。也就是CSS FILTER+ SCRIPT,， 這就說明想要建立動態(tài)的文檔還要一些SCRIPT （腳本語言）的基礎(chǔ)。 可視化濾鏡屬性只能用在HTML控件元素上,。所謂的HTML空間元素就是它們在頁面上定義了一個矩形空間,，瀏覽器的窗口可以顯示這些空間。下面列出了HTML合法的控件和它們的說明,。 備注：可惜只有IE4.0以上支持,，如果是別的瀏覽器，那就....... 元素 說明 BODY 網(wǎng)頁文檔的主體元素,，所有的可見范圍都在<BODY>元素內(nèi) BUTTON 表單域的按鈕,，可以有“發(fā)送(submit)”、“重置(reset)”等形式 DIV 定義了網(wǎng)頁上的一個區(qū)域,，這個區(qū)域的高度,、寬度或者絕對位置都是以知的 IMG 圖片元素，通過指定“src"屬性來指定圖片的來源 INPUT 輸入表單域 MARQUEE 移動字幕效果 SPAN 定義了網(wǎng)頁上的一個區(qū)域,，這個區(qū)域的高度,、寬度或者絕對位置都是以知的 TABLE 表格 TD 表格數(shù)據(jù)單元格 TEXTAREA 文本區(qū)域 TFOOT 多行輸入文本框 TH 表格標(biāo)題單元格 THEAD 表格標(biāo)題 TR 表格行 IE4.0以上支持的濾鏡屬性表 濾鏡效果 描述 Alpha 設(shè)置透明度 Blru 建立模糊效果 Chroma 把指定的顏色設(shè)置為透明 DropShadow 建立一種偏移的影象輪廓，即投射陰影 FlipH 水平反轉(zhuǎn) FlipV 垂直反轉(zhuǎn) Glow 為對象的外邊界增加光效 Grayscale 降低圖片的彩色度 Invert 將色彩,、飽和度以及亮度值完全反轉(zhuǎn)建立底片效果 Light 在一個對象上進(jìn)行燈光投影 Mask 為一個對象建立透明膜 Shadow 建立一個對象的固體輪廓,，即陰影效果 Wave 在X軸和Y軸方向利用正弦波紋打亂圖片 Xray 只顯示對象的輪廓 1、Alpha 濾鏡 語法：{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx, starty=starty,finishx=finishx,finishy=finishy)} "Alpha"屬性是把一個目標(biāo)元素與背景混合,。設(shè)計者可以指定數(shù)值來控制混合的程度,。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定坐標(biāo),，可以指定點,、線、面的透明度,。他們的參數(shù)含義分別如下： “opacity"代表透明度水準(zhǔn),。默認(rèn)的范圍是從0 到 100，他們其實是百分比的形式,。也就是說,，0代表完全透明,，100代表完全不透明。”finishopacity"是一個可選參數(shù),，如果想要設(shè)置漸變的 透明效果,，就可以使用他們來指定結(jié)束時的透明度。范圍也是0 到 100,。“style" 參數(shù)指定了透明區(qū)域的形狀特征,。其中0代表統(tǒng)一形狀、1代表線形,、2代表放射狀、3代表長方形,。”STARTX“和”STARTY“代表漸變透明效果的開 始X和Y坐標(biāo),。”FINISHX“和”FINISHY“代表漸變透明效果結(jié)束X和Y 的坐標(biāo)。 效果如下： 2,、Blur 濾鏡 語法：對于HTML：{ilter:blur(add=add,direction=direction,strength=strength)} 對于Script語言： [oblurfilter=] object.filters.blur 用手指在一幅尚未干透的油畫上迅速劃過時,，畫面就會變得模糊。”Blur"就是產(chǎn)生同樣的模糊效果,。 “ADD”參數(shù)是一個布爾判斷“TRUE（默認(rèn)）”或者“FALSE”,。它指定圖片是否被改變成印象派的模糊效果。模糊效果是按順時針的方向進(jìn)行 的,，“DIRECTION”參數(shù)用來設(shè)置模糊的方向,。其中0度代表垂直向上，然后每45度為一個單位,。它的默認(rèn)值是向左的270度,。“STRENGTH “值只能使用整數(shù)來指定，她代表有多少像素的寬度將受到模糊影響,。默認(rèn)是5個,。對于網(wǎng)頁上的字體，如果設(shè)置他的模糊”ADD=1“,，那么這些字體的效果會 非常好看的,。如下： filter:blur(add=ture,direction=135,strength=10） 3、FlipH, FlipV 濾鏡 語法：{filter:filph} ,{filter:filpv} 分別是水平反轉(zhuǎn)和垂直反轉(zhuǎn),，具體如下： 4,、Chroma 濾鏡 語法：{filter:chroma(color=color)} 使用”Chroma"屬性可以設(shè)置一個對象中指定的顏色為透明色，參數(shù)COLOR即要透明的顏色,。下面是蘭色文字,，然后用Chroma 濾鏡過濾掉蘭色，就成了下面的樣子,。 filter:chroma(color=blue) 滴水檐坊 5,、DropShadow 濾鏡 語法：{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)} “DropShaow"顧名思義就是添加對象的陰影效果,。其工作原理是建立一個偏移量，加上較深,。"Color"代表投射陰影的顏色,， "offx" 和"offy"分別是X方向和Y方向陰影的餓偏移量。"Positive"參數(shù)是一個布爾值,，如果為“TRUE（非0）”,，那么就為任何的非透明像素建立 可見的投影。如果為“FASLE（0）”,，那么就為透明的像素部分建立透明效果 6,、Glow 濾鏡 語法：{filter:glow(color=color,strength)} 當(dāng)對一個對象使用"glow"屬性后，這個對象的邊緣就會產(chǎn)生類似發(fā)光的效果,。“COLOR”是指定發(fā)光的顏色,，“STRENGTH”則是強(qiáng)度的表現(xiàn)，可以從1到255之間的任何整數(shù)來指定這個力度,。 filter:glow(color=red,strength=10) 后的效果 7,、Gray ,Invert,Xray 濾鏡 語法：{filter:gray} ,{filter:invert},{filter:xray} Gray濾鏡是把一張圖片變成灰度圖；Invert濾鏡是把對象的可視化屬性全部翻轉(zhuǎn),，包括色彩,、飽和度、和亮度值,；Xray濾鏡是讓對象反映出它的輪廓并把這些輪廓加亮,，也就是所謂的“X”光片。 效果如下： ,、Light 濾鏡 語法：Filter{light} 這個屬性模擬光源的投射效果,。一旦為對象定義了“LIGHT"濾鏡屬性，那么就可以調(diào)用它的“方法(Method)"來設(shè)置或者改變屬性,。“LIGHT"可用的方法有： AddAmbient 加入包圍的光源 AddCone 加入錐形光源 AddPoint 加入點光源 Changcolor 改變光的顏色 Changstrength 改變光源的強(qiáng)度 Clear 清除所有的光源 MoveLight 移動光源 可以定義光源的虛擬位置,，以及通過調(diào)整X軸和Y軸的數(shù)值來控制光源焦點的位置，還可以調(diào)整光源的形式（點光源或者錐形光源）指定光源是否模糊邊界,、光源的顏色,、亮度等屬性。如果動態(tài)的設(shè)置光源,，可能回產(chǎn)生一些意想不到的效果,。后面幾頁會有具體范例。 9,、Mask 濾鏡 語法：{filter:mask(color=color)} 使用"MASK"屬性可以為對象建立一個覆蓋于表面的膜,，其效果就象戴者有色眼鏡看物體一樣。 10,、Shadow 濾鏡 語法：{filter:shadow(color=color,direction=direction)} 利用“Shadow”屬性可以在指定的方向建立物體的投影,，COLOR是投影色,，DIRECTION是設(shè)置投影的方向。其中0度代表垂直向上,，然后每45度為一個單位,。它的默認(rèn)值是向左的270度。 filter:shadow(color=red,direction=225) filter:shadow(color=blue,direction=225) filter:shadow(color=gray,direction=225) 效果分別如下： 11,、Wave 濾鏡 語法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)} "wave" 屬性把對象按垂直的波形樣式打亂,。默認(rèn)是“TRUE（非0）”， “ADD”表示是否要把對象按照波形樣式打亂,， “FREQ”是波紋的頻率,，也就是指定在對象上一共需要產(chǎn)生多少個完整的波紋， “LIGHTSTRENGTH”參數(shù)可以對于波紋增強(qiáng)光影的效果,，范圍0----100,， “PHASE”參數(shù)用來設(shè)置正弦波的偏移量。 “STRENGTH”代表振幅大小,。 |
|
|
