in English

ꯔꯤꯕꯨꯠ ꯇꯧꯕꯥ꯫

ꯐꯥꯏꯜ ꯑꯃꯈꯛꯇꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ-ꯁ꯭ꯄꯦꯁꯤꯐꯤꯛ CSS ꯍꯣꯡꯗꯣꯛ-ꯍꯣꯡꯖꯤꯟ ꯇꯧꯕꯒꯤ ꯈꯣꯃꯖꯤꯅꯕꯥ ꯑꯃꯥ ꯑꯣꯏꯔꯤꯕꯥ ꯔꯤꯕꯨꯠ, ꯁꯦꯃꯒꯠꯅꯕꯥ ꯏꯂꯤꯒꯦꯟꯇ, ꯀꯟꯁꯤꯁ꯭ꯇꯦꯟꯇ, ꯑꯃꯁꯨꯡ ꯏꯆꯝ ꯆꯝꯕꯥ ꯕꯦꯖ ꯂꯥꯏꯟ ꯑꯃꯥ ꯄꯤꯅꯕꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯀꯤꯀꯁ꯭ꯇꯥꯔ ꯇꯧꯏ꯫

ꯊꯧꯑꯣꯡ

ꯔꯤꯕꯨꯠ ꯑꯁꯤ ꯅꯣꯔꯃꯦꯂꯥꯏꯖ ꯇꯧꯕꯗꯥ ꯁꯦꯃꯒꯠꯂꯤ, ꯑꯦꯂꯤꯃꯦꯟꯇ ꯁꯦꯂꯦꯛꯇꯔꯁꯤꯡ ꯈꯛꯇꯃꯛ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ HTML ꯑꯦꯂꯤꯃꯦꯟꯇ ꯀꯌꯥꯗꯥ ꯈꯔꯥ ꯑꯣꯄꯤꯅꯤꯌꯟ ꯑꯣꯏꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯄꯤꯔꯤ꯫ ꯑꯍꯦꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯑꯁꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯈꯛꯇꯃꯛ ꯇꯧꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ <table>ꯍꯦꯟꯅꯥ ꯂꯥꯏꯕꯥ ꯕꯦꯖ ꯂꯥꯏꯟ ꯑꯃꯒꯤꯗꯃꯛ ꯁ꯭ꯇꯥꯏꯜ ꯈꯔꯗꯤ ꯔꯤꯕꯨꯠ ꯇꯧꯏ ꯑꯃꯁꯨꯡ ꯃꯇꯨꯡꯗꯥ .table, .table-bordered, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥ ꯄꯤꯔꯤ꯫

ꯔꯤꯕꯣꯠ ꯇꯧꯕꯗꯥ ꯀꯔꯤ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯈꯅꯕꯒꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯒꯥꯏꯗꯂꯥꯏꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯔꯃꯁꯤꯡ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

  • ꯁ꯭ꯀꯦꯂꯦꯕꯜ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯁ꯭ꯄꯦꯁꯤꯡꯒꯤꯗꯃꯛ remsꯒꯤ ꯃꯍꯨꯠꯇꯥ s ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔ ꯗꯤꯐꯣꯜꯇ ꯚꯦꯜꯌꯨ ꯈꯔꯗꯤ ꯑꯄꯗꯦꯠ ꯇꯧꯔꯣ .em
  • ꯊꯤꯡꯖꯤꯜꯂꯨ margin-top. ꯚꯔꯇꯤꯀꯦꯜ ꯃꯥꯔꯖꯤꯅꯁꯤꯡ ꯑꯁꯤ ꯁꯣꯀꯍꯜꯂꯀꯄꯥ ꯌꯥꯏ, ꯃꯗꯨꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯔꯒꯥ ꯃꯈꯥ ꯇꯥꯅꯥ ꯐꯂꯁꯤꯡ ꯄꯤꯕꯥ ꯌꯥꯏ꯫ ꯑꯗꯨꯕꯨ ꯍꯦꯟꯅꯥ ꯃꯔꯨꯑꯣꯏꯕꯗꯤ, ꯃꯥꯏꯀꯩ ꯑꯃꯈꯛꯇꯃꯛ marginꯑꯁꯤ ꯍꯦꯟꯅꯥ ꯂꯥꯏꯕꯥ ꯃꯦꯟꯇꯦꯜ ꯃꯣꯗꯦꯜ ꯑꯃꯅꯤ꯫
  • ꯗꯤꯚꯥꯏꯁ ꯁꯥꯏꯖꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯍꯦꯟꯅꯥ ꯐꯖꯅꯥ ꯁ꯭ꯀꯦꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ, ꯕ꯭ꯂꯣꯛ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯅꯥ sꯒꯤꯗꯃꯛ rems marginꯁꯤꯖꯤꯟꯅꯒꯗꯕꯅꯤ꯫
  • font-ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯁꯤꯡꯒꯤ ꯗꯤꯛꯂꯥꯔꯦꯁꯅꯁꯤꯡ ꯑꯗꯨ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯦꯝꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯊꯝꯃꯨ , inheritꯌꯥꯔꯤꯕꯃꯈꯩ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫

