CSS學習內容

2022-08-12 03:24:06 字數 2480 閱讀 2616

定義和用法

border-style 屬性用於設定元素所有邊框的樣式,或者單獨地為各邊設定邊框樣式。

只有當這個值不是 none 時邊框才可能出現。

例子 1

border-style:dotted solid double dashed;

上邊框是點狀

右邊框是實線

下邊框是雙線

左邊框是虛線

例子 2

border-style:dotted solid double;

上邊框是點狀

右邊框和左邊框是實線

下邊框是雙線

例子 3

border-style:dotted solid;

上邊框和下邊框是點狀

右邊框和左邊框是實線

例子 4

border-style:dotted;

所有 4 個邊框都是點狀

例項設定 4 個邊框的樣式:p

tiy瀏覽器支援

所有瀏覽器都支援 border-style 屬性。

注釋:任何的版本的 internet explorer (包括 ie8)都不支援屬性值 "inherit"。

可能的值

背景色可以使用 background-color 屬性為元素設定背景色。這個屬性接受任何合法的顏色值。

這條規則把元素的背景設定為灰色:

p 如果您希望背景色從元素中的文字向外少有延伸,只需增加一些內邊距:

p 可以為所有元素設定背景色,這包括 body 一直到 em 和 a 等行內元素。

background-color 不能繼承,其預設值是 transparent。transparent 有「透明」之意。也就是說,如果乙個元素沒有指定背景色,那麼背景就是透明的,這樣其祖先元素的背景才能可見。

背景影象

要把影象放入背景,需要使用 background-image 屬性。background-image 屬性的預設值是 none,表示背景上沒有放置任何影象。

如果需要設定乙個背景影象,必須為這個屬性設定乙個 url 值:

body

背景定位

可以利用 background-position 屬性改變影象在背景中的位置。

下面的例子在 body 元素中將乙個背景影象居中放置:

body

為 background-position 屬性提供值有很多方法。首先,可以使用一些關鍵字:top、bottom、left、right 和 center。

通常,這些關鍵字會成對出現,不過也不總是這樣。還可以使用長度值,如 100px 或 5cm,最後也可以使用百分數值。不同型別的值對於背景影象的放置稍有差異。

關鍵字影象放置關鍵字最容易理解,其作用如其名稱所表明的。例如,top right 使影象放置在元素內邊距區的右上角。

根據規範,位置關鍵字可以按任何順序出現,只要保證不超過兩個關鍵字 - 乙個對應水平方向,另乙個物件垂直方向。

如果只出現乙個關鍵字,則認為另乙個關鍵字是 center。

所以,如果希望每個段落的中部上方出現乙個影象,只需宣告如下:p

下面是等價的位置關鍵字:

百分數值

百分數值的表現方式更為複雜。假設你希望用百分數值將影象在其元素中居中,這很容易:

body

這會導致影象適當放置,其中心與其元素的中心對齊。換句話說,百分數值同時應用於元素和影象。也就是說,影象中描述為 50% 50% 的點(中心點)與元素中描述為 50% 50% 的點(中心點)對齊。

如果影象位於 0% 0%,其左上角將放在元素內邊距區的左上角。如果影象位置是 100% 100%,會使影象的右下角放在右邊距的右下角。

因此,如果你想把乙個影象放在水平方向 2/3、垂直方向 1/3 處,可以這樣宣告:

body

如果只提供乙個百分數值,所提供的這個值將用作水平值,垂直值將假設為 50%。這一點與關鍵字類似。

background-position 的預設值是 0% 0%,在功能上相當於 top left。這就解釋了背景影象為什麼總是從元素內邊距區的左上角開始平鋪,除非您設定了不同的位置值。

長度值長度值解釋的是元素內邊距區左上角的偏移。偏移點是影象的左上角。

比如,如果設定值為 50px 100px,影象的左上角將在元素內邊距區左上角向右 50 畫素、向下 100 畫素的位置上:

body

注意,這一點與百分數值不同,因為偏移只是從乙個左上角到另乙個左上角。也就是說,影象的左上角與 background-position 宣告中的指定的點對齊。

背景關聯

如果文件比較長,那麼當文件向下滾動時,背景影象也會隨之滾動。當文件滾動到超過影象的位置時,影象就會消失。

您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性,可以宣告影象相對於可視區是固定的(fixed),因此不會受到滾動的影響:

body

background-attachment 屬性的預設值是 scroll,也就是說,在預設的情況下,背景會隨文件滾動。。

css 背景屬性

字型風格

第10章使用CSS製作內容的版式

網頁設計的第一步是設計版面布局。就像傳統的報刊雜誌編輯一樣,將網頁看作一張報紙 一本雜誌來進行排版布局。雖然動態網頁技術的發展使得開始趨向於學習場景編劇,但是固定的網頁版面設計基礎依然是必須學習和掌握的。本章將結合 和文字,在css布局的頁面中,講解如何控制 之間的關係。在出版物的應用中,一般比較重...

CSS樣式屬性

1 字型屬性 type font family 使用什麼字型 font style 字型的樣式,是否斜體 normal italic oblique font variant 字型大小寫 normal small caps font weight 字型的粗細 normal bold bolder l...

CSS精華提煉

css cascading style sheet 層疊樣式表 css是頁面排版樣式標準,它控制文字格式。簡單 靈活 易學的工具。語法結構 選擇符 樣式屬性和值。格式 選擇符 說明 選擇符 selector 這組樣式編碼所要針對的物件,可以是標記,如body,也可以是定義了特定id或class的標記...