css+div入門篇一

文本對齊屬性(text-align)

這個屬性用來設定文本的對齊方式。有以下值:

  • left (居左,缺省值)
  • right (居右)
  • center (居中)
  • justify (兩端對齊)

示例代碼如下:.p2 {text-align:right}

文本修飾屬性(text-decoration)

這個屬性主要設定文本劃線的屬性。有以下值:

  • none (無,缺省值)
  • underline (下劃線)
  • overline (上劃線)
  • line-through (當中劃線)

示例代碼如下:.p2 {text-decoration: underline}

文本縮進屬性(text-indent)

這個屬性設定文本首行縮進。其值有以下設定方法:

  • length (長度,可以用絕對單位(cm, mm, in, pt, pc)或者相對單位 (em, ex, px))
  • percentage (百分比,相當於父對象寬度的百分比)

示例代碼如下:.p1 {text-indent: 8mm}

行高屬性(line-height)

這個屬性設定每行之間的距離。其值有以下設定方法:

  • normal (缺省值)
  • length (長度,可以用絕對單位(cm, mm, in, pt,pc)或者相對單位 (em, ex, px))
  • percentage (百分比,相當於父對象高度的百分比)

示例代碼如下:.p1 {line-height:1cm}

字間距屬性(letter-spacing)

這個屬性用來設定字符之間的距離。

  • normal (缺省值)
  • length (長度,可以用絕對單位(cm, mm, in, pt, pc)或者相對單位 (em, ex, px))

示例代碼如下:

.p1 {letter-spacing: 3mm}

顏色屬性(color)

 .p1{color:gray}

 

字體名稱屬性(font-family)

這個屬性設定字體名稱,如Arial, Tahoma, Courier等。例句如下:

.s1 {font-family:Arial}

字體大小屬性(font-size)

這個屬性可以設置字體的大小。字體大小的設置可以有多種方式,最常用的就是pt和px(pixel)。例句如下:

字體風格屬性(font-style)

這個屬性有三個值可選:normal, italic, oblique。normal是缺省值,italic, oblique都是斜體顯示。例句如下:

.s1 {font-sytle:italic}

字體濃淡屬性(font-weight)

這個屬性常用值是normal和bold,normal是缺省值。例句如下:

<p style = "font-weight:bold">這段文字字體的濃淡屬性(font-weight)值是bold。<p>

字體變量屬性(font-variant)

這個屬性有兩個值,normal和small-caps,normal是缺省值。small-caps表示小的大寫字體。例句如下:

 .s1 {font-variant:small-caps}

字體屬性(font)

這個屬性是各種字體屬性的一種快捷的綜合寫法。這個屬性可以綜合字體風格屬性(font-style),字體變量屬性(font-variant),字體濃淡屬性(font-weight),字體大小屬性(font-size)等屬性。例句如下:

.s1 {font:italic normal bold 11pt arial}

字體顏色(color)

CSS(Cascading Style Sheets)簡介

當初一幫技術人員想出HTML,主要側重於定義內容,比如<p>表示一個段落,<h1>表示標題,而並沒有過多設計HTML的排版和界面效果。

隨着Internet的迅猛發展,HTML被廣泛應用,上網的人們當然希望網頁做得漂亮些,因此HTML排版和界面效果的侷限性日益暴露出來。爲了解決這個問題,人們也走了不少彎路,用了一些不好的方法,比如給HTML增加很多的屬性結果將代碼變得很臃腫,將文本變成圖片,過多利用Table來排版,用空白的圖片表示白色的空間等。直到CSS出現。

CSS可算是網頁設計的一個突破,它解決了網頁界面排版的難題。可以這麼說,HTML的Tag主要是定義網頁的內容(Content),而CSS決定這些網頁內容如何顯示(Layout)。

CSS的英文是Cascading Style Sheets,中文可以翻譯成串聯式樣式表。

CSS按其位置可以分成三種:

  • 內嵌樣式(Inline Style)
  • 內部樣式表(Internal Style Sheet)
  • 外部樣式表(External Style Sheet)


 

內嵌樣式(Inline Style)

Inline Style是寫在Tag裏面的。內嵌樣式只對所在的Tag有效。

<P style="font-size:20pt; color:red">這個Style定義<p></p>裏面的文字是20pt字體,字體顏色是紅色。</p>

內部樣式表(Internal Style Sheet)

內部樣式表是寫在HTML的<head></head>裏面的。內部樣式表只對所在的網頁有效。

<HTML>
<HEAD>
<STYLE type="text/css">
H1.mylayout {border-width:1; border:solid; text-align:center; color:red}
</STYLE>
</HEAD>
<BODY>
<H1 class="mylayout"> 這個標題使用了Style。</H1>
<H1>這個標題沒有使用Style。</H1>
</BODY>
</HTML>

內部樣式表(Internal Sytle Sheet)要用到Style這個Tag,寫法如下:

<STYLE type="text/css">
......
</STYLE>

外部樣式表(External Style Sheet)

如果很多網頁需要用到同樣的樣式(Styles),用什麼方法呢?

將樣式(Styles)寫在一個以.css爲後綴的CSS文件裏,然後在每個需要用到這些樣式(Styles)的網頁裏引用這個CSS文件。

比如可以用文本編輯器(NotePad)建立一個叫home的文件,文件後綴不要用.txt,改成.css。文件內容如下:

H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}

然後你建立一個網頁,代碼如下:

<HTML>
<HEAD>
<link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<H1 class="mylayout"> 這個標題使用了Style。</H1>
<H1>這個標題沒有使用Style。</H1>
</BODY>
</HTML>

使用外部(Extenal)樣式表,相對於內嵌(Inline)和內部式(Internal)的,有以下優點:

  • 樣式代碼可以複用。一個外部CSS文件,可以被很多網頁共用。
  • 便於修改。如果要修改樣式,只需要修改CSS文件,而不需要修改每個網頁。
  • 提高網頁顯示的速度。如果樣式寫在網頁裏,會降低網頁顯示的速度,如果網頁引用一個CSS文件,這個CSS文件多半已經在緩存區(其它網頁早已經引用過它),網頁顯示的速度就比較快。

 

串聯(Cascading)

CSS第一個字母,是Cascading,意爲串聯。它是指不同來源的樣式(Styles)可以合在一起,形成一種樣式。

Cascading的順序是:

  • 瀏覽器缺省(browser default)(優先級最低)
  • 外部樣式表(Extenal Style Sheet)
  • 內部樣式表(Internal Style Sheet)
  • 內嵌樣式表(Inline Style)(優先級最高)

樣式(Styles)的優先級依次是內嵌(inline), 內部(internal), 外部(external), 瀏覽器缺省(browser default)。假設內嵌(Inline)樣式中有font-size:30pt, 而內部(Internal)樣式中有font-size:12pt,那麼內嵌(Inline)式樣式就會覆蓋內部(Internal)樣式。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章