Blog Cover Image

@Mina Influence

Inspire you to have New thinking, Walk out your unique Road.

軟體開發 SWD

software-development

[前端小菜鳥] 前端工程師成長計畫 - 讀書篇(2) | HTTP/CSS(1)

Posted onMay 15, 2024

第二篇讀書計畫的主題是 HTML/CSS。

還記得上一篇讀書計畫是在兩個月前哈哈哈。

我自從進新公司跟成功轉成前端工程師，每天都很忙碌，每天工作都很開心，毫不覺得我在工作，我覺得我在生活啊！！

然後，享受在公司跟同事社交、享受每天很刺激都跟美國同事開會，享受那種害怕做不出來(明明就很焦慮)的感覺 XD

一不小心就拖了一點時間才回頭專注繼續讀書計畫，不過這次我有修正了一下研讀 CSS 的部分，因為我找到了一個學 CSS 的網站我覺得還不錯，所以我打算接下來的 CSS 部分就把這個網站順一遍，大概需要妥妥的一個月吧，扎實的把 CSS 學好，整趟 CSS 讀完可能也要個 1-2 個月，才會進入 JavaScript 的部分，看看今年能否把整個前端讀書計畫都讀完。

除此之外還要兼顧工作跟創業作品，好扎實啊～～！

那麼我們就開始進入 HTML/CSS 章節吧。

HTML/CSS 讀書項目

Note: 我在正式進入學 CSS 的時候發現另一個學習 CSS 的網站很好用，於是我決定把本來只看 CSS cheat sheet 的部分改為透過該網站學習，但這會讓整個 CSS 學習計畫拉比較長的天數，所以如果你對 CSS 沒有這麼有興趣，那只看 cheatsheet 也可以。

  • [ ] HTML/CSS
    • [x] [HTML] Cheatsheet
    • [ ] [CSS] Learn CSS - web.dev 搭配 TailwindCSS 搭配 MDN (每天慢慢看可能也要個一個月吧，算很扎實)
    • [ ] [CSS(替代方案)] Cheatsheet + 標準語法糖 - w3schools (如果對 CSS 沒興趣，可以直接這項簡單帶過)
    • [ ] [CSS] 搭配 Hackerrank 證照題目交互學習
    • [ ] [CSS] 41 CSS 面試題目 (選擇擺在這看或者移到最後皆可)
    • [ ] [CSS] 看 創意構想 有 2 個影片 (滿滿的知識)
    • [ ] (Pending) [CSS] 了解 Canvas, WebGL, SVG, CSS 3 階層樣式表 or three.js，了解一下就好，不用太深入
    • [ ] [Front-end] 簡單了解一些 CSS 框架 TailwindCSS, Sharon UI

詳請可參考完整讀書計畫目錄

Table of Content 內容

  • [x] HTML Cheatsheet
    • [x] Img
    • [x] a href
    • [x] robots.txt
    • [x] HTML 5
    • [x] div
    • [x] atribute
    • [x] Head Tags
    • [x] Open Graph
  • [x] CSS
    • [x] Box Model
    • [x] Selector
      • [x] Selector Type
      • [x] Pseudo-classes and pseudo-elements
      • [x] Complex selectors
      • [x] Compound selectors
    • [x] 本節小課程 - Hidden vs Visibility

HTML Cheatsheet

其實基本上就是照著這個Cheatsheet的內容複習一次，以下列舉一下我自己個人覺得會忽略或者不知道的要點。

Img 

<img src="/demo.jpg" alt="baby" longdesc="desc.txt" width="100" height="48" />
  • img tag 有直接的 height 跟 width attribute，我之前寫 css 都是直接寫 class style，但老是忘記 html 可以直接寫高寬的屬性。
  • img alt 和 longdesc，alt 就是對於圖片的簡短的文字描述。longdesc據說是對於圖片比較長的文字描述，參考文件的描述如下
    • <img> 標籤的 longdesc 屬性與 alt 屬性類似，但它允許更長的描述性文字。longdesc 的值是一個指向包含影像說明的文件的 URL。如果說明多於 1024 個字元，那麼可以使用 longdesc 屬性來設定指向它的鏈接。
    • 可是呢目前瀏覽器都還沒有支援 longdesc 屬性。因此，對於如何建立那些大塊的描述，我們的建議是建立一個超鏈接指向包含描述的頁面即可。

a 

<a href="https://HTMLforBabies.com/" target="_blank" rel="external nofollow"
  >Link</a
