2022.10.13 勉強記録

CSS (Codecademy)

Position etc.

• position
  • static (default)
    • the default width is 100%
  • relative
    • positioning relative to the default (static) position
    • it does not overlap with other elements
  • absolute
    • positioning while ignoring the positions of other elements
    • it also ignores the default position of the element
    • specifying absolute only, the element shrinks from the default which covers the entire width 
  • fixed
    • position the element at the fixed part of the webpage REGARDLESS OF SCROLLING (it is like a "freeze" in the Excel sheet)
  • sticky
    • remain in a relative position until the element gets scrolled to the specified position (ex. top: 240px;)
  • z-index
    • to give a depth to the element positioning and decide what element appears in front of the others
    • the default value is 0, and the bigger index value lets the element appear in front of others
• To do
  
  • it might be a good idea to make a comparison chart
  • write a better explanation for position: sticky;  

• Display: to decide how the horizontal space is shared among elements
  • inline
    • to display elements sit right next to each other like inline elements (ex. <a>, <strong>, <em>)
  • block
    • to fill the entire width by an element like some elements (ex. <footer>, <p>, <div>)
  • inline-block
    • to display elements with specific height and width
    • so it is neither like inline (no abundant space around text) nor like block (taking the entire width regardless of the text length)
• Float
• Clear
  • to avoid elements bumping into each other

Color

• types of coloring
  
  • named colors (ex. red, midnightblue, green)
  • RGB
  • HSL
• we can specify "color" and "background-color"
• different types of coloring
  • hex colors (ex. #000000)
  • RGB (ex. rgb() ) to represent the values of the amount of red, green, and blue
  • HSL (hue-saturation-lightness)

    • (image from Codecademy)

  • HSLA: HSL + alpha for opacity (between 0 and 1, where 0 is transparent)

Font

• font-family
  • serif vs. sans-serif (= without serif)
• font-weight
  • keyword values: bold/normal (default)/lighter/bolder
  • numeric values: from 0 to 1000 (bold); 400 is equivalent to "normal"
• font-style
  • italic etc.
• text-transform: uppercase or lowercase
• letter-spacing
• word-spacing
• line-height
• text-align
  • justify: space out text to align with the parent element