css 規則由兩個主要的部分構成:選擇器,以及一條或多條宣告:
選擇器通常是您需要改變樣式的 html 元素。
每條宣告由乙個屬性和乙個值組成。
屬性(property)是您希望設定的樣式屬性(style attribute)。每個屬性有乙個值。屬性和值被冒號分開。
p關於text-align
left
左對齊內容。
right
右對齊內容。
center
居中對齊內容。
justify
對行進行伸展,這樣每行都可以有相等的長度(就像在報紙和雜誌中)。
注釋是用來解釋你的**,並且可以隨意編輯它,瀏覽器會忽略它。
css注釋以 "/*" 開始, 以 "*/" 結束
如果你要在html元素中設定css樣式,你需要在元素中設定"id" 和 "class"選擇器。
以下的樣式規則應用於元素屬性 id="para1":
#para1注意:id屬性不要以數字開頭,數字開頭的id在 mozilla/firefox 瀏覽器中不起作用。
class 選擇器
class 選擇器用於描述一組元素的樣式,class 選擇器有別於id選擇器,class可以在多個元素中使用。
class 選擇器在html中以class屬性表示, 在 css 中,類選擇器以乙個點"."號顯示:
在以下的例子中,所有擁有 center 類的 html 元素均為居中
//所有class為center的都會居中
段落居中。
注意:類名的第乙個字元不能使用數字!它無法在 mozilla 或 firefox 中起作用。
class="當讀到乙個樣式表時,瀏覽器會根據它來格式化 html 文件。center
">這個段落居中對齊。
插入樣式表的方法有三種:
當樣式需要應用於很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變乙個檔案來改變整個站點的外觀。每個頁面使用 標籤鏈結到樣式表。 標籤在(文件的)頭部:
瀏覽器會從檔案 mystyle.css 中讀到樣式宣告,並根據它來格式文件。外部樣式表可以在任何文字編輯器中進行編輯。檔案不能包含任何的 html 標籤。樣式表應該以 .css 副檔名進行儲存
注意:不要在屬性值與單位之間留有空格(如:"margin-left: 20 px" ),正確的寫法是 "margin-left: 20px"
當單個文件需要特殊的樣式時,就應該使用內部樣式表。你可以使用 標籤在文件頭部定義內部樣式表,就像這樣:
由於要將表現和內容混雜在一起,內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法,例如當樣式僅需要在乙個元素上應用一次時。"如果某些屬性在不同的樣式表中被同樣的選擇器定義,那麼屬性值將從更具體的樣式表中被繼承過來。color:sienna;margin-left:20px
">這是乙個段落。
例如,外部樣式表擁有針對 h3 選擇器的三個屬性:
h3而內部樣式表擁有針對 h3 選擇器的兩個屬性:
h3
color:red;即顏色屬性將被繼承於外部樣式表,而文字排列(text-alignment)和字型尺寸(font-size)會被內部樣式表中的規則取代。text-align:right;
font-size:20pt;
樣式表允許以多種方式規定樣式資訊。樣式可以規定在單個的 html 元素中,在 html 頁的頭元素中,或在乙個外部的 css 檔案中。甚至可以在同乙個 html 文件內部引用多個外部樣式表。
一般情況下,優先順序如下:
內聯樣式)inline style > (內部樣式)internal style sheet >(外部樣式)external style sheet > 瀏覽器預設樣式
注意:如果外部樣式放在內部樣式的後面,則外部樣式將覆蓋內部樣式。CSS 基礎知識
選擇器 元素選擇器 p 後代選擇器 li a id選擇器 intro some text 類選擇器 dateposted 24 3 2006 偽類選擇器 a link 通用選擇器 浮動 定位 框模型 定位的四種模型 相對定位 relative 相對定位的座標原點 該元素在普通流中的位置 特別點 元素...
CSS基礎知識
css規則有兩個主要的部分組成 選擇器,以及一條或者多條宣告h1 css內部的注釋以 開始,以 結束p id選擇器,通過 來選擇html元素 username class選擇器,通過 來選擇一組class元素.center 指定特定的html元素使用classp center 引入外部樣式表 rel...
css基礎知識
css基礎 id選擇器 用 定義 結合div class選擇器 用.定義 結合div 背景 background color 背景色 background image 背景影象 background repeat 背景重複 background position 位置 background atta...