CSS開發手冊

時間 2021-08-13

標籤 javascript css html java 瀏覽器 app ide 函數佈局測試欄目 CSS 简体版

原文原文鏈接

基礎篇javascript

1、三種樣式選擇器
屬性選擇器 p {color:red;}
類選擇器 .p {color:red;}
ID選擇器 #p {color:red;}css

2、transparent

Background:transparent; 防止定義背景被覆蓋

3、Netscape4.X（IE/WINDOWS4.0之前的版本）下錯誤的透明背景理解

Background:inhrit; 在netscape4.x下透明背景將被理解爲黑綠

4、字體默認選擇

Body {font-family:"lucida Grande",Verdana,Lucida,Arial,Helvetica,sans-serif; }

按順序調用不一樣平臺的默認字體

5、如何解決舊瀏覽器不支持CSS的狀況

使用羣選擇器例如：p,td,ul,ol,li,dl,dt,dd {font-size:small;}

6、使用netscape4友好規則

Body {font-family:Verdana,sans-serif;}

p,td,ul,ol,li,dl,dt,dd {font-size:small;}

7、方法重載細節規則

Body {font-family:Verdana,sans-serif;}

p,td,ul,ol,li,dl,dt,dd {font-size:small;}

p {font-family:times,"Times New Roman",serif;}

8、內容（派生）選擇器

Li strong {font-style:italic; font-weight:normal }

例如：strong {color:red;} h2{color:red;} strong h2 {color:blue;}

例如：#sidebar {color:red} #sidebar p {color:blue;}

例如：.fancy {color:red;} .fancy p {color:blue;} / li.fancy {color:black;}

CSS嵌入 html

1、外聯樣式表 java

@import url("/Styles/mystylesheet.css");

</style>

注意：使用@import用來對IE4.0如下瀏覽器進行屏蔽

2、嵌入式樣式表

<head>

<!- -

Body {color:red;}

- ->

</style>

</head>

注意：爲了IE3下訪問站點，咱們可使用嵌入式樣式表（建議在頁面中使用內聯成功後，剪切到外聯樣式表中）

CSS混合佈局應用

1、Margin（框距）padding（邊框距）

margin屬性設置順序：上左下右

padding屬性設置順序：上左下右

margin:25px 0 25px 0;

簡寫：margin:25px 0;

2、Display顯示屬性設置

一、Display屬性none (隱藏)

.alt {display:none;}

<span class="alt">Content List Part</span>

二、Display屬性block (塊/區域)

Img {display:block;}

塊級元素：存在自身的"盒"中，後面跟隨一個默認的回車

內聯元素：是流的一部分，後面不跟隨回車

三、Display屬性inline

區別block元素，使用inline狀態時，顯示方式按照內聯元素顯示

3、動態連接屬性設置

a:link {

font-weight : bold;

text-decoration : none;

color: #c30;

background: transparent;

}
a:visited {

font-weight : bold;

text-decoration : none;

color: #c30;

background: transparent;

}

a:hover {

font-weight : bold;

text-decoration : underline;

color: #f60;

background: transparent;

}
a:active {

font-weight : bold;

text-decoration : none;

color: #f90;

background: transparent;

}

一、文字修飾屬性（text-decoration）

Text-decoration:underline overline none;

Underline:連接時有下劃線

Overline:鏈接時有上劃線

None:鏈接時無下劃線

二、動態鏈接屬性順序

(LVHA)－ LoVe－HA！

三、IE/WINDOWS的假裝欺騙性

應避免使用a:active屬性：出現bug 鏈接會出現凍結現象

4、如何設置行高（line-height）

Line-height:1.5;

5、如何設置文章位置（text-align）

可選擇屬性（left middle right）

IE6/WINDOWS的BUG會錯誤使文檔居中

6、對於字體的完整CSS應用

Font:13px/1.5 Georigia,"New Centeury Schoolbook",Times,serif;

7、設置頁面分界限

一、vertical-align:middle; 等於 <td valign="middle">設置垂直對齊

二、background:none 等於 background:url(images/1.gif) repeat;

8、設置顯示器設備

使用HTML4.01轉換到XHTML1.0過渡式transitional

（早期的基於Gecko核心的瀏覽器如：netscpae6.0 Mozilla1.0）

1、在Gecko核心瀏覽器清除CSS間隙

規則以下：

Img {display:block;} 使用塊級元素清楚間隙

.inline {display:inline;} 使用內聯元素顯示方式

頁面以下：

也可用

Td img {display:block;}

