精通樣式表技術筆記(六)

2021-04-13 09:47:22 字數 1249 閱讀 4113

26、背景定位(background-position)

你可以設定將背景插在什麼位置顯示。 

p 當上述css規則應用於本段文字時,背景圖象將在本段的中下部開始顯示並向右平鋪。

如果你看不到上述的顯示效果,則說明你所使用的瀏覽器是communicator,它不支援背景定位。

設定位置的3種方法: 

關鍵字引數(keyword values) 

關鍵字設定方法簡便易用: 

top將背景圖象同前景要素的頂部對齊。 

bottom將其同前景要素的底部對齊。 

left將其同左邊對齊。 

right將其同右邊對齊。 

center將其水平居中(如果使用在另一關鍵字前面)或垂直居中(如果用在另一關鍵字後面)。 

長度引數 

長度引數可以使用你對背景圖象的位置作出更精確的控制。你可以設定水平和垂直定位起點,例: 

p 本段顯示了上述規則的執行效果。ie支援這種屬性,將gif圖象設定在從左上角起水平70象素,垂直10象素的位置。

由於我設定了 background-repeat: repeat-y,gif圖象將在文字後垂直平鋪。

你可以使用我們以前學過的任何一種長度單位,例如pixels, points, inches, ems等。 

(ie 3不支援長度單位顯示這種效果)

比例值(percentage values) 

你還可以使用比例值設定背景圖象的位置,例: 

p  當這條css規則應用於本段時,背景圖象從水平距離段落右端70%,垂直距離段落頂部50%的位置顯示。

如果你重新調整瀏覽器視窗的尺寸,使得段落的顯示尺寸變化,背景圖象的位置也相應發生變化。

在本段上不會發生這樣的變化,因為本段的尺寸是固定的,不會隨著視窗尺寸的調整而變化。

27、背景(background) 

利用背景屬性,你可以設定背景顏色、圖象、平鋪方法、固定及滾動顯示及定位。例: 

p28、定位(左邊和頂部) 

定位屬性將是網蟲們開啟幸福之門的鑰匙: 

絕對定位

h4 相對定位指你所定位的要素的位置相對於在檔案中所分配的位置。例: 

i 29、定位寬度 

定位了的要素在頁面上顯示時仍然會從左到右一直顯示。利用寬度屬性就可以設定字元向右流動的限制,即設定要素的寬度。 

div 

寬度屬性只適用於絕對定位的要素。

30、定位高度 

理論上講,高度應該和寬度的設定類似,只不過是在垂直方向上: 

div 

CSS層疊樣式表 定義樣式表

定義樣式表 1 html標記定義 p p可以叫做選擇器,定義那個標記中的內容執行其中的樣式 乙個選擇器可以控制若干個樣式屬性,他們之間需要用英語 隔開,最後乙個可以不應加 2 class定義 class定義是以 開始 p3 id 定義 id定義是 開始的 p4 優先順序問題 id class htm...

基準樣式表

翻譯 css的初學者常因為瀏覽器的預設樣式表,而生產一些錯誤。可以設定乙個基本的樣式表,恢復css最基本的樣貌。global settings html,body body headings h1,h2,h3,h4,h5,h6 h1 h2 h3 common formatting p,ul,ol u...

聯合樣式表

1.使用xsl import 可以將乙個樣式表匯入到另乙個樣式表,把xsl import放在xsl stylesheet根元素中的頂級元素中就可以了.xml version 1.0 encoding gb2312 xsl stylesheet xmlns xsl xsl import href im...