>
  • 再來是 <a> tag 的屬性 rel and rev, 至從開始調查 SEO 後，我發現 rel這個屬性是其中一個優化 SEO 的要點，他能夠告訴機器人爬蟲這個連接跟現在看到的網站是什麼關係，不過詳細還沒有使用過，未來會嘗試看看。
  • target, 可以選擇點選網站時，會怎麼打開這個網站，比方說打開連結於開啟新的視窗(_blank)、佔整個視窗(_top)，還有其他。
  • hreflang, 可以指定或者說提示連結的網站是屬於哪個語言。

robots.txt

robots.txt 是一個放置在根目錄的文檔，他主要是讓機器人爬蟲知道這個網站能不能訪問。機器人會爬蟲你的網站後，在他們的資料庫建立關於你的網站的索引與資訊，接著會決定你的網站能不能被人在搜尋引擎上找到 (SEO)。

案例

User-agent: *
Disallow: /dont-index-this-folder/ <- 在這個目錄後的檔案都不要訪問
Sitemap: https://htmlcheatsheet.com/sitemap.xml <- 類似告訴機器人關於這個網站的地圖／導航，通常會另創另一個sitemap.xml檔案並由 robots.txt指定。

禁止訪問

User-agent: *
Disallow: /

robots.txt 跟 sitemap.xml 是我開始在經營這個個人網站，研究 SEO 後發現很重要的兩個檔案，若您的網站有需要 SEO 優化的話，可以研究實作這兩個檔案。

HTML 5 

<header></header>
<article></article>
<section></section>
<main></main>
<aside>Sidebar</aside>
<address></address>
<footer></footer>

以上這些是 HTML 5 才出來的 tags。

div 

<p dir="rtl">
  This paragraph is in English but incorrectly goes right to left.
</p>
<p dir="ltr">This paragraph is in English and correctly goes left to right.</p>

<hr />

<p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
<p dir="auto">
  هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.
</p>
  • div 的 dir 是我在開發 Next.js 時挖到的一個屬性，dir 可以指定 div 裡的方向， rtl 就是靠右、ltr靠左、還有其他值。

atribute

HTML Tags 裡有很多不同的屬性，可以多參考 Cheatsheet 內的 Attributes 了解更多。

Head Tags 

<head>
  <meta charset="utf-8" />
  <!-- 這一行是瀏覽器適配性，特別是針對 IE，因為並不是所有的網站都能在 IE運行，這一行主要是設定這個網站要用ie哪個版本渲染網站 -->
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="canonical" href="https://htmlcheatsheet.com/" />

  <!-- 這些算是SEO的一部分，就是設定這個網站的名字、描述跟關鍵字，雖然先前的文章有說Google已經不會參考關鍵字了，但我認為還是寫一下會比較好 -->
  <title>HTML CheatSheet</title>
  <meta name="description" content="A brief page description" />
  <meta name="keywords" content="html,cheatsheet" />
  <!--  -->

  <!-- 這些是跟SEO比較直接的設定、除了能夠讓機器人爬蟲了解資訊外，當你分享網站時，若有跳出分享的網址縮圖，也會顯示出設定的標題、描述跟圖片 -->
  <meta property="fb:admins" content="YourFacebookUsername" />
  <meta property="og:title" content="HTML CheatSheet" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://htmlcheatsheet.com/" />
  <meta
    property="og:image"
    content="https://htmlcheatsheet.com/images/html-cheatsheet.jpg"
  />
  <meta property="og:description" content="A brief page description" />

  <!-- 是設定若你在Apple想將這個網站新增到桌面時顯示的App Icon -->
  <link rel="apple-touch-icon" href="apple-touch-icon.png" />

  <!-- 跟多語系相關的設定、指的是這個網站的原始版本的其他替代版本，然後hreflang是語系 -->
  <link
    rel="alternate"
    hreflang="es"
    href="https://htmlcheatsheet.com/spanish/"
  />

  <!-- import .css檔 -->
  <link rel="stylesheet" href="/styles.css" />

  <!-- import js 檔 -->
  <script src="/script.js"></script>
</head>

Head Tags 是不會出現於網頁視覺畫面上的 tags，它的功用主要是這個網頁的設定、SEO 資訊。

Open Graph

也是跟優化 SEO 有關的設定，跟上面的內容有點重疊。

