CSS

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta charset="utf-8" />     <title>純CSS和Javascript實現的遮罩層</title>     <style>         #cover         {

我們這裡詳細講解一下CSS盒子模型，什麼是盒子模型以及如何使用。 CSS 盒模型 網頁設計中的每個元素都是長方形的盒子。盒子的尺寸是怎樣精確計算的，請看：如果是 Firebug 使用者的話(基本和前端有關的都會用到 Firebug 吧 &ndash; 糖伴西紅柿)，就會很熟悉下面的圖表了。這個圖表很好地展示了作用於頁面上任意盒子的數值。注意以上兩個例子中，margin 都是白色的。Margin 比較特別，它不會影響盒子本身的大小，但是它會影響和盒子有關的其他內容，因此

上代碼：<!DOCTYPE HTML><html ><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><style type="text/css">.mod-test1{font:20px/1.5;color:red;}.mod-test1.bg{ background:#dfdfdf; display:inline-block;

總結下平時自己css 書寫的思考過程。記錄下1）觀察頁面結構，劃分小模組， 2）在結構上找相同相似的（那些是相同的，那些是可以合并的），3）對相似的結構進行抽取（對頁面進行規劃），4）對css進行規劃（粒度劃分，利用繼承），5）布局頁面（先主要的後次要的，有利於SEO檢索）6）調試瀏覽器的相容性。先ff，然後ie（最後ie6，ie下使用zoom:1,position:relative,）7）最佳化css（合并使用相同的css樣式，margin,border等等，css sprites）

CSS屬性：marker-offset marker-offset : auto | length 取值： auto : 預設值。瀏覽器自動化佈建間距 length : 由浮點數字和單位標識符組成的長度值。可為負值。 說明：設定或檢索標記容器和主容器之間水平補白。即兩個容器靠近的一邊的間距。作用於 display 屬性值為 marker 的元素。對應的指令碼特性為 markerOffset 。 樣本： li:before { display: marker; marker-offset:

傳回值:Object{top,left}offset()概述 擷取匹配元素在當前視口的相對位移。返回的對象包含兩個整型屬性：top 和 left。此方法只對可見元素有效。樣本描述: 擷取第二段的位移HTML 程式碼:<p>Hello</p><p>2nd Paragraph</p>jQuery 代碼:var p = $("p:last"); var offset = p.offset(); p.html( "left: " +

今天在google reader上看到一篇博文，然後在問了組裡的幾位同事之後才發現自己曾經一直對css selector的理解存在著誤區。據說老外的文章中很早就提到了關於css selector是優先順序演算法，只是到了國內被部分人員翻譯之後，誤解了其中的含義，導致現在很多人以為css選擇符的優先順序運算是將ID名、類名等等全部相加後做比較的。

 1 字型樣式 {font:font-style font-variant font-weight font-size font-family} 2 字型類型 {font-family:"字型1","字型2","字型3",...} 3 字型大小 {font-size:數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small} 4

1. link標籤是屬於xhtml範疇，而@import則是css2.1中特有的。link標籤除了可以載入CSS外，還可以做很多其它的事情，比如定義RSS，定義rel串連屬性等，@import就只能載入CSS了。 2. 載入的順序的區別，link載入的css時，是一種並行(沒有嘗試是否是這樣)載入CSS方式，而@import則在整個頁面載入完成後才載入。3. 相容性的區別，因@import是CSS2.1才特有的，所以對於不相容CSS2.1的瀏覽器來說，無效。4.

組件開發時，通常會有配有一個css檔案資源。但是在實用時，為了減少請求數，這個css有可能被合并在頁面的css中。那麼，寫組件時是否需加要載這個css呢？應對策略：組件的css前加一個.js_xcomponent_css_loaded的規則，來標識該組件對應的css是否已載入。而在組件的js裡，作一個判斷，如果css未預先載入（包括獨立預先載入、或被包含在其它的css檔案中一起預先載入），則進行載入。典型代碼如下：<html><head><link

<form action="" name="" id="" role="search" method="get"> <fieldset class="search"> <label class="assistive-text" for="s">Search</label> <input type="search" name="s" id="" class="">

1.要求：如中的，三欄目布局，中間的MAIN是自適應瀏覽器的寬度，左LEFT固定寬200PX，右RIGHT固定寬200PX;.right,.left{height:300px;width:200px;}.right{ float:right;background:#000000;}.left{ float:left;background:#009933;}.main{background:#F60; height:300px;} <div

塊元素一般都從新行開始，它可以容納內嵌元素和其他塊元素,常見塊元素是段落標籤'P"。“form"這個塊元素比較特殊，它只能用來容納其他塊元素。     如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的預設配置模式，把塊元素擺放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table標籤也是塊元素的一種，table based layout和css based

      CSS的很多其他屬性大多容易理解，比如字型，文本，背景等。有些CSS書籍也會對這些簡單的屬性進行大張旗鼓的介紹，而偏偏忽略了對一些難纏的屬性講解，有避重就輕的嫌疑。CSS中主要難以理解的屬性包括盒型結構，以及定位。正如positioniseverything，本文將主要講述關於position的理解，力求讓您看完本文後對position有著最全面的認識。position的四個屬性值：relativeabsolutefixedstatic下面分別講述這四個屬性。<div id="

解決思路：　　我們希望是強制出現捲軸，但有時候我們並不希望出現捲軸，那就要隱藏它了。從上個問題的指點中我們很容易得到答案----設定CSS屬性overflow的值為hidden。 　　具體步驟： 　　方法一：設定CSS屬性overflow為hidden。 　　＜body style="overflow:hidden"＞ 　　方法二：設定body元素的scroll屬性為no。 　　＜body scroll="no"＞ 　　注意：

原理利用CSS特性 #msgBody div{}，當有ID為msgBody存在時才生效來實現。相容性相容IE7+、Chrome、Firefox IE6下Select元素總在最上層。並且不支援fix所以只能絕對位置。彈出層是會跳轉到頂部。IE6下修改body的ID後display:block; 顯示有問題（有一部分顯示），在IE6下時，使用left:-10000px;來實現隱藏。JS中調用方法彈出方法：document.body.id = 'msgBody';隱藏方法：document.body.

測試css片是何時載入的。測試結論以下樣式圖片在頁面載入時就載入內嵌樣式<div style="background-image:url(image.aspx?from=page);">內嵌樣式表 .divCur{background-image:url(image.aspx?from=style1);}當 存在兩個.divCur{background-image:url(image.aspx?from=style1);}

文章目錄 CSS-Based SolutionsFurther SolutionsTooltips: WordPress-PluginsSelected Scripts: Quick Overview Web users love informative clues. Whatever questions and misunderstandings might occur - delivering precise answers

以下文章是  翻譯 google高效css寫法文章地址：http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors 使用高效的css樣式總體避免一些低效的key selectors去匹配大量的元素能夠加速頁面的展現

現在是一個推崇結構，表現，行為想分離的時代，最大的好處就是維護起來比較簡單，方便，代碼重用。把CSS，JS寫在HTML裡，就像一個大雜燴，很難理解，可讀性差，檔案大，維護起來非常麻煩。 但是CSS到底是內聯還是外聯呢？我們只要分析它的特點就不難得出答案。CSS內聯：就是把CSS放在HTML Head裡使用Style包圍。<style type="text/css"></style>CSS外聯：就是把CSS放到一個單獨的檔案裡，然後在HTML通過調用。<link