ꯄꯦꯖ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏ꯫

<html>ꯑꯃꯁꯨꯡ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ <body>ꯍꯦꯟꯅꯥ ꯐꯕꯥ ꯄꯦꯖ-ꯋꯥꯏꯗ ꯗꯤꯐꯣꯜꯇꯁꯤꯡ ꯄꯤꯅꯕꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯏ꯫ ꯍꯦꯟꯅꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ:

  • ꯗꯤ box-sizingꯑꯁꯤ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯏꯂꯤꯃꯦꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯁꯦꯠ ꯇꯧꯏ—ꯃꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ *::beforeꯑꯃꯁꯨꯡ *::after, ꯇꯨ border-box. ꯃꯁꯤꯅꯥ ꯄꯦꯗꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯕꯣꯔꯗꯔꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯀꯤ ꯂꯥꯎꯊꯣꯛꯂꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯑꯗꯨ ꯀꯩꯗꯧꯉꯩꯗꯥ ꯍꯦꯅꯒꯠꯍꯟꯗꯅꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯊꯝꯂꯤ꯫
  • font-size, ꯗꯥ ꯕꯦꯖ ꯑꯃꯠꯇꯥ ꯂꯥꯎꯊꯣꯛꯇꯦ <html>, ꯑꯗꯨꯕꯨ 16pxꯂꯧꯁꯤꯜꯂꯤ (ꯕ꯭ꯔꯥꯎꯖꯔ ꯗꯤꯐꯣꯜꯇ)꯫ ꯑꯁꯤ ꯌꯨꯖꯔꯒꯤ ꯄꯁꯟꯗꯁꯤꯡ ꯏꯀꯥꯌꯈꯨꯝꯅꯕꯥ ꯎꯠꯇꯨꯅꯥ ꯑꯃꯁꯨꯡ ꯍꯦꯟꯅꯥ ꯈꯨꯗꯣꯡꯆꯥꯕꯥ ꯌꯥꯕꯥ ꯑꯦꯞꯔꯣꯆ ꯑꯃꯥ ꯁꯣꯌꯗꯅꯥ ꯐꯪꯍꯟꯗꯨꯅꯥ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯐꯖꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯇꯥꯏꯞ-ꯁ꯭ꯀꯦꯂꯤꯡꯒꯤꯗꯃꯛ font-size: 1remꯑꯣꯟ ꯗꯤ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫<body>
  • ꯑꯁꯤꯅꯥ <body>ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ font-family, line-height, ꯑꯃꯁꯨꯡ text-align. ꯃꯁꯤ ꯐꯣꯟꯇ ꯏꯅꯀꯟꯁꯤꯁ꯭ꯇꯦꯟꯁꯁꯤꯡ ꯊꯤꯡꯅꯕꯥ ꯐꯣꯔꯝ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯈꯔꯅꯥ ꯃꯇꯨꯡꯗꯥ ꯏꯅꯍꯦꯔꯤ ꯇꯧꯏ꯫
  • ꯁꯦꯐꯇꯤꯒꯤꯗꯃꯛ, <body>ꯗꯤꯛꯂꯥꯔꯦꯗ ꯑꯃꯥ ꯂꯩꯔꯤ background-color, ꯗꯤꯐꯣꯜꯇ ꯇꯧꯗꯨꯅꯥ #fff.

