CSS:print

本頁面要來講解如何將 CSS 運用至列印文件的工作之中，以強化你所列印出的文件的美觀性及實用性。

您的位置: ACnowiki >> Cascading Style Sheet >> CSS 在列印文件上的運用

如何將列印用的樣式套用至網頁的文件中

基本上在 HTML 文件的 head 元素中加入以下這一行就好了。

<link rel="stylesheet" type="text/css" href="你的列印用 CSS 檔案的位置" media="print" />

如何設計列印用樣式的內容

這點要由各位自己決定，以下我會提幾點建議供各位參考。

你本來寫給螢幕看的網頁並不一定適合拿來直接列印，除非你本來就沒有使用任何的樣式，我在這指的並不只有 CSS 的樣式，還有你寫在 HTML 的各個元素 element 中的屬性 attribute 。
當你嘹解了你要列印 ( print ) 出來的文件，並不一定跟你顯示 ( screen ) 在螢幕上的相同時，你可能會考慮再另外重製一份 HTML 檔案，不過我要在這告訴你，如果你的瀏覽器比 Internet Explorer 6.0 還新的話，那麼你可以考慮使用 CSS 來處理，這樣子可以節省掉新增及維護列印用的 HTML 檔案的時間及工夫。
當你選擇了用 CSS 來作業時，你一定會因為自己的 CSS 功力不足而覺得還不如用 HTML 來處理比較適當，不過我認為，在看了「#實際地將 CSS 運用至列印文件的工作中」的這個主題後，你在使用 CSS 來處理列印工作上應該會更加地得心應手，這也是這一份網頁之所以會被寫出來的目的。
最後要提醒的一點是，列印出來的文件中，四周留白的空間，還有在四個角的額外資訊，這些是要由瀏覽器的頁面設定來設定而非由 CSS 負責的，至少我用的 Mozilla Firefox 是這樣子做的。

實際地將 CSS 運用至列印文件的工作中

這兒所講解的全是 CSS 的實用技術面了，如果你還不懂 CSS 的話，建議你到 Cascading Style Sheet 這一頁找資料看一下。

該使用何種長度單位？
1. 可使用的單位如下。
  1. 公分 cm
  2. 像素 px
  3. 點 pt
  4. 一個全形字單位 em
  5. 英寸 in
  6. 公釐（？） mm
2. 需要設定長度單位的元素 element 如下。
  1. body { width } |- 這會決定你的一份文件列印出來的寬度 width 有多寬，一般來說用 cm 並配合所要列印的紙張可能會比較好也說不定…
  2. body { font-size } |- 這會決定你的一份文件列印出來的字體尺寸 font-size 有多大，一般來說用 pt 可能會比較好？
  3. 其它的 block 層級的元素 |- 這要跟 body { width } 配合，不然出來的東西會跑出可列印範圍外。
該如何手動換頁？
1. PAGE-BREAK-AFTER |- 這個 CSS 屬性會讓被套用的元素前插入一個分頁符號，這樣子在列印時，到了該地方就會進行換頁。比如說：
  h2 { page-break-after:always; }
  就是列印到有 h2 所在的那行時，後面的資料就會自動換頁的樣子？（不確定中，徵求清楚 page-break 屬性的人解說中。）
2. PAGE-BREAK-BEFORE |- 這個 CSS 屬性會讓被套用的元素後插入一個分頁符號，這樣子在列印時，到了該地方就會進行換頁。
該如何讓某些元素中的說明文字屬性的資料被顯示出來？
1. 使用 after 跟 before 這兩個 CSS 的屬性（？）時，可以用 content 來在元素的前或後加入文字，而且你也可以用它來控制輸出特定的屬性中的資料。比如說下面這行 CSS 的源碼（？）會將 a 元素中的 href 中的 href 的資料輸出在該 a 元素的後面，但是如果你的 a 元素沒有 href 屬性時是不會有作用的。
  a[href]:after { content: attr(href) ; }
  這樣子內容 content 屬性就會自己去抓並輸出變數 attr(href) ，也就是你的網址了。
  然後如果你還希望在該輸出的 href 的資料前後加點什麼東西以供區隔（比如說大於小於的數學符號），你可以用下面這行的方式來寫。
  a[href]:after { content: "<" attr(href) ">" ; }
  在內容 content 中，用左右成對的雙引號（？） " 所包起來的就是代表字串 string ，這是固定一定要照其所宣告的值輸出的，而沒有包起來的就是變數 variable（？），這是依所給的值，來決定該抓取何種資料輸出的，然後要記得字串跟變數間一定要隔一個空格。（不隔空格有沒有差我還沒實驗不清楚）

可供參考的範例

以下列出有將 CSS 運用至列印文件的工作中的網頁。

CSS:print

Contents

如何將列印用的樣式套用至網頁的文件中

如何設計列印用樣式的內容

實際地將 CSS 運用至列印文件的工作中

可供參考的範例

Navigation menu

CSS:print

如何將列印用的樣式套用至網頁的文件中

如何設計列印用樣式的內容

實際地將 CSS 運用至列印文件的工作中

可供參考的範例

Navigation menu

Search