CSS

樣式表可以是外部的、內聯的、嵌入的、連結的, 譬如下面的內聯樣式將作用於所有 ID=Test 的標籤:<style> #Test {...}

在網頁製作中，有許多的術語，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會用到一些有關於HTML的基本知識，而在你學習這篇入門教程之前，請確定你已經具有了一定的HTML基礎。下面我們就開始一步一步使用DIV+CSS進行網頁布局設計吧。所有的設計第一步就是構思，構思好了，一般來說還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟體將需要製作的介面布局簡單的構畫出來，以下是我構思好的介面布局圖。下面，我們需要根據構思圖來規劃一下頁面的布局，仔

聲明定位元素：position屬性值設定除預設值static以外的元素，包括relative，absolute，fixed。平台：win/IE win/FFz-index:用來確定定位元素在垂直於顯示屏方向（以下稱為Z軸）上的層疊順序值：　　　auto | 整數 | inherit預設：　　auto適用於：　定位元素繼承性：　no理解stacking context每個box都歸屬於一個stacking context,它是元素在z軸方向上定位的參考。根項目形成 root stacking

本文代碼的運行結果：<style type="text/css"> *{margin:0px;padding:0px;} .my_nav { width:163px; font-size: 12px; font-family: Arial,Verdana,Helvetica,sans-serif; } ul /**

hover是滑鼠移至上方css效果，但在一些瀏覽器如ie6中，只對<a href=""/>有效。jQuery可以為我們解決這個問題：jQuery提供的hover()方法做為一個事件，不僅可以改變CSS樣式的，還可以做其他動作；非常類似於mouseover mouseout的組合。代碼如下：$(function(){　　　　　　　　　　 $(".htest").hover(　　 　　　 　　　 　function(){　　 　　　 　　　 　　　

一.選擇符模式模式/含義/內容描述*匹配任意元素。(通用選取器)E匹配任意元素 E (例如一個類型為 E 的元素)。(類型選取器)E F匹配元素 E 的任意後代元素 F 。(後代選取器)E > F匹配元素 E 的任意子項目 F 。(子選取器)E:first-child當元素 E 是它的父元素中的第一個子項目時，匹配元素 E 。(:first-child 偽類)E:link E:visited如果 E

多層模式表單（Cascading Style Sheet, CSS）是一種為超文本置標語言(HyperText Markup Language, HTML)提供增強補充服務的技術，可對每一個HTML的置標(tag)做精雕細刻的修飾。只用HTML製作的網頁，對頁面內各部分的修飾能力有限且語句煩鎖，CSS正是彌補這一缺陷的有力技術，它語句、文法簡單，只要在源碼中插入STYLE語句就可輕易實現頁面內任意文本顏色、背景、邊框、行距、字距的添刪和修飾等功能，使網頁更加生動活潑，從而獲得滿意的效果。----

偽類可以看做是一種特殊的類選擇符，是能被支援CSS的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對連結在不同狀態下定義不同的樣式效果。1. 文法偽類的文法是在原有的文法裡加上一個偽類（pseudo-class）：selector:pseudo-class {property: value}（選擇符:偽類 {屬性:

一段文本或一張圖片，它的周圍有一圈光暈，這圈光暈每一秒鐘閃爍一次，而當滑鼠移到上面時，立即停止閃爍，當滑鼠移開時又繼續閃爍。這種效果用於那些需要特別引起別人注意的內容上(如:警示、報告新增內容等)，能起到較好的效果。上面這個樣本就能實現上面所的效果，由於這裡是抓取的一張圖片，不能看到動態效果，只要按下面介紹的方法，製作一個試試，其效果是一目瞭然的。其製作思路是:採用了CSS的“Glow”濾鏡產生光暈效果，利用CSS的屬性可動態改變的特性，用一小段Javascript程式來

CSS＋DIV是網站標準（或稱“WEB標準”）中常用的術語之一，通常為了說明與HTML網頁設計語言中的表格（table）定位方式的區別，因為XHTML網站設計標準中，不再使用表格定位技術，而是採用css+div的方式實現各種定位。應用應用DIV+CSS編碼時很容易犯一些錯誤。本文列舉了一些常見的錯誤：1.檢查HTML元素是否有拼字錯誤、是否忘記結束標記即使是老手也經常會弄錯div的嵌套關係。可以用dreamweaver的驗證功能檢查一下有無錯誤。2.檢查CSS是否正確檢查

它可能不像其它那麼重要，大部分案例你不需要擔心衝突，但大型而且複雜的CSS檔案，或有很多CSS檔案組成的，可能產生衝突。選取器一樣的情況下後面的會覆蓋前面的屬性。比如：p { color: red; }p { color: blue; }p元素的元素將是藍色，因為遵循後面的規則。然而，你不可能經常用相同的選取器衝突達到目的，當你使用嵌套選取器，合理的衝突來了。比如：div p { color: red; }p { color: blue;

一些CSS屬性允許使用一串值代替許多屬性，值使用空格分開。margin,pdding和border-width允許合并margin-top-width, margin-right-width, margin-bottom-width等等，形式像這樣：property:top right bottom left;逆時針順序。所以下面的代碼：p {border-top-width: 1px;border-right-width: 5px;border-bottom-width:

我們在做表單的情況下，input、textarea、button的樣式比較容易定義，select和input file的樣式難以定義。input file在系統預設下的外觀：我們最多通過定義input的border來改變系統預設的外觀：如果要讓瀏覽按鈕更漂亮一點，我們想定義它的背景顏色，甚至想用背景圖片來代替，通過css定義input flie還真是辦不到的。偶然看到一篇文章：input file 檔案選擇框美化

<style type="text/css">.progress{width: 1px;height: 14px;color: white;font-size: 12px;overflow: hidden;background-color: navy;padding-left: 5px;}</style><script type="text/JavaScript">function

首先簡單講一下盒模式，所謂盒模式，是CSS看待元素的方式，CSS將每個單一的元素都看作一個盒子，如下圖所示：之所以叫它盒模式，是因為它跟我們日常生活中的盒子非常相似，這裡不多說了。CSS中大部分的屬性都是用來控制content的，比如width、height、color等；padding、border、margin都是可選的，其中，padding、margin表示的是一片空白地區，只能控制其大小，border是一個可見的邊框，可以控制其邊框樣式、粗細、顏色等。下面主要講一下排版。在正常情況下，瀏

list-style-type　　 (指定類型)list-style-image　　(指定圖片)list-style-position (指定位置)list-style　　　　　(綜合設定)marker-offset　　　 (不支援)使用 list-style 可單獨或綜合設定: 類型、圖片、位置, 無順序;如果同時設定了圖片和類型, 圖片會替換類型; 如果圖片失效則使用類型.list-style-type：disc　　　　(實心圓,

fontfont-familyfont-sizefont-weightfont-stylefont-variant另外 font-size-adjust 和 font-stretch 從 CSS 2.1 已廢棄, 就不再學習了.font-family(指定字型):如果字型名包含空格或其他特殊符號, 應使用引號(雙引號或單引號):可以同時指定多個字型(逗號分割), 前者優先、缺失後補、再缺使用預設.font-size(字型大小), 首先有幾個常數值: xx-small、x-small、small、

在CSS中，類別選取器以一個點號顯示：.center {text-align: center}在上面的例子中，所有擁有 center 類的 HTML 元素均為置中。在下面的 HTML 程式碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選取器中的規則。<h1 class="center"> This heading will be center-aligned </h1> <p

字型的處理在網頁設計中無論怎麼強調也不為過，畢竟網頁使用來傳遞資訊的，而最經典最直接的資訊傳遞方式就是文字，所以，瞭解一點字型的基本知識對於設計來說還是非常重要的。中文和英文的最大區別就是中文是方塊字，英文是拼音文字，這對字型的處理的影響是巨大的。看看下面的圖示就會發現，英文字型裡的那些變化在中文字型裡都弱化了。作為中文的讀者，習慣性的接受方塊形狀做為閱讀的單元，其實對於眼睛來說，這是一種容易疲勞的方式，閱讀的時候你的視線實際上是跟隨整行文字的外形。看看這個例子。NOW I VE TRIED

原理將二個相同而色彩不同的文字重合在一起，通過分別給其加 clip 屬性，使上面和下面的文字被剪下位置不同，從而產生二種不同的色彩。clip : 摘自蘇沈小雨CSS手冊clip : auto | rect ( number number number number )參數：auto : 　對象無剪下rect ( number number number number )