搜尋
首頁web前端css教學詳談 CSS樣式表使用:連結/嵌入_CSS/HTML

在阿捷的w3cn中,他說:

引用內容
以前,我們通常會採用2種方法使用樣式表:
頁內嵌法:就是將樣式表直接寫在頁碼的head區。類似這樣:

外部呼叫法:將樣式表寫在一個獨立的.css檔案中,然後在頁面head區用類似以下程式碼呼叫。

在符合web標準的設計中,我們使用外部呼叫法,好處不言而喻,你可以不修改頁面只修改.css檔案而改變頁面的樣式。如果所有頁面都呼叫同一個樣式表文件,那麼改一個樣式表文件,可以改變所有文件的樣式。

可見阿捷是十分推崇用的。補充阿捷的話,使用的好處不單單是修改起樣式表很方便,而且會讓用戶的瀏覽速度加快。使用者第一次開啟連結了樣式表的頁面後,樣式表會自動下載到本機快取當中。當使用者再開啟另一個頁面,而這個頁面如果也連結了同樣的樣式表的時候,會從快取中讀取相關的文件,這樣就會加快瀏覽的速度。

但是我也碰到過這種情況:有時碰到網路不順暢的情況,頁面打開以後,連結的樣式表沒有載入成功。這種情況造成的後果,不只是頁面文字的顏色、大小等等樣式無法顯示,更麻煩的是很可能造成整個頁面的版面亂了套!

例如有一次我打開Macromedia.com的時候,碰到公司網路不暢,也許是因為有很多人在bt吧。 。 。結果頁面顯示出來的樣子完全是沒有樣式表的樣子,熟悉的版面看不到了,所有內容從上往下排列,就像用手機在瀏覽網站。雖然內容還能全部看到,但我必須花點時間去熟悉這種新的佈局,瀏覽的時候也有一種不順暢的感覺。

在做金山在線首頁的時候(上一版,現在已經看不到了),我就把所有樣式嵌入到了頁面的

區。首頁是網站流覽量最大的頁面,必須確保高的可靠性。而且只對首頁樣式表採取嵌入的方式,其他頁面還是用,修改樣式時不會增加太多的工作量。

週末做amaoagou的首頁,我對樣式更進一步進行了規劃:把與佈局有關的樣式:#head、#left之類都嵌入到頁面內部,其他樣式採用鏈接的方式。

總結一下:

* 方法一:首頁完全採用嵌入的方法,其他頁面均採用連結的方式。優點:這樣可以確保首頁在網路狀況不好的情況下仍然能夠正確顯示。缺點:修改樣式時需要修改外部樣式表和首頁內嵌的樣式表兩個地方。
* 方法二:將負責版面的樣式和其他樣式分開寫。首頁嵌入版面的樣式,連結其他樣式;其他頁面則以兩套樣式以連結方式使用。優點:修改樣式時,比第一種工作量小。網路狀況不好時,首頁的外觀不能完全保證,但至少佈局不會亂。
* 如果製作的不是符合標準的頁面,例如公司產品的一個小專題,領導要求用table製作以確保專題上線速度。對於各個頁面都會用到的樣式:連結。只有這一個頁面會用到,但會用到很多次的樣式:嵌入

。對於只有這一個頁面會用到且只使用一次的樣式:嵌入或乾脆直接寫style="..."得了。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
揭開屏幕讀取器的神秘面紗:可訪問的表格和最佳實踐揭開屏幕讀取器的神秘面紗:可訪問的表格和最佳實踐Mar 08, 2025 am 09:45 AM

這是我們在形式可訪問性上進行的小型系列中的第三篇文章。如果您錯過了第二篇文章,請查看“以:focus-visible的管理用戶焦點”。在

將框陰影添加到WordPress塊和元素將框陰影添加到WordPress塊和元素Mar 09, 2025 pm 12:53 PM

CSS盒子陰影和輪廓屬性獲得了主題。讓我們查看一些在真實主題中起作用的示例,以及我們必須將這些樣式應用於WordPress塊和元素的選項。

使用智能表單框架創建JavaScript聯繫表格使用智能表單框架創建JavaScript聯繫表格Mar 07, 2025 am 11:33 AM

本教程演示了使用智能表單框架創建外觀專業的JavaScript表單(注意:不再可用)。 儘管框架本身不可用,但原理和技術仍然與其他形式的建築商相關。

創建一個具有可滿足屬性的內聯文本編輯器創建一個具有可滿足屬性的內聯文本編輯器Mar 02, 2025 am 09:03 AM

構建內聯文本編輯器並不是微不足道的。 該過程首先要使目標元素可編輯,並在此過程中處理潛在的語法異常。 創建編輯器來構建此編輯器,您需要動態修改內容

使您的第一個自定義苗條過渡使您的第一個自定義苗條過渡Mar 15, 2025 am 11:08 AM

Svelte Transition API提供了一種使組件輸入或離開文檔(包括自定義Svelte Transitions)時動畫組件的方法。

使用GraphQL緩存使用GraphQL緩存Mar 19, 2025 am 09:36 AM

如果您最近開始使用GraphQL或審查了其優點和缺點,那麼您毫無疑問聽到了諸如“ GraphQl不支持緩存”或

比較5個最佳的PHP形式構建器(和3個免費腳本)比較5個最佳的PHP形式構建器(和3個免費腳本)Mar 04, 2025 am 10:22 AM

本文探討了Envato Market上可用的PHP表單構建器腳本,比較了其功能,靈活性和設計。 在研究特定選項之前,讓我們了解PHP形式構建器是什麼以及為什麼要使用一個。 PHP形式

在node.js中使用multer上傳並上傳express在node.js中使用multer上傳並上傳expressMar 02, 2025 am 09:15 AM

該教程通過使用node.js,express和multer構建文件上傳系統來指導您。 我們將介紹單個和多個文件上傳,甚至演示在MongoDB數據庫中存儲圖像以進行以後的檢索。 首先,設置您的projec

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器