CSS / Implement Component - A

[ericltw]

Introduction to CSS

CSS是一種stylesheet language，目的是描述HTML / XML的呈現(實際上，CSS經過parse，將style附加到DOM node)。也就是HTML定義了structure，而CSS在structure上添加style。

• Applying CSS to HTML

  • External stylesheet
  • Internal stylesheet
  • Inline styles

• Anatomy of

  

  The whole structure is called a rule set.

• Selectors

  selector的目的在於將CSS style挷定HTML element。

  Different types of selectors

  • Simple

  • Element selector(also called tag or type selector).

    E.g. p selects <p>

  • ID selector

    my-id selects <p id="my-id">

  • Class selector

    .my-class selects <p class="my-class">

  • Attribute selector

    The element(s) on the page with the specified attribute. E.g. img[src] selects <img src="myimage.jpeg"> but not <img>

  • Combinators

  • Descendant combinator

    The space combinator selects nodes that are descendant combinators of the first element. E.g. div span.

  • Child combinator

    The > combinator selects nodes that are direct children of the first elements. E.g. ui > li.

  • General sibling combinator

    The ~ combinator selects sibling. This means that the second element follows the first, and both share the same parent. E.g. div ~ span.

  • Adjacent sibling combinator

    The + combinator select adjacent siblings. This means the second element directly follow by the first, and both share the same parent.

  • Pseudo

  • Pseudo-class selector

    The specified element(s), but only when in the specified state(e.g. being hovered over). E.g. a:hover selects <a> when mouse pointer is hovering the link.

  • Pseudo-element selector

    A selector that lets you style specific part of the selected element(s). E.g. p::first-letter.

  Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

• How does CSS actually work?

  

  1. Browser載入HTML
  2. Parse HTML and create DOM. DOM存在於記憶體，代表document。
  3. 載入CSS
  4. Attach style to DOM node.

• Inheritance

  Inheritance指的是，當element沒有設定屬性質時，parent element的CSS屬性值由child element所繼承。某些CSS property在沒有設定值得情況下，預設繼承parent element的屬性值，如：color, font-family，某些則不會，如：width。

  Controlling inheritance

  所有CSS property都有三個basic value，分別是inherit, initial, and unset:

  • inherit

    Get value from the parent element.

  • initial

  The default value for the property (the browser default).

  • unset // TODO: 實際測試，width不滿足定義。

  可能是inherit or initial，如果parent element有匹配的值，則為inherit否則為initial。

• Cascade

  cascade指的是當有多個來源值要設置到某個element的某個屬性時，透過cascade的機制，決定哪一個來源值要設置於element。cascade的機制主要由三個大項做判斷：

  • Origin & Importance
  • Selector Specificity
  • Order of appearance

  Original & Importance

  • User-Agent / Important
  • User / Important
  • Author / Important
  • CSS Animation (@keyframes)
  • Author / Normal
  • User / Normal
  • User-Agent / Normal

  Selector specificity

  • Inlines styles
  • ID selectors
  • Class / pseudo-selectors
  • Type selectors / pseudo-elements

  Order of appearance

  The declaration that comes last in the source code wins.

• Value and unit

  • Length

  • Absolute length units - pt / px...

  • Relative length units - em / vw / vh...

  • Percentage - %

  • Color // TODO

  • Images // TODO

  • Position( for position an item)

  與position property不同。

  • String and identifier
  • Identifier - red, black...
  • String - e.g. when specifying generated content.
  • Function
  • rgba()
  • hsl()
  • url()

[ericltw]

Styling text

• CSS property

  用於text設置樣式的CSS properties主要分為兩大類:

  • Font styles

  • Color

  • Font family

  • Font size

  • Font style

    用於開啟或關閉斜體文本。

  • Font weight

    允許設置轉換的字體，uppercase, lowercase...

  • Text decoration

    用於文本裝飾，underline, overline...

  • Text drop shadow

  • Text layout styles

  • Text alignment

  • Line height

  • Letter and word spacing

  Reference

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals

• Styling list // TODO

  Reference

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists

• Styling link // TODO

  Reference

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links

• Web fonts // TODO

  Reference

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts

[ericltw]

CSS building blocks

• The box model

  • Display property

  • Outer - block / inline boxes

  • Inner - flex / grid...

  • Box model

  • Content box

    The content area, which can be size with width property / height property

  • Padding box

    padding property

  • Border

    border property

  • Margin

    margin property

  Standard box model

  .box {
    width: 350px;
    height: 150px;
    margin: 25px;
    padding: 25px;
    border: 5px solid black;
  }

  

  Reference

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

• Background & Border // TODO

  Reference

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

• Handling different text direction // TODO

  Reference

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions

• Overflow content

  Reference

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content

• Sizing item in CSS

  Reference

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS

• Image, media, and form elements // TODO

  Reference

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements

• Styling table // TODO

  Reference

  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables

[ericltw]

Organizing CSS code

organizing CSS code的目的在於增加CSS code的維護性。以下介紹兩種組織CSS code的方式：

