CSS 幼幼班

這篇主要是複習 CSS 做的筆記，將一些基礎概念動手做

1.權重：

!important > element style（inline的CSS） > id > class > element

2.自定義属性用法：

屬性名稱前使用 -- 字樣，表示該屬性為變數，例如下方範例的 --bg-color，這時就可以使用 bg-color 變數，並透過var 就可在整份文件重複使用喔．

變數語法範例：

1	var(custom-name, value)

範例：

<style>
    :root{
        --bg-color：red;
    }
    
    .temp1{
        background: var(--bg-color);
    }
    
    .temp2{
        background: var(--bg-color,gray);
    }
</style>

若在上方範例.temp2 中，--bg-color 設定失效，css 就會利用後方的第二個變數gray

馬上利用 w3schools 範例試一試

3. CSS 中的特殊符號

大於符號 ( > )

指定第一階的子元素
透過例子可以看到 Tony 為 Section 的第一階子元素變為紅色，而 Bob 卻沒有變色

html:

<div class="section">
    <div>Andy</div>
    <div><p>Bob</p></div>
    <p>Tony</p>
</div>

css:

1
2
3

.section > p{
  color:red
}

結果：

空白符號

所有的子元素
可以看到 Section 的子元素下，有Ｐ標籤的都變色了

css:

1
2
3

.section  p{
  color:red
}

結果：

加號 (+)

符合同階層所觸及的第一個元素
如範例 div + p，只要div和p為同階層，且觸及的第一個p都會受影響

<div class="section">
    <div>Andy</div>
    <p>Jack</p>
    <div><p>Bob</p></div>
    <p>Tony</p>
    <p>Gary</p>
</div>

css:

1
2
3

div + p{
  color:red
}

結果:

取代符號(~)

符合同階層所觸及的元素
與加號(+)不同的是，div後的p皆會受到影響

css:

1
2
3

div ~ p{
  color:red
}

結果:

參考資料：

4.開始學習 CSS 版面配置

參考資料：
學習 CSS 版面配置 - 保哥

1.好用的屬性 - margin: auto;

在為了避免區塊左右撐滿容器，我們可以設定width 來固定我們的寬度．並加上左右外邊距（margin-left 與 margin-right）為 auto 來使其水平居中．
1
2
3
margin: 0 auto;
/*第一個參數為上下(margin-top、margin-bottom)*/
/*第二個參數為左右(margin-left、margin-right)*/
max-width 屬性
- 但使用 width 頁面下方會有捲軸，這時就得使用max-width

2.Box Model

由於我們在設定每個元素的 margin (元素與元素的邊界) 與 padding (該元素與內容的邊界，俗稱內距)後可能會撐開元素，導致設定的效果可能不如預期，來看個範例：

可以透過 box-sizing:border-box 來解決，但我們也希望能在所有瀏覽器上都能使用，所以我們另外加上：

-webkit-box-sizing ( 支援 Safari )
-moz-box-sizing => ( 支援 Firefox )

所以建議在每個 css 都加上此設定：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

3.position

relative
- 元素與元素「之間」的相對位置

不會有特別表現，除非加入其他屬性(top:-50px…)

.temp1{
position: relative;
top: -50px;
left: 40px;
width: 600px;
}

fixed
- 「定位」於視窗的所設定的位置上，就連捲動頁面也會「固定」在原先設定的位置上．
- 與 relative 使用方法相同top、right、bottom、left來設定「相對」視窗的位置
absolute
- 與fixed用法相似，但不同的是定位在該元素所處的上一層容器的「相對位置」(父元素)上，若無可定位的容器，就以<body>來定位．

4.float

適用情境：文繞圖

5.clear 與好物推薦 ( clearfix )

因 float 屬性使用後，會讓該元素像「漂浮」於下層元素上
這時可利用來 clear 來清除 float 效果

clearfix
使用 float 常會發生類似下面情況：

這時就可以拿出 clearfix 來解決

1
2
3

.clearfix {
  overflow: auto;
}

6.響應式設計（Responsive Design）

media queries

因現在裝置尺寸過多，要讓網站適用於每個裝置上，就要透過media queries 來實現．

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}