HTML vs CSS - 用 HTML 5 就可以跨瀏覽器平台嗎？

前言

最近最 Hot 的不外乎就是 Cloud、HTML 5、Phone

尤其是老闆突然有一天說，我們的 手機、iPad 是不是也可以連到我們的系統做○○的事情？

不然就是 瀏覽器一換，畫面一切都不一樣了 ( 遠目 )

這時常常就會被問到

「為什麼用 ASP.NET 開發的網頁沒辦法在 iPad 上看？」

「為什麼用 IE 9 和 Chrome、Safari 上看的結果不一樣？」

「ASP.NET 是不是不能相容 iPhone 的？是不是要用 PHP？」

「用了 HTML 5 是不是就可以跨平台了？」

……

很多這類的問題

相信大家對於 HTML、CSS 以及 JS 一定都非常了解

但是加上 瀏覽器的組合就怪事就常常發生了！

自從 C 公司問了「為什麼別人用 Chrome、Safari 都可以，就 IE 」不行？

這應該是 IE 的 Bug 吧！

從結果上來看真的是差別很大！

但一看了 HTML 和 CSS 後發現有一些爭議的地方！

說穿了就是沒有按照「W3C的規範」來寫 HTML 和 CSS

經過調整後，一切就可以正常地顯示！

可以看到大小、圓角、圖片位置都是正確的

首先！並不是說用了  HTML 5 和 CSS 3 後就可以讓所有的瀏覽器都統吃！

也許會有人疑問：「不是說每個瀏覽器的HTML 都有符合 W3C 的規範嗎？？」

這句話沒有錯！但並不是每個瀏覽器每個 Tag 都有支援！每個解析、顯示的方式都一樣！

所以有可能 A 的寫法 可以讓 A 瀏覽器正常顯示！其他的卻不行的情況發生

尤其是網頁的介面設計可能都是由專業的網站設計師進行設計的情況下

在沒有了解「規範」的情況下，很有可能會有不相容的情況發生

Q1、WebKit 是標準的 CSS 語法吧？

由於瀏覽器版本多，要支援每一種就必須要用「標準」的語法才可以。

而WebKit 的語法 這是由 Safari 所推出的，它並不是在 W3C 的 CSS 3 的規範中

所以前面才會有 WebKit 的前置碼。而且 並不是只有 Safari 有自已的語法 ( Chorme 也是用同一個 )！

當然，FireFox 也有專用的 moz 語法

從日後管理的角度來看！用的越多，同仁在寫 CSS 就會越複雜 ，日後也會越難以維護。

就會有一堆的語法是互斥的 ，所以不建議為了一時的方便而隨意引用。

會造成日後相容性的問題

有興趣的可以參考這個 http://zh.wikipedia.org/wiki/WebKit

好用icon整合ui圖示-附position定位CSS樣式表

檔案格式：透明去背PNG(5色)、CSS樣式表(position定位)

>>>>>分享下載<<<<<

轉貼自：台灣2U分享論壇  http://freeshare2u.com/

CSS結合JS-事件的應用

CSS結合JS的運用

利用CSS配合JavaScript的可以做很多更酷的動態頁面效果，在本教程的最後給大家簡單介紹一下CSS配合JS的應用。首先，要搞清楚事件和動作的概念。在用戶端腳本中，JavaScript 通過對事件進行回應來獲得與用戶的交互。例如，當用戶單擊一個按鈕或者在某段文字上移動滑鼠時，就觸發了一個單擊事件或滑鼠移動事件，通過對這些事件的回應，可以完成特定的功能(例如，單擊按鈕彈出對話方塊，滑鼠移動到文本上後文本變色等)。

