您現在的位置是:電腦技術吧?>? 基礎知識 ??>??引入樣式,dedecms樣式的引入??>??正文詳情

引入樣式,dedecms樣式的引入

刁高杰2019-11-11 12:00:29 人圍觀
簡介引入外部樣式文件一。使用鏈接標簽2。使用樣式元素3。使用@import指令4。使用樣式屬性的內聯樣式。這是一個紅色的詞。在實際應用中,不建議使用樣式屬性的內聯樣式。XHTML 引入css樣

1、使用link標記  2、使用style元素  3、使用@import指令  4、使用style屬性的內聯樣式(inline style)  這是紅色的字  在實際應用中,使用style屬性的內聯樣式是不推薦使用的,XHTML1.1已經將其標準為不建議使用,原因很簡單這種方式不比font標記強多少,削弱了CSS集中控制整個文檔外觀的優點。

  前3種方式利用了link標記和style標記,在IE(包括IE6、IE7和IE8 beta1)中有如下限制:  ◆ 文檔中只有前31個link或style標記關聯的CSS能夠應用。

  從第32個開始,其標記關聯的CSS都將失效。

IE的官方文檔All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer也提及這個限制,包括在使用.xsl的.xml文件也有這個限制。

但是似乎寫錯了數量。

請在IE看:  ◆ 一個style標記只有前31次@import指令有效應用。

  從第32個@import指令開始忽略。

  ◆ 一個css文件只有前31次@import指令有效應用。

  從第31個@import指令開始忽略。

  ◆ 一個CSS文件的不能超過288kb?  這個消息來自Internet Explorer CSS File Size Limit。

  IE對CSS的限制在絕大部分情況下是不會遇到的,即使遇到最佳的解決方案也應該是手動或者通過后端程序對CSS文件和響應的標記進行合并,最小化的http請求數是優化頁面呈現的第一原則。

  在IE中,可以通過document.styleSheets對象(Firefox、Opera9和Safari3.1都支持)修改內聯和嵌入樣式的值。

該對象僅在文檔包含style或link元素時可用,其實用document.styleSheets.length就可以看出IE下這個值最大是31。

