Posts match “ css ” tag:

css

  1. * 通用選擇器 -> 套用所有元素
    * {color: yellow;}

  2. <h1> 類型選擇器
    h1 {color: red;}

  3. id
    #container {color: skyblue;}

  4. class
    .span2 { color: hotpink;}

  5. 屬性 -> 過濾對應標籤元素中的屬性 <a rel="friend" href="http://www.w3c.com/">w3c</a>
    a[rel='friend'] {color: blue;}

  6. a[attr='value'] 全部都要符合。

  7. a[attr*='value'] 只要有包含 value 都會被選中。

  8. a[attr^='value'] 只要開頭有都會被選中。

  9. a[attr$='value'] 只要結尾有 value 都會中。

  10. a[attr~='value'] 以空格隔開的字串清單中,符合的就會中。

  11. a[attr|='value'] 以 - 隔開的字串清單中,如果開頭包含字串 value 。需要注意的是下圖 f 沒有被選中。

  12. div p div 裡面的 p 都會被選中。

  13. div > p 只有 div 內第一階的子元素會被選中。

  14. div + ul 跟 div 同階層並緊跟著 div 後面的 ul 才會被影響。

  15. div ~ p div 同階層後面所有的 p。

  16. a, em 套用同一個設定。

css

簡易觀念

整個 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)
css

  • 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 區域。

css

使用 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 之後就可以看看了