CSS 基礎知識

2022-08-29 00:54:23 字數 2269 閱讀 7161

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="

center

">這個段落居中對齊。

當讀到乙個樣式表時,瀏覽器會根據它來格式化 html 文件。

插入樣式表的方法有三種:

當樣式需要應用於很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變乙個檔案來改變整個站點的外觀。每個頁面使用 標籤鏈結到樣式表。 標籤在(文件的)頭部:

瀏覽器會從檔案 mystyle.css 中讀到樣式宣告,並根據它來格式文件。

外部樣式表可以在任何文字編輯器中進行編輯。檔案不能包含任何的 html 標籤。樣式表應該以 .css 副檔名進行儲存

注意:不要在屬性值與單位之間留有空格(如:"margin-left: 20 px" ),正確的寫法是 "margin-left: 20px"

當單個文件需要特殊的樣式時,就應該使用內部樣式表。你可以使用 標籤在文件頭部定義內部樣式表,就像這樣:

由於要將表現和內容混雜在一起,內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法,例如當樣式僅需要在乙個元素上應用一次時。

"

color:sienna;margin-left:20px

">這是乙個段落。

如果某些屬性在不同的樣式表中被同樣的選擇器定義,那麼屬性值將從更具體的樣式表中被繼承過來。 

例如,外部樣式表擁有針對 h3 選擇器的三個屬性:

h3

而內部樣式表擁有針對 h3 選擇器的兩個屬性:

h3

color:red;

text-align:right;

font-size:20pt;

即顏色屬性將被繼承於外部樣式表,而文字排列(text-alignment)和字型尺寸(font-size)會被內部樣式表中的規則取代。

樣式表允許以多種方式規定樣式資訊。樣式可以規定在單個的 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...