下面介紹幾種常見的事件：
　　onClick：滑鼠單擊事件。(是指滑鼠按下，然後鬆開時產生。
　　onDblClick：滑鼠雙擊事件。(是指滑鼠快速按下，鬆開，並再次按下時產生。)
　　onMouseDown：滑鼠按下事件。(滑鼠按下時即產生。)
　　onMouseUp：滑鼠釋放事件。(是指滑鼠從按下的狀態到彈起。)
　　onMouseMove：滑鼠移動事件。(是指在特定元素上移動滑鼠。)
　　onMouseOver：滑鼠經過事件。(是指，當指標從外界往元素上移動時產生。
　　onMouseOut：滑鼠離開事件。(是指滑鼠從特定元素上離開時產生。)
　　onLoad：載入事件。(當圖像或頁面結束載入時產生。)
　　onUnload：卸載事件。(當訪問者離開頁面時產生。)
　　onScroll：捲軸滾動事件。(當訪問者使用卷軸上移或下移時產生。)

　　有了事件以後，我們就為事件加上動作。這裏只說改變當前元素自定義樣式的動作，我們可以用這個方法先設定好兩個自定義的CSS樣式，物件原先調用第一種樣式，當產生滑鼠事件時讓物件應用到第二種CSS樣式，而產生的滑鼠效果。

CSS 基本語法：「群組化」選擇器

「群組化」選擇器
常常我們的 CSS 樣式中會有好幾個地方需要使用到相同的設定時，一個一個分開寫會是一件滿累人的工作，重覆性太高且顯得冗長，更不好管理....在 CSS 語法的基本設定中，就可以把這幾個相同設定的選擇器合併在一起，原本可能是寫了 7~8 行相同的語法，合在一起後就只要短短的一小行，怎麼看都讓人心曠神怡啊~

例如：當有好幾個選擇器剛好都需要把文字的顏色設定為灰色的時候，一個一個分開寫的方法式，感覺就很繁瑣，如下：

h1 { color:#666666; }
h2 { color:#666666; }
h3 { color:#666666; }
h4 { color:#666666; }
ul { color:#666666; }
p { color:#666666; }
#AAA { color:#666666; }
#BBB { color:#666666; }

群組化：把這幾個選擇器使用逗號合併在一起，就只要短短的一小行，如下：

h1, h2, h3, h4, ul, p, #AAA, #BBB { color:#666666; }

使用「群組化」選擇器 可以使我們的 CSS 樣式變得比較簡潔，將來又好管理和方便修改，這種寫法是 CSS 語法最基礎的功能之一，只要把這一些基礎的用法都熟悉了，自然而然就可以練出漂亮的 CSS 樣式嘍~

CSS基本語法總整理-分享2U

基本語法====================================
<style type=text/css>
<!--
body,table{
color : #999999 ; /*文字色彩*/
font-family : 細明體 ; /*文字字型*/
font-size : 9pt /*文字大小*/
}
-->
</style>

文字屬性一覽================================
color : #999999 /*文字色彩*/
font-family : 細明體 /*文字字型*/
font-size : 9pt /*文字大小*/
font-style:itelic /*文字斜體*/
font-variant:small-caps/*小字體*/
letter-spacing : 1pt/*字間距離*/
line-height : 200 /*設定行高*/
font-weight:bold /*文字粗體*/
vertical-align:sub /*下標字*/
vertical-align:super/*上標字*/
text-decoration:line-through/*加刪除線*/
text-decoration: overline /*加頂線*/
text-decoration:underline /*加底線*/
text-decoration:none /*刪除連結底線*/
text-transform : capitalize /*首字大寫*/
text-transform : uppercase /*英文大寫*/
text-transform : lowercase /*英文小寫*/
text-align:right /*文字靠右對齊*/
text-align:left /*文字靠左對齊*/
text-align:center /*文字置中對齊*/

CSS網頁佈局中文排版的9則技巧

SS網頁佈局中文排版有別於國外所介紹的英文排版，由於漢字的特殊性，所以有一些地方是需要大家注意的。)


一、如何設定文字字體、顏色、大小 — 使用font
　　font-style設定斜體，比如font-style: italic;
　　font-weight設定文字粗細，比如font-weight: bold;
　　font-size設定文字大小，比如font-size: 12px;（或者9pt，不同單位顯示問題參考CSS手冊）
　　line-height設定行距，比如line-height: 150%;
　　color設定文字顏色（注意不是font-color），比如color: red;
　　font-family設定字體，比如font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;（這是通用的寫法）
　　以上都可以寫在一行font屬性裏（除了color屬性需要單獨寫）：
　　font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;

CSS教學-media媒體輸出的設定-螢幕、列印狀態

簡單來說，透過指定CSS Media Type，我們可以對同一個元素分別為顯示、列印、行動裝置指定不同的呈現樣式! 老實說，這是非常基本的CSS應用；但Web設計師卻往往會忽略了它。

廢話不多說，請看範例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title><img src="images/smilies/default/titter.gif" smilieid="9" border="0" alt="" />rint Friendly</title>
    <style type="text/css">
        .cContent 
        {
            margin-top: 10px;
            margin-left: 10px;
            width: 400px;
            border: dotted 1px #444444;
        }
        /* 可以用@media mediaType的方式宣告不同媒體專用樣式 */
        @media screen
        {
            /* 螢幕上是藍底白字 */
            .cContent 
            {
                color: White;
                background-color: Blue;
            }
        }
        @media print
        {
            /* 列印時是白紙黑字的 */
            .cContent { color: #222222; }
        }
    </style>
    <!-- link, style可用media="mediaType"宣告適用時機 -->
    <style type="text/css" media="screen">
        /* 顯示時隱藏 */
        .cPrint { display: none; }
    </style>
    <style type="text/css" media="print">
        /* 列印時隱藏 */
        .cScreen { display: none; }
    </style>
</head>
<body>
<div class="cPrint"><img src="images/smilies/default/titter.gif" smilieid="9" border="0" alt="" />rint Header</div>
<div class="cScreen">Display Header</div>
<blockquote class="cContent">
One of the most important features 
...
certain media types.
</blockquote>
</body>
</html>

JS配合CSS的li標籤實現隔行變色效果

JavaScript配合CSS中的LI標籤實現列表的隔行換色效果，這裏是指靜態網頁的情況下，用JS去控制輸出的情況&nbsp;，還有一種情況是用ASP/PHP/ASP.NET等利用FOR或WHILE迴圈去控制&nbsp;，迴圈之前用除數取餘的方法判斷奇偶性，能除盡與不能除盡的時候各設置調用不同的CSS樣式，稍嫌麻煩。

放在head裡面：
<title>JS配合CSS的li標籤實現隔行變色效果</title>
<script type="text/javascript">
function bgChange(){
var lis= document.getElementsByTagName('li');
for(var i=0; i<lis.length; i+=2)
lis[i].style.background = '#f<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />3f3f3';
}
window.onload = bgChange;
</script>

放在body裡面：
<ul>
<li>隔行變色的LI</li>
<li>隔行變色的LI</li>
<li>隔行變色的LI</li>
<li>隔行變色的LI</li>
<li>隔行變色的LI</li>
</ul>

本文章轉貼自：http://freeshare2u.com/

javaScript 設定 style 的注意事情

通常在設定javascript時會遇到style的問題

因為style和javascript在css上面的寫法會有些不同

一般用JS設定CSS Style有兩種方法：

1) setArttribute('屬性','值')，但卻對style，時好時壞。

2) document.getElementById(div_id).style.[JavaScript的CSS屬性表示]= "CSS 屬性_value";

而 [JavaScript的CSS屬性表示]  請參照下表做比對：

CSS教學-捲軸變色

CSS編碼. M6 z4 d" |$ a4 |) U6 x7 f

html{　屬性↓　捲軸顏色↓　　　　　《捲軸顏色生成器》
scrollbar-face-color:#EDF8FA;　　　　　←拉頁框主顏色
scrollbar-highlight-color:#A7DCEA;　　 ←拉頁內框亮面
scrollbar-shadow-color:#A7DCEA;　　　　←拉頁內框暗面
scrollbar-3Dlight-color:#EDF8FA;　　　 ←拉頁框立體亮面色
scrollbar-arrow-color:#A7DCEA;　　　 　←拉頁框箭頭色
scroll-track-color:#EDF8FA;　　　　　　←拉頁框背景色
scroll-darkshadow-color:#EDF8FA;　　　 ←拉頁框立體暗面色
　　　　/*scrollbar-Base-Color:*/　　　　　　　←拉頁框基底顏色
}
本文章轉貼自：http://freeshare2u.com/

CSS教學-使用背景圖片來製作清單圖示

項目清單(list)在網頁編寫上是很常用到的元素，常見的項目符號除了「1、2、3」數字之外，大多使用圓點或是方塊來標注個個清單，區分條列。CSS語法裡面也能選擇清單樣式的宣告，像是「list-style-type」屬性，雖然這樣的符號相當容易使用，但是卻有著無法彈性修正位置以及自訂樣式的缺點。另外一種屬性，「list-style-image」也許可以讓你替換自訂的樣式圖片，卻在各瀏覽器上存在著不一致的情況，在位置上的調整上也具有難以異動的缺點！那麼，想要製作清單圖示 最好的選擇 是什麼呢？就是利用背景「background」元素來宣告！

以下就來分享一下如何使用背景圖片來製作清單圖示吧！

Step 1 建立基本的項目清單
•清單項目一
•清單項目二
•清單項目三

HTML
<ul>
<li>清單項目一</li>
<li>清單項目二</li>
<li>清單項目三</li>
</ul>

CSS教學-CSS 語法教學11-留白

我們從盒子模式那一頁看到，留白 (padding) 是在內容外，邊框內的部分。一個盒子有四個邊，所以我們可以對這四個邊的留白逐一設定：

padding-top (上)

padding-right (右)

padding-bottom (下)

padding-left (左) 第五個屬性，padding，是用來作為同時設定四個邊留白的捷徑屬性。
有三種方式可以設定留白，分別為長度、百分比、以及 'auto'。我們來看以下的例子：

#container {   padding-top:15px;   padding-left:10px;   padding-right:30px;   padding-bottom:40px;   border: 1px solid 000000; }

以下的 HTML碼，

<div id="container"> 這是留白的例子。這裡對了上、下、左、右的留白空間都有設定。 </div>

會顯示出，

這是留白的例子。這裡對了上、下、左、右的留白空間都有設定。

在這裡，上面的留白為 15px，左邊的留白為 10px，右面的留白為 30px，而下面的留白為 40px。

留白捷徑

所有四個邊的留白可以同時由 padding 屬性設定。它的語法如下：
padding: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
在這裡，順序非常重要。第一個值一定是上面留白的值，第二個值一定是右邊留白的值，第三個值一定是下面留白的值，而第四個值一定是左邊留白的值。

本文章轉貼自：http://freeshare2u.com/

CSS教學-CSS 語法教學10-邊框

在 CSS 中常見的邊框 (border) 屬性有以下幾種： border-style border-width border-color border-top-, border-left-, border-bottom-, border-right- border border-style border-style 屬性指定邊框的樣式。以下的表格列出這個屬性可能有的值，以及每一個值顯現出來的結果。 CSS 樣式 顯現結果 p {border-style:solid;} 實線 p {border-style:dashed;} 虛線 p {border-style:double;} 雙線 p {border-style:dotted;} 點線 p {border-style:groove;} 凹線 p {border-style:ridge;} 凸線 p {border-style:inset;} 嵌入線 p {border-style:outset;} 浮出線

CSS教學-CSS 語法教學9-邊界

如我們在盒子模式那一頁看到的，邊界 (margin) 是在邊框之外，並且是用來設定各個元素之間的距離。一個盒子有四個邊，所以我們可以對這四個邊逐一設定： margin-top (上邊界) margin-right (右邊界) margin-bottom (下邊界) margin-left (左邊界) 第五個屬性，margin，是用來作為同時設定四個邊的捷徑屬性。 有三種方式可以設定邊界，分別為長度、百分比、以及 'auto'。我們來看以下的例子： #container { margin-top:5px; margin-left:10%; margin-right:auto; margin-bottom:20px; border: 1px solid 000000; } 以下的 HTML 碼， <div id="container"> 這是邊界的例子。 </div> 會顯示為， 這是邊界的例子。 在這裡，上邊界為 5px，左邊界為 10%，下邊界為 20px。   邊界捷徑 所有四個邊的邊界可以同時由 margin 屬性設定。它的語法如下： margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值] 在這裡，順序非常重要。第一個值一定是上邊界的值，第二個值一定是右邊界的值，第三個值一定是下邊界的值，而第四個值一定是左邊界的值。 本文章轉貼自：http://freeshare2u.com/

CSS教學-CSS 語法教學8-盒子模式

盒子模式 (box model) 是在 CSS 中一個很重要的觀念。它是用來描述一個元素是如何組成的。以下是盒子模式的式樣：



在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。

本文章轉貼自：http://freeshare2u.com/

CSS教學-CSS 語法教學7-長度單位

在 CSS ，長度單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位。

相對單位包括：

•px: pixels
•em: em
•ex: x 字母的高度

絕對單位包括：

•in: 吋
•cm: 公分
•mm: 公厘
•pt: points, 1 pt = 1/72 吋
•pc: picas, 1 pc = 12 pt

如果沒有註明單位，那預設的單位是 px。

CSS教學-CSS 語法教學6-CSS Div 與 CSS Span

Div
Div 這個標籤目的是將內容分為不同的區域，而每一個區域可以根據 CSS 中的宣告而有自己的樣式。Div 是一個區塊級容器 (block-level container)，這代表在 </div> 標籤後會換行。 舉例來說，如果我們有以下的 CSS 樣式：

.large {
  color: #00FF00;
  font-family:arial;
  font-size: 1.5em;
}

以下的 HTML 碼，

<div class="large">
  這是 DIV 範例。
</div>

就會顯現為，

這是 DIV 範例。

CSS教學-CSS 語法教學5-CSS Class 與 CSS ID

Class
Class 的宣告法，是先放一個句點 (.)，之後再列出選擇器名稱。設定一個 Class 選擇器的語法如下：

.【Class 名稱】{
  屬性：設定值；
  ...
}

舉例來說，

.navbar {
color:#0000FF;
}

要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼：

<p class="navbar">這是用 Class 選擇器的例子。</p>

以上的 HTML 碼會顯現出：

這是用 Class 選擇器的例子。

一個 Class 選擇器可以同時有好幾個不同的物件 (instance)。這是靠以下的語法：

CSS教學-CSS 語法教學4-媒體類別

不同的媒體類別可以用不同的 CSS 樣式表。舉例來說，在螢幕上的文件可能適用某一個 CSS 樣式表，而同一份文件在被列印時，可以用一個不同的 CSS 樣式表。標出一個 CSS 樣式表媒體類別的語法如下：

外部連接套用
<link rel="stylesheet" href="style.css" type="text/css" media="【媒體類別】">

嵌入套用
<style type="text/css" media="【媒體類別】">

匯入套用
@import url("style.css") 【媒體類別】;

CSS教學-CSS 語法教學3-CSS 套用

我們可以用以下四種方式，將 CSS 套用入 HTML 文件中：

　行內套用 (Inline)
　嵌入套用 (Embed)
　外部連接套用 (External Link)
　匯入套用 (Import)

行內套用我們可以在 HTML 文件內直接宣告樣式。舉例來說，
  
<p style='font-family:verdana; font-size:16;'>This is font size 16.</p>

以上的 HTML 文件在瀏覽器上會顯現為：

This is font size 16.