ꯅꯦꯇꯤꯕ ꯐꯣꯟꯇ ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯥ꯫

ꯗꯤꯐꯣꯜꯇ ꯋꯦꯕ ꯐꯣꯟꯇꯁꯤꯡ (ꯍꯦꯂꯚꯦꯇꯤꯀꯥ ꯅ꯭ꯌꯨ, ꯍꯦꯂꯚꯦꯇꯤꯀꯥ, ꯑꯃꯁꯨꯡ ꯑꯦꯔꯤꯑꯦꯜ) ꯑꯁꯤ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯴ꯗꯥ ꯊꯥꯗꯣꯀꯈ꯭ꯔꯦ ꯑꯃꯁꯨꯡ ꯗꯤꯚꯥꯏꯁ ꯑꯃꯁꯨꯡ ꯑꯣ.ꯑꯦꯁ. ꯁ꯭ꯃꯥꯁꯤꯡ ꯃꯦꯒꯥꯖꯤꯅꯒꯤ ꯑꯥꯔꯇꯤꯀꯜ ꯑꯁꯤꯗꯥ ꯅꯦꯇꯤꯕ ꯐꯣꯟꯇ ꯁ꯭ꯇꯦꯀꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯃꯈꯥ ꯇꯥꯅꯥ ꯄꯥꯕꯤꯌꯨ .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

ꯐꯣꯟꯇ ꯁ꯭ꯇꯦꯛ ꯑꯗꯨꯗꯥ ꯏꯃꯣꯖꯤ ꯐꯣꯟꯇꯁꯤꯡ ꯌꯥꯑꯣꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯀꯃꯟ ꯑꯣꯏꯕꯥ ꯁꯤꯝꯕꯣꯜ/ꯗꯤꯡꯕꯦꯠ ꯌꯨꯅꯤꯀꯣꯗ ꯀꯦꯔꯦꯛꯇꯔ ꯀꯌꯥ ꯃꯆꯨ ꯀꯌꯥꯒꯤ ꯄꯤꯛꯇꯣꯒ꯭ꯔꯥꯐꯁꯤꯡ ꯑꯣꯏꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯒꯅꯤ ꯍꯥꯌꯕꯁꯤ ꯈꯉꯖꯤꯅꯕꯤꯌꯨ꯫ ꯃꯈꯣꯌꯒꯤ ꯃꯑꯣꯡ ꯃꯇꯧ ꯑꯁꯤ ꯕ꯭ꯔꯥꯎꯖꯔ/ꯄ꯭ꯂꯦꯠꯐꯣꯔꯃꯒꯤ ꯅꯦꯇꯤꯕ ꯏꯃꯣꯖꯤ ꯐꯣꯟꯇꯇꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯃꯑꯣꯡ ꯑꯗꯨꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯈꯦꯠꯅꯒꯅꯤ, ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯗꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ colorꯃꯑꯣꯡ ꯑꯃꯠꯇꯅꯥ ꯁꯣꯀꯍꯜꯂꯣꯏ꯫

ꯃꯁꯤ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯑꯃꯁꯨꯡ ꯑꯣꯇꯣꯃꯦꯇꯦꯗ ꯑꯣꯏꯅꯥ ꯏꯅꯍꯦꯔꯤ ꯇꯧꯏ font-familyꯍꯥꯌꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫ <body>ꯒ꯭ꯂꯣꯕꯦꯜ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ , ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ font-familyꯑꯄꯗꯦꯠ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯕꯥ꯫$font-family-base

ꯍꯦꯗꯤꯡ ꯑꯃꯁꯨꯡ ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐꯁꯤꯡ꯫

ꯍꯦꯗꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯄꯨꯝꯅꯃꯛ—ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, <h1>—ꯑꯗꯨꯒꯥ <p>ꯃꯈꯣꯌꯒꯤ margin-topꯂꯧꯊꯣꯛꯅꯕꯥ ꯔꯤꯁꯦꯠ ꯇꯧꯏ꯫ ꯍꯦꯗꯤꯡꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯦ ꯑꯃꯁꯨꯡ ꯐꯖꯅꯥ ꯁ꯭ꯄꯦꯁꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ margin-bottom: .5remꯄꯦꯔꯥꯒ꯭ꯔꯥꯐꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫margin-bottom: 1rem

ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ ꯈꯨꯗꯝ
<h1></h1> ꯑꯩꯆ.꯱. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
<h2></h2> h꯲. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
<h3></h3> h꯳. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
<h4></h4> ꯑꯩꯆ꯴. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
<h5></h5> h꯵. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
<h6></h6> ꯑꯩꯆ꯶. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

ꯂꯤꯁ꯭ꯇꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯂꯤꯁ꯭ꯠ ꯄꯨꯝꯅꯃꯛ— <ul>, <ol>, ꯑꯃꯁꯨꯡ <dl>—ꯃꯈꯣꯌꯒꯤ margin-topꯂꯧꯊꯣꯀꯈ꯭ꯔꯦ ꯑꯃꯁꯨꯡ ꯑꯦ margin-bottom: 1rem. ꯅꯦꯁ꯭ꯇꯦꯗ ꯂꯤꯁ꯭ꯇꯁꯤꯡꯗꯥ margin-bottom.

  • ꯂꯤꯁ꯭ꯠ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯃꯈꯣꯌꯒꯤ ꯃꯊꯛ ꯊꯪꯕꯥ ꯃꯥꯔꯖꯤꯟ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯈ꯭ꯔꯦ꯫
  • ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯒꯤ ꯕꯣꯠꯇꯝ ꯃꯥꯔꯖꯤꯟ ꯑꯗꯨ ꯅꯣꯔꯃꯦꯂꯥꯏꯖ ꯇꯧꯈꯤ꯫
  • ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯇꯁꯤꯡꯗꯥ ꯕꯣꯇꯣꯝ ꯃꯥꯔꯖꯤꯟ ꯂꯩꯇꯦ꯫
    • ꯃꯁꯤꯒꯤ ꯃꯑꯣꯡ ꯑꯁꯤꯅꯥ ꯃꯈꯣꯌꯗꯥ ꯍꯦꯟꯅꯥ ꯏꯚꯦꯟꯇ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡ ꯑꯃꯥ ꯂꯩ꯫
    • ꯃꯔꯨꯑꯣꯏꯅꯥ ꯍꯦꯟꯅꯥ ꯂꯤꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯂꯥꯀꯄꯥ ꯃꯇꯃꯗꯥ꯫
  • ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯄꯦꯗꯤꯡ ꯑꯗꯨꯁꯨ ꯔꯤꯁꯦꯠ ꯇꯧꯈ꯭ꯔꯦ꯫
  1. ꯃꯈꯥꯗꯥ ꯑꯣꯔꯗꯔ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯄꯤꯔꯤ꯫
  2. ꯂꯤꯁ꯭ꯠ ꯑꯥꯏꯇꯦꯝ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫
  3. ꯃꯁꯤꯒꯤ ꯑꯄꯨꯅꯕꯥ ꯃꯤꯠꯌꯦꯡ ꯑꯁꯤ ꯑꯃꯒꯥ ꯑꯃꯒꯥ ꯃꯥꯟꯅꯩ꯫
  4. ꯃꯃꯥꯡꯒꯤ ꯑꯅꯑꯣꯔꯗꯔ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯗꯨꯒꯨꯝꯅꯥ꯫

