in English

ރީބޫޓް ކުރާށެވެ

ރީބޫޓް، އެއް ފައިލެއްގައި އެލިމެންޓަށް ޚާއްޞަ ސީއެސްއެސް ބަދަލުތަކުގެ ކޮލެކްޝަނެއް، ކިކްސްޓާޓް ބޫޓްސްޓްރެޕް އިން ބިލްޑް ކުރުމަށް އެލިގަންޓް، ކޮންސިސްޓެންޓް، އަދި ސާދާ ބޭސްލައިނެއް ފޯރުކޮށްދެއެވެ.

ކުރިމަތިލުން

ރީބޫޓް ބިނާވެފައިވަނީ ނޯމަލައިޒްގެ މައްޗަށް ކަމަށާއި، ހަމައެކަނި އެލިމެންޓް ސެލެކްޓަރސް ބޭނުންކޮށްގެން ކޮންމެވެސް ވަރަކަށް ޚިޔާލު ތަފާތު ސްޓައިލްތަކާއެކު ގިނަ އެޗްޓީއެމްއެލް އެލިމެންޓްތަކަށް ފޯރުކޮށްދެއެވެ. އިތުރު ސްޓައިލިންގ ހެދެނީ ހަމައެކަނި ކްލާސްތަކާއެކުގައެވެ. މިސާލަކަށް، އަޅުގަނޑުމެން <table>ސާދާ ބޭސްލައިނަކަށްޓަކައި ބައެއް ސްޓައިލްތައް ރީބޫޓްކޮށް، ފަހުން .table, .table-bordered, އަދި އެއަށްވުރެ ގިނަ ކަންތައްތައް ފޯރުކޮށްދެމެވެ.

މިއީ އަޅުގަނޑުމެންގެ ގައިޑްލައިންތަކާއި ރީބޫޓްގައި އޯވަރރައިޑް ކުރާނެ ކަންތައްތައް އިޚްތިޔާރު ކުރުމަށް ހުރި ސަބަބުތަކެވެ:

ސްކޭލް ކުރެވޭ ކޮމްޕޮނެންޓް ސްޕޭސިންގ އަށް s remގެ ބަދަލުގައި s ބޭނުން ކުރުމަށް ބައެއް ބްރައުޒާ ޑިފޯލްޓް ވެލިއުތައް އަޕްޑޭޓް ކުރާށެވެ .em
ދުރުހެލިވާށެވެ margin-top. ވަރުގަދަ މާރޖިންތައް ވެއްޓި، ހީވެސް ނުކުރާ ނަތީޖާތަކެއް ލިބިދާނެ އެވެ. ނަމަވެސް މިއަށްވުރެ މުހިންމު ކަމަކީ، އެއް މިސްރާބަކީ، marginނަފްސާނީ ގޮތުން މާ ސާދާ މޮޑެލެކެވެ.
ޑިވައިސް ސައިޒްތަކުގެ ތެރެއިން ފަސޭހައިން ސްކޭލް ކުރުމަށްޓަކައި، ބްލޮކް އެލިމެންޓްތަކުން rems އަށް margins ބޭނުން ކުރަންވާނެއެވެ.
font-ގުޅުންހުރި ޕްރޮޕަޓީތަކުގެ ޑިކްލެރޭޝަންތައް އެންމެ ކުޑަމިނުން ބެހެއްޓުން، inheritކުރެވެން އޮތް ކޮންމެ ވަގުތެއްގައި ބޭނުންކޮށްގެން.

ޕޭޖް ޑިފޯލްޓް ވެއެވެ

އަދި <html>އެލިމެންޓްތައް <body>އަޕްޑޭޓްކޮށްފައިވަނީ ޕޭޖް ވައިޑް ޑިފޯލްޓްތައް ރަނގަޅު ކުރުމަށްޓަކައެވެ. އިތުރަށް ވަކިން ހާއްސަކޮށް:

