Source

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

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

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

ރީބޫޓް ބިނާވެފައިވަނީ ނޯމަލައިޒްގެ މައްޗަށް ކަމަށާއި، ހަމައެކަނި އެލިމެންޓް ސެލެކްޓަރސް ބޭނުންކޮށްގެން ކޮންމެވެސް ވަރަކަށް ޚިޔާލު ތަފާތު ސްޓައިލްތަކާއެކު ގިނަ އެޗްޓީއެމްއެލް އެލިމެންޓްތަކަށް ފޯރުކޮށްދެއެވެ. އިތުރު ސްޓައިލިންގ ހެދެނީ ހަމައެކަނި ކްލާސްތަކާއެކުގައެވެ. މިސާލަކަށް، އަޅުގަނޑުމެން <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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

މިއީ މުޅި ބޫޓްސްޓްރެޕްގައި ގްލޯބަލްކޮށް އޮޓޮމެޓިކުން އިންހެރިޓް 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.

  • ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް
  • ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް
  • އިންޓިޖަރ މޮލެސްޓީ ލޮރެމް އެޓް މަސާ
  • ފެސިލިސިސް އިން ޕްރީޓިއަމް ނިސްލް އެލިކެޓް
  • ނޫއްލާ ވޮލޫޓްޕަޓް އަލިކުއަމް ވެލިޓް
    • ފޭސެލަސް އިއަކުލިސް ނެކޭ އެވެ
    • ޕޫރަސް ސޮޑަލްސް އަލްޓްރިސީސް އެވެ
    • ވެސްޓިބިއުލަމް ލައޯރީޓް ޕޯޓިޓޯރ ސެމް
    • އެކް ޓްރިސްޓިކް ލިބަރޯ ވޮލޫޓްޕަޓް އެޓް
  • ފައުސިބަސް ޕޯޓާ ލެކަސް ފްރިންޖިލާ ވެލް
  • އެނިއަން ސިޓް އަމެޓް އެރަޓް ނަންކް
  • އެގޭޓް ޕޯޓިޓޯރ ލޮރެމް
  1. ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް
  2. ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް
  3. އިންޓިޖަރ މޮލެސްޓީ ލޮރެމް އެޓް މަސާ
  4. ފެސިލިސިސް އިން ޕްރީޓިއަމް ނިސްލް އެލިކެޓް
  5. ނޫއްލާ ވޮލޫޓްޕަޓް އަލިކުއަމް ވެލިޓް
  6. ފައުސިބަސް ޕޯޓާ ލެކަސް ފްރިންޖިލާ ވެލް
  7. އެނިއަން ސިޓް އަމެޓް އެރަޓް ނަންކް
  8. އެގޭޓް ޕޯޓިޓޯރ ލޮރެމް

ސާދާ ސްޓައިލިންގ އާއި، ސާފު ހައިރާކީ އާއި، ރަނގަޅު ސްޕޭސިންގ އަށްޓަކައި، ޑިސްކްރިޕްޝަން ލިސްޓްތަކުގައި އަޕްޑޭޓްކޮށްފައިވާ 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ރ

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

އެޑްރެސް

އެލިމެންޓް <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