CSS 知識技巧經驗分享

1、目錄CSSCSS布局CSS語法CSS編寫技巧與經驗1CSS簡介CSS : Cascading Style Sheets . 層疊（級聯(lián)）樣式表.是控制網頁布局樣式的基礎，真正做到網頁表現(xiàn)與內容分離的一種樣式設計語言。精確到像素級控制。1.瀏覽器支持完善（有兼容性問題）2.表現(xiàn)與結構分離（HTML也有部分默認樣式）3.樣式控制功能強大（樣式也混亂）4.繼承性能優(yōu)越 （繼承重疊混亂）CSS在當前WEB應用上面確實強大，可應用在HTML、XML，甚至FLEX、SilverLight中。事物的兩面性導致需要人去更好的操縱它。 CSS是什么？2CSS簡介控制布局（幾列幾列）控制全局（字體、顏色、鏈接、邊

2、框、背景）控制個體（br、hr、H1、H2、div、table）自定義樣式（class、id、style、link） CSS具體作用HTMLHTML CSS3CSS簡介 早期表格布局 TD TD TD TD TD TD TD 優(yōu)點：1、布局控制很嚴謹2、標簽少，編寫簡單3、兼容性好缺點：1、擴展性較差2、可讀性較差3、代碼重用性差4CSS簡介 Div搭建基本框架優(yōu)點：1、頁面代碼的重用性高2、可讀性高3、拓展性高4、框架布局較靈活缺點：1、開發(fā)難度高2、兼容性沒有table框架好5CSS簡介 CSS鏈接方式1、外部樣式表3、直接寫css2、內部樣式表 #guidefont-size:12px;

3、border:1px solid #ff7300 4、指定css效果類 行內樣式表、內嵌樣式表、外部樣式表各有優(yōu)勢，實際的開發(fā)中常常需要混合使用：有關整個網站統(tǒng)一風格的樣式代碼，放置在獨立的樣式文件*.css某些樣式不同的頁面，除了鏈接外部樣式文件，還需定義內嵌樣式某張網頁內，部分內容”與眾不同“，采用行內樣式6目錄CSS簡介CSS布局CSS語法CSS編寫技巧與經驗7CSS語法 CSS基本語法結構選擇符屬性：值body margin:0px;border:0px;font-size:12px;font-family:宋體;background-color:#fff;tdmargin:0px;f

4、ont-family:宋體.img_bborder:1px solid #bbb;.bdborder:1px solid #f00.guidebackground:#f008CSS語法 優(yōu)先級*font:8px bodyfont:10px divfont:12px .the_divfont:14px #the_divfont:16px我是？像素標簽指定、id/class、類型、群組、偽類18px9CSS語法bodymargin:0px;padding:0px;font-size:12pxh1font-size:16px;font-weight:bold類型選擇符h1,h2,h3,h4color

5、:#ff7300.title .copyright .list font-family:”黑體”群組選擇器:active 被擊活的元素:foucs 被選中的元素:hover 鼠標懸浮的元素:link 添加特殊的樣式偽類HTML獲取CSS：通過選擇符，結合優(yōu)先級。10目錄CSS簡介CSS布局CSS語法CSS編寫技巧與經驗11CSS編寫 快速實現(xiàn)CSS（編輯器）DreamWeaver里的CSS編輯器：了解CSS的基礎前提設置好頁面布局不用DW屬性編輯區(qū)域用鏈接外部CSS的方式應用時，自行命名選擇符，不要過多的繼承使用cssTidy工具清理代碼想要進步，慢慢脫離它12CSS編寫 設計字體/段落col

6、or: red/blue/yellow. #ff7300;font-family: ”字體”;font-size:字號(px,em,ex) ;font-weight: bold ;text-decoration: underline/none ;text-align: center / left / right ;line-height: 26px / 200% ;文字顏色還有：白色（white），橙色（orange），棕色（brown），橄欖綠（green），藍紫色（blue），深棕色（darkbrown），寶藍（sapphire），紫色（purple），黑色（blank），灰色（gray）

7、，紅色（red）13CSS編寫 設計邊框效果border-width: 1px ;border-color: #ff7300 ;border-style: solid / dashed / dotted ;縮寫 border: 1px solid #ff7300建議：適時適地使用table，例如表格、數(shù)據(jù)等14CSS編寫 背景設計background-color:#ff7300;background-image:url(“圖片路徑”);background-repeat: no-repeat / repeat-x / repeat-y;縮寫 background:#99FF00 url(./i

8、mages/css_tutorials/background.jpg) no-repeat fixed 40px 100px15CSS編寫 內外邊距 padding、marginmargin-top/right/bottom/left: 8px;padding-top/right/bottom/left : 8px;縮寫: 上右下左同樣 margin: 10px ; 上下一樣、左右一樣 margin: 10px 5px;上、左右一樣、下 margin: 10px 5px 10px; 上、右、下、左 margin: 10px 5px 10px 5px;每個元素都被看作一個矩形框（盒子），由內容、

9、padding（填充）、邊框（border）和空白邊（margin）組成16CSS編寫 浮動float:left/right;兼容性問題的引出clear:both屬性32117CSS編寫 display 顯示方式屬性display: none / block / in-line; 塊元素(block)：內聯(lián)元素(in-line)：總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設定一個寬度。和其它元素在一行上；高度，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。18CSS編寫 常用標簽a-錨點b-粗體(不推薦)br-換行em-強調fon

