您現在的位置是:電腦技術吧?>? 故障問題 ??>??樣式表有哪幾種類型,樣式表分類??>??正文詳情

樣式表有哪幾種類型,樣式表分類

買覓雙2019-11-08 17:11:51 人圍觀
簡介有幾種樣式表[email protected]規則非常適合將HTML或XML文檔定位為目標輸出方法。目前,印刷媒體的使用非常普遍。與單個可打印版本的實現相比,print提供了一種更干凈的方樣式表

CSS  @media  規則非常適合于將 HTML 或 XML 文檔定位為目標輸出方法。

目前,  print  媒體的使用非常普遍,與實現單獨的 可打印版本 相比,  print  提供了更加整潔的方式來創建打印機友好的頁面。

  screen  媒體一直未得到充分利用,原因可能是因為人們通常都認為  screen  僅僅是 默認的呈現方式。

然而,就布局而言(尤指絕對布局),  screen  媒體類型具有重要的意義,樣式表規則并不關心媒體類型,因此沒有涵蓋這一點。

  最近,我在創建某個 Ajax Web 應用程序過程中遇到了一個難以解決的問題。

和創建多數 Web 應用程序一樣,我需要在屏幕的固定位置創建一個界面部件。

在我的程序(本技巧)中,這個部件就是橫跨信息顯示區域底部的工具欄。

對于我的實際應用程序,這個工具欄包含了各種子部件,可以對應用程序進行配置和交互;就這篇技巧而言,我將它替換為一個靜態的信息集合。

這種簡化不會產生 CSS 問題。

  通常,將元素放入  或iframe元素內就可解決問題。

但是,使用框架不僅會損失應用程序的簡單性,還降低客戶機 ECMAscript 在交互期間控制div元素可視性的能力。

最好的方法是對界面使用純粹的 CSS 表示。

對于本篇技巧,我創建了一個玩具式的文件查看應用程序,它可以讀取 URL 或本地文件并使用編號的行和一個類似wc的摘要顯示讀取內容。

我希望瀏覽器顯示如圖 1 所示的內容。

為創建這種外觀,我使用如下的 HTML 模板:網頁教學網 htmlhead titleUsing CSS media types/title @CSS/headbody div class=top @ITEMS /div div class=bottom @SUMMARY /div/body/html 不要關心這種模板語言(并不存在)的細節;其意圖非常明顯。

