Media

2024-04-27 15:09:40

字體：大中小

來源：轉載

供稿：網友

信息: Media

CSS的作用是將網頁文檔以更友好的展現方式呈現給用戶。

例如，假設你現在正用一臺顯示設備來閱讀這篇文章，同時你也想把它投影到屏幕上，或者打印出來，而顯示設備、屏幕投影和打印等這些媒介都有自己的特點，CSS就是為文檔提供在不同媒介上展示的適配方法。

CSS通過使用@media 的格式來對特定的媒介指定適配規則。

示例

我們的站點上有一個導航區域允許用戶瀏覽。

在標簽語言中，導航區域父元素的id是 nav-area.(在 HTML5中, 可以使用 ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/nav) 元素代替帶有id屬性的 [。)

為了網頁在被打印的時候去掉無用的信息，我們在樣式表中加一條適配規則，使導航區域在打印時是被隱藏起來的:

@media PRint { #nav-area {display: none;} }

一些常見的媒介類型:

`screen`	彩色計算機顯示
`print`	打?。?a href="http://www.49028c.com/tag-3.html">分頁式媒體）
`projection`	投影
`all`	所有媒體 (默認)

一些其他指定媒介類型的規則。

類型可以在樣式表通過link方式加到文檔時被指定，這是文檔的標簽語言允許的。例如，在HTML中，你可以通過在 LINK 標簽上添加media屬性來指定媒介類型。

在CSS中，你可以在樣式表開頭使用 @import 一個url來引入另外的樣式表，同時指定其媒介類型。

根據這些知識，你可以區分在不同的文件中定義不同媒介的樣式規則。有時這也是結構化樣式表的好方法。

想獲取媒介類型更多細節，請參考CSS規范中的 Media 部分。

接下來將介紹更多 display 屬性的例子: xml data.

打印

CSS有一些特性能夠支持打印和分頁媒體。

@page 規則能夠設置頁間距，對于雙面打印，還可以分開設置 @page:left 和 @page:right。

對于打印媒介，可以使用適當的長度單位，像是英寸(in)、點（1pt = 1/72 inch）、厘米（cm）還有毫米（mm）。這等同于使用em來配合字體大小和百分比。

可以通過使用 page-break-before, page-break-after 和 page-break-inside 屬性來控制文檔內容的分頁邊界。

示例

這個規則把四個方向的頁邊距都設置為1 inch:

@page {margin: 1in;}

這個規則確保每個H1元素都從新的一頁開始:

h1 {page-break-before: always;}

更多細節

想獲取更多細節，請參考CSS規范中的 Paged media 部分。

像CSS的其他特性一樣，打印也依賴于你的瀏覽器及其設置。例如，在打印的時候Mozilla瀏覽器支持默認的間距，頁眉和頁腳。而當其他用戶打印你的文檔時，你無法預知他會使用的什么樣的瀏覽器和設置，因此你也不能完全控制打印情況。

用戶界面

CSS有一些特殊的屬性能夠支持設備的用戶界面，像電腦顯示器。這使得文檔的展示隨著用戶界面的情況而動態地變化。

并沒有針對用戶界面設備的特殊媒介類型。

下面有五種特殊的選擇器:

Selector	Selects
`E:hover`	當鼠標懸浮任何E元素上
`E:focus`	當元素獲得鍵盤焦點
`E:active`	當元素是當前的活動元素
`E:link`	當元素超鏈接到一個url但是用戶還沒有訪問過
`E:visited`	當元素超鏈接到一個url但是用戶已經訪問過

cursor 屬性指定鼠標的形狀：一些常見的形狀如下表所示。把你的鼠標放在列表的選項上來看瀏覽器中實際顯示的鼠標形狀:

Selector	Selects
`pointer`	指示超鏈接
`wait`	表明程序無法接受輸入
`progress`	表明程序正在運行，但是仍可以接受輸入
`default`	默認（通常是箭頭）

outline 屬性通過創建輪廓來表明獲得鍵盤焦點。只有在父元素使用 relative, fixed or absolute 時才有效。你可以為任何父元素指定 position: relative;因為它不會產生移動。它的作用相當于 border 屬性，但與其不同的是它不能指明個別方向。

一些其他的用戶界面特性通常會通過屬性來應用。例如，禁用或者只讀的元素可以設置 disabled 屬性和 readonly 屬性。選擇器可以通過方括: [disabled] 或者 [readonly]來指定這些屬性。

示例

這些規則規定了按鈕在用戶使用時動態變化的樣式:

.green-button { background-color:#cec; color:#black; border:2px outset #cec; }.green-button[disabled] { background-color:#cdc; color:#777; }.green-button:active { border-style: inset; }

當一個功能性按鈕初始化的時候，它的周圍會圍繞著一條黑色的輪廓。當它獲取鍵盤焦點時，從表面上看有一條虛線輪廓。同時當鼠標懸浮在它上面時也有一些懸浮效果。

獲取更多關于CSS用戶界面的信息，請參考CSS規范中的 User interface 部分。

本文的第二部分列舉了Mozilla的用戶界面標簽語言的例子，XUL。

實踐: 打印文檔

創建一個新的HTML文檔, doc4.html. 把下面的HTML代碼粘貼過去:

<!DOCTYPE html><html> <head> <title>Print sample</title> <link rel="stylesheet" href="style4.css"> </head> <body> <h1>Section A</h1> <p>This is the first section...</p> <h1>Section B</h1> <p>This is the second section...</p> <div id="print-head"> Heading for paged media </div> <div id="print-foot"> Page: </div></body></html>

創建一個新的樣式表, style4.css. 把下面的HTML代碼粘貼過去:

/*** Print sample ***//* defaults for screen */#print-head,#print-foot { display: none; }/* print only */@media print {h1 { page-break-before: always; padding-top: 2em; }h1:first-child { page-break-before: avoid; counter-reset: page; }#print-head { display: block; position: fixed; top: 0pt; left:0pt; right: 0pt; font-size: 200%; text-align: center; }#print-foot { display: block; position: fixed; bottom: 0pt; right: 0pt; font-size: 200%; }#print-foot:after { content: counter(page); counter-increment: page; }} /* end print only */

在瀏覽器中查看文檔，你會看到它使用的是默認樣式。

打印（或者打印預覽）文檔；樣式表的適配規則開始起作用，同時會顯示每個頁面的頁眉和頁腳，如果瀏覽器支持記數器，頁碼也會被顯示出來。

上一篇：盒模型

下一篇：表格