<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="ARTICLE @ XOOPS powered by FeedCreator" -->
<rss version="0.91">
    <channel>
        <title>睡蓮‧池水間 :: 文章</title>
        <description><![CDATA[文章XML]]></description>
        <link>http://waterlily-lsl.com/modules/article/view.article.php/189/c2</link>
        <lastBuildDate>Fri, 10 Feb 2012 23:56:13 +0200</lastBuildDate>
        <generator>ARTICLE @ XOOPS powered by FeedCreator</generator>
        <image>
            <url>http://waterlily-lsl.com/modules/article/images/logo.png</url>
            <title>睡蓮‧池水間 :: 文章</title>
            <link>http://waterlily-lsl.com/modules/article/</link>
            <width>92</width>
            <height>52</height>
            <description>文章XML</description>
        </image>
        <language>zh-TW</language>
        <managingEditor>waterlily at waterlily-lsl dot com</managingEditor>
        <webMaster>waterlily at waterlily-lsl dot com</webMaster>
        <category>文章</category>
        <item>
            <title>用 CSS 3 將你的設計帶入下個高度</title>
            <link>http://waterlily-lsl.com/modules/article/view.article.php/189/c2</link>
            <description><![CDATA[類別: 語言集<br />分頁標題: 用 CSS 3 將你的設計帶入下個高度 - 1<br />來源: (http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/)<div class="article-source"><span class="article-label">譯文出處：</span><span class="article-content">前端觀察 - &#104;&#116;&#116;&#112;&#58;&#47;&#47;www&#46;qianduan.net/take-your-design-to-the-next-level-with-css3&#46;html</span></div><br /><br /><br />　　級聯樣式表在13年前被引入，而且被廣泛使用的CSS 2.1標準在11年前被創建，顯然我們現在已經與當年相差千里了。 相當了不起的是期間網站開發有了多少進步 —— 事實上，我們也無法想像。<br /><br />　　為什麼會這樣呢，當提到CSS的時候，過去我們是如此的不情願和害怕嘗試？為什麼我們還要使用討厭的hack和依賴JavaScript的技術來寫樣式？為什麼我們不能<strong class="A_strong">利用豐富的 CSS 3 特性和現代瀏覽器中可用的工具</strong>並將我們的設計品質帶到下一個等級？<br /><br />　　是時候在我們的項目中引入 CSS 3 特性了，不用害怕逐漸在我們的樣式表中加入 css 3 特性和選擇器會出問題。 讓我們的客戶意識到 <strong class="A_strong">CSS 3 的優勢</strong> (而且讓舊瀏覽器更快的消失)是我們力所能及的事情——我們應該這樣做，特別是在它能夠讓網站更加靈活並減少開發和維護成本的時候。<br /><br />　　在本文中，我們將研究 CSS 3 的優勢，並看一下一些網頁設計師是如何使用它們的。最後，我們將了解到從 CSS 3 中我們能得到什麼以及我們如何在我們的項目中使用它的新特性。<br /><br />同時請參考我們之前的一篇相關文章：<br /><br />　　‧<a href="http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/" rel="external">使用CSS3將你的網站設計推向未來</a><br /><br /><big><strong class="A_strong">使用瀏覽器專有屬性</strong></big><br /><br />　　為了使用大部分 CSS 3 特性，我們不得不與原來的屬性一起使用<strong class="A_strong">生產商專有擴展</strong>。原因是直到現在，大部分瀏覽器只支持部分 CSS 3 屬性。而且不幸的是，一些屬性甚至到最後都可能不被 W3C 推薦，所以通過指定瀏覽器專有屬性，將他們與標準屬性區分開來是很重要的(然後在他們是多餘的的時候使用符合標準的樣式將之覆蓋)。<br /><br />　　當然，這種方法的劣勢是，將導致一個雜亂的樣式表和網站在瀏覽器之間的表現不一致。畢竟，我們不想在我們的樣式表中重拾私有瀏覽器 hack 的需求。 Internet Explorer 的臭名昭著的 marquee 、 blink 以及其它標籤在大量樣式表中被應用，並在 20 世紀九十年代成為一個傳奇；它們依然讓現存的很多網站（在其他瀏覽器中）表現不一致甚至難以閱讀。 而我們現在也不想將我們自己置於同樣的境地，對吧？<br /><br />　　然而，網站<a href="http://dowebsitesneedtolookexactlythesameineverybrowser.com/" rel="external">不需要</a>在所有的瀏覽器中看起來<strong class="A_strong">必須</strong>嚴格的一致。 有的時候在某個瀏覽器中使用私有屬性來實現特定的效果是可行的。<br /><br /><strong class="A_strong">最常見的私有屬性</strong>是用於 Webkit 核心瀏覽器的(比如, Safari)，它們以-webkit-開始，以及Gecko核心的瀏覽器(比如, Firefox)，以-moz-開始，還有Konqueror ( -khtml- )、Opera ( -o- )以及Internet Explorer ( -ms- )都有它們自己的屬性擴展（目前只有IE8支持-ms-前綴）。<br /><br />　　作為專業的設計師，我們不得不注意：<strong class="A_strong">使用這些私有屬性將讓我們的樣式表不能通過驗證</strong>。所以目前將他們放到最終版的樣式中是少見的。但是在某種情況下，比如試驗或學習，我們至少可以考慮將他們和標準的 CSS 屬性一起寫到一個樣式表中。<br /><br /><strong class="A_strong">擴展閱讀</strong><br /><br />　　‧<a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords" rel="external">Vendor-specific extensions and W3C</a><br />　　‧<a href="http://www.css3.info/vendor-specific-extensions-to-css3/" rel="external">Vendor-specific extensions to CSS3</a><br />　　‧<a href="http://reference.sitepoint.com/css/vendorspecific" rel="external">Vendor-specific properties</a><br /><br /><strong class="A_strong">1) 選擇器</strong><br /><br />　　CSS選擇器是個難以置信地強大的工具：它們允許我們<strong class="A_strong">在標籤中指定特定的 HTML 元素</strong>而不必使用多餘的 class、ID 或 JavaScripts。 而且它們中的大部分並不是 CSS 3 中新添加的，而是沒有被得到應有的廣泛應用。如果你在嘗試實現一個乾淨的、輕量級的標籤以及結構與表現更好的分離，高級選擇器是非常有用的。 它們可以減少在標籤中的class和ID的數量並讓設計師更方便的維護樣式表。<br /><br /><strong class="A_strong">屬性選擇器</strong><br /><br />三個新的屬性選擇器被添加到CSS3：<br /><br />　　‧[att^="value"] <br />　　　匹配包含<strong class="A_strong">以特定的值開頭的屬性</strong>的元素<br /><br />　　‧[att$="value"] <br />　　　匹配包含<strong class="A_strong">以特定的值結尾的屬性</strong>的元素<br /><br />　　‧[att*="value"] <br />　　　匹配包含<strong class="A_strong">含有特定的值的屬性</strong>的元素<br /><br /><span style="background:url(/uploads/article/images/090627.png) no-repeat 50% -2197px;height:329px;display:block;"><!-- image 1 --></span><br /><a href="http://tweetcc.com/" rel="external">tweetCC</a>使用一個屬性選擇器來指定有title屬性並以字符“tweetCC”結尾的連接：<br /><div class="xoopsCode"><p class="cTitle"><img class="icon-l" src="http://waterlily-lsl.com/themes/waterlilyLSL-GW/img/code-icon1.gif" alt=""/><img class="icon-r" src="http://waterlily-lsl.com/themes/waterlilyLSL-GW/img/code-icon2.gif" alt=""/></p><pre>
a[title$=&quot;tweetCC&quot;]{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 140px;
    height: 140px;
    text-indent: -9999px;
    }
</pre></div><br />　　<strong class="A_strong">瀏覽器支持</strong>:只有 IE 6 不支持 CSS 的屬性選擇器。 IE 7 和 IE 8、Opera、Webkit 核心和 Gecko 核心的瀏覽器都支持。 所以在你的樣式中使用屬性選擇器是比較安全的。<br /><br /><strong class="A_strong">連字符</strong><br /><br />　　CSS 3 中唯一新引入的連字符是通用的兄弟選擇器（同級）。 它針對一個元素的有同一個父級節點的所有兄弟級別元素。<br /><br />　　比如，給某個特定的 div 的同級的圖片添加一個灰色的邊框( div 和圖片應該有同一個父級節點 )，在樣式表中定義下面的樣式就足夠了：<br /><div class="xoopsCode"><p class="cTitle"><img class="icon-l" src="http://waterlily-lsl.com/themes/waterlilyLSL-GW/img/code-icon1.gif" alt=""/><img class="icon-r" src="http://waterlily-lsl.com/themes/waterlilyLSL-GW/img/code-icon2.gif" alt=""/></p><pre>
div~img {
	border: 1px solid #ccc;
	}
</pre></div><br />　　<strong class="A_strong">瀏覽器支持</strong>：所有的主要瀏覽器都支持這個通用的兄弟選擇器除了我們最愛的 IE 6 ！<br /><br /><strong class="A_strong">偽類</strong><br /><br />或許在 CSS 3 中增加最多的就是新的偽類了，這裡是一些最有趣和最有用的：<br /><br /><ul style="margin-left:30px;list-style:disc outside none"><li>:nth-child(n) <br />讓你基於元素在父節點的子元素的列表位置來指定元素。 你可以是用數字、數字表達式或odd和even關鍵詞(對斑馬樣式的列表很完美)。 所以如果你想匹配在第四個元素之後的一個3個元素的分組，你可以簡單的這樣使用：<br />  :nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...個元素*/ <br /></li><li>:nth-last-child(n) <br />與上個選擇器的思想同樣，但是從後面匹配元素（倒序），比如，為了指定一個div裡面的最後兩個段落，我們可以使用下面的選擇器：<br />  div p:nth-last-child(-n+2) <br /><br /></li><li>:last-child <br />匹配一個父節點下的最後一個子元素，等同於<br />  :nth-last-child(1) <br /><br /></li><li>:checked <br />匹配選擇的元素，比如復選框<br /><br /></li><li>:empty <br />匹配空元素（沒有子元素）。<br /><br /></li><li>:not(s) <br />匹配所有不符合指定聲明(s)的元素。 比如，如果你想讓所有的沒有使用”lead”類的段落的顯示為黑色，可以這樣寫：<br /><br />p:not([class*="lead"]) { color: black; }<br /></li></ul><br /><br /><a href="http://andreagandino.com/" rel="external">Andrea Gandino</a> 在他的網站上使用:last-child 為選擇器指定每篇日誌的最後一個段落，並將其的外間距(margin)設置為0:<br /><span style="background:url(/uploads/article/images/090627.png) no-repeat 50% 0;height:337px;display:block;"><!-- image 2 --></span><br /><div class="xoopsCode"><p class="cTitle"><img class="icon-l" src="http://waterlily-lsl.com/themes/waterlilyLSL-GW/img/code-icon1.gif" alt=""/><img class="icon-r" src="http://waterlily-lsl.com/themes/waterlilyLSL-GW/img/code-icon2.gif" alt=""/></p><pre>
#primary .text p:last-child {
    margin: 0;
    }
</pre></div><br />　　<strong class="A_strong">瀏覽器支持</strong>: Webkit 核心和 Opera 瀏覽器支持所有新的 CSS 3 偽類，Firefox 2 和 3 (Gecko 核心)只支持:not(s) , :last-child , :only-child, :root, :empty, :target, :checked, :enabled 和:disabled，但是 Firefox 3.5 <a href="https://developer.mozilla.org/en/Firefox_3.5_for_developers" rel="external">將更加廣泛的支持 CSS 3 選擇器</a> 。 Trident 核心瀏覽器(Internet Explorer)事實上不支持這些偽選擇器。<br /><br /><strong class="A_strong">偽元素</strong><br /><br />　　在 CSS 3 中唯一引入的偽元素是 ::selection ，它可以讓你指定被用戶高亮（選中）的元素。<br /><br />　　<strong class="A_strong">瀏覽器支持</strong>:目前沒有任何一款 Internet Explorer 或 Firefox 瀏覽器支持 ::selection 偽元素。 Safari、Opera 和 Chrome 均支持。<br /><br /><strong class="A_strong">擴展閱讀</strong><br /><br />　　‧<a href="http://www.w3.org/TR/css3-selectors/" rel="external">Selectors Level 3: W3C Working Draft</a><br />　　‧<a href="http://www.css3.info/preview/attribute-selectors/" rel="external">CSS3: Attribute selectors: CSS3.info</a><br />　　‧<a href="http://www.css3.info/modules/selector-compat/" rel="external">Compatibility table: CSS3 Selectors</a><br />　　‧<a href="http://kimblim.dk/css-tests/selectors/" rel="external">CSS selectors and pseudo selectors browser compatibility</a><br />　　‧<a href="http://reference.sitepoint.com/css/css3attributeselectors" rel="external">CSS3 Attribute Selectors</a><br />　　‧<a href="http://reference.sitepoint.com/css/pseudoelement-selection" rel="external">::selection</a><br />　　‧<a href="http://reference.sitepoint.com/css/generalsiblingselector" rel="external">General Sibling Selector</a><br />　　‧<a href="http://reference.sitepoint.com/css/css3psuedoclasses" rel="external">CSS3 Pseudo-classes</a><br /><br /><strong class="A_strong">2)RGBA和透明度</strong><br /><br />　　RGBA 讓你可以不僅僅設定色彩，還能設定<strong class="A_strong">元素的透明度</strong>。一些瀏覽器尚不支持它，所以最好在 RGBa 前面設定其它瀏覽器支持的沒有透明的顏色屬性。<br /><span style="background:url(/uploads/article/images/090627.png) no-repeat 50% -338px;height:337px;display:block;"><!-- image 3 --></span><p style="text-align:center;font-style:italic"><small>Tim Van Damme 在連接的 hover 效果上使用了 RGBA</small></p><br />在這個網站上， <a href="http://timvandamme.com/" rel="external">Tim Van Damme</a>在鼠標懸停效果上使用了 RGBa；例如，在他的首頁的 network 連接上:<br /><div class="xoopsCode"><p class="cTitle"><img class="icon-l" src="http://waterlily-lsl.com/themes/waterlilyLSL-GW/img/code-icon1.gif" alt=""/><img class="icon-r" src="http://waterlily-lsl.com/themes/waterlilyLSL-GW/img/code-icon2.gif" alt=""/></p><pre>
  #networks li a :hover , 
  #networks li a :focus { 
      background : rgba ( 164 , 173 , 183 , .15 ) ; 
      } 