• OOCSS

  CSS Object

  CSS object指的是repeating visual pattern，可以抽象為HTML, CSS, JavaScript，在app中重複使用。

  Two main principle of OOCSS

  • Separation of structure from skin

  structure指的是像是height, width, margin這種property，而skin指的是像是color, font, shadow這種property。

  • Separation of containers and content

  避免使用location-dependent styles。

  OOCSS沒有建立class的命名規則，也沒有使用tag或id的規定，因此，BEM被認為是OOCSS的補充。

• BEM

  BEM代表Block, Element與Modifiers：

  • Block

  Block指的是獨立的omponent。如: header。

  • Element

  Element屬於某個特定的block，代表block的某個特定部份。如：header__logo。

  • Modifiers

  在block或是element進行修飾。如：header__logo--active。

Reference

• https://github.com/stubbornella/oocss/wiki
• https://medium.com/@Intelygenz/how-to-organize-your-css-with-oocss-bem-smacss-a2317fa083a7

[ericltw]

CSS Layout

Normal Flow

normal flow指的是當不設置任何CSS layout style時，瀏覽器默認情況下如何佈局HTML頁面 (block / inline elements)。當使用CSS layout style，代表你正在將改變默認的HTML頁面布局。

Writing Mode

定義了inline base direction和block flow direction。

CSS Layout Style

• Display

  主要定義兩個部份：

  • 是否呈現
  • 如何布局（內部 / 外部）

• Floats

• Position

• Table layout

• Multi-column layout

Display

display-outside

• inline

  • 特性
  • respect水平方向的padding和margin，not respect垂直方向的padding和margin。
  • 不能設置width和height。
  • element前後不生成換行（足夠空間的狀況下）。
  • 應用
  • 文字串中的element

• block

  • 特性
  • respect所有property（width, height, padding, margin）。
  • 預設寬度為parent 100%寬度。
  • element前後生成換行（不管空間是否足夠）。

display-inside

• flex

  • 介紹

  flexbox是針對row或column的一維布局方法，flexbox會根據實際狀況做拉伸或收縮。

• grid

  • 介紹

  grid是針對二維的布局方法，與flexbox相同，會根據實際狀況最拉伸或收縮。

• table

display-listitem

• list-item

display-legacy

• inline-block

  • 特性

  • respect所有property（width, height, padding, margin）。

  • element前後不生成換行（足夠空間的情況下）。

  • Reference

  • Align inline-block with vertical-align

    https://codepen.io/edge0703/pen/iHJuA

Float

• 介紹

  在text block中float圖片。

Positioning

基於basic document flow behavior做element呈現位置的修正。

• static

  每個element的預設值。

• relative

  element呈現的位置會相對於原本element應該呈現的位置。

• absolute

  基於上一個relative, absolute parent位置，能夠讓element程現在任何位置。

• fixed

  將element固定於相對browser viewport的位置，不因畫面scroll而改變位置。

display與position的差異在於，display著重在大區塊的佈局，而position是在display的基礎下，對element的位置進行修飾，以能夠更精準的控制element的位置，這也是為什麼position property時常會搭配像是top, left的property共同使用，但display沒有。

Reference

• display | CSS-Tricks

  https://css-tricks.com/almanac/properties/d/display/

• display | Mozilla

• https://developer.mozilla.org/en-US/docs/Web/CSS/display

• CSS display: inline vs inline-block

  https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block

• A Complete Guide to Flexbox

  https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-basics

• A Complete Guide to Grid

  https://css-tricks.com/snippets/css/complete-guide-grid/

[ericltw]

white-space

介紹

決定如何處理element的空白。

Property

• normal

  連續空白視為一個空白，必要時文字會自動換行。

• nowrap

  連續空白視為一個空白，文字不會換行，直到遇到<br>標記。

• pre

  連續空白視為多個空白，文字不會換行，直到遇到<br>標記。

• inherit

• initial

overflow

介紹

overflow property決定如果內容溢出element box時會發生什情況。

Property

• visible

  內容超出element box時不會被剪裁。

• hidden

  溢出的內容將被隱藏。

• scroll

  能夠滾動瀏覽隱藏內容 (必定顯示兩個scroll bar)。

• auto

  能夠滾動瀏覽隱藏內容 (可能只顯示一個scroll bar)。

• initial

  使用default value，visible。

• inherit

  設置為parent element的值。

text-overflow

介紹

設置如何向用戶發送隱藏溢出內容的信號，僅當container's overflow property值設為hidden, scroll, auto時才可能會發生text overflow。

Property

• clip

  預設值，直接裁切。

• ellipsis

  渲染...

• string

  渲染給定的字串。

• initial

• inherit

Reference

• white-space | Mozilla

  https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

• overflow | CSS-Tricks

  https://css-tricks.com/almanac/properties/o/overflow/

• text-overflow | CSS-Tricks

  https://css-tricks.com/almanac/properties/t/text-overflow/

[ericltw]

https://wcc723.github.io/css/2017/07/21/css-flex/