Advanced CSS

Table of Contents

Recap

[toc]

absolute vs flexbox vs grid

px vs vh

Drop-in CSS

[toc]

steps

เราสามารถใช้ Drop-in CSS (เช่น Water.css: drop-in collection of CSS) แทน CSS เดิมได้ดังนี้

  1. ใน portfolio.html จากเดิมที่ใช้
    <link href="styles.css" rel="stylesheet" />
    ภายใน tag <head> ให้ใช้
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
    แล้ว save file
  2. หน้าตาของเว็บไซต์เราจะเป็นประมาณนี้

Tailwind CSS (Semantic CSS)

[toc]

steps

เราสามารถใช้ Tailwind CSS แทน CSS เดิมได้ดังนี้

  1. ใน portfolio.html จากเดิมที่ใช้
    <link href="styles.css" rel="stylesheet" />
    ภายใน tag <head> ให้ใช้
    <script src="https://cdn.tailwindcss.com"></script>
    แล้ว save file
  2. หน้าตาของเว็บไซต์เราจะเป็นประมาณนี้
  3. ทดสอบ class ต่าง ๆ ของ Tailwind CSS ได้เช่นการใส่
    <h2 class="text-2xl">Heading 2</h2>
    ซึ่ง text-2xl เป็นตัวอย่าง class ที่เอาไว้ปรับ Font Size ด้วย Tailwind CSS
  4. หากใส่ class ได้ครบแล้วจะสามารถมีหน้าตาแบบ HTML + Tailwind CSS ได้