目前網頁標準已是大勢所趨。正如原始的品網網站，下面的這些網站將一如既往地顯示群聚的力量。 凝視世界頂尖WEB設計師的標準製作，感受標準的氣氛，掀起學習標準的浪潮。 CSS設計師們，+U吧。 CSS ZenGarden: http://www.csszengarden.com/
1.規則選擇符任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如，P { text-indent: 3em }當中的選擇符是P。類選擇符單一個選擇符能有不同的CLASS(類)，因而允許同一元素有不同樣式。例如，一個網頁製作者也許希望視其語言而定，用不同的顏色顯示代碼 :code.html { color: #191970 }code.css { color: #4b0082
CSS的濾鏡屬性的標識符是filter。為了使您對它有個整體的印象，我們先來看一下它的書寫格式： filter：filtername（parameters） 怎麼樣？是不是很簡單，看上去與前面講的屬性定義沒什麼太大的差別。Filter是濾鏡屬性選擇符。 也就是說，只要您進行濾鏡操作，就必須先定義filter；filtername是濾鏡屬性名稱，這裡包括alpha、blur、chroma等等多種屬性，詳細內容請看下錶：
Mask屬性為對象建立一個覆蓋於表面的膜。它的運算式也很簡單： Filter：Mask（Color=顏色） 只有一個Color參數，用來指定使用什麼顏色作為掩膜。 同樣，我們來看一下一幅圖片在加上mask屬性前後的效果（見下圖）： 加上MASK屬性的效果就好象是在用有色眼鏡看物體一樣。上面的效果的代碼如下： 代碼如下複製代碼 <html> <head> <title> mask filter
假如您用手在一幅還沒幹透的油畫上迅速划過，畫面就會變得模糊。CSS下的blur屬性就會達到這種模糊的效果。 先來看一下blur屬性的運算式： filter：blur（add=add，direction，strength=strength） 我們看到blur屬性有三個參數：add、direction、strength。 Add參數有兩個參數值：true和false。意思是指定圖片是否被改變成模糊效果。 Direction參數用來設定模糊的方向。模糊效果是按照順時針方向進行的。
Chroma屬性可以設定一個對象中指定的顏色為透明色，它的運算式如下： Filter：Chroma（color=color） 這個屬性的運算式是不是很簡單，它只有一個參數。只需把您想要指定透明的顏色用Color參數設定出來就可以了。比如下面這幅圖： 圖中顯示兩種字型，兩種顏色，我們現在對“leaves”字型添加chroma屬性，使其透明。代碼如下： 代碼如下複製代碼 <html> <head>
DropShadow屬性是為了添加對象的陰影製作效果的。它實現的效果看上去就像使原來的對象離開頁面，然後在頁面上顯示出該對象的投影。看一看它的運算式： 代碼如下複製代碼 Filter：DropShadow（Color=color，Offx=Offx，Offy=offy， Positive=positive） 該屬性一共有四個參數：
當對一個對象使用“Glow”屬性後，這個對象的邊緣就會產生類似發光的效果。它的運算式如下： Filter：Glow（Color=color，Strength=strength） Glow屬性的參數只有兩個：Color是指定發光的顏色，Strength指定發光的強度，參數值從1到255。 讓我們先來看一下加上Glow屬性的效果圖： 怎麼樣，是不是有一種燃燒的火焰的感覺。實現這種效果的代碼如下： 代碼如下複製代碼 <html>
Shadow屬性可以在指定的方向建立物體的投影。它的運算式是這樣的： Filter：Shadow（Color=color，Direction=direction） 在這裡，Shadow有兩個參數值：Color參數用來指定投影的顏色；Direction參數用來指定投影的方向。 這裡說的方向與我們在第二節Blur屬性中提到的“方向與角度的關係”是一樣的。 也許您會問，前面講到的Dropshadow屬性和Shadow屬性有什麼不同嗎？
Wave屬性用來把對象按照垂直的波紋樣式打亂。它的運算式如下： Filter：Wave（Add=True（False），Freq=頻率，LightStrength=增強光效， Phase=位移量，Strength=強度）
alpha是來設定透明度的。先來看一下它的表達格式： filter：alpha（opacity=opcity，finishopacity=finishopacity， style=style，startX=startX，startY=startY，finishX=finishX， finishY=finishY） 哇，怎麼這麼長。是啊，不過這些參數都各有其用。 Opacity代表透明度等級，可選值從0到100，0代表完全透明，100代表完全不透明。
<Foo> Foo類型的值. 共同類型的討論在單位章節. Foo 必須原文出現的關鍵字 (儘管無須限制大小寫). 逗號和斜杠也必須原文出現. A B C A 必須存在, 然後是B, 然後是C, 需要按照順序. A | B A 或B 必須存在. A || B A 或B或兩者必須存在, 順序隨意. [ Foo ] 用括弧將項目歸類在一起. Foo* Foo被重複使用零或更多的次數. Foo+ Foo被重複使用一或更多的次數. Foo? Foo為可選. Foo{A,B}
如果靈活應用CSS各種濾鏡的特點並加以組合，我們可以得到許多意想不到的效果。這是一些效果示範，供各位參考。 效果一： 這個效果用了shadow濾鏡，代碼如下：filter:shadow(color=black,direction=135) 效果二： 用blur濾鏡做出的效果，代碼如下：filter:blur(direction=135,strength=10) 效果三： 用dropshadow濾鏡做出的效果，代碼如下：filter:dropshadow(color=#888888
這是一個學習WEB標準的例子，我們在不使用標準之前為表單布局一般都使用表格，在這個例子中我們拋棄表格，來使用CSS為表單進行布局。CSS設定代碼： 代碼如下複製代碼 <style type="text/css">label{float: left;width: 120px;font-weight: bold;}input, textarea{width: 180px;margin-bottom: 5px;}textarea{width: 2
用CSS如何使DIV層水平置中這兩天開始對網誌進行大刀闊斧的頁面更改.今天碰到個很棘手的問題,DIV本身沒有定義自己置中的屬性,網上很多的方法都是介紹用上級的text-align: center然後嵌套一層DIV來解決問題.可是事實上這樣的方法科學嗎?經過網路搜尋和親自實驗得出以下結論:正確的也是對頁面構造沒有影響的設定如下:對需要水平置中的DIV層添加以下屬性:margin-left: auto;margin-right:
SPAN 和 DIV 的區別在於，DIV(division)是一個區塊層級元素，可以包含段落、標題、表格，乃至諸如章節、摘要和備忘等。而SPAN 是行內元素，SPAN 的前後是不會換行的，它沒有結構的意義，純粹是應用樣式，當其他行內元素都不合適時，可以使用SPAN。 下面以一個執行個體來說明這兩個屬性的區別。 代碼： ＜span＞SPAN標記有一個重要而實用的特性，即它什麼事也不會做，它的唯一目的就是圍繞你的HTML代碼中的其它元素，這樣你就可以為它們指定樣式了。在此例中，＜span＞
前面我們講解了css的文法，但要想在瀏覽器中顯示出效果，就要讓瀏覽器識別並調用。當瀏覽器讀取樣式表時，要依照文字格式設定來讀，這裡介紹四種在頁面中插入樣式表的方法：鏈入外表樣式表、內部樣式表、匯入外表樣式表和內嵌樣式。 1. 鏈入外部樣式表 鏈入外部樣式表是把樣式表儲存為一個樣式表檔案，然後在頁面中用 link>標記連結到這個樣式表檔案，這個 link>標記必須放到頁面的 head>區內，如下： 代碼如下複製代碼 <head>
建立html<ul class="topnav"> <li><a href="#">home</a></li> <li> <a href="#">about me</a> <ul class=&
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><script src="jquery.網頁特效"></script><style type="text/css"><!--*{ margin:0; padding:0;
<!--#include file="conn.asp"--><link rel="stylesheet" type="text/css" href="css.css"><script type="text/javascript" src="index/title.js"></script><%set rs =
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
