Anonymous
Anonymous asked in 電腦與網際網路其他:電腦 · 2 decades ago

what's the ''css''? for ''10''

什麼是''CSS''??

它是做什麼用的呢??

請詳細說明...

5 Answers

Rating
  • 2 decades ago
    Favorite Answer

    Web 世界的未來

    在各式各樣的設備上使用 Web 資料 (例如電腦螢幕,印表機,手持設備螢幕等等)

    同一個內容的資料能在不同設備上呈現

    網頁設計守則一 (Rule #1)

    Separate Content and Presentation

    No <FONT FACE="Arial" SIZE="4" COLOR="#FFFFFF"> tag

    Use CSS (Cascading Style Sheets)

    參考網站

    W3C - http://www.w3.org/

    CSS - http://www.w3.org/Style/CSS/

    CSS1 - http://www.w3.org/TR/REC-CSS1

    CSS Online - http://www.siteexperts.com/css/tutor.asp

    CSS Tutorial - http://www.w3schools.com/css/default.asp

    範例

    範例一: 顯示範例的結果

    link without underline

    box using <DIV>

    fixed background (Example)

    control line height

    control margin

    CSS in Action

    格式說明

    規則 (rule)

    selector { property: value; }

    選擇條件 { 屬性: 屬性值; }

    h1 {color: blue;}

    --------------------------------------------------------------------------------

    h1 i {

    font-family: 細明體, gill, helvetica, sans-serif;

    font-size: 16pt;

    font-weight: bold;

    }

    h3, b {

    font-weight: bold;

    color: red;

    }

    <h1>This is a <i>CSS</i> class</h1>

    <h3>Lots of student</h3>

    <p>Learning <b>CSS</b></p>

    Internal / External / Inline

    Internal

    <html>

    <head>

    <title>title</title>

    <style type="text/css">

    h1 { color: blue }

    </style>

    </head>

    <body>.....</body>

    </html>

    External

    <html>

    <head>

    <title>title</title>

    <link rel="stylesheet" type="text/css" href="cool.css" title="Cool">

    </head>

    <body>....</body>

    </html>

    Inline

    <html>

    <head>

    <title>title</title>

    </head>

    <body>

    <p style="color: green">The paragraph is green.</p>

    </body>

    </html>

    Cascading Order

    Browser default

    External Style Sheet

    Internal Style Sheet (inside the tag)

    Inline Style (inside HTML element)

    Class 及 ID

    <h1 class="exmaple-title">This is a CSS class</h1>

    <h3 id="place">電腦教室</h3>

    .example-title {

    font-size: 18pt;

    }

    #place {

    font-style: italic;

    }

    Font properties

    font-family

    BODY { font-family: gill, helvetica, sans-serif }

    <family-name>

    <generic-family>

    'serif' (e.g. Times)

    'sans-serif' (e.g. Helvetica)

    'cursive' (e.g. Zapf-Chancery)

    'fantasy' (e.g. Western)

    'monospace' (e.g. Courier)

    font-style

    Value: normal | italic | oblique

    font-weight

    Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

    STRONG { font-weight: bolder }

    font-size

    Value: <absolute-size> | <relative-size> | <length> | <percentage>

    <absolute-size> [ xx-small | x-small | small | medium | large | x-large | xx-large ]

    <relative-size> [ larger | smaller ]

    P { font-size: 12pt; }

    BLOCKQUOTE { font-size: larger }

    EM { font-size: 150% }

    EM { font-size: 1.5em }

    font

    Value: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

    P { font: 12pt/14pt sans-serif }

    P { font: 80% sans-serif }

    P { font: x-large/110% "new century schoolbook", serif }

    P { font: bold italic large Palatino, serif }

    P { font: normal small-caps 120%/120% fantasy }

    from An Introduction to Type

    Character components

    X-height

    The height of the body, minus ascenders and descenders, which is equal to the height of the lowercase ‘x’.

    Serif (襯線字體)

    Tapered corners on the ends of the main stroke. Serifs originated with the chiseled guides made by ancient stonecutters as they lettered monuments. Some serif designs may also be traced back to characteristics of hand calligraphy. Note that serif type is typically thick and thin in stroke weight.

    The etymology of "serif" is obscure, but in any case almost as recent as the face. The oldest citations in the Oxford English Dictionary are 1841 for sans serif, which the OED gives as sanserif, and 1830 for serif. Indeed, the OED speculates that serif was a back formation from sanserif. On the other hand, Webster's Third New International Dictionary traces serif to the Dutch schreef meaning "stroke", and ultimately through German schreiben and Latin scribere, both also meaning "to write".

    The OED's earliest citation for grotesque in this sense is 1875, giving "stone-letter" as a synonym. It would seem to mean "out of the ordinary" in this usage, as in art grotesque usually means "elaborately decorated". Other synonyms include Doric and Gothic.

    Sans serif font

    Serif font

    (Serifs highlighted)

    Sans serif (無襯線字體)

    From the French, meaning “without serif”. A typeface which has no serifs.Sans serif typefaces are typically uniform in stroke width.

    Color and background

    color

    EM { color: red }

    background-color

    H1 { background-color: #F00 }

    background-image

    BODY { background-image: url(marble.gif) } P { background-image: none }

    background-repeat

    Value: repeat | repeat-x | repeat-y | no-repeat

    BODY {

    background: red url(pendant.gif);

    background-repeat: repeat-y;

    }

    background-attachment

    BODY {

    background: url(pendant.gif);

    background-attachment: fixed;

    }

    background-position

    Value: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]

    BODY {

    background-image: url(logo.png);

    background-attachment: fixed;

    background-position: bottom right;

    }

    background

    Value: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>

    BODY { background: url(banner.jpeg) top center }

    Box - Formatting Model

    _______________________________________

    | |

    | margin (transparent) |

    | _________________________________ |

    | | | |

    | | border | |

    | | ___________________________ | |

    | | | | | |

    | | | padding | | |

    | | | _____________________ | | |

    | | | | | | | |

    | | | | content | | | |

    | | | |_____________________| | | |

    | | |___________________________| | |

    | |_________________________________| |

    |_______________________________________|

    | element width |

    | box width |

    --------------------------------------------------------------------------------

    margin-top

    margin-right

    margin-bottom

    margin-left

    H1 { margin-left: 2em }

    margin

    BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

    padding-top

    padding-right

    padding-bottom

    padding-left

    BLOCKQUOTE { padding-top: 0.3em }

    padding

    H1 { background: white; padding: 1em 2em; }

    border-width

    H1 { border-width: thin }

    border-color

    border-style

    Value: none | dotted | dashed | solid | double | groove | ridge | inset | outset

    #xyz { border-style: solid}

    border

    P { border: solid red }

    <DIV> 及 <SPAN> 標籤

    <DIV> block 形式的標籤

    <DIV CLASS="example">

    Table of content

    1. 簡介

    2. 功能

    </DIV>

    <SPAN> 文字內容中的標籤

    <p>This is a <SPAN CLASS="xyz">short</SPAN> paragraph.</p>

    單位 (Unit)

    Length units

    P { font-size: 12px } /* pixels, relative to canvas */

    H1 { margin: 0.5in } /* inches, 1in = 2.54cm */

    H2 { line-height: 3cm } /* centimeters */

    H3 { word-spacing: 4mm } /* millimeters */

    H4 { font-size: 12pt } /* points, 1pt = 1/72 in */

    H4 { font-size: 1pc } /* picas, 1pc = 12pt */

    Percentage units

    P { line-height: 120% } /* 120% of the element's 'font-size' */

    H1 { margin: 0.5em } /* ems, the height of the element's font */

    H1 { margin: 1ex } /* x-height, ~ the height of the letter 'x' */

    Color units

    BODY {color: black; background: white }

    H1 { color: maroon }

    H2 { color: olive }

    EM { color: #f00 } /* #rgb */

    EM { color: #ff0000 } /* #rrggbb */

    EM { color: rgb(255,0,0) } /* integer range 0 - 255 */

    EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

    URL

    BODY { background: url(http://www.bg.com/pinkish.gif) }

    Pseudo-classes

    Anchor pseudo-classes

    A:link, A:visited, A:active { text-decoration: underline }

    A:link { text-decoration: none }

    A:link { color: red } /* unvisited link */

    A:visited { color: blue } /* visited links */

    A:active { color: lime } /* active links */

    常用屬性

    line-height

    Value: normal | <number> | <length> | <percentage>

    DIV { line-height: 120%; font-size: 10pt } /* percentage */

    text-align

    Value: left | right | center | justify

    DIV.center { text-align: center }

    text-indent

    P { text-indent: 3em }

    display

    Value: block | inline | list-item | none

    IMG { display: none }

    何謂CSS語法?

    ■何謂CSS語法?

    CSS (CASCADING STYLE SHEET) 中文翻譯為樣式表,是W3C組織所擬定出的一套標準格式。

    W3C有鑑於網際網路的日益發達,網頁製作更是琳瑯滿目,之前的HTML漸不敷所需,也無法給網頁設計者較大的自由設計空間,於是乃訂定出CSS。現在網頁設計頗有名聲的DHTML(動態網頁設計),CSS便在裡面扮演重要的角色。

    一般的情況下,如使用市面上的網頁編輯軟體來編輯設計的話,編輯基本的網頁已是足夠的了,但其在設計配置的自由程度上並不是那麼的方便順心,並無法隨心控制網頁元素的需求要素。

    如使用CSS樣式表來作編排,由於CSS有絕對位置和相對位置的概念,可以計設出多層次和陰影等效果及其他特效。

    實際上CSS是一組網頁建構基礎樣式,CSS 主要增加了更多的樣式定義方式來輔助 HTML語言,透過 CSS樣式表的運作後,只要修改定義標籤(如:表格、背景、連結、文字、按鈕、Scroll bar ...等)的樣式,則其它各網頁相同標籤引用相同的樣式表檔案,所有引用檔案的網頁會呈現同一的引用樣式,建立一個風格統一的網站。

    簡而言之,CSS 僅是在既有的網頁HTML語言中,加上一些輔助語法(Plugins),藉以達到控制網頁外觀的另一個簡便的方式。

    ■ 檢視 CSS 的編輯結果:

    當然是瀏覽器,因為 CSS 的主要功能只是讓網頁的格式、外觀得以完全操控,因此須透過瀏覽器才能看得到 CSS 的效果。您並無法在一般的網頁編輯軟體編輯的同時便能看到所須的效果。

    ■ CSS特點:

    易於建立風格一致及維護的網站。

    易於掌控網頁元素位置。

    以最少的檔案SIZE達到最佳的效果。

    易於學習及上手。

    CSS語法的定義及元素樣式?

    ■CSS語法的定義:

    CSS 的語法定義基本上如以下的形式:

    <style>

    slector {property:value; property:value; ....}

    </style>

    第一種 selector 方式是以指定 HTML 元素樣式的方式定義,比如 FONT、BODY、 TD...等等

    第二種 selector 方式是以 CLASS 元素樣式的方式定義

    第三種 selector 方式則是以 ID 樣式的方式定義

    第四種 selector 方式則是以 inline 樣式的方式定義

    第五種 selector 方式則是以 Contextual 樣式的方式定義

    而 property 則是指要修改的性質,如 boder、font-color、font-size...等性質

    value 則是給予 property 的值,如:P {color: #FF0000; } 或 P {color: red; }

    通常編輯時會把所有的定義,如以下的方式全放置於在 STYLE裏面,再放到 HEAD 內:

    <head>

    <style>

    <!--

    #slidemenubar, #slidemenubar2{

    position:absolute;

    left:-155px;

    width:160px;

    top:0px;

    border:1.5px solid green;

    background-color:skyblue;

    layer-background-color:skyblue;

    font:bold 12px Verdana;

    line-height:20px;

    }

    -->

    </style>

    </head>

    或先編輯一個CSS的外在樣式檔,再於網頁中以下列方式包含入網頁中:

    <head>

    <link rel=stylesheet type="text/css" href="樣式檔名稱.css">

    </head>

    ■CSS語法的元素樣式:

    HTML元素樣式

    說明: 在<style></style>中做設定,當slector為HTML元素名稱時,瀏覽器會以HTML元素本身的特性為依據,再加上此部分之HTML元素樣式設定,以增加HTML元素本有的特性,來呼喚使用。

    設定格式: HTML元素名稱 {property:value; property:value; ....}

    使用格式: <HTML元素名稱></HTML元素名稱>

    CLASS元素樣式

    說明: 在<style></style>中做設定,針對群族做樣式處理,以達到使用同一個HTML元素名稱時,有多個不同樣式設定的選擇。

    設定格式: HTML元素名稱.CLASS樣式名稱 {property:value; property:value; ..}

    使用格式: <HTML元素名稱 class="CLASS樣式名稱"></HTML元素名稱>

    ID樣式

    說明: 在<style></style>中做設定,針對單一元素做樣式設定,以配會不同HTML元素名稱,皆可使用此樣式設定。

    設定格式: #ID樣式名稱 {property:value; property:value; ..}

    使用格式: <HTML元素名稱 id=ID樣式名稱></HTML元素名稱>

    inline樣式

    說明: 直接在HTML元素在中做設定,針對單一元素做樣式設定,以配會不同HTML元素名稱,皆可使用此樣式設定。

    設定格式: style=" property:value; property:value; .."

    使用格式: <HTML元素名稱 style="property:value property:value; .."></HTML元素名稱>

    Contextual樣式

    說明: 在<style></style>中做設定,針對元素階層做樣式設定。

    設定格式: 父HTML元素名稱 子HTML元素名稱 { property:value; property:value; ..}

    使用格式: <父HTML元素名稱><子HTML元素名稱></子HTML元素名稱></父HTML元素名稱>

    樣式性質分類

    ■CSS語法的樣式性質分類:

    主要有長度、百分比、顏色表示法、字型性質、文字性質、表單性質、顏色及背景性質、分類性質、位置性質、顯示或隱藏的分類,列表如下:

    長度

    一個後面接著單位的數值,數值本身可以是小數,同時也允許使用(+)(-)符號。

    1.相對單位

    em 以元素本身的字型高度(通常就是大寫字母M的高度)為參考標準。

    ex 以元素本身的字型高度的一半(通常是小寫字母x的高度)為參考標準。

    px 像素點(pixel)。像素點被視為相對單位才是合理的作法,瀏覽器應該在不同的解析度顯示裝置自動做出不同的調整。

    2.絕對單位

    cm 公分。

    mm millimeters。

    in 英吋。

    pt points(1 point =1/72 inches)。

    pc picas (1 pica = 12points)。

    百分比

    一個後面接著%符號的數值,數值本身可以是小數,同時也允許使用(+)(-)符號。

    顏色表示法

    格式一: 以#號帶頭,後接三組(由00至FF)十六進位數值,第一組表示紅色數量、第二組表示綠色、第三組表示藍色。

    格式二: 以rgb(red,green,blue)函式表示顏色,每一個數值可以是由0至255之間的數值,也可以是百分比數值。

    格式二: 直接以色彩的英文名標示,如:Blue、Skyblue、Yellow....

    字型性質

    1. 性質: font-family

    功能: 設定字型種類

    說明: 指定字型名稱,你可以指定多個字型名稱,並以逗號隔開,瀏覽器會依照字型名稱出現的順序去尋找去找使用者系統上的字型來使用,若所有指定的字型都無法找到,瀏覽器會使用內定的字型。除了指定的字型名稱,你也可以指定下列的通用字型名稱,它們代表的是字型的特色而不是字型的名稱,當你指定它們時,瀏覽器會自動採用符合該字型特色的實際字型:

    serif

    sans-serif

    cursive

    monospace

    fantasy

    應用範圍: 所有元素

    繼承性: 會向下繼承

    例子: P {font-family: 細明體, 標楷體, Time new roman, arial, serif, san-serif}

    2. 性質: font-style

    功能: 設定字型樣式

    說明: 指定字型樣式,它可以是normal或italic。normal表示正常體,italic表示斜體。

    應用範圍: 所有元素

    繼承性: 會向下繼承

    例子: P EM {font-style:italic;}

    3. 性質: font-weight

    功能: 設定字型份量

    說明: 指定字型的份量,它可以是normal或bold。normal表示正常體,bold表示粗體。

    應用範圍: 所有元素

    繼承性: 會向下繼承

    例子: BLOCKQUOTE {font-weight:bold;}

    4. 性質: font-size

    功能: 設定字型大小

    說明: 指定字型的大小,以下是它可以接受的設定值:xx-small、x-small、small、medium、large、x-large、xx-large、larger、smaller、長度值或是百分比值。

    應用範圍: 所有元素

    繼承性: 會向下繼承

    例子: P {font-size:larger;}

    文字性質

    1. 性質: text-decoration

    功能: 設定文字裝飾形態

    說明: 指定文字元素的裝飾形態,它可以是none、underline、line-through。none表示不裝飾,underline會在文字元素下方加上底線,而line-through則會以直線穿過文字元素。若應用到非文字元素上,它並不會產生任何作用。

    應用範圍: 所有元素

    繼承性: 不會向下繼承

    例子: H1 {text-decoration:underline;}

    2. 性質: text-transform

    功能: 設定文字的轉換方式

    說明: 指定文字元素的大小寫轉換方式,它可以是none、capitalize、uppercase、lowercase。none表示不做任何轉換,capitalize表示將每一個字的第一個字母轉換成大寫,uppercase表示將所有的字母轉換成大寫,lowercase表示將所有的字母轉換成小寫。

    應用範圍: 所有元素

    繼承性: 不會向下繼承

    例子: H1 {text-transform:uppercase;}

    3. 性質: text-align

    功能: 設定文字對齊方式

    說明: 指定區塊中文字元素的對齊方式,它可以是left、right、center、justify。left表示靠左對齊,right表示靠右對齊,justify表示左右對齊。

    應用範圍: block-level元素

    繼承性: 會向下繼承

    例子: H1 {text-align:left;}

    4. 性質: text-indent

    功能: 設定文字的縮排方式

    說明: 指定文字首行的縮排距離,它的設定值是一個長度值或百分比值。

    應用範圍: block-level元素

    繼承性: 會向下繼承

    例子: P {text-indent:5%;}

    5. 性質: line-height

    功能: 設定行距

    說明: 指定區塊中文字元素的行距,它的設定值是一個長度值或百分比值。

    應用範圍: block-level元素

    繼承性: 會向下繼承

    例子: P {line-height:120%;}

    表單性質

    1. 性質: border-width, border-top-width, border-right-width, border-bottom-width, border-left-width

    功能: 設定邊框寬度

    說明: 指定邊框的四個邊的寬度。你可以利用border-top-width,border-right-width,border-bottom-width,border-left-width來分別設定上、右、下、左四個邊框的寬度,它們的設定必須為一個數值。另外,你也可以值接利用border-width一設定好四個邊框的寬度,它的設定是以空格分開的四個長度數,依序來設定上、右、下、左四個邊框的寬度。當你只給定一個長度數值時,它會視邊框具有相同的寬度。

    應用範圍: block-level元素

    繼承性: 不會向下繼承

    例子: P {border-top-width: 20pt;}

    P {border-width:10pt 15pt 20pt 5pt;}

    P {border-width: 10pt;}

    2. 性質: border-style

    功能: 設定邊框樣式

    說明: 指定邊框的顯示樣式,它可以是none、solid、double、groove、ridge、inset、outset,各自代表著各種不同的顯示樣式。

    應用範圍: block-level元素

    繼承性: 不會向下繼承

    例子: H1 {border-style: groove;}

    3. 性質: border-color

    功能: 設定邊框顏色

    說明: 指定邊框的顏色,它的設定值是一個顏色值,其表示方式請參見顏色表示法。

    應用範圍: block-level元素

    繼承性: 不會向下繼承

    例子: H1 {border-color: blue;}

    H1 {border-color: #0000FF;}

    4. 性質: padding, padding-top, padding-right, padding-bottom, padding-left

    功能: 設定填補空間

    說明: 指定元素內容與邊框之間的填埔空間距離。你可以利用padding-top、padding-right、padding-bottom、padding-left來分別設定上、右、下、左四個空間的距離,它們的設定值必須是一個長度數值。另外,你也可以直接利用padding一次就設好四個填補空間,它的設定格式是以空格分開的四個長度數值,依序代表上、右、下、左四空間距離,當你只給定一個長度數值時,它會視同四個空間具有相同的距離。

    應用範圍: block-level元素

    繼承性: 不會向下繼承

    例子: P {padding-top: 20pt;}

    P {padding: 20pt 30pt 10pt 50pt;}

    P {padding: 10pt;}

    5. 性質: Margin,margin-top,margin-right,margin-bottom,margin-left

    功能: 設定邊界距離

    說明: 指定區塊元素與其相鄰元素彼此邊界之間的空間距離。你可以利用margin-top、margin-right、margin-bottom、margin-left來分別設定上、右、下、左四個空間的距離,它們的設定值必須是一個長度數值。另外,你也可以直接利用padding一次就設好四個空間距離,它的設定格式是以空格分開的四個長度數值,依序代表上、右、下、左四空間距離,當你只給定一個長度數值時,它會視同四個空間具有相同的距離。

    應用範圍: block-level元素

    繼承性: 不會向下繼承

    例子: P {margin-top: 20pt;}

    P {margin: 20pt 30pt 10pt 50pt;}

    P {margin: 10pt;}

    6. 性質: float

    功能: 設定區塊元素的對齊方式

    說明: 指定區塊元素與其父元素之間的對齊關係,它的設定值可以是none、left、right。none表示不做任何對齊,left表示靠左對齊,right表示靠右對齊,同一階層的元素則圍繞在它的另外一側。請注意,在設定float性質時,不要做margin-left或margin-right的設定,否則會有意想不到的效果。

    應用範圍: block-level元素

    繼承性: 不會向下繼承

    例子: H1 {float: right;}

    7. 性質: clear

    功能: 設定元素左右兩側可否放置float元素

    說明: 指定元素的那一側不能float的元素,它的設定值可以是none、left、right、both。none表示元素的兩側都可以float元素,left表示元素的左側不能float元素,right表示元素的右側不能有float元素,both表示元素的左右兩側不能有float元素。

    應用範圍: 所有元素

    繼承性: 不會向下繼承

    例子: P {clear: right;}

    顏色及背景性質

    1. 性質: color

    功能: 設定前景顏色

    說明: 指定文件元素的顏色,它的設定值是一個顏色值,其表示方式請參照顏色表示法。

    應用範圍: 所有元素

    繼承性: 會向下繼承

    例子: P {color: #FF0000; }

    P {color: red; }

    2. 性質: background-color

    功能: 設定背景顏色

    說明: 指定元素的背景顏色,它的設定值是一個顏色值,其表示方式請參照顏色表示法。

    應用範圍: 所有元素

    繼承性: 不會向下繼承

    例子: P {background-color: #FF0000; }

    P {background-color: red; }

    3. 性質: background-image

    功能: 設定背景圖案

    說明: 指定元素的背景圖案 ,它的設定值是參照到該圖案的url。

    應用範圍: 所有元素

    繼承性: 不會向下繼承

    例子: P {background-image: url(.../image.gif); }

    分類性質

    1. 性質: display

    功能: 設定顯示模式

    說明: 指定元素的顯示模式,它的設定值包括none、block、inline、list-item。none表示不顯示元素(包括所有的子元素),block表示將顯示模式設定為block模式,inline表示將顥示模式設定為inline模式,list-item表示將顯示模式設定為list-item模式。

    應用範圍: 所有元素

    繼承性: 不會向下繼承

    例子: H2 {display:inline; }

    2. 性質: list-style-type

    功能: 設定list-item元素的項目符號

    說明: 指定list-item元素的項目符號,它的設定值包括disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha,它們分別代表一種不同的項目符號,例如disc是實心圓形符號,circle是空心圓形符號,square是方形符號、decimal是數字、lower-roman是小羅數字(如i,ii,iii)、upper-roman是大羅馬數字(如I,II,III)、lower-alpha是小寫英文字母(如a,b,c)、upper-alpha是大寫英文字母(如A,B,C)。

    應用範圍: 顯示模式為<li>元素

    繼承性: 會向下繼承

    例子: ul li {list-style-type:disc; }

    位置性質

    1. 性質: position

    功能: 設定定位特性

    說明: 指定元素的定位特性,它的設定值可以是static、absolute及relative,當它為absolute或relative時,表示此元素為可定位的元素,其中absolute是具有可定位的父元素,若無父元素則為document本身,relative則是目前的流動位置,static表示此元素是不可定位的,且所有與位置相關的性質都是無效的。

    應用範圍: 所有元素

    繼承性: 不會向下繼承

    例子: <H1 style="postition:absolute">內容</H1>

    2. 性質: left, top

    功能: 設定左上角的位置

    說明: 指定元素的水平及垂直位置,left代表的是水平位置,top代表的是重直位置,它們的設定值必須是長度數值。

    應用範圍: position為absolute或relative的元素

    繼承性: 不會向下繼承

    例子: <DIV style="postition:absolute; left:10pt; top:5pt;">內容</DIV>

    3. 性質: z-index

    功能: 設定z軸數值

    說明: 指定元素的z軸數值,它必須是一個整數值,數值愈大的元素會疊在數值小的元素之上。

    應用範圍: position為absolute或relative的元素

    繼承性: 不會向下繼承

    例子: <DIV style="z-index:8">內容</DIV>

    顯示或隱藏

    1. 性質: visibility

    功能: 利用chip設定元素顯示或隱藏

    說明: 指定元素的顯示或隱藏,IE的設定值可以是visible、hidden及inherit,NS的設定值可以是show、hide及inherit。Visible或show表示元素會被顯示出來,hidden或hide表示元素會被隱藏,inherit表示設定值會依據父元素設定而設定。

    應用範圍: 利用chip及position為absolute或relative的元素

    繼承性: 不會向下繼承

    例子: document.all.chip.visibility="hidden"; (for IE)

    document.layer1.chip.visibliity="hide"; (for NS)

    2. 性質: weight,height

    功能: 利用chip設定元素區間的大小

    說明: 利用chip設定元素的大小,weight代表的是寬度,height代表的是高度,它們的設定值必須是長度數值。

    應用範圍: 利用chip及position為absolute或relative的元素

    繼承性: 不會向下繼承

    例子: .chip.weight=100pt;

    3. 性質: rect

    功能: 利用chip設定元素區間的大小

    說明: 利用chip設定元素的大小,IE設定為rect(top right bottom left),而NS為rect(left,top,bottom,right),四邊的設定值必須是長度數值。

    應用範圍: 利用chip及position為absolute或relative的元素

    繼承性: 不會向下繼承

    例子: .chip="rect(0 10 20 10)"; (IE與NS不同)

    CSS連結特效

    ■CSS連結特效:

    如本網站上所看到的連結果,包括連結變色了、底線不見了、或是滑鼠形狀不同了,這些效果皆是使用樣式表作設定的,舉例如下:

    <style type="text/css">

    <!--

    a { text-decoration: none }  //宣告消除底線 //A代表HTML連結

    a:link {color:#ccccff}    //宣告連結顏色

    a:visited {color:#ccccff}   //宣告訪問過連結顏色

    a:active {color:#ffcccc}   //宣告執行中連結顏色

    a:hover {color:#ffcccc; cuosor: n-resize} //宣告當滑鼠移到連結時連結顏色及滑鼠游標形狀 

    -->

    </style>

    滑鼠游標設定可更改為:

    s-resize 向下

    w-resize 向左 nw-resize 向左上 sw-resize 向左下

    e-resize 向右 ne-resize 向右上 se-resize 向右下

    連結加上下底線: 所有的連結會出現上下底線

    a {text-decoration: underline + overline; }

    a:hover{text-decoration: underline + overline; color:red;}

    會動的連結:當滑鼠移到連結上時,連結會往上跟左移動1個像素的距離特效

    a:hover{position:relative;top:1px;left:1px;}

    CSS文字特效 ■CSS文字特效:

     文字陰影效果:

    Filter:Shadow(color=Value;Direction=Value;Zoom:Value;Padding:Value)

    語法:{ Filter: Shadow (參數) }

    參數:Color 顏色 , Direction (0、90、180、270) 陰影角度

    <font style=FILTER: Shadow(color=8888ff,direction=150);height=10 color="#0066FF">文字</font>

     文字陰影效果:加入Padding

    <font style="filter: shadow(color=8888ff,direction=150); zoom:1; padding:5px;" color="#0066ff">文字</font>

     發光字體效果

    Filter:Glow(color=Value;Strength=Value)

    語法:{ Filter: Glow (參數) }

    參數:Color 顏色 , Strength 範圍

    <font style="filter: glow(color=#FF9900,strength=3); height:10px; color:white; padding:1px">文字</font>

     CSS教學首頁連結發光效果

    <a href="連結網址" style="filter: glow(color=#3366FF,strength=3); height:10px; color:blue; padding:1px">連結文字</a>

     字體模糊效果

    Filter:Blur(Strength=Value;Direction=Value)

    語法:{ Filter: Blur (參數) }

    參數:Direction (0、90、180、270) 模糊角度 , Strength 幅度

    <font style="filter: blur(strength=3,direction=150); height:10px; color:white; padding:1px">文字</font>

  • Anonymous
    1 decade ago

    http://www.toobus.com/

    找有一區 css 教學文章

    看不完

    也可以當工具查

  • CSS語法就是版面的製作...

    如果想要相關的資訊~

    可以來這邊參考看看唷!!!^^

    http://www.wretch.cc/blog/BlackAutism

    這ㄍ剛創不久~希望大家多多支持!!^^

  • Anonymous
    1 decade ago
  • How do you think about the answers? You can sign in to vote the answer.
  • ?
    Lv 5
    2 decades ago

      ‧Content Scrabling System  1.電影業者加強防範 DVD 的盜錄裝置

      ‧Cascading Style Sheet  動態網頁排版顯示定義方式,層級式體裁定義底稿

    Source(s): yahoo字典
Still have questions? Get your answers by asking now.