搜尋
首頁web前端css教學css全域樣式有什麼意義

css全域樣式有什麼意義

May 28, 2019 am 09:37 AM
css

css全域樣式有什麼意義?

css全局樣式的意義就是為了規範開發,提高工作效率,便於後台人員添加功能及前端後期優化維護,輸出高品質的文檔,在網站建設中,使結構更加清晰,程式碼簡潔有序,有更好的前端架構。

同時使用全域樣式更符合web標準,頁面效能優化,程式碼簡潔、明了、有序,盡可能的減少伺服器的負載,保證最快的解析速度。

css全域樣式有什麼意義

拓展:最好的CSS全域字體寫法

body {font-family: Arial, sans-serif;}這是迄今為止發現的最好CSS全域字體寫法解決方案。下面簡單與其他寫法比較一下。

body {font-family: Tahoma, sans-serif; }這是一個不錯的解決方案。 Tahoma其實是個蠻漂亮的字體。但它其實會帶來一些問題:

1. 由Tahoma顯示的中文,在IE 6裡,下劃線會緊緊的貼住中文字,很難看。

2. IE 6下,Tahoma無法正確的設定為13px。它會跟14px一樣大。但是其他瀏覽器就沒有這個問題。

3. 如果一行同時出現中文和英文,而這一行裡有元素被定義了vertical-align屬性,在IE 6、7裡會導致文字高低不齊,甚至下劃線錯位。

body {font-family: "宋體", sans-serif; }這個寫法可能的缺點在於:

1. 宋體在Safari和Vista的IE 7下,看起來很難看。

2. 宋體的英文字很難看。

3. 如果在CSS裡寫中文,你得小心你HTML和CSS的編碼是否一致。

body {font-family: Arial, ans-serif; }上述兩個問題,Arial都沒有。但是Arial也有缺點:

1. 比Tahoma難看。

2. Tahoma裡的第三個問題也同樣存在。

不過,這個bug是有個解決方法的,就是要將這一行定義zoom:1。

body {font-family: SimSun,sans-serif; }這樣寫,可以避免上面的第三個問題。但是宋體本身確實很難看。我們希望在不同平台下,都用各自預設的字體。 XP是宋體,Vista是微軟雅 黑,Mac是黑體。這樣的話,只能將字體的第一個設定為英文字體,這樣遇到中文的時候,瀏覽器會自動呼叫預設字體。

如果不嫌難看,定義為Arial是最適合的。如果實在不喜歡,可以將全域定義為Tahoma,然後再將有底線的(如連結)文字定義為Arial,至少可以緩解一下。

對於全域字體需要注意的是:IE裡,所有的表單元素都不繼承body的字體屬性,需要單獨設定:

input, label, select, option, textarea, button , fieldset, legend { font-family:Tahoma,sans-serif;}

以上是css全域樣式有什麼意義的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
@rules具有多少特異性,例如@keyframes和@media?@rules具有多少特異性,例如@keyframes和@media?Apr 18, 2025 am 11:34 AM

前幾天我得到了這個問題。我的第一個想法是:奇怪的問題!特異性是關於選擇者的,而在符號不是選擇器,那麼...無關緊要?

您可以嵌套@Media和@support查詢嗎?您可以嵌套@Media和@support查詢嗎?Apr 18, 2025 am 11:32 AM

是的,您可以,而且它並不重要。不需要CSS預處理器。它在常規CSS中起作用。

快速吞噬緩存破壞快速吞噬緩存破壞Apr 18, 2025 am 11:23 AM

您應該肯定會在CSS和JavaScript(以及圖像和字體以及其他內容)等資產上設置遙遠的高速緩存標頭。告訴瀏覽器

尋找可以監視CSS質量和復雜性的堆棧尋找可以監視CSS質量和復雜性的堆棧Apr 18, 2025 am 11:22 AM

許多開發人員寫瞭如何維護CSS代碼庫的文章,但並沒有很多關於如何測量該代碼庫質量的文章。當然,我們有

數據學家用於建議不執行值的值數據學家用於建議不執行值的值Apr 18, 2025 am 11:08 AM

您是否曾經有一種需要接受簡短而任意的文本的表格?喜歡名字或其他。那完全是用的。有很多

蘇黎世的最初會議蘇黎世的最初會議Apr 18, 2025 am 11:03 AM

我很高興能前往瑞士蘇黎世參加前界(Love the Name and URL!)。我以前從未去過瑞士,所以我很興奮

使用CloudFlare工人建立全棧無服務器應用程序使用CloudFlare工人建立全棧無服務器應用程序Apr 18, 2025 am 10:58 AM

我在軟件開發方面最喜歡的發展之一是無服務器的出現。作為一個傾向於陷入細節的開發人員

在NUXT應用程序中創建動態路由在NUXT應用程序中創建動態路由Apr 18, 2025 am 10:53 AM

在這篇文章中,我們將使用我構建和部署的電子商務商店演示來進行Netlify,以展示如何為傳入數據製作動態路線。這是一個公平的

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 無盡。

熱工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

記事本++7.3.1

記事本++7.3.1

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

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具