2、在Gecko核心img默認做爲內聯函數處理

在內聯元素下方默認留有空白，這是爲了給所包含的塊下行字母流出的空間

盒模型、Bug和工做區

CSS四個區域：內容、邊框距、邊界和邊距

在使用CSS設置表格以前：

{width:400px; height:75px;}

錯誤的理解：表格面積＝400px; height:75px;

實際上CSS設置的表格：

Width:400px height:75px 內容爲 Content

那麼整個盒的面積爲：Content＋padding*2+border*2

盒模式失效及解決辦法：（IE4到IE5.5/Windows）

正確理解盒模式的瀏覽器

（IE6/WIN,IE5/MAC,Netscpae6+,Mozilla,Chimera,Kmeleon,Opera5+）

Float漂浮屬性用來使用在兩在不一樣ID選擇器中相連

{float:left;}

對於使用padding的表格將使用如下解決方法：

Oprea友好規則（Box盒狀模型）

解決辦法：

#nav

{

width:151px;/* False value for IE4-5.x/Win */

voice-family:"\"}\"";

voice-family:inherit;

width:100px; /* Actual value for conformant browsers */

}

html>body #nav {

width:100px;/* be nice to Opera */

}

IE上的空白Bug

解決方法：縮進代碼，<td><a href="#foo"><img src="1.gif" alt="/" /></a></td>

IE6/Windows上的漂浮Bug

解決辦法：使用JavaScript id名稱：content

If (document.all && window.attachEvent) Windows.attachEvent ("onload",fixWinIE);

Fuction fixWinIE() {

If (doucument.all.cotent.offsetHeight) {

Doucument.all.content.style.display="block";

}

嵌入Flash的Bug：

解決辦法：在XHTML中嵌入如下代碼：

Width="400px" height="300px">

</object>

Flash空白故障（IE/WIN 5,5.5,6 Version）

解決辦法：使用JavaScript的doucuemnt來欺騙效驗系統

//[CDATA[

If (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]){

Doucument.write ('<object src="/media/yourflashmovie.swf"……</object>);

}

關鍵字Fahrner方法：（IE5.x/Winodws 提供僞關鍵字號） 瀏覽器

解決辦法：

P {

font-size:x-small;

/* flase value for WinIE4/5 */

Voice-family:"\"}\"";

/* trick WinIE4/5 into thinking the rule is over */

Voice-familt:inherit;

/* recover from trick */

Font-size:small;

/* intended value for better browsers */

}

Html>p {
font-size:small;

/* be nice to opera */

}

區別alt屬性與title屬性

Alt:註釋文檔不顯示

Title:顯示文檔不註釋

提升可訪問性（WAI與508條款）

Bobby的可訪問性測試

http://bobby.watchfire.com/

能幫助你使網頁適應WAI或508條款

爲非鼠標用戶提供一個選擇

解決辦法：使用JavaScript

Onkeypress對於非鼠標用戶就至關於onclick app

對於不能使用JavaScript的用戶

</noscript>

Tabindex屬性提供鏈接到屬性的快捷方法

使用Tab換檔鍵的屏幕閱讀器，可迅速查詢相關內容

區域顯示和隱藏效果

解決辦法：

Function toggle (targeted ) {

If (doucument.getElementById ) {

Targeted = doucument.getElementById (targeted);

If (target.style.display = "";

} else {

Target.style.display = "none";

}

Xhtml部分：

<p><a href="/" onclick="toggle ('outside2') ;return false;" onmouseover="changeImages

('ch','/i/p/cho.gif ');return ture;

Title="hide or show Relevant Externals (below)."> Toggle Externals </a></p>

定義CSS規則：

<dt>Relevant Externals:</dt>

<dd><a href=http://www.somesite.com titile="Description" >Site NameS</a></dd>

咱們把規則寫入CSS外聯表中

#outside2 {

Display:block;

}

若是你須要一個元素在頁面中是不可見的但仍需其佔據空間 ide

解決辦法：visibility:hidden;

動態菜單（下拉和展開）

下拉式菜單解決辦法： http://www.gazingus.org/html/menuDropdown.html

展開式菜單解決辦法： http://www.gazingus.org/html/menuExpandable2.html

不支持Javascritp腳本的瀏覽器，如何實現正常瀏覽

解決辦法：在<head></head>之間插入

<!-- //

If (!doucument.getElementById) {

Window.location = http://www.somesite.com/somepage/

}

當瀏覽器不支持Javascript時，window.location將跳轉到一個提示頁面或者是一個不須要Javascript腳本的純網頁

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。