顯示具有 CSS 標籤的文章。 顯示所有文章
顯示具有 CSS 標籤的文章。 顯示所有文章

2009年2月5日 星期四

W3School CSS Tutorial

http://www.w3schools.com/css/default.asp

Tutorial:
http://www.w3schools.com/css/css_intro.asp

Examples:
http://www.w3schools.com/css/css_examples.asp

Quiz:
http://www.w3schools.com/css/css_quiz.asp

Reference:
http://www.w3schools.com/css/css_reference.asp
張貼者： 於 沒有留言:
標籤：

W3Schools Online Web Tutorial 線上教學

http://www.w3schools.com/default.asp

著名的線上教學網頁,裡面有HTML,XHTML,CSS,JAVASCRIPT,SQL,PHP...等,大部分的網頁編碼教學.
有Try-it-yourself ONLINE EXAMPLES 可以直接測試CODES, Online Quiz(線上測驗) 和 線上認證.
張貼者： 於 沒有留言:
標籤： , ,

JavaScript 及CSS的教學投影片

今天整理JavaScript時無意中發現一個網頁
在網頁的最下方有JavaScript 及 CSS 的教學投影片

可以直接在線上作投影!!

有興趣的人可到下列網址看看!!

http://blog.ericsk.org/archives/1057
張貼者： 於 沒有留言:
標籤： ,

2009年2月2日 星期一

CSS 套用方式

我們可以用以下四種方式，將 CSS 套用入 HTML 文件中：

  • 行內套用 (Inline)
  • 嵌入套用 (Embed)
  • 外部連接套用 (External Link)
  • 匯入套用 (Import)

    行內套用


    我們可以在 HTML 文件內直接宣告樣式。舉例來說，


    <p style='font-family:verdana; font-size:16;'>This is font size 16.</p>



    以上的 HTML 文件在瀏覽器上會顯現為：

    This is font size 16.



    嵌入套用


    樣式可以嵌入於 HTML 文件中 (通常是在 <head> 內)。舉例來說，


    <head>
    <style type="text/css">
    div {
    background-color:#FF0000;
    }
    </style>
    </head>
    <body>
    <div>
    背景顏色是紅色
    </div>
    </body>



    以上的 HTML 會顯現出：

    背景顏色是紅色


    外部連接套用

    在這種方式下，所有的 CSS 樣式宣告都是存在另外一個檔案中。該檔案通常名稱為 .css。在 HTML 文件的 <header> .. </header> 之中，我們將用以下的程式碼將這個 .css 檔案連接進入：

    <link rel=stylesheet type="text/css" href="external-stylesheet.css">

    以上這一行會將在 external-stylesheet.css 這個檔案內所宣告的樣式加入 HTML 文件內。


    匯入套用

    外部的 CSS 樣式也可以被匯入進 HTML 文件。匯入的做法為利用 @import 這個指令。@import 的語法為：

    <STYLE TYPE="text/css">
    <!--
    @import url(http://www.mysite.com/style.css);
    -->
    </STYLE>

    @import 指令最初的用意，是為了能夠針對不同的瀏覽器而運用不同的樣式。不過，現在已經沒有這個必要。現在用 @import 的目的，最常是要加入多個 CSS 樣式。當多個 CSS 樣式被 @import 的方式加入，而不同 CSS 樣式互相有衝突時，後被加入的 CSS 樣式有優先的順位 (詳情請見 CSS 串接)。

    • 張貼者： 於 沒有留言:
    標籤：

    CSS 語法

    以下內容來自於:

    http://css.1keydata.com/tw/syntax.php

    CSS 的全名為 Cascading Style Sheets，是一種樣式表 (Stylesheet) 語言。它的目的是為了對像 XHTML 及 HTML 之類的標記語言 (markup language) 提供一個顯示層。有了 CSS，我們就可以將資料層及顯示層分開：HTML 文件就只包括資料，而 CSS 則是告訴瀏覽器這些資料應該要如何顯現出來。

    宣告 CSS 樣式的語法如下：

    選擇器 {
    屬性：設定值；
    ...
    }


    在一個選擇器 (Selector) 中，可以設定的屬性數目沒有限制。

    選擇器主要有三種：型類 (Type) 選擇器、Class 選擇器、和 ID 選擇器。

    型類選擇器是 (X)HTML 標籤，如 <body> 和 <h1>。Class 和 ID 選擇器是使用者自訂的選擇器。我們會在之後討論這兩類的選擇器。

    樣式是以『屬性：設定值』的方式來制定。舉例來說，若我們要設定一個元素內的文字是黃色的，那就用以下的『屬性：設定值』：


    color:yellow;



    在以上的宣告內，color 是屬性，而 yellow 是設定值。

    在某些時候，一個屬性可能會有好幾個設定值。這些通常都是因為屬性是一個捷徑。舉例來說，margin 屬性可能會有 4 個設定值，而每一個值代表每一邊的邊界長度。

    Grouping


    如果有數個選擇器享有同樣的樣式，它們可以同時被宣告。這叫做 "grouping"。舉例來說，如果 <h1>, <h2>, and <h3> 都會有相同的樣式，那它們就可以用以下的方式被宣告：


    h1, h2, h3 {
    屬性：設定值；
    ...
    }



    後代選擇器 (Descendant Selectors)

    我們可以設定說，只有當甲元素在乙元素之內時，甲元素才會用某個樣式。若甲元素不在乙元素內的話，那甲元素就可以有其他的樣式。要達到這個目標，我們就要利用後代選擇器的方式。

    後代選擇器宣告的語法是：

    【父選擇器】【子選擇器】{
    屬性：設定值；
    ...
    }


    在以上的宣告中，只有當子選擇器是在父選擇器之內時，樣式才會被用到。這一類的語法可以包括好幾代的選擇器，而不是只有兩代而已。

    舉例來說，以下的宣告，


    li b {
    color:yellow;
    }



    代表在 <li> <b> 之內的文字是黃色的。不是在 <li> 之內的 <b> 中的文字，就不會套用黃色字體這個樣式。

    張貼者： 於 沒有留言:
    標籤：
    訂閱： 文章 (Atom)