Ⅰ css中的正則表達式
CSS中沒有正則表達式。你那樣的是CSS 2.0+
div[class^=ad(1|2|3|4)]
上面那樣的寫法是不合法的
只有寫成div[class^="ad1"],div[class^="ad2"],div[class^="ad3"],div[class^="ad4"]
Ⅱ css表達式會造成頁面重新渲染嗎
css表達式不會造成頁面重新渲染。
HTML的渲染原理:
Web頁面運行在各種各樣的瀏覽器當中,瀏覽器載入、渲染頁面的速度直接影響著用戶體驗簡單地說,頁面渲染就是瀏覽器將html代碼根據CSS定義的規則顯示在瀏覽器窗口中的這個過程。先來大致了解一下瀏覽器都是怎麼幹活的:
1.
用戶輸入網址(假設是個html頁面,並且是第一次訪問),瀏覽器向伺服器發出請求,伺服器返回html文件;
2.
瀏覽器開始載入html代碼,發現<head>標簽內有一個<link>標簽引用外部CSS文件;
3.
瀏覽器又發出CSS文件的請求,伺服器返回這個CSS文件;
4.
瀏覽器繼續載入html中<body>部分的代碼,並且CSS文件已經拿到手了,可以開始渲染頁面了;
5.
瀏覽器在代碼中發現一個<img>標簽引用了一張圖片,向伺服器發出請求。此時瀏覽器不會等到圖片下載完,而是繼續渲染後面的代碼;
6.
伺服器返回圖片文件,由於圖片佔用了一定面積,影響了後面段落的排布,因此瀏覽器需要回過頭來重新渲染這部分代碼;
7.
瀏覽器發現了一個包含一行Javascript代碼的<script>標簽,趕快運行它;
8.
Javascript腳本執行了這條語句,它命令瀏覽器隱藏掉代碼中的某個<div>
(style.display=」none」)。杯具啊,突然就少了這么一個元素,瀏覽器不得不重新渲染這部分代碼;
css的渲染原理;
1、瀏覽器下載的順序是從上到下,渲染的順序也是從上到下,下載和渲染是同時進行的。
2、在渲染到頁面的某一部分時,其上面的所有部分都已經下載完成(並不是說所有相關聯的元素都已經下載完)。
3、如果遇到語義解釋性的標簽嵌入文件(JS腳本,CSS樣式),那麼此時IE的下載過程會啟用單獨連接進行下載。
4、並且在下載後進行解析,解析過程中,停止頁面所有往下元素的下載。
5、樣式表在下載完成後,將和以前下載的所有樣式表一起進行解析,解析完成後,將對此前所有元素(含以前已經渲染的)重新進行渲染。
6、JS、CSS中如有重定義,後定義函數將覆蓋前定義函數。
Ⅲ css expression求解
expression 可以將CSS和javascript表達式關聯起來,這里的CSS屬性可以是本身固有的,比如說你可以用body{width:expression(screen.availWidth+"px";}來設置頁面寬度為屏幕可用寬度;也可以是自定義的屬性,比如body{any:expression(onload=function(){xxx;xxx;xxx;},onunload=function(){xxx;xxx;xxx;xxx;);}為你定義了一種新的CSS屬性any,該屬性為BODY的onload和onunload定義了兩個執行函數。
expression是css中的一個行為,IE5及其以後版本支持在CSS中使用expression,用來把CSS屬性和Javascript表達式關聯起來,這里的CSS屬性可以是元素固有的屬性,也可以是自定義屬性。就是說CSS屬性後面可以是一段Javascript表達式,CSS屬性的值等於Javascript表達式計算的結果。 在表達式中可以直接引用元素自身的屬性和方法,也可以使用其他瀏覽器對象。這個表達式就好像是在這個元素的一個成員函數中一樣。
CSS Expression也稱為CSS表達式,它是動態設置CSS屬性的強大方法,但也存在著一定的危險性。
在CSS Expression中使用JavaScript表達式。CSS屬性根據JavaScript表達式的計算結果來設置。
CSS Expression在其它瀏覽器中不起作用,因此在跨瀏覽器的編碼中單獨針對IE設置時會比較有用。
從IE5開始支持CSS Expression。我們看下面的代碼:
background-color: expression((new Date()).getHours()%2 ? "#F00" : "#00F" );
上面的代碼是使用CSS Expression,實現隔一個小時切換一次背景顏色。
CSS Expression的問題就在於它的計算頻率要比想像的多出很多。不僅僅是在頁面顯示和縮放時,就是在頁面滾動、乃至移動滑鼠時都會要重新計算一次。給CSS Expression增加一個計數器可以跟蹤表達式的計算頻率。在頁面中隨便移動滑鼠都可以輕松達到10000次以上的計算量。
一個減少CSS Expression計算次數的方法就是使用一次性的表達式,它在第一次運行時將結果賦給指定的樣式屬性,並用這個屬性來代替CSS Expression。
如果樣式屬性必須在頁面周期內動態地改變,使用事件句柄來代替CSS表達式是一個可行辦法。如果必須使用CSS Expression,一定要記住它們要計算成千上萬次並且可能會對你頁面的性能產生影響。不要讓您的用戶感覺打開你的頁面,機器會變的很慢。
Ⅳ CSS中expression怎麼用
IE5及其以後版本支持在CSS中使用expression,用來把CSS屬性和Javascript腳本關聯起來,這里的CSS屬性可以是元素固有的屬性,也可以是自定義屬性。就是說CSS屬性後面可以是一段Javascript表達式,CSS屬性的值等於Javascript表達式計算的結果。 在表達式中可以直接引用元素自身的屬性和方法,也可以使用其他瀏覽器對象。這個表達式就好像是在這個元素的一個成員函數中一樣。 是不是感覺上面的文字有點晦澀?沒有關系,你只需要知道:我們可以通過expression把Javascript腳本寫放在css文件中,通過它來實現一些很方便的功能與效果。
<style type="text/css">
#myDiv {
position: absolute;
width: 100px;
height: 100px;
background:#c00;
left: expression(document.body.offsetWidth - 180 "px");
top: expression(document.body.offsetHeight - -80 "px");
text-align:center;
line-height:90px;
color:#fff;
}
</style>
Ⅳ css3中,顏色的16進制的正則表達式該怎麼寫
/^#[\da-f]{3}([\da-f]{3})?$/i
可以匹配3位或6位的十六進制顏色值,並且不區分大小寫
例如:#ccc,#000000,#FEFEFE等
Ⅵ CSS 中的 expression 表達式寫法
恩,你要的50%如果是當前屏幕寬度的50%,可以先獲取當前屏幕寬度再除以2,這樣得到數值。
或者根據固定的屏幕寬度計算出50%的數字,用它來代替(document.documentElement.scrollLeft+50%)
Ⅶ 我想同時匹配以.css結尾,但是不以.min.css結尾的文件,正則表達式怎麼寫
寫兩個正則好容易些,如:
varreg1=/w*.css$/;
varreg2=/w*.min.css$/;
vart='aa.min.css';
if(reg1.test(t)&&!reg2.test(t)){
alert(t);
}
Ⅷ 為什麼盡量避免使用 CSS 表達式
CSS 表達式可能會影響到網站的性能;
在更多的留意了關於 CSS 表達式方面的知識,而這篇文章,是我在看 《高性能網站建設指南》後,以及之前做的一些學習,我想總結下 「為什麼盡量避免使用 CSS 表達式」;
什麼是 CSS Expression?
CSS Expression (CSS 表達式),是一種使用動態設置 CSS 屬性的方式,並且被 IE5 以上的版本所支持,但是 IE8 的標准模式已不再支持 CSS 表達式了[1];
一個簡單的 CSS 表達式
body {
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
}
這段代碼的作用是能讓你頁面中 body 的背景色每隔一小時變換一次;
CSS Expression 帶來的性能問題
是的,參考 MSDN 「關於動態屬性」 的文檔,你會發現,其實 CSS 表達式還是非常強大的,比如你可以使用 CSS 表達式實現 min-width 屬性,隔行換色,模擬 :hover, :before, :after 等偽類;
但是,正式因為 CSS 表達式太強大了,以至於 CSS 表達式帶來的嚴重的性能問題:「為了確保有效性,CSS 表達式會進行頻繁的求值」,到底有多頻繁?就是在你改變窗口大小,滾動頁面甚至移動滑鼠都會觸發表達式進行求值,如此頻繁的求值以至於瀏覽器的性能收到嚴重的影響;
關於對 CSS Expression 的性能測試
這個測試的方法是來自於最近一段時間在看的《高性能網站建設指南》中的規則7;
P {
width: expression( setCntr(), document.body.clientWidth<600 ? "600px" : "auto" );
min-width: 600px;
border: 1px solid;
}
這個方法通過綁定一個 setCntr() 函數到 CSS 表達式上,統計頁面執行了多少次的 CSS 表達式,並顯示在一個文本框裡面;你也可以通過 IE5 ~ IE6 訪問http://stevesouders.com/hpws/expression-counter.php 進行測試;
測試結果
頁面內有 10 個段落,載入完頁面大概執行了 40 次的 CSS 表達式,然後在你改變頁面大小,滾動頁面,甚至移動滑鼠,在我的測試里不動滑鼠仍然會執行 CSS 表達式,幾萬次的求值根本不在話下,而且在點擊文本框之後,IE 就已經卡死了;
避免使用 CSS Expression
好吧,這是一個總結;雖然還有對 CSS 表達式進行優化的方法(你可以在參考鏈接中找到),但是這不是這篇文章要總結的,這篇文章要總結的是為什麼盡量避免使用 CSS 表達式;
CSS 表達式雖然強大,但是會給瀏覽器帶來很嚴重的性能問題,並拖慢網頁的載入速度;在可能的前提下,盡量避免使用 CSS 表達式!
Ⅸ CSS背景圖片的正則表達式怎麼寫
比如url(images/nan_bg_o.jpg)這是背景圖的css寫法,它的正則表達式如下
VBScript codes=".x{background:url(images/nan_bg_o.jpg);}.xx{}.xxx{background: URL(images/nan_bg_oxx.jpg) ;}"
set rx=new RegExp
rx.IgnoreCase=true
rx.Global=true
rx.Pattern="url\s*\(([^\)]+)\)"
set mc=rx.Execute(s)
for each m in mc
response.Write "<pre>"&m.submatches(0)&"</pre>"
next
set rx=nothing