<head>
  <!-- 這邊就是主要SEO的設定 -->
  <title>The Rock (1996)</title>
  <meta property="og:title" content="Cheat Sheet" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://htmlcheatsheet.com/" />
  <meta property="og:image" content="https://htmlcheatsheet.com/demo.jpg" />

  <!-- 這些是選擇性要加或者不加都可以 -->
  <meta property="og:audio" content="https://htmlcheatsheet.com/track.mp3" />
  <!-- 描述有 meta name="description" 可以取代這行，所以選擇性撰寫 -->
  <meta property="og:description" content="A brief description" />
  <meta property="og:determiner" content="the" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:locale:alternate" content="es_ES" />
  <meta property="og:site_name" content="HTML CheatSheet" />
  <meta property="og:video" content="https://htmlcheatsheet.com/video.swf" />
</head>

.htaccess

最後是這一個項目，主要可以實現包括：資料夾密碼保護、使用者自動重定向、自訂錯誤頁面、更改檔案副檔案名、封禁特定 IP 位址的使用者、只允許特定 IP 位址的使用者、禁止目錄列表，以及使用其他檔案作為 index 檔案等功能。

CSS

正式進入 CSS 章節前，我本來只是想透過CSS Cheatsheet簡單帶過，可是考量到自己本身從高中的夢想就是偏前端視覺的部分，所以決定花比較多時間琢磨 CSS 這一塊，於是我把研讀計畫改為跟著這個Learn CSS - web.dev網站的步驟走。

搭配 TailwindCSS， 可以從廣角的網狀角度切入，因為我本身就喜歡先看假設display這個有幾種 style，然後再深入去瞭解每個 style 的呈現跟用法。搭配 MDN，可以把一些概念講得更透徹，而且也會推薦你其他相關的概念。

我一樣只節錄一些我自己本身不懂的概念。

Box Model

第一個重要的概念就是 Intrinsic size (內部尺寸) vs Extrinsic sizing (外部尺寸)。

我記得這一路來都是一邊實作一邊隨便抄人家的 CSS 來改，早就實作過這兩種概念，但卻不知道它們名稱。

| Intrinsic size (內部尺寸) | Extrinsic sizing (外部尺寸) | | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | 主要是根據元素的內容決定尺寸大小 | 透過 CSS 屬性（例如 width、height、min-width、max-width、min-height 和 max-height）來設置，無論元素的內容多大多寬，外部尺寸就是固定的尺寸。 |

值得注意的是，intrinsic sizing (內部尺寸) 是瀏覽器的 default 設定，內部尺寸通常比外部尺寸來的更彈性。

我個人在刻 CSS 時也比較喜歡採用內部尺寸，除非是一些需要固定長寬以及考量到響應式網站的內容排版，才會去使用外部尺寸，內部尺寸使用好的話，排版跟響應式的縮放是很舒適的。

以下是幾個跟尺寸相關的屬性

  • padding: div 的邊界落在 border box 的部分，padding 就是 div 和內容中間要隔多少空格。值得注意的是如果你有設overflow屬性，那那條 scroll bar 會落在 padding 區域。
  • margin: 是圍繞在 div 外的一圈邊界，一些屬性像是 outline 跟 box-shadow 會佔據 margin 的空間。

通常 <div> 的 default 值是 display:block，但其實 display 有很多不同的 value: 參照TailwindCSS display

而且，每個 HTML element 的 display 都不同，<div>的 default 是block，<li>的 default 是list-item，<span>是inline。

再來是 box-sizing: border-box; vs box-sizing: content-box;

參照 TailwindCSS

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