ꯍꯦꯟꯅꯥ ꯂꯥꯏꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡ, ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯍꯥꯏꯔꯔꯀꯤ, ꯑꯃꯁꯨꯡ ꯍꯦꯟꯅꯥ ꯐꯕꯥ ꯁ꯭ꯄꯦꯁꯤꯡꯒꯤꯗꯃꯛ, ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯇꯁꯤꯡꯗꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯔꯕꯥ marginꯑꯦꯁ. <dd>s ꯔꯤꯁꯦꯠ margin-leftꯇꯧꯕꯥ 0ꯑꯃꯁꯨꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ margin-bottom: .5rem. <dt>ꯑꯦꯁ ꯑꯁꯤ ꯕꯣꯜꯗ ꯇꯧꯏ .

ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯇꯁꯤꯡ꯫
ꯋꯥꯍꯟꯊꯣꯛ ꯄꯤꯅꯕꯒꯤꯗꯃꯛ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
ꯋꯥꯍꯩ
ꯋꯥꯍꯩ ꯑꯁꯤꯒꯤꯗꯃꯛꯇꯥ ꯋꯥꯍꯟꯊꯣꯛ ꯄꯤꯕꯥ꯫
ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯋꯥꯍꯩ ꯑꯁꯤꯒꯤ ꯑꯅꯤꯁꯨꯕꯥ ꯋꯥꯍꯟꯊꯣꯛ ꯑꯃꯥ꯫
ꯑꯇꯣꯞꯄꯥ ꯋꯥꯍꯟꯊꯣꯛ ꯑꯃꯅꯤ꯫
ꯑꯇꯣꯞꯄꯥ ꯋꯥꯍꯩ ꯑꯁꯤꯒꯤ ꯋꯥꯍꯟꯊꯣꯛ꯫

ꯄ꯭ꯔꯤꯐꯣꯔꯃꯦꯠ ꯇꯧꯔꯕꯥ ꯇꯦꯛꯁꯠ꯫

<pre>ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯁꯤ ꯃꯁꯤꯒꯤ ꯂꯧꯊꯣꯛꯅꯕꯥ margin-topꯑꯃꯁꯨꯡ remꯃꯁꯤꯒꯤ margin-bottom.

.ꯈꯨꯗꯝ-ꯏꯂꯤꯃꯦꯟꯇ { .
  ꯃꯥꯔꯖꯤꯟ-ꯕꯣꯇꯣꯝ: ꯱ꯔꯦꯝ;
} .

ꯇꯦꯕꯂꯁꯤꯡ꯫

ꯇꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯁ꯭ꯇꯥꯏꯜ <caption>ꯑꯦꯁ, ꯀꯣꯂꯥꯞꯁ ꯕꯣꯔꯗꯔꯁꯤꯡꯗꯥ ꯈꯔꯥ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯏ, ꯑꯃꯁꯨꯡ text-alignꯄꯨꯝꯅꯃꯛꯇꯥ ꯂꯦꯞꯄꯥ ꯂꯩꯇꯅꯥ ꯁꯣꯏꯗꯅꯥ ꯊꯝꯂꯤ꯫ ꯉꯃꯈꯩꯁꯤꯡ, ꯄꯦꯗꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥꯒꯤ ꯑꯍꯦꯅꯕꯥ ꯑꯍꯣꯡꯕꯥ ꯑꯁꯤ ꯀ꯭ꯂꯥꯁ .tableꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯏ .

ꯃꯁꯤ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯕꯜ ꯑꯃꯅꯤ, ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯋꯥꯐꯃꯁꯤꯡ ꯑꯁꯤ ꯐꯣꯡꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ ꯃꯁꯤꯒꯤ ꯀꯦꯄꯁꯅꯅꯤ꯫
ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ ꯇꯦꯕꯜ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫
ꯇꯦꯕꯜ ꯁꯦꯜ꯫ ꯇꯦꯕꯜ ꯁꯦꯜ꯫ ꯇꯦꯕꯜ ꯁꯦꯜ꯫ ꯇꯦꯕꯜ ꯁꯦꯜ꯫
ꯇꯦꯕꯜ ꯁꯦꯜ꯫ ꯇꯦꯕꯜ ꯁꯦꯜ꯫ ꯇꯦꯕꯜ ꯁꯦꯜ꯫ ꯇꯦꯕꯜ ꯁꯦꯜ꯫
ꯇꯦꯕꯜ ꯁꯦꯜ꯫ ꯇꯦꯕꯜ ꯁꯦꯜ꯫ ꯇꯦꯕꯜ ꯁꯦꯜ꯫ ꯇꯦꯕꯜ ꯁꯦꯜ꯫

