首頁 > web前端 > css教學 > css樣式表常駐留在文件的哪個區域中

css樣式表常駐留在文件的哪個區域中

青灯夜游
發布: 2023-01-04 09:34:39
原創
3522 人瀏覽過

css樣式表常駐留在文件的「head」區域。因為如果將CSS放在底部,頁面可以逐步呈現,但在CSS下載並解析完畢後,已經呈現的文字和圖片就要需要根據新的樣式重繪,這是一種不好的用戶體驗。

css樣式表常駐留在文件的哪個區域中

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

css樣式表常駐留在HTML文件頂部的head中。

why?

<link rel="stylesheet" href="home.css">
登入後複製

link標籤裡面的href(HyperText reference)屬性表示超文本引用,當CSS使用href引用,瀏覽器會識別該文件為CSS,並行下載,不會停止對當前文檔的加載,在加載html生成DOM tree的時候,就可以同時對DOM tree進行渲染,這樣可以防止閃跳,白屏或者佈局混亂。

最理想的情況,我們希望瀏覽器逐漸的渲染下載好的CSS,將頁面逐漸的展現給使用者。但瀏覽器為了避免樣式變更時重新渲染繪製頁面元素,會阻塞內容逐步呈現,瀏覽器等待所有樣式載入完成後才一次渲染呈現頁面。

CSS檔案如果放置底部,瀏覽器阻止內容逐步呈現,瀏覽器在等待最後一個css檔案下載完成的過程中,就出現了「白屏」(新開啟連線時為白屏,爾後先出現文字,圖片,樣式最後出現)。這點非常嚴重,因為在網路速度非常慢的情況下,css下載時間比較長,這樣就帶給使用者「白螢幕」的時間自然也就很長了,使用者體驗非常差。

將CSS放在底部,頁面可以逐步呈現,但在CSS下載並解析完畢後,已經呈現的文字和圖片就要需要根據新的樣式重繪,這是一種不好的用戶體驗。

(學習影片分享:css影片教學

以上是css樣式表常駐留在文件的哪個區域中的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板