ދަ box-sizingއަކީ ގްލޯބަލްކޮށް ކޮންމެ އުނިއިތުރެއްގެ މައްޗަށް ސެޓްކޮށްފައިވާ އެއްޗެއް- ހިމެނޭ ގޮތަށް *::beforeއަދި *::after, އަށް border-box. މިއީ ޕެޑިންގ ނުވަތަ ބޯޑަރ ގެ ސަބަބުން ދުވަހަކުވެސް އެލިމެންޓްގެ ޑިކްލެއާ ކުރެވިފައިވާ ފުޅާމިނަށްވުރެ އިތުރު ނުވާނެކަން ކަށަވަރުކޮށްދޭ ކަމެކެވެ.
ގައި އެއްވެސް އަސާސެއް font-sizeޑިކްލެއާ ނުކުރެވި <html>، އެކަމަކު 16pxގަބޫލުކުރެވެނީ (ބްރައުޒާ ޑިފޯލްޓް) އެވެ. font-size: 1remis applied on the <body>ފޯރ އީޒީ ރެސްޕޮންސިވް ޓައިޕް-ސްކޭލިންގ ވިއާ މީޑިއާ ކިއުރީސް އާއި އެކު ޔޫޒަރ ޕްރެފެރެންސްތަކަށް އިޙްތިރާމްކޮށް، މާ އެކްސެސިބަލް އެޕްރޯޗެއް ކަށަވަރުކޮށްދެއެވެ.
ދަ <body>ވެސް ސެޓް ކުރަނީ ގްލޯބަލް font-family, line-height, އަދި text-align. މިއީ ފޮންޓް އެއްގޮތް ނުވުން ހުއްޓުވުމަށްޓަކައި ފަހުން ބައެއް ފޯމް އެލިމެންޓްތަކުން ވާރުތަވާ ކަމެކެވެ.
ރައްކާތެރިކަމަށްޓަކައި، ދަ <body>ހޭސް އަ ޑިކްލެއަރޑް background-color, ޑިފޯލްޓިންގ ޓު #fff.

ނެޓިވް ފޮންޓް ސްޓޭކް

ޑިފޯލްޓް ވެބް ފޮންޓްތައް (ހެލްވެޓިކާ ނިއު، ހެލްވެޓިކާ، އަދި އެރިއަލް) ބޫޓްސްޓްރެޕް 4 ގައި ބާކީކޮށް، ކޮންމެ ޑިވައިސްއަކާއި އޮއެސްއެއްގައި ވެސް އެންމެ ރަނގަޅަށް ޓެކްސްޓް ރެންޑަރ ކުރެވޭނެ ގޮތަށް “ނެޓިވް ފޮންޓް ސްޓޭކް” އެއް ޖަހާފައިވެއެވެ. ނެޓިވް ފޮންޓް ސްޓޭކްތަކާ ބެހޭ އިތުރު މައުލޫމާތު މި ސްމޭޝިންގ މެގަޒިންގެ ލިޔުމުގައި ކިޔައިބަލާށެވެ .