</pre></div><br />　　當設定一個 RGBA 色彩的時候，我們必須依次設定紅、藍、和綠色的值，可以是 0-255 或百分數。 透明值應該在 0.0 到 1.0 之間，例如 0.5 代表 50% 的透明度。<br /><br />　　RGBA 和 opacity 之間的不同是前者只會應用到指定的元素上，而後者會影響我們指定的元素及其子元素。<br /><br />　　這裡有個例子展示我們如何給一個 div 添加 80% 透明:<br /><div class="xoopsCode"><p class="cTitle"><img class="icon-l" src="http://waterlily-lsl.com/themes/waterlilyLSL-GW/img/code-icon1.gif" alt=""/><img class="icon-r" src="http://waterlily-lsl.com/themes/waterlilyLSL-GW/img/code-icon2.gif" alt=""/></p><pre>
 div { 
	  opacity : 0.8 ; 
	  } 
</pre></div><br />　　<strong class="A_strong">瀏覽器支持</strong>: RGBA 被 Webkit 內核瀏覽器支持。IE 所有版本都不支持。Firefox 2 也不支持，但是 Firefox 3 和 Opera 9.5 均支持。 Opacity 被 Opera、Webkit 核心和 Gecko 核心的瀏覽器支持。 IE 所有版本同樣不支持。 IE 只支持自家的該死的濾鏡（filter）<br /><br /><strong class="A_strong">擴展閱讀</strong>：<br /><br />　　‧<a href="http://www.qianduan.net/css3-guide-series-rgba.html" rel="external">CSS3系列教程:RGBA</a><br />　　‧<a href="http://www.qianduan.net/css3-trip-rgba-color.html" rel="external">CSS3之旅:RGBa顏色</a><br />　　‧<a href="http://www.qianduan.net/rgba-browser-support-compatibility.html" rel="external">RGBa色彩的瀏覽器支持</a><br />　　‧<a href="http://www.w3.org/TR/css3-color/" rel="external">CSS Color Module Level 3: W3C Working Draft</a><br />　　‧<a href="http://www.css3.info/preview/rgba/" rel="external">RGBA colors: CSS3.info</a><br />　　‧<a href="http://en.wikipedia.org/wiki/RGBA_color_space" rel="external">RGBA color space</a><br />　　‧<a href="http://forabeautifulweb.com/blog/about/is_css3_rgba_ready_to_rock" rel="external">Is CSS3 RGBa ready to rock?</a><br />　　‧<a href="http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba" rel="external">Super-Awesome Buttons with CSS3 and RGBA</a><br /><br />]]></description>
            <author>睡蓮</author>
            <pubDate>Sat, 27 Jun 2009 15:11:00 +0200</pubDate>
        </item>
    </channel>
</rss>