ꯐꯣꯔꯃꯁꯤꯡ꯫

ꯍꯦꯟꯅꯥ ꯂꯥꯏꯕꯥ ꯕꯦꯖ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯤꯗꯃꯛ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯐꯣꯔꯝ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯔꯤꯕꯣꯠ ꯇꯧꯈ꯭ꯔꯦ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯊꯣꯏꯗꯣꯀꯄꯥ ꯑꯍꯣꯡꯕꯥ ꯈꯔꯥꯅꯤ:

  • <fieldset>s ꯑꯁꯤ ꯉꯃꯈꯩ, ꯄꯦꯗꯤꯡ, ꯅꯠꯠꯔꯒꯥ ꯃꯥꯔꯖꯤꯟ ꯂꯩꯇꯦ ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯈꯣꯌ ꯑꯁꯤ ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯏꯅꯄꯨꯠ ꯅꯠꯠꯔꯒꯥ ꯏꯅꯄꯨꯠ ꯀꯥꯡꯂꯨꯄꯁꯤꯡꯒꯤ ꯔꯦꯄꯔ ꯑꯣꯏꯅꯥ ꯐꯖꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫
  • <legend>s, ꯐꯤꯜꯗꯁꯦꯇꯒꯨꯝꯅꯥ, ꯃꯈꯜ ꯀꯌꯥꯒꯤ ꯍꯦꯗꯤꯡ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯎꯠꯅꯕꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯦꯃꯗꯣꯀꯈ꯭ꯔꯦ꯫
  • <label>s ꯑꯁꯤ ꯑꯦꯞꯂꯥꯏ display: inline-blockꯇꯧꯕꯥ ꯌꯥꯅꯕꯥ ꯁꯦꯠ ꯇꯧꯏ꯫margin
  • <input>s, <select>s, <textarea>s, ꯑꯃꯁꯨꯡ <button>s ꯑꯁꯤ ꯑꯌꯥꯝꯕꯅꯥ ꯅꯣꯔꯃꯦꯂꯥꯏꯖꯅꯥ ꯑꯦꯗ꯭ꯔꯦꯁ ꯇꯧꯏ, ꯑꯗꯨ���ꯨ ꯔꯤꯕꯣꯠꯅꯥ ꯃꯈꯣꯌꯒꯤ marginꯑꯃꯁꯨꯡ ꯁꯦꯠ ꯇꯧꯏ line-height: inherit, ꯁꯨ꯫
  • <textarea>s ꯑꯁꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯔꯤꯁꯥꯏꯖ ꯇꯧꯕꯅꯥ ꯑꯌꯥꯝꯕꯅꯥ ꯄꯦꯖ ꯂꯦꯑꯥꯎꯠ “ꯕ꯭ꯔꯦꯛ” ꯇꯧꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯔꯤꯁꯥꯏꯖ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯈꯛꯇꯃꯛ ꯑꯣꯏꯅꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯏ꯫
  • <button>ꯑꯦꯁ ꯑꯃꯁꯨꯡ <input>ꯕꯇꯟ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯅꯥ cursor: pointerꯃꯇꯝ :not(:disabled).

ꯑꯍꯣꯡꯕꯁꯤꯡ ꯑꯁꯤ, ꯑꯃꯁꯨꯡ ꯃꯁꯤꯗꯒꯤ ꯍꯦꯅꯕꯥ, ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯂꯤꯖꯦꯟꯗꯥ꯫

꯱꯰꯰ ꯑꯣꯏꯈꯤ꯫

ꯕꯇꯅꯁꯤꯡꯗꯥ ꯄꯣꯏꯟꯇꯔꯁꯤꯡ꯫

ꯔꯤꯕꯣꯠ role="button"ꯇꯧꯕꯗꯥ ꯗꯤꯐꯣꯜꯇ ꯀꯔꯁꯔ ꯑꯗꯨ pointer. ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯏꯟꯇꯔꯦꯛꯇꯤꯕ ꯑꯣꯏ ꯍꯥꯌꯕꯥ ꯇꯥꯀꯄꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠ ꯑꯁꯤ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯃꯁꯤꯒꯤ ꯊꯧꯗꯥꯡ ꯑꯁꯤ <button>ꯏꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯃꯊꯧ ꯇꯥꯗꯦ, ꯃꯈꯣꯌꯅꯥ ꯃꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ cursorꯑꯍꯣꯡꯕꯥ ꯑꯃꯥ ꯐꯪꯏ꯫