我嘗試使用的 CSS 為: div.bottom { background-color: lightblue; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 20px;}div.top { background-color: white;}li.odd { background-color: #EAEAFF;}li.even { background-color: #FCFCFC;} 非常簡單,它將產生上面所示的屏幕截圖。

當您希望向下滾動div class=top中編號的行時,問題出現了:

解決滾動問題的方法似乎是使用divfixed而不是absolute布局。

div.bottom { background-color: lightblue; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 20px;}/* ...Rest of CSS styling */ 這個細微的改動確實修復了玩具應用程序的屏幕顯示問題,但是現在,同一個頁面的打印版本中出現了一個令人不快的工件。

為演示這個問題,我設置了一個極其短小的頁面長度:

當然,我希望將各種媒體以適合其顯示特征的方法顯示出來,但同時仍然共享獨立于媒體(某些)的可視屬性。

要同時實現正確地屏幕顯示和打印顯示,我所需做的就是使用@media規則創建一個稍微復雜一點的樣式表: li.odd { background-color: #EAEAFF;}li.even { background-color: #FCFCFC;}@media screen { div.bottom { background-color: lightblue; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 20px; } div.top { background-color: white; }}@media print { div.bottom { position: absolute; top: 0px; } div.top { position: relative; top: 20pt; }} 可以看到,奇偶行的顏色保持不變,但是topbottomdiv元素的特定位置針對媒體的不同做了調整。

產生如圖 4 的效果:

令人高興的是,屏幕仍然保持其正確的顯示狀態。

版權聲明:本文由 買覓雙 整理編輯。

原標題:樣式表的三種類型是什么,css樣式表的四種類型

轉載注明出處:http://www.dn9ww09s.icu/fault/11631.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 聯想筆記本麥克風沒聲音,聯想筆記本麥克風沒有聲音怎么辦

    聯想筆記本麥克風沒聲音,聯想筆記本麥克風沒有聲音怎么辦 相關圖片聯想筆記本的麥克風在哪一些用戶習慣于在有空的時候用筆記本電腦的麥克風和遠處的人交談。然而,根據對方的反應,對方看到他們只是張嘴不說話,聽不到自己的聲音。怎么了?這...

  • nth_child,3child

    nth_child,3child 相關圖片groundchild當我想完美地使用:n個孩子或:n個類型時,我感到有點頭暈。你越了解它們,你的CSS規則就越好!在這些簡單的食譜(實際上是表達式)中,我將重復使用一個簡單的列表并...

  • 電腦重啟藍屏,電腦開機藍屏怎么辦

    電腦重啟藍屏,電腦開機藍屏怎么辦 相關圖片電腦藍屏重啟循環有多少用戶在使用電腦前沒有見過電腦的藍屏?是的,吃甜瓜的人都說了。偶爾用一兩次藍屏也沒關系。重新啟動電腦。但如果藍屏頻繁出現,同時也帶來了自動啟動...

  • css框架,css框架有哪些

    css框架,css框架有哪些 相關圖片中文css框架CSS中的框架模型主要包括外邊距、邊框、內邊距和內容,它們共同構成外邊距:邊框:邊框主要包括寬度樣式顏色:1px;實心;紅色;內邊距:填充內容:特定于內容的圖片...

  • 電腦如何設置密碼鎖屏,電腦設置鎖屏密碼

    電腦如何設置密碼鎖屏,電腦設置鎖屏密碼 相關圖片忘記電腦開機密碼事實上,我們都是獨立的個體。我們都有自己的主權意識。我們不喜歡別人。當我們不知道的時候,其他人就在我們自己的電腦上胡鬧。這樣,受傷的人往往是我們自...

  • 電腦局域網共享設置,電腦局域網共享

    電腦局域網共享設置,電腦局域網共享 相關圖片多臺電腦局域網設置兩天前,我遇到一個朋友,他說他剛買了一臺新電腦,加上他家原來的兩臺電腦,只有三臺。現在我希望三臺電腦能像這樣設置一個共享人員,也就是說,我不知道...

  • displaytable,displaytable好用嗎

    displaytable,displaytable好用嗎 相關圖片用tableIE7和IE6無法識別display:table單元格;(但它們支持CSS1的屬性,如display:block!)IE8和更高版本可以識別它!IE7和IE6可display:inline...

  • 遠程桌面連接app,遠程桌面軟件

    遠程桌面連接app,遠程桌面軟件 相關圖片內網遠程桌面軟件現在有很多遠程軟件,如向日葵遠程控制主控終端、網絡人遠程控制、團隊查看器遠程控制軟件等,但很多用戶習慣用電腦自己的程序進行遠程,不知道如何使用這些...

  • 顏色漸變,ai顏色漸變

    顏色漸變,ai顏色漸變 相關圖片ps顏色漸變要測試網頁,代碼如下:htmlheadtitleruntitled document/titlemetahttp equiv=content typeconteai漸變怎么吸顏色...

  • 筆記本打字母怎么成數字了,筆記本鍵盤打字母出數字

    筆記本打字母怎么成數字了,筆記本鍵盤打字母出數字 相關圖片聯想筆記本字母鍵盤打出數字市場上的電子產品越來越多。最著名的代表是手機、筆記本電腦和平板電腦。雖然這些高科技產品的用戶很多,但仍有一些用戶會遇到問題。如果沒有用戶...

熱評文章

  • 筆記本電腦關不了機怎么解決,筆記本電腦關不了機怎么辦

    筆記本電腦關不了機怎么解決,筆記本電腦關不了機怎么辦 相關圖片筆記本電腦來不了機什么原因如果我不能打開筆記本電腦該怎么辦?事實上,筆記本電腦存在很多問題,而無法開機是筆記本電腦維護中最大的維護問題。怎么了?通常,這種情況是由...

  • 內排期,什么是排期

    內排期,什么是排期 相關圖片f2b排期當被密集的需求轟炸時(需求本身有一定的合理性,不包括那些應該被拒絕和拒絕的需求),并且有很多事情需要他們自發地去做,交互設計師如何做出合理的設計優先級判斷,...

  • 筆記本電腦風扇不轉,筆記本電腦風扇不轉怎么辦

    筆記本電腦風扇不轉,筆記本電腦風扇不轉怎么辦 相關圖片筆記本電腦散熱風扇不轉近年來,由于我國經濟社會的快速發展,高新技術產品日新月異。筆記本電腦越來越普及,當然,在使用筆記本電腦的過程中,失敗是不可避免的,無論是軟件...

  • 藍屏代碼0x000001a,藍屏代碼0x000000ED

    藍屏代碼0x000001a,藍屏代碼0x000000ED 相關圖片藍屏代碼0x000006b如果我們太任性地操作計算機,我們會遇到一些計算機故障。不,小編任性的朋友朱曉明因為任性遇到了電腦藍屏故障,電腦藍屏代碼是0x000000F4。我們怎樣才能解決這藍...

  • css和 javascript,javascript和css區別

    css和 javascript,javascript和css區別 相關圖片css請參閱以下JavaScript腳本:if(窗口)。XMLHttpRequest){//Mozilla,Safari,。。。Ie7alert('mozilla,Shtml css js 教程...

  • 筆記本電腦顯卡可以換嗎?,筆記本電腦獨立顯卡可以換嗎

    筆記本電腦顯卡可以換嗎?,筆記本電腦獨立顯卡可以換嗎 相關圖片筆記本顯卡可以更換嗎筆記本不僅使用方便,而且攜帶方便,所以人們喜歡它。尤其是那些出去工作的同志,有人問買了筆記本后能不能換筆記本顯卡?可能是因為電腦游戲質量不好,...

  • 網頁優化包括什么,網站怎么優化

    網頁優化包括什么,網站怎么優化 相關圖片如何提高性功前文綜述:提高網頁可用性的優化提示有125條(一),提高網頁可用性的優化提示有125條(二),提高網頁可用性的優化提示有125條(三),可以盡量考慮不同用戶的知優...

  • 蘋果筆記本pro系統更新,蘋果筆記本系統

    蘋果筆記本pro系統更新,蘋果筆記本系統 相關圖片蘋果筆記本air系統現在越來越多的用戶使用筆記本電腦。如果我們想在其他品牌的筆記本電腦上安裝蘋果系統,這將需要大量的工作。在線教程很少,所以很多用戶不知道如何安裝蘋果...

  • 電腦局域網,局域網控制其他電腦

    電腦局域網,局域網控制其他電腦 相關圖片兩個電腦怎么建立局域網計算機已經滲透到企業的方方面面。對于來這里的企業,通過建立局域網,可以實現統一管理,滿足企業內部的溝通和互動,利用局域網實現互聯網的共享,或...

  • 保持居中行駛的技巧,居中行駛

    保持居中行駛的技巧,居中行駛 相關圖片車道居中保持CSS的中心代碼如下:Margin:0px Auto;width:xxxpx;//position:absolute的中心代碼;必須如下:position:ab全站儀氣泡居中技巧...

關注微信

变脸官网查询