0703 - HTML. CSS(Day2)

回家必看

阿莫斯の兔偶斯
可以裝Wox, Afred和Divvy

CSS 屬性選取器 - 一個選取自由度超高的選取器
屬性選取器的七種選取方式

時間軸

10:35 好用工具介紹
10:44 正課開始(圖片標籤)
11:23 CSS解釋
11:43 相對路徑與絕對路徑
11:53 css style
12:18 選取器
13:34 優先權
13:35 屬性和class的優先權一樣
13:37 後代選取器
14:17 練習demo (十分鐘內寫完！)
16:15 另外兩種優先權
16:24 Flex

圖片

<img src="圖片的路徑"> 獨立標籤
xml –> html = xhtml

<br>強迫換行，也是獨立標籤
沒有標記換行就不會換行

<img src=" "/>, <br/>後面加了斜線是xml的規則

絕對路徑與相對路徑

<img src="圖片的位置 or 圖片的路徑 or 路徑">
<img src="C/user/桌面/絕對路徑.jpg"> #斜線就是進去的意思
<img src="相對路徑.jpg"> # ←圖片要在同一個資料夾
<img src="../相對路徑.jpg"> #"../"跳出去的意思，當圖片在不同資料夾時使用
# "../資料夾/圖片.jpg"跳出資料夾，再進去另一個資料夾

網頁標準

網頁如何渲染不同年代的標準？
HTML 4.0
XHTML 1.0
HTML 5.0

<!DOCTYPE>不是標籤！！
用來告訴瀏覽器是用哪個版本(DTD文件類型宣告)

CSS

階層式樣式表：幫HTML或XML處理樣式的電腦語言

標準
css1.0
css2.1 (W3C的推薦標準)
---
草案
css3.0
css4

inline-style:
注意：只有在用程式動態地去改變外觀(如javascript)才適合這樣做
好處是前端渲染速度快
但是伺服器很累（所以不要這樣寫！）

[翻譯]
<p style="文字色彩：紅色; 背景色彩：灰色">
---------------------------------
<p style="color: red; background-color: grey">

css style:

[翻譯]
<style>
    段落 {
        色彩: 紅色;
        背景色彩: 灰色; 
    }
---------------------------------
    p {
        color: red;
        background-color: grey; 
    }
 </style>

css通常放在<head>裡面
因為瀏覽器會先讀HTML的結構 (DOM文件物件模型)
然後再讀JavaScript

選取器

class類別選取器 .

  • 一個物件可以有很多class
[翻譯]
. 前言 {
    色彩: 紅色;
    背景色彩: 灰色; 
}

<p class="前言">

---

. info {
    color: red;
    background-color: grey;     
}

<p class="info">

id選取器 #

#id名稱{}

  • 同個id最多只能出現一次
  • id不一定要給；給id通常是為了程式上的需求

選取器的優先權

判斷重點明確性越高，優先權越高

  • 兩個選取器類型相同時，放後者會比前者優先
  • class的優先大於標籤 （最多有八個層級的優先權順序）

!important > inline style > ID選取器 > Class選取器 > Tag (Element) > * > 繼承

  <p class="info" id="first" style="color: green;">

Ref

注意：
!important是髒東西！不要隨便亂用

        p {
           color: purple !important;
           background-color: grey; 
        }

把選取器組合在一起

  • 使用.把條件串在一起
  • 順序沒關係，但是要全部符合的才會生效
h1.info {
 # h1標籤和class選取器
}

h2.info {

}
p.info {

}

[alt]屬性

css

        [alt="圖片"]{
            border: 4px solid yellow;
        }

html

<img class="" alt="圖片" src="https://fakeimg.pl/150x110/?retina=1&text=你好&font=noto">

屬性容易搞混的地方

case 1:

img.pic[alt]{
    # 三個選取器，優先權較高
} 
 
img[alt="amos"]{
   # 只有兩個選取器而已
}

case 2:

img.pic[alt="Amos"]{
    # 三個選取器
} 
 
img.pic[alt]{
   # 也是三個選取器，放後者優先權較高
}

case 3: 屬性和class的優先權一樣

img.pic{

} 

img[alt]{
}

後代選取器

藉由父層去控制子層

以下範例，所有子層的div都會被選到

css

.box div{
    color: red;
}

html

<div class="box">
    <div>
        aaa 
        <div>
            bbb
        </div>
    </div>
</div>

> 指定後代的層級

