search

laurentlin17 / Notes_Huli_Code_Camp

0 stars 0 forks source link

[MTR01] Lesson 2-1 前端基礎 / Lesson 2-2 CSS_筆記 #7

Open laurentlin17 opened 5 years ago

laurentlin17 commented 5 years ago

Hypertext Markup Language (HTML)

屬於 Markup Language (不是像 JS 那樣的程式語言)

HTML 結構

Head - 網頁的相關資訊：title ... Body - 實際的網頁內容

Head

1. <!DOCTYPE html> 給瀏覽器看：請用標準模式 render (在一開頭)
2. <meta charset="UTF-8"> 編碼設定
3. <meta name="viewport" content="..."> 頁面大小設定

Open Graph Protocol

1. <meta name="ogtitle" content="網頁標題">
2. <meta name="ogdescription" content="網頁描述">

可以想成在使用 FB 貼連結時，FB 實際會抓的 Tag description 主要是 SEO，給搜尋引擎看的

可以用 facebook debugger 去看這些 Tag 的敘述

HTML 基礎語言

1. <tag>內容</tag>
2. <h1></h1> ~ <h6></h6>
3. <p>段落</p>
4. <a href="http://www.google.com" target="_blank">google.com</a> ：超連結 / _blank 在新分頁開啟
5. <div></div>
6. <span></span>
7. <ul></ul>：無排序標籤 (點點)
8. <ol></ol>：有排序標籤 (1、2、)
laurentlin17 commented 5 years ago

2-1

CSS (Cascading Style Sheets) 階層式樣式表

這篇會談到：box model, position, media query

寫法一：直接寫在 HTML 標籤內

// <h1 style="color:red"></h2>

寫法二：放在 Head 裡面，selector + 規則

//<head>
//    ....
//    <style>
//        h1 {
//            color: red;
//        }
//    </style>
//</head>

寫法三：用 Tag，分成兩個檔案寫

在 Head 區域
    <link rel="stylesheet" type="text/css" href="theme.css">

id/class selector

#main{

}
//<style>
//    #first{
//        color: red;
//}
//<style>
//
//<body>
// <p id="first">...</p>
//</body>

只能有一個地方 id 如果要套用多個地方：使用 class

//<style>
//    .raw{
//        color: blue;
//}
//<style>
//
//<body>
// <p class="raw">...</p>
//</body>

但 selector 之間有優先順序，id > class

div 包起來

//<style>
//    #main{
//        width: 500px;
//    }
//</style>
...
//<div id="main">
//
//</div>

我要某個 id 底下的 p，不是其他的 p

//#main p{
//    color: red;
//}

p 不能一直包

錯誤
//<p>
//    <p>
//    </p>
//</p>

多層 Selector

  1. div
  2. div p：div 下的所有 p
  3. div span：div 下的所有 span
  4. div > span：div 下一層 span
  5. .p：選到 .p 的 class
  6. p.p：元素要是 p，class 要是 .p
  7. span.p：元素要是 span，class 要是 .p
  8. p span ：p 底下的 span
  9. .p span ：.p class 底下的 span

  10. hello：指到 id 是 hello

    如果不知道某個區域怎麼選：可以用 Chrome Developer，在 Element 下按右建，選擇 Copy selector，再貼上。

Box Modal 盒模型

每一個東西都是一個 Box

display (非常重要)

block: 占滿整行，區塊元素。div 預設。沒什麼限制，但一行只能單獨存在。 inline: 只會占自己該占的區域，行內元素。span 預設。可以跟其他元素排在一起，但不能設定寬跟高，還有上下的 margin。只能控制左右的距離。 none: 不顯示。 inline-block: 有 block 可自由設定的性質，同一行中又像 inline 一樣可以多個並列。

margin 外邊距，通常 Chrome 會預設是 8。

margin-top, margin-left ... margine: 10px 20px 30px 40px (順時針_上_右_下_左) margine: 10px 20px (上下 10px，左右 20px)

padding 內邊距

border 線 / 邊界 (padding 外面)

width/height

可以用 px 或者 100% 不過實際上盒子的大小不是單純的 width/height，而要加上 padding、border 可以用 border-size: border-box 去設定 box 寬高一定是 width/height (萬一有設計變動，是治本的解法)

一些特殊的地方

行內元素不能有 margin (上下)，也不能設定寬高 要馬把 span 的 display 改成 block (但一行只能有一個元素) 或者使用 inline-block：可一行並列多個，又可以設定寬高還有margin (上下)

盒子的位置：置中

text-align: center 內容置中 margin: 0 auto 左右自動分配 margin

Position

2018-09-18_233514 static：按照順序排下去 relative：相對於原本的參考點，另外用 top, bottom, left, right 去定義。 fixed：固定在視窗的某個地方，跟屁蟲。 absolute：絕對定義，參考點往上層找任何一個有設定 position 的 (不是 static 的)。

Media Query

不同時候，套用不同的 CSS

與 RWD = Responsive Web Design 有關 (自適應網頁、響應是設計)

@media screen and (max-width: 700px){
        body{
                background: red;
        }
} // 套用到 0~700px 寬
@media screen and (min-width: 700px){
        body{
                background: yello;
        }
} // 套用到 700px 以上寬

要注意：同一個層級，愈下面的設定會蓋掉上面的設定

在 mobile 上使用瀏覽器的狀況

另外在 mobile 上使用瀏覽器，瀏覽器預設的寬 px 與裝置實際的寬 px 不同時，記得更改以下編碼：

<meta name='viewport' content='width=device-width, initial-scale=1'> // 不縮放

這個編碼可以設定我們在 mobile 上使用瀏覽器時的寬 px 要依照連覽器預設，或是裝置實際的寬 px。

laurentlin17 commented 5 years ago

2-1

CSS

這次會談到：

  1. pseudo class(:hover, :first-child, :nth-child)
  2. pseudo element(::before, ::after)
  3. css selector + ~
  4. transition
  5. float
  6. flexbox
  7. transform
  8. css prefix
  9. css naming

pseudo class

  1. :hover
  2. :first-child
  3. :nth-child
  4. ... 可以選到某種狀態底下的樣子

:hover 滑鼠一上去，變成可以點的樣子 :hover

// 在 style底下
        .btn:hover{  // 在 .btn 的 class 下
                cursor: pointer; // 游標在內容上時，會改成點選樣式
                color: red; // 並且內容文字會變成紅色
        }

:first-child / :nth-child(n) 我要選第幾個

        .box:first-child{ // 在 .box class 下 選第一個

        }
        .box:nth-child(x){ // 在 .box class 下 選第 x 個

        }

pseudo element 不存在元素

.box::before{
        content: 'before';
} // 在 .box 內，在內文之前，出現before。

如果要在某個方塊