.my-box {
  box-sizing: border-box;
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

CSS 預設使用 default box-sizing: content-box，所以第一個 css 實際上寬度是 260px，而第二個是 200px (總寬)。

Selector

Selector Type

再來進入 Selector 的概念，基本上本人也只用過幾個，最常用的還是 .class，正所謂 .class 從頭到尾。

  • Universal selector (*): also known as a wildcard—matches any element.
  • Type selector (HTML element): matches a HTML element directly. (就是針對某個 HTML Tag 賦予機關槍式的 style，使某個 HTML Tag 都是同個 style)
  • Class selector (.class): matches any element that has that class applied to it. (A HTML element can have one or more items defined in their class attribute) - 個人很常使用這項，基本上就是寫在 <div class="">，而且一個 class 用空格分開可以寫好多個 class。
  • ID selector (#id): 通常拿來綁跟 JS 有關 (我說我)
  • Attribute selector ([data-type='primary'] or [data-type] without specific value): elements that have a certain HTML attribute, or have a certain value for an HTML attribute (長知識了，很少用)
    • You can use case-sensitive attribute selectors by adding an s operator to your attribute selector.
    • by adding an s: [data-type='primary' s]
    • This means that if a HTML element had a data-type of Primary, instead of primary, it would not get red text. You can do the opposite—case insensitivity—by using an i operator.
  • Grounping selectors: A selector doesn't have to match only a single element. You can group multiple selectors by separating them with commas
  • Complex selectors
  • Compound selectors

Note: Attribute selector

/* A href that contains "example.com" */
[href*="example.com"] {
  color: red;
}

/* A href that starts with https */
[href^="https"] {
  color: green;
}

/* A href that ends with .com */
[href$=".com"] {
  color: blue;
}

Note: Grouping selectors

strong,
em,
.my-class,
[lang] {
  color: red;
}

Pseudo-classes and pseudo-elements

Pseudo-element 我到現在也還是不太會，在後面有個獨立的章節會好好的學。

CSS provides useful selector types that focus on specific platform state, like when an element is hovered, structures inside an element, or parts of an element.

  • Pseudo-classes (:)
  • Pseudo-element (::)

Pseudo-classes

/* Our link is hovered */
/* 只要滑鼠移到link上，就會變效果 */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

Pseudo-element

關於更多的知識，會在後面的章節學到。

/* 就是這個用法還不怎麼會，但是在我的占卜服務裡有用到 */
.my-element::before {
  content: "Prefix - ";
}

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

Note: 要注意的是 Pseudo-element 是使用雙冒號 (::)，可是在古老年代的 css，瀏覽器是支援單冒號寫法，是長這樣 :before and :after，如果你需要支援古老的瀏覽器(例如 IE8)，你需要這樣寫。

/* Selectors with HTML elements */
article p:first-of-type {
  /* Declaration */
  color: red;
  /*Property: Value*/
  font-size: 1.5em;
}

/* Selectors with Class */
.my-css-rule {
}

Complex selectors

我們學了一堆 selectors，但有的時候你還是想要擁有更好掌控 CSS 的技術，你可以選擇 Complex selectors 或者下個章節將學到的 cascade。

  • Combinators (>)
    • Descendant combinator (>)
    • Next sibling combinator (+): 主要是同父元素的下一個元素
    • Subsequent- sibling combinator (~): Instead of a + character however, use a ~ character. How this differs is that an element just has to follow another element with the same parent, rather than being the next element with the same parent. (同父元素，但不一定是下一個元素)
    • Child combinator (>): 指向子元素
/* Descendant combinator */
p strong {
  color: blue;
}

p > strong {
  color: blue;
}

/* Next sibling combinator */
/* 這看起來就好難 */
.top > * + * {
  position: relative;
}

.top > * + *::before {
  content: "";
  width: 100%;
  height: 1.5em;
  background: #ff807b;
  position: absolute;
  bottom: 100%;
  left: 0;
  outline: 1px solid #9d0600;
}

.top * {
  margin-top: 1em;
}

Compound selectors

a.my-class {
  color: red;
}

這個範例是這個 style 效果只會 apply 到 <a class=".my-class">。

未來的章節也會學習到。

本節小課程 - Hidden vs Visibility

關於這個 CSS 的知識點，今天來介紹 Hidden vs Visibility，兩者都跟視覺上的不見或顯示相關。

我們來看一下 TailwindCSS 的官方網站

眼尖的人可以看到關於 hidden 有兩個概念

  • display: none;
  • visibility: hidden;

display: none; 是廣義上的 hidden，大部分的網頁設計，如果透過 css class 或 javascript 去手動加入 hidden，都跟 display: none; 相關，這一行的意思是隱藏整個元素，所以如果有相鄰的其他元素，會因為他的隱藏而變動

抽象概念圖是這樣的

[div1][div2][div3]

假設今天把 div2 設成 display: none;，那會變成以下的樣子

[div1][div3]

相當於整個元素都被移除隱藏掉。

可是如果今天是 visibility 的 visibility: hidden;，則只是讓那個元素不顯示，但他的位置實際還是在的。

所以假設三個 div 位置是這樣

[div1][div2][div3]

將 div2 設成 visibility: hidden;後，長這樣:

[div1][___][div3]

大概就是這樣，這邊用字很容易混淆，但如果有特別被問到，要記得他們不太一樣，或者實際案例需要實作時，可以有兩種不同的隱藏方式。

ABOUT ME

Author Profile

嗨，我是Mina. 一個ENTP奇女子，時常可以隨手拈來創意的Idea，正向､ 活躍且浪漫。是軟體開發工程師､ 部落客，還是多語學習者，喜歡去探索不同的文化跟發明些東東。

@MinaYu Signed

BLOG STATS

Visits:

Visitors:

CATEGORY

GALLERY