Tag : css « AndyYou's Blog

August 28, 2013

css

CSS 選擇器筆記

* 通用選擇器 -> 套用所有元素
* {color: yellow;}
<h1> 類型選擇器
h1 {color: red;}
id
#container {color: skyblue;}
class
.span2 { color: hotpink;}
屬性 -> 過濾對應標籤元素中的屬性 <a rel="friend" href="http://www.w3c.com/">w3c</a>
a[rel='friend'] {color: blue;}
a[attr='value'] 全部都要符合。
a[attr*='value'] 只要有包含 value 都會被選中。
a[attr^='value'] 只要開頭有都會被選中。
a[attr$='value'] 只要結尾有 value 都會中。
a[attr~='value'] 以空格隔開的字串清單中，符合的就會中。
a[attr|='value'] 以 - 隔開的字串清單中，如果開頭包含字串 value 。需要注意的是下圖 f 沒有被選中。
div p div 裡面的 p 都會被選中。
div > p 只有 div 內第一階的子元素會被選中。
div + ul 跟 div 同階層並緊跟著 div 後面的 ul 才會被影響。
div ~ p div 同階層後面所有的 p。
a, em 套用同一個設定。

August 28, 2013

css

viewport 與 media query

簡易觀念

整個 Responsive Web Design 最主要的就是靠 css 中的 media query 搭配 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 這兩個部分來達成。

簡言之就是透過
@media screen and (max-width:420px){ // css here }

來針對各種 size 的 width 做對應的設計，而裝置瀏覽器的解析度又可以使用 meta 來設定，就可以使用百分比來處理設計。
原理的概念大致就如上敘述。

隨著智慧型手機上網越來越多的情況下 apple 率先在 safari 定義了一個 meta viewport 用來設定瀏覽器的解析度。
預設來說，如果都不設定的情況 safari 會用 width = 980px 去解析網頁，Android 2.x 是 800px ，Android 3.0+ 為 980px。

注意

螢幕解析度不一定等於 device-width，Nexus One 是螢幕解析度(800)不等於device-width(320)的典型例子，iPhone4也是 – 螢幕解析度(960)，但 device-width 傳回值為(320)。

原理

這邊讓我們先回到影像處理的基本單位 pixel，一張 800*600 pixel 的數位影像可以想成是 800*600 個"單色格子"組出這張圖片，這就是單純圖片像素的定義。

接著螢幕的呈像：例如設定 800*600 解析度，表示在你的螢幕上總共要顯示只要顯示這麼多格子，所以如果你螢幕很大。但是解析度設的很小（640*480）就會看到影像變大了，因為一個"物理格子"變大了。換句話說長跟寬各由 1024 及 768 個像素組合而成的長方形，面積共786432像素（長x寬）的顯像螢幕；此時，若有一個1024x768的圖檔，則它剛好可以填滿整個螢幕。

關於 viewport

            <meta name="viewport" content="initial-scale=1.0, width:device-width" />

viewport 的作用是告訴瀏覽器，讀取這個 html 時可視區域有多大，於是瀏覽器就會根據 viewport 的設定去調整。
其中最重要的是 width＝device-width 等於是告訴瀏覽器，寬有幾個 pixel 他會覆寫本來預設是 980px 的預設值所以會發現網站的圖片變大了。
例如：本來設計的手機版網頁寬是 590px 就可以在 viewport 設定 width=590。如此一來整個網頁就會完整呈現，但視覺上會變小。
延伸自適應網站設計的用法則是讓 width=device-width，再透過 CSS 去設計各種手機尺寸的版型如 320 * 480。

屬性和值

width:[數字] 或 device-width
height:[數字] 或 device-height
initial-scale:最小0.25，最大5
minimum-scale:最小0.25，最大5
maximum-scale:最小0.25，最大5
user-scalable:1 或 0 (yes 或 no)

August 29, 2013

css

Box 屬性意義

display: block : 前後會插入換行，寬會填滿父元素，高則是配合內容。可以用 width, height 設定。
預設: h1, p, div
display: inline : 不會換行，會連成一行。寬高都是依照內容，且不能使用 width, height。
預設: span, a, em
display: inline-block : 跟 inline 一樣，但能夠使用 width, height 設定寬高。
display: list-item : 變成 marker + block。
display: run-in : 如下圖 h2 被指定 run-in 它就會變成 inline 後續的元素如果是 block 就會如圖一樣合體。但是後續的元素如果是 inline 或者套用了 float, position ，那麼 h2 就會是 block。 註: Firefox 和 IE7 目前都不支援 run-in

display: none : 隱藏

display: table : 表格

        <style type="text/css">
        #container {
        overflow: hidden;
        display:table;
        width: 100%;
        }
        .row {display:table-row;}
        .row div {display: table-cell;}
        .a {background:#00ff00;}
        .b {background:#ff00ff;}
        .c {background:#0000ff;}
        </style>
        <div id="container">
            <div class="row">
                <div class="a">
                    test<br />test<br />test<br />test<br />test<br />test<br />test
                </div>
                <div class="b">
                    test
                </div>
                <div class="c">
                    test
                </div>
            </div>
        </div>

display: compact : 可以插入在後續 block 的 margin 區域。

August 30, 2013

css

Compass

使用 Compass 之前需要先安裝 ruby，這裡我們可以透過官方
的教學來安裝，建議使用 rvm 的方式來管理各種版本的 ruby。

rvm 安裝方式

            $ \curl -L https://get.rvm.io | bash -s stable --ruby

設定 ruby 環境

            $ gem update --system
            $ gem install compass
            $ compass -v // 確認版本與安裝完成

建立專案

            $ compass create Project1 // 單純使用 css
            $ compass create Project2 --syntax sass  // 使用 sass

建立之後 compass 會提示訊息告訴你， Congratulations! Your compass project has been created.
意思是恭喜，你的專案已經建立了。然後呢如果你是用 sass，你現在應該在 sass 的目錄底下開始新增和編輯你的 sass 檔案
例如： style.sass
注意：底線開頭的 sass 檔案叫做 partials 可以稱之為局部文件如 _member.sass，他們不會被
編譯成單檔而是匯入其他 sass 檔案中使用。
關於 sass 的設定都在 config.rb 裡面。當你做了任何修改，你都需要重新編譯。

編譯指令

            $ compass compile [專案路徑]  // 到目錄為止

開始編寫 sass

在這之前呢， compass 會好心的提醒你需要把下面這段代碼引入到你的 html 中

            <head>
            <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
            <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
            <!--[if IE]>
            <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
            <![endif]-->
            </head>

如果你跟我一樣是使用 jade 的話則如下

            link(rel='stylesheet', href='/stylesheets/screen.css', media='screen, projection', type="text/css")
            link(rel='stylesheet', href='/stylesheets/print.css',  media='print', type="text/css")
            //[if IE]
              link(rel='stylesheet', href='/path/project')
              <![endif]

然後我們就可以試著在 sass 目錄加入自己的 style.sass
並且輸入如下

            h2
              color: red;

最後 compile 之後就可以看看了