css學習第一天

2021-05-05 04:11:15 字數 3040 閱讀 9547

1

沒有樣式表時,如果我想更新整個站點中所有主體文字的字型,我必須一頁一頁地修改每張網頁。即便站點用資料庫提供服務,我仍然需要更新所有的模板,而且更新每一模板中每乙個例項例項的

。樣式表的主旨就是將格式和結構分離。利於樣式表,我可以將站點上所有的網頁都指向單一的乙個

css檔案,我只要修改

css檔案中某一行,那麼整個站點都會隨之發生變動。

對繼承性的理解

使用特別說明的樣式表規則,例:

body p

有一項規則特別說明

中的文字一紅色顯示,但它同時也繼承了的綠色規定。但是特別說明了的規則的重要性要大於繼承的規則,所以之內的文字一紅色顯示。 2

.我們已經學了將樣式表加到網頁的一種方法。實際上你可以使用4種方法。每種方法都有其不同的優點:

(生物裡的胚胎移植)植入

樣式表(內聯樣式表:內外相連): (

外聯樣式表)

amaze your friends! squash your enemies!

植入樣式表規則後,瀏覽器在整個html頁面中都執行該規則。如果你想對網頁一次性加入樣式表,就可採用該方法。

你可能注意到**中有兩處很奇怪:type="text/css"屬性和注釋標籤。type="text/css" 設定採用mime型別,這樣以來,不支援css的瀏覽器可以忽略樣式表。

注釋標籤()更為重要。有些老的瀏覽器(如mac機用的ie 2.0)即使在設定了type="text/css" 屬性時也不能忽略樣式表繼續執行下面的命令,而且還會顯示樣式表的**。而使用注釋標籤則可以避免發生這種情況。

鏈結(link )到樣式表上

這裡是樣式表功能發揮得淋漓盡致的地方。你可以將多個html檔案都鏈結到乙個中心樣式表檔案。這個外部的樣式表檔案將設定你所有網頁的規則。如果你改變樣式表檔案中的額某一細節,所有頁面都會隨之改變。如果你維護的站點很大,則這項功能絕對會有其用武之地。

它的使用方法:產生乙個普通的網頁,但使用

amaze your friends! squash

your enemies!

而其中輸入的company.css檔案內容如下:

h1 p

在本例中,瀏覽器首先輸入company.css的規則( @import 必須打頭), 然後加入移植的規則從而為這個網頁產生規則集合。

請注意,對於h1在外部樣式表檔案和植入的樣式表中都設定了規則。在兩者衝突的情況下,瀏覽器應執行哪一項規則呢?植入的規則此時將占上風。所以文字顯示效果如下:

stylesheets: the tool of the web design gods

amaze your friends! squash your enemies!

如果你的瀏覽器不支援css這裡

**顯示效果。

輸入樣式表的靈活性可以使你輸入無數多個樣式表,並可以按照自己的喜好用植入的樣式表凌駕於輸入的樣式表之上。

但是目前只有ie 4.0支援輸入法。

在行內加入樣式

最後,你還可以在html

行中加入樣式規則,如下:

amaze your friends! squash your enemies!

在這個例子中,你無須在html頂部加入樣表**。加入行內的樣式表屬性將使瀏器同樣執行樣式表規則。

該方法不方便之處在於:你必須在每行指中都中加入樣式規則,否則下一行時瀏器將轉回到檔案的預設設定。

加入行內的樣式表相比不如植入、鏈結及輸入的樣式表那樣功能強大,但有時候你會發現它也很有用。

記住,你可以同時使用幾種方法,其實,樣式表的能力就在於綜合你加入網頁的各種樣式。 (

只有link沒有用style標籤)3.

css

格式設定規則由兩部分組成

:選擇器和宣告。選擇器是標識已設定格式元素(如

p、h1、類名稱或

id)的術語,而宣告則用於定義樣式元素

分類

我先前已經講過所有的html標籤都可以用作選擇,並附加樣式表說明.但是如果你想達到的目的比這還要複雜該如何處理呢?比如,你想讓主體文字的1段用綠色顯示,第2段用紫色顯示,而第3段用灰色顯示,你能做到嗎?

這種情況下分類將發揮作用。你可以將段落p分成3種不同的類別,每一類應用不同的樣式表說明。這些規則(不論是植入的還是外部樣式表檔案)將以以下方式顯示:

p.first

p.second

p.third

the first paragraph,

with a class name of "first."

the second paragraph, with a class name of "second."

the third paragraph,

with a class name of "third."

你可以給類別起任何一種名字,但不要忘了在樣式表規則中類別名稱前加乙個句號(即英文中的.)

你還可以生成不加任何html標籤的分類:

.first

這種方式更加靈活,因為現在我們可以將class=first用於任何html標籤,並應用到網頁中,而設定的文字將以綠色顯示。

根據正式的規定,以下為樣式表的串接順序:

inline styles

(行內樣式)

embedded styles

(植入樣式)

linked styles

(鏈結樣式)

imported styles

(輸入樣式)

default browser styles(預設瀏覽器樣式)

瀏覽器將按照上述順序執行樣式表的指令。

CSS學習第一天

在css中,我們需要選擇器來進行選擇我們要進行操作的標籤,它的作用就是選擇標籤。1.基礎選擇器 形式標籤名 例如 div類選擇器 這是使用最多的選擇器 形式 類名 例如 eg注意不要忘記類名前面的乙個點。這裡有乙個口訣可以幫助我們記憶 樣式點 定義,結構 class 呼叫,乙個或多個,開發最常用。i...

CSS 學習第一天

css的三種引入方式 1.內嵌 直接在標籤中新增style屬性 格式 標籤名 style 樣式1 樣式值1 樣式2 樣式值2 2.內聯 在head標籤中新增 格式選擇器 樣式1 樣式值1 樣式2 樣式值2 1.id選擇器 在標籤中新增id屬性 標籤名 id id值 2.class選擇器 在標籤中新增...

學習第一天

知識是學會的,不是教會的 程式設計 驗證性或體驗性 創造性 學程式設計的4個階段 1.能看懂別人的 除錯別人的 2.能修改別人的 3.能拷貝別人的 做自己的事 4.能自己設計編寫 方法 多讀 做記錄 執行 修改 執行 練習,光說不練假把式 刷oj總結 寫部落格或許是個不錯的選擇 學生和已經工作的程式...