div > div 的話，兩層會有效果
div > div > div 的話，三層會有效果

以邊框線和背景色為例子：
（記得先預設背景色，不然會被蓋過）

css

        div{
            padding: 30px;
            border: 10px solid gray;
            background-color: #fff;
            /* 沒有設定背景色的情況下，是透明的 */
            /* 要先設定為白色再做測試 */
        }
        .papa > div > div > div {
            background-color: #ccc;
        }

html

<div class="papa">
    <div class="child1">
        aaa 
        <div class="child1-1">
            bbb
            <div class="child1-1-1">
                ccc
                <!-- ccc這行背景色會改變為灰色 -->
            </div>
        </div>
    </div>
</div>

繼承

有些屬性會被繼承，必要性在哪？

  • 這些屬性多數是跟文字有關 （多數文字是相同的外觀設計）
  • 行高也會被繼承（所以不用一行一行去設定）

邊框線的色彩被繼承，方不方便？
=> 以設計上來說，不太好看（所以不需要繼承）

練習

重點

  • 一定要用class處理未來的需求變更
  • 快速鍵： div*2>h2{news}+ul>li*5>a[#]{lorem}

精簡原始碼

css
以下可以做精簡：

    .news{
        padding: 30px;         
        border: 3px solid #aaa; 
        margin-bottom: 50px;                              
    }

    .event{
        padding: 30px;         
        border: 3px solid #aaa; 
        margin-bottom: 50px;                              
    }

精簡後

    .news, .event{
        padding: 30px;         
        border: 3px solid #aaa; 
        margin-bottom: 50px;                              
    }

需求變更=> 拆開差異化的部分

    .news, 
    .event{
        padding: 30px;         
        border: 3px solid #aaa; 
        margin-bottom: 50px;                              
    }

    #差異化的部分是邊框顏色
    .news{
        border-color: darkblue;
    }
    .event{
        border-color: darkgoldenrod;
    }

小技巧：

border: 3px solid #aaa;

等於

border-style: solid;
border-weight: 3px;

class 模組化

名稱可以設定相同部分+不同部分

    <div class="list news">
        News
    </div>

    <div class="list event">
        Event
    </div>

如此一來就可以再少一行程式碼

    .list h2{
        font-size: 18px;
        border: 1px solid #ccc; 
    }

重點：針對需求去調整實作方式！沒有標準答案

星號選取器 *

*會選到所有東西

css

* {
  color: red;
}

.box1{
    color: gray; 
    #只會選到box1, 不會選到<p>
}

html

這行會讓字變成紅色，不會變成灰色 （因為沒選到<p>）

    <div class="box1">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
    </div>

要讓字也變成灰色的設定

.box1 p {
    color: gray; 
}

如果把下面註解掉，就變成繼承。p會繼承.box1裡的設定

# * {
#  color: red;
#}

.box1{
    color: gray; 
    #只會選到box1, 不會選到<p>
}

萬用選取器 reset

  1. 把要設定的語法寫在Snippet

例如：

    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

產生一份給vscode的設定檔

"*": {
    "prefix": "*",
	"body": [
		"* {",
        "  margin: 0;",
        "  padding: 0;",
        "  list-style: none;",
        "}"
    ],
    "description": "萬用選取器 reset"
}
  1. VScode: command + shift + p

輸入關鍵字snippet，打開preference：設定css.json
把剛剛產生的Snippet檔貼入即可！

Flex

讓圖片做橫排

特性: 版面不會因為width超過原本設定的數值而爆掉

css

<style type="text/css">
    .card-group{
        display: flex;
        width: 600px;
        border:2px solid red;
    }
    .card{
        width: 180px; #這邊就算設了10000px也不會爆掉！
        margin: 10px;
    }
    .card img{
        width: 100%;
    }
</style>

html

<div class="card-group">
    <div class="card">
        <img src="https://picsum.photos/300/200?random=1" alt="圖片說明">
        <h3>title</h3>
        <p>Lorem</p>
    </div>
    <div class="card">
        <img src="https://picsum.photos/300/200?random=1" alt="圖片說明">
        <h3>title</h3>
        <p>Lorem</p>
    </div>
    <div class="card">
        <img src="https://picsum.photos/300/200?random=1" alt="圖片說明">
        <h3>title</h3>
        <p>Lorem</p>
    </div>
</div>

預習

reset, inline, box

小技巧

這個勾勾打開，才能用tab鍵補完！

Select a repo