html h1置中

圖表與標題 - W3C

文章推薦指數： 80 %
投票人數：10人

超文字置標語言5(HTML5)有一種元素能夠插入有標題的圖表。

... HTML允許圖表標題元素作為圖表的第一個或最後一個元素，若無其它CSS規則，這將分別把標題放於圖表頂端或 ... 語言 這是一份翻譯。

與英文版本相比，它可能包含錯誤或者過時。

翻譯員:SamuelChongof ChineseTranslationServicesthroughitsprobonotranslation services WebStyleSheetsCSStips&tricks Seealsotheindexofalltips. Onthispage: Addingcaptions Scalingtheimage Captionontop FiguresinHTML4 圖表與標題 迷你法國公園裡艾菲爾鐵塔的模型縮放 超文字置標語言5(HTML5)有一種元素能夠插入有標題的圖表。

(我們將展示一個慣例來用以下HTML4做同樣的事情。

)

迷你法國公園裡艾菲爾鐵塔的模型縮放

例如，若要將圖表向右浮動與周邊于文寬度30%相等的距離，以下規則可以可以幫你把它做到: figure{ float:right; width:30%; text-align:center; font-style:italic; font-size:smaller; text-indent:0; border:thinsilversolid; margin:0.5em; padding:0.5em; } 其實﹐只有前兩個定義(浮動和寬度)是必要的﹐其餘的只是為了裝飾而已。

圖像的縮放 這裡出現一個問題﹐就是圖像可能太寬了。

在這種情況下﹐圖像總是在136圖元的寬度和DIV是周圍文章寬度的30%。

那麼如果你將範圍調窄﹐有可能圖像會泄出DIV以外(試試看!)。

如果你知道檔裡全部圖像的寬度﹐你可以添加一個DIV的最小寬度﹐就像這樣: figure{ min-width:150px; } 夕陽中的聖特羅佩及其堡壘 另外的方法是縮放圖像本身。

那就是我們對在右邊的圖像所做的。

你可以看到﹐如果你把邊框弄得很寬﹐JPEG的圖像就不會縮放的太好。

但是如果圖像是一個SVG格式的圖表或曲線圖的話﹐縮放實際上能美妙的運用。

這裡是我們用的HTML標記﹕

夕陽中的聖特羅佩及其堡壘

還有這是樣式表: figure{ float:right; width:30%; text-align:center; font-style:italic; font-size:smaller; text-indent:0; border:thinsilversolid; margin:0.5em; padding:0.5em; } img.scaled{ width:100%; } 唯一的增加是最後的規則﹕規則使圖像和DIV(邊框與內邊距以內的面積)的內側一樣寬。

安置標題到頂部 靠近卡普費拉的地中海 HTML允許圖表標題元素作為圖表的第一個或最後一個元素，若無其它CSS規則，這將分別把標題放於圖表頂端或底端。

但無論標記如何，你還是能夠在CSS內指定標題在圖表上方或下方顯示。

通過告訴流覽器那個圖像應該格式化為一個表格，並以圖像作為唯一的格子，並以標題作為表格的標題。

只要將這些規則加到前段的樣式表內: figure{ display:table; } figcaption{ display:table-caption; caption-side:top; } 我們在本頁面使用的樣式含有灰色邊框。

很不幸地，當我們使用表格排列把標題放在頂端或底端時，我們必須分別指定邊框，因為標題是在表格本身的邊框之外。

我們可以把邊框的一部分放在標題上來解決這個問題: figure{ border-top:none; padding-top:0; } figcaption{ padding:0.5em; border:thinsilversolid; border-bottom:none; } HTML4內的圖表及標題 迷你法國公園裡艾菲爾鐵塔的模型縮放 不像HTML5，HTML4沒有元素可以插入有標題的圖表。

有人曾提出，(請見HTML3)但仍就沒有被包含到HTML4裡面。

這是類比圖表元素的一種方式:

迷你法國公園裡艾菲爾鐵塔的模型縮放 然後再樣式表裡你可以使用"圖表"的分類來隨意格式化圖表。

例如，若要將圖表向右浮動與周邊文章段落寬度30%相等的距離，可以使用以下規則: div.figure{ float:right; width:30%; text-align:center; font-style:italic; font-size:smaller; text-indent:0; border:thinsilversolid; margin:0.5em; padding:0.5em; } 跟之前一樣﹐只有前兩個定義(浮動和寬度)是必要的﹐其餘的只是為了裝飾而已。

HTML4縮放圖像 為避免圖像溢出表格，若你知道所有檔中圖像的寬度，你可以給DIV等等增加最低寬度，就像這樣: div.figure{ min-width:150px; } 夕陽中的聖特羅佩及其堡壘 若要將圖像縮放到表格的寬度(就跟我們在右方圖像所做的一樣)，你可以增加種類屬性以及CSS規則，與上面HTML5的範例非常相似。

這是我們所使用的編碼:

夕陽中的聖特羅佩及其堡壘 然後這是樣式表: div.figure{ float:right; width:30%; border:thinsilversolid; margin:0.5em; padding:0.5em; text-align:center; font-style:italic; font-size:smaller; text-indent:0; } img.scaled{ width:100%; } 唯一增加的是最後一條規則:它讓圖像與DIV內部一樣寬(邊框內區域)。

HTML4內將標題放置頂端 靠近卡普費拉的地中海 若要將標題放置在頂端，將這些之前的段落中提到的規則加到樣式表內: div.figure{ display:table; } div.figurep+p{ display:table-caption; caption-side:top; } '+'命令P的規則與它之前P的規則相配。

這意味著在這種情況下P的規則會與第二個P的圖像相配﹐也就是含有標題的那一個。

(這個方法可能會揭露一些舊流覽器裡存在的編碼問題﹐特別是和圖像的縮放混合在一起的時候﹐像我在這裡做得一樣。

) 跟之前一樣，用這種方式，在本頁面，我們放在圖表周圍的灰色邊框只會顯示在圖樣本身周圍。

若要把它放置於圖像以及標題周圍，增加這些規則: div.figure{ border-top:none; padding-top:0; } div.figurep+p{ padding:0.5em; border:thinsilversolid; border-bottom:none; } 網站導覽 CSS首頁 學習;使用 軟體 參與/ 草稿 Bert Bos,styleactivitylead Copyright©1994–2022W3C®Privacypolicy Created17January2001; Lastupdated2022年02月10日星期四05:40:52 語言 Azərbaycan Български Deutsch Ελληνικά English Español Français हिन्दी Hrvatski BahasaIndonesia Norsk Nederlands Polski Português Portuguêsbrasileiro Русский ไทย Tagalog Українська TiếngViệt 简体中文 繁體中文 關於翻譯

請為這篇文章評分？

延伸文章資訊