下面是利用Javascript來合并link和style標記來解決IE下的限制:  var fnMergeStyleSheet = function(){  if(!document.styleSheets){  return;  }  var aSheet = document.styleSheets,  aStyle = document.getElementsByTagName('style'),  aLink = document.getElementsByTagName('link');  if(aStyle.length aLink.length 32 || !aSheet[0].cssText){  //document.styleSheets.cssText只有IE支持  return;  }  var aCssText = [],aCloneLink = [];  //把style標簽中的樣式存入,然后刪掉該標簽,但保留第一個  //因為由getElementsByTagName方法返回值是nodeList,所以刪除時循環用倒序  for(var i=aStyle.length-1;i-1;i){  var o = aStyle[i];  aCssText.push(o.innerHTML);  if(i0){  o.parentNode.removeChild(o);  }  }  //在IE中只有在31之內的link標簽才能通過其styleSheet.cssText獲取樣式  //無法的獲取復制到一個數組aCloneLink中  for(var i=aLink.length-1;i-1;i){  var o = aLink[i];  if(o.getAttribute o.getAttribute(rel)===stylesheet){  if(o.styleSheet){  aCssText.push(o.styleSheet.cssText);  }else{  aCloneLink.push(o.cloneNode(true));  }  if(i0){  o.parentNode.removeChild(o);  }  }  }  var oHead = document.getElementsByTagName(head)[0];  //通過前面的刪除,前31個link或者style標記最多只剩下2個  //通過重新增加link節點的方法激活其styleSheet屬性,從而獲取樣式  for(var i = aCloneLink.length-1;i-1;i){  var o = aCloneLink[i];  oHead.appendChild(o);  aCssText.push(o.styleSheet.cssText);  oHead.removeChild(o);  }  //把所有的樣式都復制給第一個標簽  aSheet[0].cssText = aCssText.join();  }  上面僅僅是一個簡單的粗糙的解決方案,可以改進的地方還有:  1、沒有考慮media這個屬性,如果有多個media應該分別合并,當然更沒有考慮link標記的rel=alternate stylesheet帶來的影響。

但我更建議通過@media指令把相應的樣式寫在同一個文件中,至少可以減少HTTP連接數。

  2、沒有解決@import指令31次限制的問題,其實可以提取其href值然后進行激活處理。

但是實際應用在建議用link標記來替代@import指令,應為在IE中@import指令相當與把link標記寫在文檔的底部。

  3、一般來講頁面之所有出現大量的link或者style標簽很可能有很多是相同的,可以在aCssText合并前除掉相同的項,減少代碼量。

版權聲明:本文由 刁高杰 整理編輯。

原標題:引入外部樣式,樣式有幾種引入方式

轉載注明出處:http://www.dn9ww09s.icu/basics/11689.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • pagefilesys可以刪除嗎,pagefilesys怎么刪除

    pagefilesys可以刪除嗎,pagefilesys怎么刪除 相關圖片pagefilesys文件8個g我們都知道,磁盤C作為系統磁盤,對計算機的速度有影響,甚至決定計算機的速度。為了使計算機系統運行得更快,有些用戶會去C盤查看可以刪除的文件,無意中發現...

  • 筆記本電腦無線網卡怎么打開,筆記本無線網卡在哪

    筆記本電腦無線網卡怎么打開,筆記本無線網卡在哪 相關圖片筆記本電腦怎么打開無線網絡目前,無線網卡是終端無線網絡的設備。簡而言之,無線網卡是一種可以使筆記本電腦利用無線網絡的設備,但是一些筆記本用戶仍然不知道如何打開筆記...

  • 標簽的屬性有哪些,標簽的屬性

    標簽的屬性有哪些,標簽的屬性 相關圖片a標簽href屬性HTML5通過制定關于如何處理所有HTML元素和如何從錯誤中恢復的精確規則,提高了互操作性并降低了開發成本。HTML5中的新功能包括嵌入音頻、視頻和圖形、客戶端a標簽常用屬...

  • 華碩筆記本bios,華碩bios

    華碩筆記本bios,華碩bios 相關圖片華碩主板bios進入華碩筆記本BIOS設置的華碩筆記本用戶知道,華碩EFI圖形BIOS提供了包括簡體中文和多國語言在內的支持,這對進入BIOS操作的用戶非常有幫助。接下來,編輯華碩筆記本...

  • 怎樣讓瀏覽器不卡,讓瀏覽器

    怎樣讓瀏覽器不卡,讓瀏覽器 相關圖片怎么讓瀏覽器不記住密碼如今,HTML5的發展越來越快,但目前支持HTML5的瀏覽器還不是主流,而支持HTML5的IE9也不支持安裝XP系統,因此在未來很長一段時間內,HTML5的開發怎么讓瀏覽器之...

  • 顯示器一閃一閃的黑屏,顯示器一閃一閃的黑屏怎么回事

    顯示器一閃一閃的黑屏,顯示器一閃一閃的黑屏怎么回事 相關圖片顯示器指示燈一閃一閃黑屏顯示器是計算機的重要組成部分之一,但顯示器存在許多常見故障。有些故障涉及顯示器的內部電路和部件,但有些故障是由系統軟件引起的。電腦顯示屏的...

  • 屬性事件方法,標準屬性和事件屬性

    屬性事件方法,標準屬性和事件屬性 相關圖片事件綁定使用屬性office事件屬性HTML 4增加了通過事件觸發瀏覽器中行為的能力,例如當用戶單擊某個元素時啟動JavaScript段。如果您需要了解有關使用這些事件編程的更網卡屬性里的事件...

  • 筆記本攝像頭怎么打開,筆記本攝像頭在哪打開

    筆記本攝像頭怎么打開,筆記本攝像頭在哪打開 相關圖片win10筆記本攝像頭怎么打開與臺式計算機不同,筆記本相機是內置的,不需要連接到其他相機設備。不過,這項功能一般都是原地踏步的,很多用戶不使用它,而逐漸忘記它。如果你想打...

  • 電腦經常黑屏幾秒恢復,電腦黑屏一兩秒后恢復

    電腦經常黑屏幾秒恢復,電腦黑屏一兩秒后恢復 相關圖片微信黑屏怎么恢復正常很多朋友都想學習電腦黑屏系統的方法,畢竟電腦黑屏的案例很多,那么如何操作電腦黑屏呢?下面小編就為大家帶來電腦黑屏圖文教程,希望大家看完后會喜歡...

  • 不規則形狀,不規則

    不規則形狀,不規則 相關圖片不規則形狀怎么算面積前段時間,當我在做一個小項目時,我遇到了一種導航方法。這時我突然想到了很久以前看到的梯子形狀的不規則航行,于是就試著去做。結果,我遇到了幾個問...

熱評文章

  • 什么軟件可以檢測筆記本電池,有沒有檢測筆記本電池的軟件

    什么軟件可以檢測筆記本電池,有沒有檢測筆記本電池的軟件 相關圖片查看筆記本電池狀態近年來,筆記本電腦已成為我們工作和生活中不可缺少的伙伴。當筆記本電池長期使用時,會產生損耗,所以一些用戶也會想知道自己筆記本電池的健康狀況,如何...

  • 各種類型的女生簡介,橋的類型的簡介

    各種類型的女生簡介,橋的類型的簡介 相關圖片街舞的各種類型簡介HTML5的新輸入類型HTML5有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。本章全面介紹了這些新的輸入類型:email urlnumber r翡翠各種類型及簡介...

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

    筆記本電腦關機關不了,筆記本怎么關機 相關圖片筆記本電腦卡住了怎么關機一般來說,在使用筆記本電腦后,我們會習慣性地點擊“開始”菜單中的“關機”按鈕來關機。但這是一個如此簡單的操作,以至于一個小伙伴無法關閉計算...

  • jsp文件怎么打開方式,jsp文件怎么打開成網頁

    jsp文件怎么打開方式,jsp文件怎么打開成網頁 相關圖片jsp后綴文件怎么打開有些用戶在操作的過程中總會遇到一些罕見的格式文件。這不是用戶下載他們從未在互聯網上見過的JSP文件的情況。用記事本和文字打開它們是很混亂的。如何操作...

  • 網頁的布局,網頁布局方式

    網頁的布局,網頁布局方式 相關圖片網頁布局是什么CSS的布局非常重要。CSS設計的初衷不同于幾年前的表格設計。在結構化語義HTML文檔之后,CSS對文檔的呈現效果進行格式化,并使用表達式語言對結構化文檔進行描網頁頁...

  • office激活密鑰2007,office激活密鑰2010

    office激活密鑰2007,office激活密鑰2010 相關圖片有沒有office2007的密鑰Office2007是一個非常好的經典版本。即使現在它已經發布到office 2016,這和系統發布到win10是一樣的,但是很多用戶仍然在使用XP系統,但是如如何激活office2007...

  • 精雕細琢的什么,什么東西需要精雕細琢

    精雕細琢的什么,什么東西需要精雕細琢 相關圖片大刀闊斧與精雕細琢極簡主義,現代主義,扁平化,網格系統,這些流行的設計趨勢和技術,你想出現在你自己的設計公司的網站上?除了漂亮和風格化,他們使網站有更好的可用性,...

  • dell筆記本重裝系統,戴爾筆記本如何重裝系統

    dell筆記本重裝系統,戴爾筆記本如何重裝系統 相關圖片戴爾筆記本裝系統現在,誰家里沒有筆記本不過,在筆記本電腦方面,戴爾筆記本是一個不錯的品牌,所以用戶很多,但其中包含了很多水產品,也就是新手,只能簡單操作。對他們來...

  • 各種usb接口介紹,什么是接口

    各種usb接口介紹,什么是接口 相關圖片toslink接口是什么盡管目前主流瀏覽器已經實現了HTML5的許多新功能,但許多開發人員根本沒有注意到這些更簡潔、更有用的API。本系列文章將介紹這些API接口,并希望鼓勵更多的開發u...

  • 怎么使用聯想電腦一鍵恢復,聯想電腦可以一鍵恢復嗎

    怎么使用聯想電腦一鍵恢復,聯想電腦可以一鍵恢復嗎 相關圖片聯想一鍵恢復計算機操作不當或系統內垃圾堆積過多,會導致系統運行緩慢,如何解決這個問題?聯想用戶對聯想電腦一鍵恢復功能了如指掌。事實上,它可以改善這些問題。為此,小...

關注微信

变脸官网查询