$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>`	ހ1. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ
`<h2></h2>`	ހ2. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ
`<h3></h3>`	ހ3. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ
`<h4></h4>`	ހ4. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ
`<h5></h5>`	ހ5. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ
`<h6></h6>`	ހ6. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ

ލިސްޓްތައް

ހުރިހާ ލިސްޓެއް— <ul>, <ol>, އަދި <dl>—އެތަކެތި margin-topނައްތާލާފައި ހުރި ލިސްޓެއް އަދި އެއް margin-bottom: 1rem. ނެސްޓް ކުރެވިފައިވާ ލިސްޓްތަކުގައި އެއްވެސް margin-bottom.

ހުރިހާ ލިސްޓެއްގެ މަތީ މާރޖިން އުނިކޮށްފައިވެއެވެ
އަދި އެމީހުންގެ ބޮޓޮމް މާރޖިން ނޯމަލައިޒް ވެގެން ދިޔައެވެ
ނެސްޓް ކުރެވިފައިވާ ލިސްޓްތަކުގައި ބޮޓޮމް މާރޖިންއެއް ނެތެވެ
- މިގޮތަށް އެމީހުންނަށް ލިބެނީ މާ ހަމަހަމަ ސިފައެކެވެ
- ޚާއްޞަކޮށް އޭގެ ފަހުން އިތުރު ލިސްޓް އައިޓަމްތައް އަންނައިރު
އަދި ކަނާތު ޕެޑިން ވެސް ވަނީ ރީސެޓްކޮށްފަ އެވެ

މިއޮތީ ތަރުތީބުކޮށްފައިވާ ލިސްޓެކެވެ
މަދު ލިސްޓް އައިޓަމަކާއެކުގައެވެ
އެއީ އެއް އޯވަރޯލް ލޫކެވެ
ކުރީގެ ތަރުތީބު ނުކުރެވި ހުރި ލިސްޓެއް ފަދައިންނެވެ

ސާދާ ސްޓައިލިންގ އާއި، ސާފު ހައިރާކީ އާއި، ރަނގަޅު ސްޕޭސިންގ އަށްޓަކައި، ޑިސްކްރިޕްޝަން ލިސްޓްތަކުގައި އަޕްޑޭޓްކޮށްފައިވާ marginސ. s އަށް <dd>ރީސެޓްކޮށް އިތުރުކުރުން . s ބޮލްޑްކޮށްފައި ހުރެއެވެ .margin-left0margin-bottom: .5rem<dt>

ޑިސްކްރިޕްޝަން ލިސްޓްތަކެވެ: ޑިސްކްރިޕްޝަން ލިސްޓަކީ ޝަރުތުތައް މާނަކުރުމަށް ފުރިހަމަ ލިސްޓެކެވެ.
މުއްދަތު: މި ލަފުޒަށް ދޭ މާނަ.; ހަމަ އެ ލަފުޒަށް ދޭ ދެވަނަ މާނައެކެވެ.
އަނެއްކާ ޓާރމް: މި އަނެއް ލަފުޒަށް މާނަކުރުމެވެ.

ޕްރީ ފޯމެޓް ކޮށްފައިވާ ލިޔުން

އެލިމެންޓް ރީސެޓް ކުރެވެނީ އޭގެ <pre>ނައްތާލައި އޭގެ ޔުނިޓްތައް margin-topބޭނުން ކުރުމަށް .remmargin-bottom

.މިސާލު-އުނިއިތުރު { .
  މާރޖިން-ބޮޓޮމް: 1ރެމް؛
} .

މޭޒުތަކެވެ

މޭޒުތައް ސްޓައިލް s އަށް ކުޑަކޮށް އެޖެސްޓްކޮށް ، ބޯޑަރުތައް ކޮލަޕްސްކޮށް، މުޅި ތަނުގައި <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>s އަދި <input>ބަޓަން އެލިމެންޓްތަކުގައި ހުންނަނީ cursor: pointerކޮން އިރަކު :not(:disabled).

މި ބަދަލުތައް، އަދި އެއަށްވުރެ ގިނަ ބަދަލުތައް ތިރީގައި މިވަނީއެވެ.

މިސާލު ލެޖެންޑެވެ

މިސާލު އިންޕުޓް

މިސާލު ހޮވާށެވެ

މި ޗެކްބޮކްސް ޗެކް ކުރާށެވެ

އިޚްތިޔާރު އެއްކަމަކީ މިއާއި އެއެވެ އޮޕްޝަން ދެ އަކީ މި ފެންސީ ފޯމް ކޮންޓްރޯލްތަކުގެ ރެޕިން ދައްކާލުމަށް ވެސް ސުޕަ ލޯންގް އެހެން އެއްޗެކެވެ. އޮޕްޝަން ތިނެއް ޑިސެބިލް ވެއްޖެއެވެ

މިސާލު ޓެކްސްޓްއޭރިއާ

މިސާލު ތާރީޚެވެ

މިސާލު ވަގުތު

މިސާލު އައުޓްޕުޓް 100ރ

ބަޓަންތަކުގައި ހުންނަ ޕޮއިންޓަރުތައް

role="button"ރީބޫޓްގައި ޑިފޯލްޓް ކަރސަރ އަށް ބަދަލުކުރުމަށް ފޯރުކޮށްދޭ އިތުރުވުމެއް ހިމެނެއެވެ pointer. އެލިމެންޓްތަކަކީ އިންޓަރެކްޓިވް އެއްޗެހިކަން އަންގައިދިނުމަށް އެހީތެރިވުމަށްޓަކައި މި އެޓްރިބިއުޓް އެލިމެންޓްތަކަށް އިތުރުކޮށްލާށެވެ. <button>މި ރޯލަކީ އަމިއްލަ cursorބަދަލެއް ލިބޭ އުފެއްދުންތަކަށް ކޮންމެހެން ބޭނުންތެރި ރޯލެއް ނޫނެވެ .

ނޮން ބަޓަން އެލިމެންޓް ބަޓަން

<span role="button" tabindex="0">Non-button element button</span>

މިސްކް އެލިމެންޓްސް

އެޑްރެސް

އެލިމެންޓް <address>އަޕްޑޭޓް ކުރެވެނީ ބްރައުޒާ ޑިފޯލްޓް font-styleއިން ރީސެޓް italicކުރުމަށެވެ normal. line-heightވެސް މިހާރު ވާރުތަވެ، margin-bottom: 1remއިތުރުކޮށްފައިވެ އެވެ. <address>s އަކީ އެންމެ ކައިރީގައި ހުންނަ ކާބަފައިން (ނުވަތަ މުޅި މަސައްކަތުގެ ހަށިގަނޑަކަށް) ގުޅޭނެ މައުލޫމާތު ހުށަހެޅުމަށްޓަކައެވެ. އިން ލައިންތައް ނިންމާލައިގެން ފޯމެޓިންގ ރައްކާތެރިކުރުން <br>.

ޓްވިޓަރ، އިންކް
1355 މާކެޓް ސެއިންޓް، ސުއިޓް 900
ސެން ފްރެންސިސްކޯ، ސީއޭ 94103
ޕީ: (123) 456-7890

ފުރިހަމަ ނަން
[email protected]

ބްލޮކްކޯޓް ކުރާށެވެ

marginބްލޮކްކޯޓްސްގައި ޑިފޯލްޓް ވާނީ 1em 40px, އެހެންކަމުން އަޅުގަނޑުމެން އެކަން ރީސެޓް 0 0 1remކުރަނީ އެހެން އެލިމެންޓްތަކާ މާ އެއްގޮތްވާ އެއްޗަކަށްޓަކައެވެ.

މަޝްހޫރު ކޯޓޭޝަނެއް، ބްލޮކްކޯޓް އެލިމެންޓެއްގައި ހިމެނޭ ކޯޓެކެވެ.

ސޯސް ޓައިޓަލްގައި މަޝްހޫރު މީހެކެވެ

އިންލައިން އެލިމެންޓްސް

އެ <abbr>އެލިމެންޓަށް ޕެރެގްރާފް ޓެކްސްޓްގެ ތެރެއިން ވަކިން ފާހަގަކޮށްލެވޭ ގޮތަށް އަސާސީ ސްޓައިލިންގ ލިބެއެވެ.

ނޫލާ އެޓްރ ވިޓޭ އެލިޓް ލިބަރޯ، އަ ފަރެޓްރާ އޮގް.

ޚުލާސާ

ސުމާރީގައި ޑިފޯލްޓްކޮށް cursorލިޔެފައިވަނީ text, އެހެންކަމުން އަޅުގަނޑުމެން އެކަން ރީސެޓް ކުރަނީ pointerއެ އެލިމެންޓަށް ކްލިކްކޮށްގެން މުއާމަލާތް ކުރެވޭނެކަން ފޯރުކޮށްދިނުމަށެވެ.

ބައެއް ތަފްޞީލެވެ

ތަފްސީލުތަކާ ބެހޭ އިތުރު މައުލޫމާތު.

އަދިވެސް އިތުރު ތަފްޞީލެވެ

މިއޮތީ ތަފްސީލުތަކާ ބެހޭ އިތުރު ތަފްސީލެވެ.

އެޗްޓީއެމްއެލް5 `[hidden]`އެޓްރިބިއުޓް

HTML5 އިން އާ ގްލޯބަލް އެޓްރިބިއުޓެއް[hidden]display: none އިތުރުކުރަނީ , މިއީ ޑިފޯލްޓްކޮށް ސްޓައިލް ކުރެވިފައިވާ އެއްޗެކެވެ . PureCSS އިން ޚިޔާލެއް ދަރަންޏަށް ނަގައިގެން , އަޅުގަނޑުމެން މި ޑިފޯލްޓް ރަނގަޅު ކޮށްގެން އޭގެ އެކްސިޑެންޓް އޮވަރރައިޑް ވުމުން [hidden] { display: none !important; }ރައްކާތެރިވުމަށް އެހީތެރިވުމަށް ހެދިން. އައިއީ10 އިން ނެޓިވްލީ ސަޕޯޓް ނުކުރާއިރު، އަޅުގަނޑުމެންގެ ސީއެސްއެސްގައިވާ ސާފު ޑިކްލެރޭޝަން އެ މައްސަލައާ ކުރިމަތިލާން ޖެހެއެވެ display.[hidden]

<input type="text" hidden>

ޖީކުއަރީ އިންކޮމްޕެޓިބިލިޓީ

[hidden]$(...).hide()ޖީކުއަރީސް އާއި $(...).show()މެތޯޑްސް އާއި އެއްގޮތް ނުވާ އެއްޗެކެވެ . އެހެންކަމުން، އަޅުގަނޑުމެން މިވަގުތު ޚާއްޞަކޮށް އެންޑޯސް ނުކުރަން [hidden]އެހެން އުކުޅުތަކުގެ މައްޗަށް މެނޭޖް ކުރުމަށް displayއޮފް އެލިމެންޓްސް.

ހަމައެކަނި އެލިމެންޓެއްގެ ވިޒިބިލިޓީ ޓޮގްލް ކުރުމަށްޓަކައި، މާނައަކީ އޭގެ displayބަދަލު ނުކުރެވި އެ އެލިމެންޓުން އަދިވެސް ޑޮކިއުމަންޓްގެ ފްލޯއަށް އަސަރު ފޯރާފާނެތީ، އޭގެ ބަދަލުގައި ކްލާސް ބޭނުން ކުރާށެވެ ..invisible