10、t-字體設定(不推薦)i-斜體img-圖片input-輸入框label-表格標簽select-項目選擇span-常用內聯(lián)容器，定義文本內區(qū)塊strong-粗體強調textarea-多行文本輸入框center-舉中對齊塊div-常用塊級容器，也是css layout 的主要標簽dl-定義列表fieldset-form控制組form-交互表單h1-大標題h2-副標題h3-3級標題h4-4級標題h5-5級標題h6-6級標題hr-水平分隔線ol-排序表單p-段落table-表格ul-非排序列表19CSS編寫 定位position: absolute / relative;absolute: 絕對定位第

11、一個父元素position:relative;的原點進行定位。如果設定TRBL并且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定relative:相對定位此設置 正常是用在使其子級按照其原點進行定位。z-index:層級來設定容器的上下關系，數(shù)值越大越在最上面，數(shù)值范圍是自然數(shù) 子元素 20CSS編寫 列表ul/li、dl/dt.dd、ol/lilist-stylelist-style-imagelist-style-positionlist-style-type 表單 form / input / select border

12、-color border-style border-width21目錄CSS簡介CSS布局CSS語法CSS編寫技巧與經驗22技巧與經驗 標簽初始化body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td margin:0; padding:0;table border-collapse:collapse; border-spacing:0;fieldset,img border:0;address,caption,cite,code,dfn,em,stron

13、g,th,var font-style:normal; font-weight:normal;ol,ul list-style:none;caption,th text-align:left;h1,h2,h3,h4,h5,h6 font-size:100%; font-weight:normal;q:before,q:after content:;abbr,acronym border:0;clear clear:both23技巧與經驗 常見兼容性問題 布局居中問題：IE與firefox的居中解析不一樣解決：body text-align: center; #center margin-rig

14、ht: auto; margin-left : auto; 不過要注意的是，text-align盡量不要用，因為會導致所有的字符都居中顯示。所以統(tǒng)一使用margin:0 auto;即可著名的IE6雙倍邊距 問題：浮動元素會有一個著名的IE6雙邊距marginbug。假如你設置了左邊距5px但實際上得到了10px左邊距。解決：display:inline可以解決這個問題，盡管它不是必需的，但是CSS仍然有效。24技巧與經驗 常見兼容性問題 Png透明背景圖片處理問題：FF和IE7已經直接支持透明的png圖，IE6下的png透明會顯示為黑色解決：.png_background: url() no-

15、repeat !important;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src=);background:none;width:118px;height:133px;.png divposition:relative;25技巧與經驗 常見兼容性問題 頁面最小高度問題：ie6不支持min-height，ie7和firefox可以解決： min-height:600px; _height:600px;頁面最小寬度問題：寬度以百分比設定的時候，可能

16、隨著瀏覽器的變小，內容被擠壓。解決： min-width:1000px; 26技巧與經驗 常見兼容性問題 CSS Hack區(qū)別IE6與FF： background:orange;*background:blue; 區(qū)別IE6與IE7： background:green !important;background:blue; 區(qū)別IE7與FF： background:orange; *background:green; 區(qū)別FF，IE7，IE6：background:orange;*background:green !important;*background:blue; 注：IE都能識別*;標

17、準瀏覽器(如FF)不能識別*；IE6能識別*，但不能識別 !important, IE7能識別*，也能識別!important; FF不能識別*，但能識別!important;27技巧與經驗 CSS小技巧文字高度居中： 文字行高line-height與容器高度height一致對齊文本和文本輸入框： vertical-align:middle;列表不錯亂： white-space: nowrap;強制不換行： white-space: nowrap;自動換行： word-wrap:break-word; word-break:normal;父級元素高度不隨內部元素撐大： 這時需要清除浮動，添加一

18、個div，再加上clear:both;鏈接處的虛線（失去焦點）： onfocus=this.blur()”但這會對盲人網站造成麻煩，需要考慮客戶群。 28技巧與經驗CSS命名規(guī)范1、為以后html5+css3.0發(fā)展方向打下基礎?，F(xiàn)在命名頭部、底部等大家習慣用 header、footer來命名，最終html調用css樣式既是這種形式，以后html5+css3.0標準將是直接用標簽來表示頭部部分了，所以為以后版本升級規(guī)范有一定好處，雖然達到兼容html5+css3.0瀏覽器還早，但是可以為div+css開發(fā)者來說可以先注意一下。2、css命名規(guī)范可以節(jié)約團隊開發(fā)時間。特別在團隊合作開發(fā)網站項目中

19、，大家規(guī)范的來制作一套共識的css命名，將節(jié)約開發(fā)時間及成本，如果開發(fā)項目中div+css開發(fā)者亂命名css，將給后來的程序員的解讀帶來不便。3、css命名規(guī)范可為以后維護帶來方便Div+css開發(fā)好后網站項目制作好后，很難保證以后不調整及優(yōu)化，這樣自己沒有自己一套css命名特點，將為自己以后的維護帶來不便。29技巧與經驗 CSS代碼維護開發(fā)集成注意事項 盡量不要修改UI提供的CSS樣式表，如有特殊修改可以與UI溝通，或另行自建樣式表。迭代修改備注 用時間進行/*-備注-*/，并標明是add或edit。 例如：.googleposition:relative;width:440px;height:260px; /*-20110920edit-*/.adsensewidth:300px;height:250px;border:5px solid #d2d2d2; /*-20110920add-*/30技巧與經驗 如何學習CSS強迫自己用CSS，不斷使用不斷修正。使用中，持續(xù)的、系統(tǒng)的學習CSS。尋找最優(yōu)的表達方法