ꯅꯟ-ꯕꯇꯟ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯕꯇꯟ꯫
<span role="button" tabindex="0">Non-button element button</span>

ꯃꯤꯁꯛ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ꯫

ꯂꯩꯐꯝ

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯁꯤ <address>ꯕ꯭ꯔꯥꯎꯖꯔꯒꯤ ꯗꯤꯐꯣꯜꯇ font-styleꯑꯗꯨ . ꯑꯁꯤꯁꯨ ꯍꯧꯖꯤꯛ ꯏꯅꯍꯦꯔꯤ ꯇꯧꯔꯦ, ꯑꯃꯁꯨꯡ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫ s ꯑꯁꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯀꯄꯥ ꯏꯄꯥ-ꯏꯄꯨꯒꯤ (ꯅꯠꯠꯔꯒꯥ ꯊꯕꯛꯀꯤ ꯃꯄꯨꯡ ꯑꯣꯏꯕꯥ ꯕꯣꯗꯤ ꯑꯃꯒꯤ) ꯀꯟꯇꯦꯛꯇ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯄꯤꯅꯕꯒꯤꯗꯃꯛꯇꯅꯤ꯫ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯏꯅꯁꯤꯡ ꯂꯣꯏꯁꯤꯟꯗꯨꯅꯥ ꯐꯣꯔꯃꯦꯇꯤꯡ ꯉꯥꯛꯇꯨꯅꯥ ꯊꯝꯃꯨ .italicnormalline-heightmargin-bottom: 1rem<address><br>

ꯇ꯭ꯕꯤꯇꯔ, ꯏꯅꯛ
꯱꯳꯵꯵ ꯃꯥꯔꯀꯦꯠ ꯁꯦꯟꯇꯔ, ꯁꯨꯏꯠ ꯹꯰꯰
ꯁꯥꯟ ꯐ꯭ꯔꯥꯟꯁꯤꯁ꯭ꯀꯣ, ꯁꯤ.ꯑꯦ.꯹꯴꯱꯰꯳
ꯄꯤ: (꯱꯲꯳) ꯴꯵꯶-꯷꯸꯹꯰꯫
ꯃꯄꯨꯡ ꯐꯥꯕꯥ ꯃꯤꯡ
[email protected]

ꯕ꯭ꯂꯣꯀꯀꯣꯠ ꯇꯧꯕꯥ꯫

ꯕ꯭ꯂꯣꯀꯀꯣꯠꯁꯤꯡꯗꯥ ꯗꯤꯐꯣꯜꯇ marginꯑꯁꯤ 1em 40px, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯗꯨ 0 0 1remꯑꯇꯣꯞꯄꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯥ ꯍꯦꯟꯅꯥ ꯆꯨꯅꯕꯥ ꯋꯥꯐꯝ ꯑꯃꯒꯤꯗꯃꯛ ꯔꯤꯁꯦꯠ ꯇꯧꯏ꯫

ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯣꯠ ꯑꯃꯥ, ꯕ꯭ꯂꯣꯀꯀꯣꯠ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯌꯥꯑꯣꯕꯥ꯫

ꯁꯣꯔꯁ ꯇꯥꯏꯇꯂꯗꯥ ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯤ꯫

ꯏꯅꯂꯥꯏꯟ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯁꯤꯅꯥ <abbr>ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐ ꯇꯦꯛꯁꯀꯤ ꯃꯔꯛꯇꯥ ꯃꯁꯛ ꯊꯣꯀꯄꯥ ꯑꯣꯏꯍꯟꯅꯕꯥ ꯕꯦꯁꯤꯛ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯐꯪꯏ꯫

