Liz's Blog

跟著前端設計師一起學習CSS就對了

| Comments

CSS全稱為Cascading Style Sheets,是用來描述HTML元素如何顯示在螢幕或其他媒體中。也就是HTML的功能是用來描述內容,剩下版型的工作就交給CSS。所以在做SEO時,要特別注意HTML是有語意的作用,最好別把裝飾功能搞混了,請參考〈整理撰寫SEO原則〉。

為了不要看CSS,覺得太無聊而放棄,我是從之前12 in 12 Challenges的CSS檔案,對照W3School的CSS課程來學習。因為作者Mackenzie Child本身是一個前端設計師,所以他沒有只套用Bootstrap,還是有放些小小的設計,反而適合用來學CSS。

這邊放的是12 in 12 Challenges #12:如何用Rails4做出Dribbble的三個css檔案,分別是:
- application.css.scss
- home.css.scss
- post.css.scss

1.font-family(字型)、font-weight(文字粗細,數字介於100-900,400正常,700粗體,也可用normal、bold、bolder、lighter表示)。

body {
    font-family: "Proxima Nova";
    font-weight: 100;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 100;
}

2.font-size(文字大小,可用百分比,也可用尺寸單位,1.25rem是相對網頁中html的1.25倍)、color(顏色,可使用Color Name或HEX表示。)

span {
    font-size: 1.25rem;
    color: #9B9B9B;
}

3.margin(邊界,有四個數值依序代表上右下左的邊界,三個數值依序代表上、右左、下邊界,有兩個數值依序代表上下及左右的邊界,只有一個數字代表所有邊界都是一樣的。)、padding(內距,可用尺寸單位或百分比表示,數值的順序和邊界用法相同,所以下面範例則代表上下內距要間隔一個字元,左右要間隔包含元素的5%。)、border-bottom(下邊框,範例依序代表寬度、實線及顏色。)

        h2 {
            margin: 0;
            font-weight: 100;
            padding: 1rem 5%;
            border-bottom: 1px solid #E4E4E4;
            font-size: 1.25rem;
            }

註:margin和padding都可直接指定上下左右,如:padding-bottom: 4rem;margin-left: .5rem;

4.background(背景,可用color name、HEX或RGB表示)、width(寬度,可用尺寸單位或百分比表示)、float(浮動)、border-radius(圓角值)

.post {
    background: #F8F9FA;
    width: 30%;
    float: left;
    margin: 1rem 1.5%;
    border: 1px solid #E4E4E4;
    border-radius: 0.3rem;
    }

5.text-align(水平對齊,可設定靠左、靠右或置中)、line-height(行距,預設為1)

#intro {
    margin: 2.75rem 0 1.75rem 0;
    text-align: center;
    font-size: 1.75rem;
    line-height: 1;
}

6.display(block代表區塊元素,inline代表行內元素)、text-decoration(none為預設,overline頂線,line-through刪除線,underline底線)

    .data {
        width: 100%;
        display: block;
        padding: .75rem 0;
        border-bottom: 1px solid #E9E9E9;
        text-decoration: none;
        color: #969696;
        margin: 0;
    }

註:有一段display: inline-block,我一直看不懂英文在解釋什麼(原文),看了這個中文示範我才大徹大悟。

7.&:hover(滑鼠移過的效果)

    .button {
        width: 100%;
        display: inline-block;
        padding: .75rem 0;
        margin-bottom: 1rem;
        text-align: center;
        text-decoration: none;
        color: #969696;
        &:hover {
            color: #50A7C7;
            border: 1px solid #50A7C7;
        }
    }

8.height(高度)、overflow(超過範圍如何處理,visible直接顯示不用捲軸,hidden直接隱藏超過的部分,scroll產生捲軸,auto為預設,只有需要時才會自動產生捲軸。)

        .post_image {
            height: 200px;
            overflow: hidden;
            img {
                width: 100%;
                border-radius: .3rem .3rem 0 0;
            }
        }

9.clearfix(解決高過本來區塊元素的問題)、content(要配合:before或:after使用,可加入文字在其中)、display: table(讓元素像個<table>)、clear(none為預設,兩邊可出現任何浮動元素。也可設定左邊、右邊或兩邊皆不能出現浮動元素。)

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

註:::before或::after是Pseudo-element的用法,CSS3為了要區別pseudo-classes和pseudo-elements,前者使用單冒號,後者使用雙冒號,詳見說明

Comments

comments powered by Disqus