tzutzuliu / jquery_practice-css

my_practice_repository

My notes

• CSS Attributes

• display

  • block (ex=>display:block)
  • inline
  • none
  • flex

• position

  • static(由上至下,由左至右,不能被調整位置)
  • relative(可以調整位置)
  • absolute(他可以依附著定位點的容器
  • fixed(定位點是整個格式畫面)
  • top/right/bottom/left

• float & clear

  • float match clear
  • float:right;float:left
  • clear:right;clear:left

• box-model (Margin->Border->Padding->Content)

  • margin

    • margin collapse

  • border

    • border width
    • border color
    • border sides
    • border shorthand
    • Rounded Borders

  • padding

    • padding-top
    • padding-right
    • padding-bottom
    • padding-left

  • width/height

  • Outline

    • Outline Width
    • Outline Color
    • Outline Shorthand
    • Outline Offset

• background

  • background-color
  • background-img ex:( background-image: url("");)
  • background-repeat
  • background-attachment
  • background-position
  • background

• text

  • text-align
  • left/right
  • line-height
  • Text Alignment
  • Text Decoration
  • Text Spacing
  • Text Shadow

• font (Font Property)

  • font-size
  • font-weight
  • color
  • font-family
  • font-style
  • font-variant( normal / small-caps )

• others

  • overflow
  • list-style-type
  • text-decoration

• icon

  • class="fas fa-cloud"
  • 記得有i標籤包起來
  • 後方可加入styley自定義;

• link

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked

• table > tr > td

  • table Borders
  • table size
  • table Alignment
  • table Style
  • table Responsive

• Display

  • div
  • h1 - h6
  • form
  • header
  • footer
  • section
  • aside
  • P
  • ul

• Max-width

• Overflow

  • visible
  • hidden
  • scroll
  • auto

• CSS Layout - float and clear

• The float Propery

• float property can have one of the following values:

  • left
  • right
  • none
  • inherit(較少用)

• The clear Property

  • none
  • left
  • right
  • both (ex->clear:both;)
  • inherit

• inline(span、a、input、img) (display: inline)

  • inline-block(display: inline-block)
  • block(display: block)

• CSS Selector Reference

• https://www.w3schools.com/cssref/css_selectors.php

• CSS Navigation Bar

• A navigation bar is basically a list of links, so using the ul and li elements makes perfect sense:

• 註解掉 通常會用ul & li去包 https://www.w3schools.com/css/css_navbar.asp

• CSS 盡可能還是要從原生的語法開始學起，當然後面有很多分類比如說有預處理器(SASS LESS SCSS)

• CSS屬於原子化型的是 Boostrap tailwind windi

• 額外還有一個CSS是 UNOCSS

Animate_css

• https://animate.style/