ꯔꯤꯕꯨꯠ ꯇꯧꯕꯥ꯫
ꯐꯥꯏꯜ ꯑꯃꯈꯛꯇꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ-ꯁ꯭ꯄꯦꯁꯤꯐꯤꯛ CSS ꯍꯣꯡꯗꯣꯛ-ꯍꯣꯡꯖꯤꯟ ꯇꯧꯕꯒꯤ ꯈꯣꯃꯖꯤꯅꯕꯥ ꯑꯃꯥ ꯑꯣꯏꯔꯤꯕꯥ ꯔꯤꯕꯨꯠ, ꯁꯦꯃꯒꯠꯅꯕꯥ ꯏꯂꯤꯒꯦꯟꯇ, ꯀꯟꯁꯤꯁ꯭ꯇꯦꯟꯇ, ꯑꯃꯁꯨꯡ ꯏꯆꯝ ꯆꯝꯕꯥ ꯕꯦꯖ ꯂꯥꯏꯟ ꯑꯃꯥ ꯄꯤꯅꯕꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯀꯤꯀꯁ꯭ꯇꯥꯔ ꯇꯧꯏ꯫
ꯊꯧꯑꯣꯡ
ꯔꯤꯕꯨꯠ ꯑꯁꯤ ꯅꯣꯔꯃꯦꯂꯥꯏꯖ ꯇꯧꯕꯗꯥ ꯁꯦꯃꯒꯠꯂꯤ, ꯑꯦꯂꯤꯃꯦꯟꯇ ꯁꯦꯂꯦꯛꯇꯔꯁꯤꯡ ꯈꯛꯇꯃꯛ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ HTML ꯑꯦꯂꯤꯃꯦꯟꯇ ꯀꯌꯥꯗꯥ ꯈꯔꯥ ꯑꯣꯄꯤꯅꯤꯌꯟ ꯑꯣꯏꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯄꯤꯔꯤ꯫ ꯑꯍꯦꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯑꯁꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯈꯛꯇꯃꯛ ꯇꯧꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ <table>
ꯍꯦꯟꯅꯥ ꯂꯥꯏꯕꯥ ꯕꯦꯖ ꯂꯥꯏꯟ ꯑꯃꯒꯤꯗꯃꯛ ꯁ꯭ꯇꯥꯏꯜ ꯈꯔꯗꯤ ꯔꯤꯕꯨꯠ ꯇꯧꯏ ꯑꯃꯁꯨꯡ ꯃꯇꯨꯡꯗꯥ .table
, .table-bordered
, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥ ꯄꯤꯔꯤ꯫
ꯔꯤꯕꯣꯠ ꯇꯧꯕꯗꯥ ꯀꯔꯤ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯈꯅꯕꯒꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯒꯥꯏꯗꯂꯥꯏꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯔꯃꯁꯤꯡ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:
- ꯁ꯭ꯀꯦꯂꯦꯕꯜ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯁ꯭ꯄꯦꯁꯤꯡꯒꯤꯗꯃꯛ
rem
sꯒꯤ ꯃꯍꯨꯠꯇꯥ s ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔ ꯗꯤꯐꯣꯜꯇ ꯚꯦꯜꯌꯨ ꯈꯔꯗꯤ ꯑꯄꯗꯦꯠ ꯇꯧꯔꯣ .em
- ꯊꯤꯡꯖꯤꯜꯂꯨ
margin-top
. ꯚꯔꯇꯤꯀꯦꯜ ꯃꯥꯔꯖꯤꯅꯁꯤꯡ ꯑꯁꯤ ꯁꯣꯀꯍꯜꯂꯀꯄꯥ ꯌꯥꯏ, ꯃꯗꯨꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯔꯒꯥ ꯃꯈꯥ ꯇꯥꯅꯥ ꯐꯂꯁꯤꯡ ꯄꯤꯕꯥ ꯌꯥꯏ꯫ ꯑꯗꯨꯕꯨ ꯍꯦꯟꯅꯥ ꯃꯔꯨꯑꯣꯏꯕꯗꯤ, ꯃꯥꯏꯀꯩ ꯑꯃꯈꯛꯇꯃꯛmargin
ꯑꯁꯤ ꯍꯦꯟꯅꯥ ꯂꯥꯏꯕꯥ ꯃꯦꯟꯇꯦꯜ ꯃꯣꯗꯦꯜ ꯑꯃꯅꯤ꯫ - ꯗꯤꯚꯥꯏꯁ ꯁꯥꯏꯖꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯍꯦꯟꯅꯥ ꯐꯖꯅꯥ ꯁ꯭ꯀꯦꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ, ꯕ꯭ꯂꯣꯛ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯅꯥ sꯒꯤꯗꯃꯛ
rem
smargin
ꯁꯤꯖꯤꯟꯅꯒꯗꯕꯅꯤ꯫ font
-ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯁꯤꯡꯒꯤ ꯗꯤꯛꯂꯥꯔꯦꯁꯅꯁꯤꯡ ꯑꯗꯨ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯦꯝꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯊꯝꯃꯨ ,inherit
ꯌꯥꯔꯤꯕꯃꯈꯩ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫
ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫
v5.1.1ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫
v5.1.1ꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ @import
ꯑꯩꯈꯣꯌꯒꯤ CSS ꯕꯟꯗꯜ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯃꯊꯧ ꯇꯥꯕꯥ s ꯁ꯭ꯇꯦꯟꯗꯔꯗꯥꯏꯖ ꯇꯧꯈꯤ ( bootstrap.css
, bootstrap-reboot.css
, ꯑꯃꯁꯨꯡ bootstrap-grid.css
ꯌꯥꯑꯣꯍꯟꯅꯕꯥ _root.scss
. ꯃꯁꯤꯅꯥ ꯕꯟꯗꯜ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯂꯦꯚꯦꯜ CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯤ :root
, ꯃꯈꯣꯌꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯀꯌꯥ ꯌꯥꯝꯅꯥ ꯕꯟꯗꯜ ꯑꯗꯨꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯌꯦꯡꯗꯅꯥ꯫ ꯑꯔꯣꯏꯕꯗꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯵ꯅꯥ ꯃꯈꯥ ꯇꯥꯅꯥ ꯆꯠꯊꯒꯅꯤ꯫ ꯃꯇꯃꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯍꯦꯅꯕꯥ CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫
ꯄꯦꯖ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏ꯫
<html>
ꯑꯃꯁꯨꯡ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ <body>
ꯍꯦꯟꯅꯥ ꯐꯕꯥ ꯄꯦꯖ-ꯋꯥꯏꯗ ꯗꯤꯐꯣꯜꯇꯁꯤꯡ ꯄꯤꯅꯕꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯏ꯫ ꯍꯦꯟꯅꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ:
- ꯗꯤ
box-sizing
ꯑꯁꯤ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯏꯂꯤꯃꯦꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯁꯦꯠ ꯇꯧꯏ—ꯃꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ*::before
ꯑꯃꯁꯨꯡ*::after
, ꯇꯨborder-box
. ꯃꯁꯤꯅꯥ ꯄꯦꯗꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯕꯣꯔꯗꯔꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯀꯤ ꯂꯥꯎꯊꯣꯛꯂꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯑꯗꯨ ꯀꯩꯗꯧꯉꯩꯗꯥ ꯍꯦꯅꯒꯠꯍꯟꯗꯅꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯊꯝꯂꯤ꯫font-size
, ꯗꯥ ꯕꯦꯖ ꯑꯃꯠꯇꯥ ꯂꯥꯎꯊꯣꯛꯇꯦ<html>
, ꯑꯗꯨꯕꯨ16px
ꯂꯧꯁꯤꯜꯂꯤ (ꯕ꯭ꯔꯥꯎꯖꯔ ꯗꯤꯐꯣꯜꯇ)꯫ ꯑꯁꯤ ꯌꯨꯖꯔꯒꯤ ꯄꯁꯟꯗꯁꯤꯡ ꯏꯀꯥꯌꯈꯨꯝꯅꯕꯥ ꯎꯠꯇꯨꯅꯥ ꯑꯃꯁꯨꯡ ꯍꯦꯟꯅꯥ ꯈꯨꯗꯣꯡꯆꯥꯕꯥ ꯌꯥꯕꯥ ꯑꯦꯞꯔꯣꯆ ꯑꯃꯥ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯟꯗꯨꯅꯥ ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯐꯖꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯇꯥꯏꯞ-ꯁ꯭ꯀꯦꯂꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛꯇꯥfont-size: 1rem
ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫ ꯃꯁꯤꯒꯤ ꯕ꯭ꯔꯥꯎꯖꯔ ꯗꯤꯐꯣꯜꯇ ꯑꯁꯤ ꯚꯦꯔꯤꯑꯦꯕꯜ<body>
ꯑꯗꯨ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯗꯨꯅꯥ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯕꯥ ꯌꯥꯏ꯫$font-size-root
- ꯑꯁꯤꯅꯥ
<body>
ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥfont-family
,font-weight
,line-height
, ꯑꯃꯁꯨꯡcolor
. ꯃꯁꯤ ꯐꯣꯟꯇ ꯏꯅꯀꯟꯁꯤꯁ꯭ꯇꯦꯟꯁꯁꯤꯡ ꯊꯤꯡꯅꯕꯥ ꯐꯣꯔꯝ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯈꯔꯅꯥ ꯃꯇꯨꯡꯗꯥ ꯏꯅꯍꯦꯔꯤ ꯇꯧꯏ꯫ - ꯁꯦꯐꯇꯤꯒꯤꯗꯃꯛ,
<body>
ꯗꯤꯛꯂꯥꯔꯦꯗ ꯑꯃꯥ ꯂꯩꯔꯤbackground-color
, ꯗꯤꯐꯣꯜꯇ ꯇꯧꯗꯨꯅꯥ#fff
.
ꯅꯦꯇꯤꯕ ꯐꯣꯟꯇ ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯥ꯫
ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤꯅꯥ ꯗꯤꯚꯥꯏꯁ ꯑꯃꯁꯨꯡ ꯑꯣ.ꯑꯦꯁ.ꯇꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯇꯦꯛꯁꯠ ꯔꯦꯟꯗꯔ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ “ꯅꯦꯇꯤꯕ ꯐꯣꯟꯇ ꯁ꯭ꯇꯦꯛ” ꯅꯠꯠꯔꯒꯥ “ꯁꯤꯁ꯭ꯇꯦꯝ ꯐꯣꯟꯇ ꯁ꯭ꯇꯦꯛ” ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯁꯤꯁ꯭ꯇꯦꯝ ꯐꯣꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯉꯁꯤꯒꯤ ꯗꯤꯚꯥꯏꯁꯁꯤꯡ ꯑꯁꯤ ꯋꯥꯈꯂꯗꯥ ꯊꯃꯗꯨꯅꯥ ꯑꯀꯛꯅꯅꯥ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯈ꯭ꯔꯦ, ꯃꯁꯤꯗꯥ ꯁ꯭ꯛꯔꯤꯅꯁꯤꯡꯗꯥ ꯑꯍꯣꯡꯕꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯥ, ꯚꯦꯔꯤꯑꯦꯕꯜ ꯐꯣꯟꯇ ꯁꯄꯣꯔꯠ ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥ ꯌꯥꯑꯣꯔꯤ꯫ ꯁ꯭ꯃꯥꯁꯤꯡ ꯃꯦꯒꯥꯖꯤꯅꯒꯤ ꯑꯥꯔꯇꯤꯀꯜ ꯑꯁꯤꯗꯥ ꯅꯦꯇꯤꯕ ꯐꯣꯟꯇ ꯁ꯭ꯇꯦꯀꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯃꯈꯥ ꯇꯥꯅꯥ ꯄꯥꯕꯤꯌꯨ .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// 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
ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯵ ꯑꯁꯤ ꯃꯈꯥ ꯇꯥꯅꯥ ꯄꯤꯀꯄꯥ ꯃꯇꯃꯗꯥ, ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯁꯥꯁ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯅꯥ ꯍꯦꯟꯅꯥ ꯔꯤꯑꯦꯜ-ꯇꯥꯏꯝ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟ ꯄꯤꯅꯕꯥ ꯄꯥꯝꯕꯩ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ . ꯑꯩꯈꯣꯌꯒꯤ ꯑꯦꯞꯔꯣꯆ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯣꯔꯁ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯂꯧꯗꯨꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯃꯗꯨꯒꯤ ꯃꯑꯣꯡ ꯑꯗꯨꯗꯥ, ꯅꯍꯥꯛꯅꯥ CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗ꯭ꯔꯕꯁꯨ, ꯅꯍꯥꯛꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯁꯥꯁꯀꯤ ꯄꯥꯋꯔ ꯄꯨꯝꯅꯃꯛ ꯂꯩꯔꯤ꯫ ꯃꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯆꯠꯊꯔꯤ ꯑꯃꯁꯨꯡ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯕꯗꯥ ꯃꯇꯝ ꯆꯪꯒꯅꯤ꯫
ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯀꯃꯟ ꯑꯣꯏꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ :root
CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯈꯟꯅꯕꯤꯌꯨ:<body>
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
ꯆꯠꯅꯕꯤꯗꯥ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯗꯨ ꯔꯤꯕꯣꯠꯇꯥ ꯃꯈꯥꯒꯤ ꯑꯁꯤꯒꯨꯝꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
ꯃꯁꯤꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯄꯥꯝꯂꯤꯕꯃꯈꯩ ꯔꯤꯑꯦꯜ-ꯇꯥꯏꯝ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
ꯍꯦꯗꯤꯡ ꯑꯃꯁꯨꯡ ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐꯁꯤꯡ꯫
ꯍꯦꯗꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯄꯨꯝꯅꯃꯛ—ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, <h1>
—ꯑꯗꯨꯒꯥ <p>
ꯃꯈꯣꯌꯒꯤ margin-top
ꯂꯧꯊꯣꯛꯅꯕꯥ ꯔꯤꯁꯦꯠ ꯇꯧꯏ꯫ ꯍꯦꯗꯤꯡꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯦ ꯑꯃꯁꯨꯡ ꯐꯖꯅꯥ ꯁ꯭ꯄꯦꯁꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ margin-bottom: .5rem
ꯄꯦꯔꯥꯒ꯭ꯔꯥꯐꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫margin-bottom: 1rem
ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ | ꯈꯨꯗꯝ |
---|---|
<h1></h1> |
ꯑꯩꯆ.꯱. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ |
<h2></h2> |
h꯲. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ |
<h3></h3> |
ꯑꯩꯆ꯳. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ |
<h4></h4> |
ꯑꯩꯆ꯴. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ |
<h5></h5> |
h꯵. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ |
<h6></h6> |
ꯑꯩꯆ꯶. ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯍꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫ |
ꯂꯤꯁ꯭ꯇꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫
ꯂꯤꯁ꯭ꯠ ꯄꯨꯝꯅꯃꯛ— <ul>
, <ol>
, ꯑꯃꯁꯨꯡ <dl>
—ꯃꯈꯣꯌꯒꯤ margin-top
ꯂꯧꯊꯣꯀꯈ꯭ꯔꯦ ꯑꯃꯁꯨꯡ ꯑꯦ margin-bottom: 1rem
. ꯅꯦꯁ꯭ꯇꯦꯗ ꯂꯤꯁ꯭ꯇꯁꯤꯡꯗꯥ margin-bottom
. ꯑꯩꯈꯣꯌꯅꯥ padding-left
ꯑꯣꯟ <ul>
ꯑꯃꯁꯨꯡ <ol>
ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯁꯨ ꯔꯤꯁꯦꯠ ꯇꯧꯈ꯭ꯔꯦ꯫
- ꯂꯤꯁ꯭ꯠ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯃꯈꯣꯌꯒꯤ ꯃꯊꯛ ꯊꯪꯕꯥ ꯃꯥꯔꯖꯤꯟ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯈ꯭ꯔꯦ꯫
- ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯒꯤ ꯕꯣꯠꯇꯝ ꯃꯥꯔꯖꯤꯟ ꯑꯗꯨ ꯅꯣꯔꯃꯦꯂꯥꯏꯖ ꯇꯧꯈꯤ꯫
- ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯇꯁꯤꯡꯗꯥ ꯕꯣꯇꯣꯝ ꯃꯥꯔꯖꯤꯟ ꯂꯩꯇꯦ꯫
- ꯃꯁꯤꯒꯤ ꯃꯑꯣꯡ ꯑꯁꯤꯅꯥ ꯃꯈꯣꯌꯗꯥ ꯍꯦꯟꯅꯥ ꯏꯚꯦꯟꯇ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡ ꯑꯃꯥ ꯂꯩ꯫
- ꯃꯔꯨꯑꯣꯏꯅꯥ ꯍꯦꯟꯅꯥ ꯂꯤꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯂꯥꯀꯄꯥ ꯃꯇꯃꯗꯥ꯫
- ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯄꯦꯗꯤꯡ ꯑꯗꯨꯁꯨ ꯔꯤꯁꯦꯠ ꯇꯧꯈ꯭ꯔꯦ꯫
- ꯃꯈꯥꯗꯥ ꯑꯣꯔꯗꯔ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯄꯤꯔꯤ꯫
- ꯂꯤꯁ꯭ꯠ ꯑꯥꯏꯇꯦꯝ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫
- ꯃꯁꯤꯒꯤ ꯑꯄꯨꯅꯕꯥ ꯃꯤꯠꯌꯦꯡ ꯑꯁꯤ ꯑꯃꯒꯥ ꯑꯃꯒꯥ ꯃꯥꯟꯅꯩ꯫
- ꯃꯃꯥꯡꯒꯤ ꯑꯅꯑꯣꯔꯗꯔ ꯇꯧꯔꯕꯥ ꯂꯤꯁ꯭ꯠ ꯑꯗꯨꯒꯨꯝꯅꯥ꯫
ꯍꯦꯟꯅꯥ ꯂꯥꯏꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡ, ꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯍꯥꯏꯔꯔꯀꯤ, ꯑꯃꯁꯨꯡ ꯍꯦꯟꯅꯥ ꯐꯕꯥ ꯁ꯭ꯄꯦꯁꯤꯡꯒꯤꯗꯃꯛ, ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯇꯁꯤꯡꯗꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯔꯕꯥ margin
ꯑꯦꯁ. <dd>
s ꯔꯤꯁꯦꯠ margin-left
ꯇꯧꯕꯥ 0
ꯑꯃꯁꯨꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ margin-bottom: .5rem
. <dt>
ꯑꯦꯁ ꯑꯁꯤ ꯕꯣꯜꯗ ꯇꯧꯏ .
- ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯇꯁꯤꯡ꯫
- ꯋꯥꯍꯟꯊꯣꯛ ꯄꯤꯅꯕꯒꯤꯗꯃꯛ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯂꯤꯁ꯭ꯠ ꯑꯃꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
- ꯋꯥꯍꯩ
- ꯋꯥꯍꯩ ꯑꯁꯤꯒꯤꯗꯃꯛꯇꯥ ꯋꯥꯍꯟꯊꯣꯛ ꯄꯤꯕꯥ꯫
- ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯋꯥꯍꯩ ꯑꯁꯤꯒꯤ ꯑꯅꯤꯁꯨꯕꯥ ꯋꯥꯍꯟꯊꯣꯛ ꯑꯃꯥ꯫
- ꯑꯇꯣꯞꯄꯥ ꯋꯥꯍꯟꯊꯣꯛ ꯑꯃꯅꯤ꯫
- ꯑꯇꯣꯞꯄꯥ ꯋꯥꯍꯩ ꯑꯁꯤꯒꯤ ꯋꯥꯍꯟꯊꯣꯛ꯫
ꯏꯅꯂꯥꯏꯟ ꯀꯣꯗ꯫
ꯀꯣꯗꯀꯤ ꯏꯅꯂꯥꯏꯟ ꯁ꯭ꯅꯤꯄꯦꯠꯁꯤꯡ ꯑꯁꯤ <code>
. HTML ꯑꯦꯉ꯭ꯒꯜ ꯕ꯭ꯔꯦꯀꯦꯠꯁꯤꯡꯗꯒꯤ ꯁꯣꯌꯗꯅꯥ ꯑꯦꯁ꯭ꯀꯦꯞ ꯇꯧꯕꯤꯌꯨ꯫
<section>
ꯏꯅꯂꯥꯏꯟ ꯑꯣꯏꯅꯥ ꯔꯦꯞ ꯇꯧꯒꯗꯕꯅꯤ꯫
For example, <code><section></code> should be wrapped as inline.
ꯀꯣꯗ ꯕ꯭ꯂꯣꯛ ꯇꯧꯕꯥ꯫
<pre>
ꯀꯣꯗꯀꯤ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯂꯥꯏꯅꯁꯤꯡꯒꯤꯗꯃꯛ s ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯑꯃꯨꯛ ꯍꯟꯅꯥ, ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯀꯣꯗꯇꯥ ꯂꯩꯕꯥ ꯑꯦꯉ꯭ꯒꯜ ꯕ꯭ꯔꯦꯀꯦꯠ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯁꯣꯌꯗꯅꯥ ꯑꯦꯁ꯭ꯀꯦꯞ ꯇꯧꯕꯤꯌꯨ꯫ <pre>
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯁꯤ ꯃꯁꯤꯒꯤ ꯂꯧꯊꯣꯛꯅꯕꯥ margin-top
ꯑꯃꯁꯨꯡ rem
ꯃꯁꯤꯒꯤ margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫
ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ <var>
ꯇꯥꯛꯅꯕꯒꯤꯗꯃꯛ ꯇꯦꯒ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
ꯌꯨꯖꯔ ꯏꯅꯄꯨꯠ ꯇꯧꯕꯥ꯫
<kbd>
ꯃꯍꯧꯁꯥꯅꯥ ꯀꯤꯕꯣꯔꯗꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯦꯟꯇꯔ ꯇꯧꯕꯥ ꯏꯅꯄꯨꯠ ꯑꯗꯨ ꯇꯥꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯁꯦꯇꯤꯡꯁꯤꯡ ꯑꯦꯗꯤꯠ ꯇꯧꯅꯕꯥ, ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯣ꯫ ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
ꯁꯦꯝꯄꯜ ꯑꯥꯎꯇꯄꯨꯠ꯫
ꯄ꯭ꯔꯣꯒ꯭ꯔꯥꯝ ꯑꯃꯗꯒꯤ ꯁꯦꯝꯄꯜ ꯑꯥꯎꯇꯄꯨꯠ ꯑꯗꯨ <samp>
ꯇꯥꯛꯅꯕꯒꯤꯗꯃꯛ ꯇꯦꯒ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫
<samp>This text is meant to be treated as sample output from a computer program.</samp>
ꯇꯦꯕꯂꯁꯤꯡ꯫
ꯇꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯁ꯭ꯇꯥꯏꯜ <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 ꯑꯁꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯀꯄꯥ ꯏꯄꯥ-ꯏꯄꯨꯒꯤ (ꯅꯠꯠꯔꯒꯥ ꯊꯕꯛꯀꯤ ꯃꯄꯨꯡ ꯑꯣꯏꯕꯥ ꯕꯣꯗꯤ ꯑꯃꯒꯤ) ꯀꯟꯇꯦꯛꯇ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯄꯤꯅꯕꯒꯤꯗꯃꯛꯇꯅꯤ꯫ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯏꯅꯁꯤꯡ ꯂꯣꯏꯁꯤꯟꯗꯨꯅꯥ ꯐꯣꯔꯃꯦꯇꯤꯡ ꯉꯥꯛꯇꯨꯅꯥ ꯊꯝꯃꯨ .italic
normal
line-height
margin-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
<input type="text" hidden>
jQuery ꯏꯅꯀꯃꯄꯦꯇꯤꯕꯤꯂꯤꯇꯤ ꯂꯩꯕꯥ꯫
[hidden]
$(...).hide()
jQuery's ꯑꯃꯁꯨꯡ $(...).show()
ꯃꯦꯊꯗꯁꯤꯡꯒꯥ ꯀꯣꯟꯅꯅꯥ ꯆꯠꯅꯕꯥ ꯌꯥꯗꯦ꯫ ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯍꯧꯖꯤꯛ ꯃꯔꯨꯑꯣꯏꯅꯥ ꯏꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ [hidden]
ꯃꯦꯅꯦꯖ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯑꯇꯣꯞꯄꯥ ꯇꯦꯛꯅꯤꯀꯁꯤꯡꯒꯤ ꯃꯊꯛꯇꯥ ꯑꯦꯟꯗꯣꯔꯁ ꯇꯧꯗꯦ꯫display
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯚꯤꯖꯤꯕꯤꯂꯤꯇꯤ ꯑꯗꯨ ꯁꯨꯞꯅꯒꯤ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯥ, ꯃꯗꯨꯒꯤ ꯑꯔꯊꯗꯤ ꯃꯁꯤꯒꯤ display
ꯃꯣꯗꯤꯐꯥꯏꯗ ꯇꯧꯗ꯭ꯔꯤ ꯑꯃꯁꯨꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯗꯣꯛꯌꯨꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯐ꯭ꯂꯣꯗꯥ ꯑꯀꯥꯌꯕꯥ ꯄꯤꯕꯥ ꯌꯥꯏ, ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫.invisible