CSS 控制頁面

2021-09-02 02:34:14 字數 1604 閱讀 5384

通常以三種元素作為背景色:背景顏色、背景、背景顏色和背景混用

一、使用背景顏色

格式:backgroung-color:顏色值

設定塊的背景顏色,可以用通類選擇符樣式實現,即在css樣式中設定;也可直接在body中設定。

二、使用背景

1.預設屬性

格式:background-image:路徑

例:background-image: url("…/img/sprite.footer.png"); (此為相對路徑)

2.重複屬性

(1)格式:backgroung-repeat:屬性值

(2)屬性值如下:

repeat:設定背景按照從左到右、從上到下的順序顯示

no-repeat:設定背景不重複,在沒有定義位置時出現在容器左上角

repeat-x:設定背景橫向排列,在沒有定義位置時在容器頂部從左到右重複排列

repeat-y:設定背景縱向排列,在沒有定義位置時在容器左側從上到下重複排列

使用background-repeat時,背景在橫向和縱向被無限複製,鋪滿整個文件範圍。因此,需使用background-repeat:no-repeat,即設定背景以不重複的方式顯示。

3.使用位置屬性

(1)格式:background-position:屬性值

(2)屬性值如下:

長度值、百分比、top、bottom、left、right、center(設定背景橫向和縱向居中)

注:在使用background-position屬性時需要設定兩個屬性值

例1:background-position:left center;

即設定背景以水平局左、垂直居中的方式顯示。

例2:background-position:56% 43%;

使用百分比表示,需要注意,百分比值的指定是以左邊界和上邊界為參照物件的,其中的距離值是指背景的中心到兩個參照物件邊界的百分比。

4.使用附件屬性

(1)格式:background-attachment:屬性值

(2)屬性值如下:

scroll:設定背景圖隨內容滾動

fixed:設定背景固定不動

背景附件屬性的預設值是scroll,即背景隨頁面內容的滾動而上下滾動。

對於預設html樣式而言,一旦文件顯示範圍超過當前容器,瀏覽器就會提供滾動條以便瀏覽。而當使用者拖動滾動條瀏覽文字的時候,背景會隨著文字一起滾動,即預設的「scroll」。

若想讓背景永遠固定在下層,無論上層文字怎樣滾動,背景都靜止不動,就需要使用background-attachment屬性,新增「fixed」屬性值能滿足要求。

品類齊全,輕鬆購物

其中css樣式如下:

.bottom_logo>span
效果如下:

結論:在上述**中,通過樣式屬性設定了背景和背景顏色,程式執行後的效果是背景顏色被背景部分覆蓋。

.bottom_logo>span

使用CSS控制頁面

在對css簡介 上篇部落格 了解後,便希望使用css對頁面進行全方位的控制。本篇部落格主要介紹如何使用css控制頁面,以及其控制頁面的各種方法,包括行內樣式 內嵌式 鏈結式和匯入式。行內樣式是所有樣式方法中最為直接的一種,它直接對html的標記使用style屬性然後將css 直接寫在其中。如圖 其顯...

CSS控制頁面的方法

1.行內樣式 p style color ff000 font size 20px text decoration underline 正文內容1 p 2.內嵌樣式 style type text css p style 3.連線式css樣式 link href type text css rel ...

CSS 頁面美化和布局控制

2.好處 層疊 多個樣式可以作用在同乙個html的元素上,同時生效1.功能強大 2.將內容展示和樣式控制分離 降低耦合度。解耦 讓分工協作更容易 提高開發效率1.內聯樣式 在標籤內使用style屬性指定css 如 hello css 2.內部樣式 在head標籤內,定義style標籤,style標籤...