CSS中10件你需要知道的事

2020-03-24 19:05:40

字體：大中小

來源：轉載

供稿：網友

1. CSS的要點是在你的頁面中使用簡潔的HTML代碼,然后編寫CSS"控制規則"來樣式化頁面中的對象.頁面保持清晰有條不紊看上去非常棒.這樣你的Html頁面可以在移動設備和標準瀏覽器中運行.這就是CSS的要點.不過CSS的藝術在于能夠利用CSS控制規則快速有效地操縱頁面對象.把CSS規則與HTML標記匹配起來的操做就好像是一種對話:兩者需要條理清楚且保持同步,否則的話他們將答非所問,搞得你頭大.2. 常規操作還是靈活匹配:假設你要樣式化頁面中一個 h1 header,可選擇操作有: *用CSS規則h1{...定義所有的 h1 標記
*在對象實際位置進行樣式定義,舉個例子: b 位于標記 p 的內部,在定義的時候你應該這樣p b{...
*針對某個特定的類型進行定義,為你想定義的標記 h1 添加 ,然后使用CSS規則 .myheader{...
*僅僅定義個別 h1 header,你可以為標記 h1 添加id="myheader",然后使用CSS規則#myheader{...
當然你也可通過不同的方式混合使用上面的規則:
要定義所有位于類型為"magicform"的表單中的類型為"barleymash"的 h1 標記,你可以這樣form.magicform h1.barleymash {...3. 獲取目標:匹配規則出錯會浪費很多的時間,這里有個小竅門:在打算實施你的規則之前,不妨先使用color:red;這個屬性,它既書寫簡便又利于觀察. 一旦你看到html' target='_blank'>HTML頁面中的文本變為紅色,說明規則匹配正確.這時你會知道你的規則可以在文檔中正確的部分生效,然后,刪除color:red;替換成原來你想實施的規則語句.4. 掌握專利技術JM3 Gasbag Model:一個CSS布局設計就好比一個裝滿對象的大袋子.每一個對象均能夠對外施加壓力(聯想一下煤氣泄露,如同你的布局設計)大多數情況下,壓力表現出來(margins, padding,以及float都是跟"推"密切相關的屬性)通過修改CSS規則,你判斷壓力,在瀏覽器中觀察你的頁面好比是搖晃一下袋子,會顯現出壓力集中在什么區域產生影響,這就是CSS-管理壓力對象保持平衡的秘密.對付壓力,一次性應用過多的屬性,沖突就會導致你的對象到處擁擠,對象相互之間以及袋子會被扎出許多洞來.頁面漏洞百出,實在是沒勁.
Gasbag 例子1:要產生居中的效果,設置margin-left:auto ,margin-right:auto;這樣做是有效的,因為你平衡了分布在左右兩側的壓力,于是元素就像放置在兩塊磁鐵中間的鐵球一樣被完美保持在了中間位置.5. GasbagCorollary 1:JM3 Gasbag Model 只適用于使用默認的CSS"telative"定位模式.當然也可能適用于"absolute"的定位模式(通過給定精確的坐標定位每個模塊的布局方式),但是千萬不要輕易這樣做,一旦文本或者圖象的數量有所變動它會花費你很長時間來重新布局并且使你的頁面看上去很糟糕.只有那些怪異的出版設計師愿意那樣做.6. 規則A-Divs和Spans:CSS中的混合語言是兩個名為 div 和 span 的標記,兩者均沒有默認的外觀,所謂的 div 以及 span 不過是一些容器和在文本中的線。他們只是普通的用以應用樣式的標記7. 規則B：Div是容器， span 是文本， div 是有高度，寬度，隊列可以與之打交道。還有：一個 div 的高度是指它其中內容的高度（文本、圖像或者其他 div ）. sapn 標記用于文本中的分割，正因他們只在成一條直線的文本中有意義，所以被稱為"inline"元素，其他的標記如：bold(b),italic(i),underline(u)等，他們被稱為是 span /元素。不要使用 div 來標記文本，也不要將 span 直接用于“袋子”，這樣你的布局工作才會變得容易8. 應用CSS的三個級別：應用于較多數量的頁面（通過使用擴展名為.css的文件）適用于單一頁面（通過定義一個樣式代碼塊），還有就是應用于頁面內部明確的標記（通過在標記內部添加style"..."屬性），當你完成一個頁面布局設計，把所有的CSS代碼轉換為一個獨立的css文件是一個不錯的主意-你可以到處使用它。當你測試代碼時，僅僅將此CSS文件內容復制到HTML頁面內部的樣式代碼塊中(這對你來說很容易做到)然后你就不必在兩個文件之間來回切換.當樣式代碼定下來的時候再修改原CSS文件(我認為這段話作者的意思是:不斷備份一個穩定的測試代碼).9. 保持代碼簡潔：書寫簡潔的HTML雖然很簡單，但即便是那些自認為很了解CSS的人也沒有把它寫的簡潔高效。高效的代碼不能使你的頁面載入更快，但是它能夠讓你的編碼工作更容易。 three tips：
*精簡你的規則語句：將(font-family, font-size) (margin-left, margin-right)轉換為單行規則margin：0px 10px 10px 10px；
*當你看到一個人的層疊樣式表有許多像下面這樣的行：
.redtext {font-family: Arial, Helvetica, sans-serif;color: red;}
.bluetext {font-family: Arial, Helvetica, sans-serif;color: blue;}
這就表示他們可能不知道這個技巧。
*使用“，”一次性將同一CSS樣式規則應用到多種類型的HTML標記中： p, b, i {… 使用一行代碼完成把樣式應用到段落、粗體、以及斜體文本的任務.10. 所謂技巧（hacks）其實是愚蠢的，你不需要他們：許多CSS指南的書都一再強調“要使你的頁面適應多瀏覽器環境，你應當學習很多“CSS技巧”。諸如此類都是廢話。它對你來說毫無用處。對每個人來說學習CSS開始都是一個痛苦的過程。不必擔心，愚蠢的不是你而是CSS。不要認為你需要記住所有的屬性，可以在旁邊打開網頁Got API’s handy cheat sheet參考的嘛! 本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html css js 實現Tab標簽頁示例代碼

下一篇：將XHTML CSS頁面轉換為打印機頁面