ꯅꯨꯜꯂꯥ ꯑꯦꯠꯔ ꯚꯤꯇꯥꯏ ꯏꯂꯤꯠ ꯂꯤꯕꯦꯔꯣ, ꯑꯦ ꯐꯥꯔꯦꯠꯔꯥ ꯑꯣꯒ꯫

ꯁꯝꯂꯞꯄ ꯋꯥꯔꯣꯜ

cursorꯁꯣꯃꯥꯔꯤꯗꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ text, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯗꯨ ꯔꯤꯁꯦꯠ pointerꯇꯧꯗꯨꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯀ꯭ꯂꯤꯛ ꯇꯧꯗꯨꯅꯥ ꯏꯟꯇꯔꯦꯛꯇ ꯇꯧꯕꯥ ꯌꯥꯏ ꯍꯥꯌꯕꯥ ꯐꯣꯡꯗꯣꯛꯅꯕꯥ꯫

ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯜ ꯈꯔꯥ꯫

ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ꯫

ꯃꯁꯤꯗꯒꯤꯁꯨ ꯍꯦꯟꯅꯥ ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯁꯤꯡ꯫

ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯍꯦꯟꯅꯥ ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯁꯤꯡ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ꯫

HTML5 [hidden]ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯂꯩ꯫

HTML5ꯅꯥ ꯑꯅꯧꯕꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯃꯥ[hidden] ꯍꯥꯄꯆꯤꯜꯂꯤ , ꯃꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯥꯏꯜ display: noneꯇꯧꯏ꯫ PureCSS ꯗꯒꯤ ꯋꯥꯈꯜꯂꯣꯟ ꯑꯃꯥ ꯂꯧꯗꯨꯅꯥ , ꯑꯩꯈꯣꯌꯅꯥ ꯃꯁꯤꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯁꯤꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯍꯣꯡꯕꯥ ꯄꯨꯔꯛꯇꯨꯅꯥ ꯃꯁꯤꯒꯤ ꯑꯁꯣꯏꯕꯥ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯑꯣꯚꯔꯔꯥꯏꯗ [hidden] { display: none !important; }ꯇꯧꯗꯅꯕꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯒꯅꯤ꯫ displayꯑꯥꯏ.ꯏ.꯱꯰ꯅꯥ ꯅꯦꯇꯤꯕ ꯑꯣꯏꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗ꯭ꯔꯤꯉꯩꯗꯥ [hidden], ꯑꯩꯈꯣꯌꯒꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯗꯤꯛꯂꯥꯔꯦꯁꯟ ꯑꯁꯤꯅꯥ ꯁꯃꯁ꯭ꯌꯥ ꯑꯗꯨꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯂꯥꯀꯁꯤꯜꯂꯤ꯫

<input type="text" hidden>
jQuery ꯏꯅꯀꯃꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫

[hidden]$(...).hide()jQuery's ꯑꯃꯁꯨꯡ $(...).show()ꯃꯦꯊꯗꯁꯤꯡꯒꯥ ꯀꯣꯟꯅꯅꯥ ꯆꯠꯅꯕꯥ ꯌꯥꯗꯦ꯫ ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯍꯧꯖꯤꯛ ꯃꯔꯨꯑꯣꯏꯅꯥ ꯏꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ [hidden]ꯃꯦꯅꯦꯖ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯑꯇꯣꯞꯄꯥ ꯇꯦꯛꯅꯤꯀꯁꯤꯡꯒꯤ ꯃꯊꯛꯇꯥ ꯑꯦꯟꯗꯣꯔꯁ ꯇꯧꯗꯦ꯫display

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯚꯤꯖꯤꯕꯤꯂꯤꯇꯤ ꯑꯗꯨ ꯁꯨꯞꯅꯒꯤ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯥ, ꯃꯗꯨꯒꯤ ꯑꯔꯊꯗꯤ ꯃꯁꯤꯒꯤ displayꯃꯣꯗꯤꯐꯥꯏꯗ ꯇꯧꯗ꯭ꯔꯤ ꯑꯃꯁꯨꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯗꯣꯛꯌꯨꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯐ꯭ꯂꯣꯗꯥ ꯑꯀꯥꯌꯕꯥ ꯄꯤꯕꯥ ꯌꯥꯏ, ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫.invisible