HTML CSS基礎篇之十 CSS基礎

2021-08-04 22:53:17 字數 4032 閱讀 7258

**:

body

h1, h2h1p

emp.greentea

p.blueberry

p.raspberry

css裡面的每個語句包括乙個場所(就像臥室),乙個屬性(就像窗簾或地毯)和乙個提供給屬性的樣式(就如藍色,或者一寸的瓷磚)。

使用css設計xhtml

p

整個過程為規則

1. 選擇你要新增樣式的元素 (場所) p元素

2. 指定所新增樣式的屬性 (屬性)background-color 屬性

3. 在屬性和它的值之間有乙個冒號。red值前新增冒號

4. 最後新增乙個分號。

5. 所有樣式置於大括號內。

可以在每個css規則裡新增若干屬性和值。

p

為什麼要用另一種語言定義這些樣式,而不是xhtml呢,既然我們用xhtml編寫元素,那為什麼不直接用xhtml寫樣式呢?

css比xhtml更合適指定樣式的資訊。使用乙個小的css部件,就能對xhtml的設計產生明顯的效果。你還會發現css適合於處理多頁面網頁的樣式。

在xhtml中引入css

type="text/css">

style>

元素裡新增樣式開始和結束標記。

在標記中新增css規則

若想為多乙個元素寫統一個規則,只需要選擇符之間加逗號,如h1, h2。

給乙個元素寫多個規則的原則:

大體上,試著把元素之間共有的樣式組合在一起,就如我們對所做的那樣,而把特定於乙個元素的樣式寫在另乙個規則裡面,如給主標題新增下劃線樣式。

q&a:

選擇符工作方式

css允許定義各種選擇符來決定你的樣式使用與哪些元素。

以頁面xhtml的結構圖為切入點。

提取xhtml中的css規則到單獨的css樣式表檔案

在xhtml頁面中引入外部樣式表

"stylesheet"

type="text/css" href="lounge.css">

link 使用link元素來鏈結外部資訊

type=」text/css」 資訊的型別是」text/css」也就是乙個css樣式表。

rel 指明xhtml檔案和要鏈結的東西之間的關係。要鏈結到乙個樣式表,設定屬性值為」stylesheet」

href 定位樣式表,可以使用相對鏈結,也可以使用完整的url

不再需要元素了,刪除掉

是乙個空元素

當像」p」選擇符新增font-family屬性時,存在與元素中的元素的字型也受到影響。

中的元素從元素繼承了font-family樣式

元素從它的父母那兒繼承樣式(不是所有樣式都可以被繼承,只是一部分,如字型)。

,元素繼承了font-family樣式,而元素是它們的父親。

通過xhtml樹狀結構了解繼承如何起作用。將字型屬性上移到body。

繼承的覆蓋

在子元素中提供乙個具體的規則來覆蓋它的繼承屬性。

例子:

font-family屬性上移到了body從而設定了整個網頁的字型。

但如果你不想子所有的元素中都使用sans-serif字型呢?比如,想在元素中使用serif字型。

那就為元素提供乙個具體的規則來覆蓋它繼承的屬性。

在css裡,被應用的規則總是最具體的。因此,如果元素由乙個規則,元素也有乙個更具體的規則,那麼瀏覽器一般會執行更加具體的規則。

那些css屬性可被繼承,哪些不能被繼承!

大體上,

影響文字外觀的樣式:

字型顏色(顏色屬性)

字型 還有其他和字型有關的屬性:

字型大小

字型寬度

字型樣式

都可以被繼承

其他的屬性(如邊框)不被繼承

很多情況下你可以根據自己的理解(或者驗證一下),隨著對各種屬性的作用越來越熟悉,就能掌握這方面的知識。

只需要在首尾分別新增/* 和 */

注意,乙個注釋可以跨越多行。你可以在css周圍新增注釋、而瀏覽器將忽略它。

比喻成俱樂部,如果加入了這個俱樂部,就可以獲得相應的權利和責任。

"greentea">chock full of vitamins and minerals, this elixir

combines the healthful benefits of green tea with

a twist of chamomile blossoms and ginger root.

要把元素新增到乙個類中,只需新增乙個帶有類名的「class」屬性。

類的選擇符

p

.greentea

首先是p選擇符

然後用乙個」.」來指定乙個類

最後是類的名稱

p.greentea

這個選擇符選擇綠茶類裡的所有段落

blockquote

.greentea, p

.greentea

只需要另乙個選擇符來處理綠茶類裡的現在這個規則將適用於綠茶類裡的元素和元素。

在xhtml裡,修改

class="greentea">
.greentea

省略所有的元素名稱,而用乙個句點並且後接乙個類名,那麼這個規則將會使用於該類內的所有成員。

乙個元素可以加入多個類

定義乙個屬於greentea、raspberry、blueberry類的元素

將每個類名賦給」class」屬性值,類名之間用乙個空格隔開。順序無關緊要。

如果想讓乙個元素擁有不同類中定義的樣式,可以讓它同時加入多個類。

比如現在的情形,與商品類關聯的元素都有乙個特定樣式,但不是所有的產品都同時降價銷售。在另乙個類中設定了」specials」顏色,就可以很容易地把降價銷售的商品新增到」specials」類中,使它們擁有你想要的紅色。

如果乙個元素屬於多個類,而這些類定義的是相同的屬性,那麼那個類定義的屬性會被應用呢???

如果你的css有錯誤,通常錯誤後面的所有規則都會被忽略。因此,要通過做這個練習,養成檢錯的習慣。

color 用來設定文字元素的字型顏色。

font-weight 這個屬性用來控制文字的粗細,用它把文字加粗。

left 用它告訴元素如何放置它的左側。

line-height 這個屬性用來設定文字元素的行間距。

top 控制元素頂部的位置。

letter-spacing 這個屬性用來設定字母之間的間距。

background-color 這個屬性用來控制元素的背景顏色。

border 這個屬性用來在元素周圍加邊框,可以設定成實心邊框,虛線邊框。

margin 如果想在元素的邊緣和內容之間有一些空間。就用邊界。

font-size 把文字變大或變小。

text-align 用這個屬性讓文字左對齊,右對齊或居中。

font-style 用這個屬性得到斜體文字

list-style 這個屬性用來設定列表項的樣式。

background-image 用這個屬性把乙個影象放到元素後面。

整理自head first html

基礎知識HtmlCSS篇

上一次提到了前端的知識html和css,今天就簡單回顧下。html的標籤分為兩種 塊元素和行內元素,塊元素即是本身可以自由寬高,預設佔比100 寬度,高度隨內容撐開的 行內元素寬高都是由內容撐開,本身設定寬高度無效,當然行內元素和塊元素之間可以相互轉化 行內塊元素便是一種同時具有行內元素和塊元素的特...

HTML CSS學習之基礎知識 css基礎知識

css全稱為 層疊樣式表 cascading style sheets 它主要是用於定義html內容在瀏覽器內的顯示樣式,如文字大小 顏色 字型加粗等。使用css樣式的乙個好處是通過定義某個樣式,可以讓不同網頁位置的文字有著統一的字型 字型大小或者顏色等。css樣式由選擇符和宣告組成,宣告由屬性和值...

html css基礎教程入門之CSS 尺寸

css 尺寸 dimension 屬性允許你控制元素的高度和寬度。同樣,它允許你增加行間距。css height 屬性 height 屬性用以設定元素的高度,單位可以使用px,em等,通常用使用px 畫素 為html單位。這個屬性定義元素內容區的高度,在內容區外面可以增加內邊距 邊框和外邊距。設定段...