CSS:print

From TestingMediawiki
Jump to navigation Jump to search

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

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

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

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

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

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

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

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

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

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

  1. 該使用何種長度單位?
    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 } 配合,不然出來的東西會跑出可列印範圍外。
  2. 該如何手動換頁?
    1. PAGE-BREAK-AFTER |- 這個 CSS 屬性會讓被套用的元素前插入一個分頁符號,這樣子在列印時,到了該地方就會進行換頁。比如說:
      h2 { page-break-after:always; }
      就是列印到有 h2 所在的那行時,後面的資料就會自動換頁的樣子?(不確定中,徵求清楚 page-break 屬性的人解說中。)
    2. PAGE-BREAK-BEFORE |- 這個 CSS 屬性會讓被套用的元素後插入一個分頁符號,這樣子在列印時,到了該地方就會進行換頁。
  3. 該如何讓某些元素中的說明文字屬性的資料被顯示出來?
    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(?) ,這是依所給的值,來決定該抓取何種資料輸出的,然後要記得字串跟變數間一定要隔一個空格。(不隔空格有沒有差我還沒實驗不清楚)

可供參考的範例[edit]

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