開始學習CSS,為網頁新增樣式

2022-05-02 19:30:09 字數 1401 閱讀 2511

目錄

認識css樣式

css樣式的優勢 

css**語法

css注釋**

任務css全稱為「層疊樣式表 (cascading style sheets)」,它主要是用於定義html內容在瀏覽器內的顯示樣式,如文字大小、顏色、字型加粗等。

如下列**:

p
使用css樣式的乙個好處是通過定義某個樣式,可以讓不同網頁位置的文字有著統一的字型、字型大小或者顏色等。

慕課網,超酷的網際網路、it技術免費學習平台,創新的網路一站式學習、實踐體驗;服務及時貼心,內容專業、有趣易學。專注服務網際網路工程師快速成為技術高手!

為什麼使用css樣式來設定網頁的外觀樣式呢?右邊編輯器是一段文字,我們想把「超酷的網際網路」、「服務及時貼心」、「有趣易學」這三個短語的文字顏色設定為紅色,這時就 可以通過設定樣式來設定,而且只需要編寫一條css樣式語句。

span
觀察結果視窗文字的顏色是否變為紅色了。

css 樣式由選擇符宣告組成,而宣告又由屬性組成,如下圖所示:

選擇符:又稱選擇器,指明網頁中要應用樣式規則的元素,如本例中是網頁中所有的段(p)的文字將變成藍色,而其他的元素(如ol)不會受到影響。

宣告:在英文大括號「{}」中的的就是宣告,屬性和值之間用英文冒號「:」分隔。當有多條宣告時,中間可以英文分號「;」分隔,如下所示:

p
注意:

1、最後一條宣告可以沒有分號,但是為了以後修改方便,一般也加上分號。

p
就像在html的注釋一樣,在css中也有注釋語句:用/*注釋語句*/來標明(html中使用)。就像下面**:

我來試一試:為css樣式**新增注釋語句,來標明**作用

1、在右部編輯器中的第8行的font-size:12px;語句後面新增「設定文字字型大小為12px」注釋。

2、在右部編輯器中的第9行的color:red;語句後面新增「設定文字顏色為紅色」注釋。

CSS 為網頁新增樣式

css全稱為 層疊樣式表 cascading style sheets 它主要是用於定義html內容在瀏覽器內的顯示樣式,如文字大小 顏色 字型加粗等。如下列 p使用css樣式的乙個好處是通過定義某個樣式,可以讓不同網頁位置的文字有著統一的字型 字型大小或者顏色等。為什麼使用css樣式來設定網頁的外...

CSS筆記一 開始學習CSS,為網頁新增樣式

一 認識css樣式 css全稱為 層疊樣式表 cascading style sheets 它主要是用於定義html內容在瀏覽器內的顯示樣式,如文字大小 顏色 字型加粗等。如下列 type text css pstyle 使用css樣式的乙個好處是通過定義某個樣式,可以讓不同網頁位置的文字有著統一的...

為網頁新增樣式

h1id選擇器 id 元素選擇器 元素 類選擇器 class 萬用字元選擇器 內部樣式表 書寫在style元素中 內聯樣式表 直接書寫在元素的style屬性中 外部樣式表 推薦 外部樣式可以解決多頁面樣式重複的問題 有利於遊覽器快取,從而提高頁面響應熟讀 有利於 分離 html和css 更容易閱讀和...