Source

ರೀಬೂಟ್ ಮಾಡಿ

ರೀಬೂಟ್, ಒಂದೇ ಫೈಲ್‌ನಲ್ಲಿನ ಅಂಶ-ನಿರ್ದಿಷ್ಟ CSS ಬದಲಾವಣೆಗಳ ಸಂಗ್ರಹ, ಕಿಕ್‌ಸ್ಟಾರ್ಟ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ನಿರ್ಮಿಸಲು ಸೊಗಸಾದ, ಸ್ಥಿರ ಮತ್ತು ಸರಳ ಬೇಸ್‌ಲೈನ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಅಪ್ರೋಚ್

ಸಾಮಾನ್ಯೀಕರಣದ ಮೇಲೆ ರೀಬೂಟ್ ನಿರ್ಮಿಸುತ್ತದೆ, ಕೇವಲ ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ವಲ್ಪ ಅಭಿಪ್ರಾಯದ ಶೈಲಿಗಳೊಂದಿಗೆ ಅನೇಕ HTML ಅಂಶಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಹೆಚ್ಚುವರಿ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ತರಗತಿಗಳೊಂದಿಗೆ ಮಾತ್ರ ಮಾಡಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನಾವು <table>ಸರಳವಾದ ಬೇಸ್‌ಲೈನ್‌ಗಾಗಿ ಕೆಲವು ಶೈಲಿಗಳನ್ನು ರೀಬೂಟ್ ಮಾಡುತ್ತೇವೆ ಮತ್ತು ನಂತರ .table, .table-bordered, ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಒದಗಿಸುತ್ತೇವೆ.

ರೀಬೂಟ್‌ನಲ್ಲಿ ಯಾವುದನ್ನು ಅತಿಕ್ರಮಿಸಬೇಕೆಂದು ಆಯ್ಕೆಮಾಡಲು ನಮ್ಮ ಮಾರ್ಗಸೂಚಿಗಳು ಮತ್ತು ಕಾರಣಗಳು ಇಲ್ಲಿವೆ:

ಸ್ಕೇಲೆಬಲ್ ಕಾಂಪೊನೆಂಟ್ ಸ್ಪೇಸಿಂಗ್‌ಗಾಗಿ rems ಬದಲಿಗೆ s ಅನ್ನು ಬಳಸಲು ಕೆಲವು ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳನ್ನು ನವೀಕರಿಸಿ .em
ತಪ್ಪಿಸಿ margin-top. ಲಂಬ ಅಂಚುಗಳು ಕುಸಿಯಬಹುದು, ಅನಿರೀಕ್ಷಿತ ಫಲಿತಾಂಶಗಳನ್ನು ನೀಡುತ್ತದೆ. ಹೆಚ್ಚು ಮುಖ್ಯವಾಗಿ, ಒಂದೇ ನಿರ್ದೇಶನವು marginಸರಳವಾದ ಮಾನಸಿಕ ಮಾದರಿಯಾಗಿದೆ.
remಸಾಧನದ ಗಾತ್ರಗಳಾದ್ಯಂತ ಸುಲಭವಾಗಿ ಸ್ಕೇಲಿಂಗ್ ಮಾಡಲು, ಬ್ಲಾಕ್ ಅಂಶಗಳು s ಗೆ s ಅನ್ನು ಬಳಸಬೇಕು margin.
ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ಬಳಸಿ -ಸಂಬಂಧಿತ ಗುಣಲಕ್ಷಣಗಳ ಘೋಷಣೆಗಳನ್ನು fontಕನಿಷ್ಠಕ್ಕೆ ಇರಿಸಿ.inherit

ಪುಟ ಡೀಫಾಲ್ಟ್

<html>ಉತ್ತಮವಾದ ಪುಟ-ವ್ಯಾಪಕ ಡಿಫಾಲ್ಟ್‌ಗಳನ್ನು ಒದಗಿಸಲು ಮತ್ತು <body>ಅಂಶಗಳನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ . ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾಗಿ:

ಪ್ರತಿ ಅಂಶದ ಮೇಲೆ box-sizingಜಾಗತಿಕವಾಗಿ ಹೊಂದಿಸಲಾಗಿದೆ - ಸೇರಿದಂತೆ *::beforeಮತ್ತು . ಪ್ಯಾಡಿಂಗ್ ಅಥವಾ ಗಡಿಯಿಂದಾಗಿ ಅಂಶದ ಘೋಷಿತ ಅಗಲವು ಎಂದಿಗೂ ಮೀರುವುದಿಲ್ಲ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ. *::afterborder-box
- ನಲ್ಲಿ ಯಾವುದೇ ಆಧಾರವನ್ನು font-sizeಘೋಷಿಸಲಾಗಿಲ್ಲ <html>, ಆದರೆ 16pxಊಹಿಸಲಾಗಿದೆ (ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್). ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳನ್ನು ಗೌರವಿಸುವಾಗ ಮತ್ತು ಹೆಚ್ಚು ಪ್ರವೇಶಿಸಬಹುದಾದ ವಿಧಾನವನ್ನು ಖಾತ್ರಿಪಡಿಸುವಾಗ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳ ಮೂಲಕ ಸುಲಭವಾಗಿ ಸ್ಪಂದಿಸುವ ಪ್ರಕಾರ-ಸ್ಕೇಲಿಂಗ್‌ಗಾಗಿ font-size: 1remಅನ್ವಯಿಸಲಾಗುತ್ತದೆ .<body>
<body>ಜಾಗತಿಕ font-family, line-heightಮತ್ತು text-align. _ ಫಾಂಟ್ ಅಸಂಗತತೆಯನ್ನು ತಡೆಗಟ್ಟಲು ಕೆಲವು ಫಾರ್ಮ್ ಅಂಶಗಳಿಂದ ಇದು ನಂತರ ಆನುವಂಶಿಕವಾಗಿರುತ್ತದೆ.
ಸುರಕ್ಷತೆಗಾಗಿ, <body>ಡಿಕ್ಲೇರ್ಡ್ ಅನ್ನು ಹೊಂದಿದೆ background-color, ಗೆ ಡೀಫಾಲ್ಟ್ ಆಗಿದೆ #fff.

ಸ್ಥಳೀಯ ಫಾಂಟ್ ಸ್ಟಾಕ್

ಡೀಫಾಲ್ಟ್ ವೆಬ್ ಫಾಂಟ್‌ಗಳನ್ನು (ಹೆಲ್ವೆಟಿಕಾ ನ್ಯೂಯು, ಹೆಲ್ವೆಟಿಕಾ ಮತ್ತು ಏರಿಯಲ್) ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 4 ರಲ್ಲಿ ಕೈಬಿಡಲಾಗಿದೆ ಮತ್ತು ಪ್ರತಿ ಸಾಧನ ಮತ್ತು ಓಎಸ್‌ನಲ್ಲಿ ಅತ್ಯುತ್ತಮ ಪಠ್ಯ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ "ಸ್ಥಳೀಯ ಫಾಂಟ್ ಸ್ಟಾಕ್" ನೊಂದಿಗೆ ಬದಲಾಯಿಸಲಾಗಿದೆ. ಈ ಸ್ಮಾಶಿಂಗ್ ಮ್ಯಾಗಜೀನ್ ಲೇಖನದಲ್ಲಿ ಸ್ಥಳೀಯ ಫಾಂಟ್ ಸ್ಟ್ಯಾಕ್‌ಗಳ ಕುರಿತು ಇನ್ನಷ್ಟು ಓದಿ .

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (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>`	h1. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ
`<h2></h2>`	h2. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ
`<h3></h3>`	h3. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ
`<h4></h4>`	h4. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ
`<h5></h5>`	h5. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ
`<h6></h6>`	h6. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ

ಪಟ್ಟಿಗಳು

ಎಲ್ಲಾ ಪಟ್ಟಿಗಳು- <ul>, <ol>, ಮತ್ತು <dl>-ಅವುಗಳನ್ನು margin-topತೆಗೆದುಹಾಕಲಾಗಿದೆ ಮತ್ತು a margin-bottom: 1rem. ನೆಸ್ಟೆಡ್ ಪಟ್ಟಿಗಳು ಇಲ್ಲ margin-bottom.

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್
ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್
ಪೂರ್ಣಾಂಕ ಮೊಲೆಸ್ಟಿ ಲೋರೆಮ್ ಮತ್ತು ಮಸ್ಸಾ
ಪ್ರೀಟಿಯಮ್ ನಿಸ್ಲ್ ಅಲಿಕ್ವೆಟ್‌ನಲ್ಲಿ ಸೌಲಭ್ಯ
ನುಲ್ಲ ವೊಲುಟ್ಪಟ್ ಅಲಿಕಮ್ ವೆಲಿತ್
- ಫಾಸೆಲ್ಲಸ್ ಐಕ್ಯುಲಿಸ್ ನೆಕ್ವೆ
- ಪುರುಸ್ ಸೋಡೇಲ್ಸ್ ಅಲ್ಟ್ರಿಸಿಸ್
- ವೆಸ್ಟಿಬುಲಮ್ ಲಾರೆಟ್ ಪೋರ್ಟಿಟರ್ ಸೆಮ್
- ಎಸಿ ಟ್ರಿಸ್ಟಿಕ್ ಲಿಬೆರೊ ವಾಲ್ಟ್ಪಾಟ್ ನಲ್ಲಿ
ಫೌಸಿಬಸ್ ಪೋರ್ಟಾ ಲ್ಯಾಕಸ್ ಫ್ರಿಂಗಿಲ್ಲಾ ವೆಲ್
ಈಗಿನ ಸಿಟ್ ಅಮೆಟ್ ಈಗ
ಈಗೆಟ್ ಪೋರ್ಟಿಟರ್ ಲೋರೆಮ್

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್
ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್
ಪೂರ್ಣಾಂಕ ಮೊಲೆಸ್ಟಿ ಲೋರೆಮ್ ಮತ್ತು ಮಸ್ಸಾ
ಪ್ರೀಟಿಯಮ್ ನಿಸ್ಲ್ ಅಲಿಕ್ವೆಟ್‌ನಲ್ಲಿ ಸೌಲಭ್ಯ
ನುಲ್ಲ ವೊಲುಟ್ಪಟ್ ಅಲಿಕಮ್ ವೆಲಿತ್
ಫೌಸಿಬಸ್ ಪೋರ್ಟಾ ಲ್ಯಾಕಸ್ ಫ್ರಿಂಗಿಲ್ಲಾ ವೆಲ್
ಈಗಿನ ಸಿಟ್ ಅಮೆಟ್ ಈಗ
ಈಗೆಟ್ ಪೋರ್ಟಿಟರ್ ಲೋರೆಮ್

ಸರಳವಾದ ಸ್ಟೈಲಿಂಗ್, ಸ್ಪಷ್ಟ ಕ್ರಮಾನುಗತ ಮತ್ತು ಉತ್ತಮ ಅಂತರಕ್ಕಾಗಿ, ವಿವರಣೆ ಪಟ್ಟಿಗಳನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ margins. ಗೆ <dd>ಮರುಹೊಂದಿಸಿ ಮತ್ತು ಸೇರಿಸಿ . ಗಳು ಬೋಲ್ಡ್ ಆಗಿವೆ .margin-left0margin-bottom: .5rem<dt>

ವಿವರಣೆ ಪಟ್ಟಿಗಳು: ಪದಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ವಿವರಣೆ ಪಟ್ಟಿಯು ಪರಿಪೂರ್ಣವಾಗಿದೆ.
ಯುಯಿಸ್ಮೋಡ್: ವೆಸ್ಟಿಬುಲಮ್ ಐಡಿ ಲಿಗುಲಾ ಪೋರ್ಟಾ ಫೆಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್ ಸೆಂಪರ್ ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್.; ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್.
ಮಲೆಸುವಾದ ಪೋರ್ಟಾ: ಎಟಿಯಮ್ ಪೋರ್ಟಾ ಸೆಮ್ ಮಲೆಸುಡಾ ಮ್ಯಾಗ್ನಾ ಮೊಲ್ಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್.

ಪೂರ್ವ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಿದ ಪಠ್ಯ

<pre>ಅಂಶವನ್ನು ತೆಗೆದುಹಾಕಲು ಮತ್ತು ಅದರ ಘಟಕಗಳನ್ನು ಬಳಸಲು margin-topಮರುಹೊಂದಿಸಲಾಗಿದೆ .remmargin-bottom

.ಉದಾಹರಣೆ-ಅಂಶ {
  ಅಂಚು-ಕೆಳಗೆ: 1ರೆಮ್;
}

ಕೋಷ್ಟಕಗಳು

ಟೇಬಲ್‌ಗಳನ್ನು ಸ್ಟೈಲ್‌ಗೆ ಸ್ವಲ್ಪ ಸರಿಹೊಂದಿಸಲಾಗುತ್ತದೆ, ಅಂಚುಗಳನ್ನು ಕುಗ್ಗಿಸುತ್ತದೆ ಮತ್ತು ಉದ್ದಕ್ಕೂ <caption>ಸ್ಥಿರವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ . text-alignಗಡಿಗಳು, ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗೆ ಹೆಚ್ಚುವರಿ ಬದಲಾವಣೆಗಳು ವರ್ಗದೊಂದಿಗೆ .tableಬರುತ್ತವೆ .

ಇದು ಉದಾಹರಣೆ ಕೋಷ್ಟಕವಾಗಿದೆ, ಮತ್ತು ಇದು ವಿಷಯಗಳನ್ನು ವಿವರಿಸಲು ಅದರ ಶೀರ್ಷಿಕೆಯಾಗಿದೆ.
ಟೇಬಲ್ ಶಿರೋನಾಮೆ	ಟೇಬಲ್ ಶಿರೋನಾಮೆ	ಟೇಬಲ್ ಶಿರೋನಾಮೆ	ಟೇಬಲ್ ಶಿರೋನಾಮೆ
ಟೇಬಲ್ ಸೆಲ್	ಟೇಬಲ್ ಸೆಲ್	ಟೇಬಲ್ ಸೆಲ್	ಟೇಬಲ್ ಸೆಲ್
ಟೇಬಲ್ ಸೆಲ್	ಟೇಬಲ್ ಸೆಲ್	ಟೇಬಲ್ ಸೆಲ್	ಟೇಬಲ್ ಸೆಲ್
ಟೇಬಲ್ ಸೆಲ್	ಟೇಬಲ್ ಸೆಲ್	ಟೇಬಲ್ ಸೆಲ್	ಟೇಬಲ್ ಸೆಲ್

ರೂಪಗಳು

ಸರಳವಾದ ಮೂಲ ಶೈಲಿಗಳಿಗಾಗಿ ವಿವಿಧ ಫಾರ್ಮ್ ಅಂಶಗಳನ್ನು ರೀಬೂಟ್ ಮಾಡಲಾಗಿದೆ. ಕೆಲವು ಗಮನಾರ್ಹ ಬದಲಾವಣೆಗಳು ಇಲ್ಲಿವೆ:

<fieldset>ಗಳು ಯಾವುದೇ ಗಡಿಗಳು, ಪ್ಯಾಡಿಂಗ್ ಅಥವಾ ಅಂಚುಗಳನ್ನು ಹೊಂದಿಲ್ಲ ಆದ್ದರಿಂದ ಅವುಗಳನ್ನು ವೈಯಕ್ತಿಕ ಒಳಹರಿವು ಅಥವಾ ಇನ್‌ಪುಟ್‌ಗಳ ಗುಂಪುಗಳಿಗೆ ಹೊದಿಕೆಗಳಾಗಿ ಸುಲಭವಾಗಿ ಬಳಸಬಹುದು.
<legend>ಗಳು, ಫೀಲ್ಡ್‌ಸೆಟ್‌ಗಳಂತೆ, ಒಂದು ರೀತಿಯ ಶಿರೋನಾಮೆಯಾಗಿ ಪ್ರದರ್ಶಿಸಲು ಮರುಹೊಂದಿಸಲಾಗಿದೆ.
<label>ಗಳನ್ನು ಅನ್ವಯಿಸಲು display: inline-blockಅನುಮತಿಸಲು ಹೊಂದಿಸಲಾಗಿದೆ.margin
<input>s, <select>s, <textarea>s, ಮತ್ತು <button>s ಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಸಾಮಾನ್ಯೀಕರಿಸುವ ಮೂಲಕ ಸಂಬೋಧಿಸಲಾಗುತ್ತದೆ, ಆದರೆ ರೀಬೂಟ್ ಅವುಗಳ marginಮತ್ತು ಸೆಟ್‌ಗಳನ್ನು line-height: inheritಸಹ ತೆಗೆದುಹಾಕುತ್ತದೆ.
<textarea>ಸಮತಲ ಮರುಗಾತ್ರಗೊಳಿಸುವಿಕೆಯು ಪುಟದ ವಿನ್ಯಾಸವನ್ನು "ಬ್ರೇಕ್" ಮಾಡುವುದರಿಂದ ಗಳನ್ನು ಲಂಬವಾಗಿ ಮಾತ್ರ ಮರುಗಾತ್ರಗೊಳಿಸುವಂತೆ ಮಾರ್ಪಡಿಸಲಾಗಿದೆ.

ಈ ಬದಲಾವಣೆಗಳು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಕೆಳಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ ದಂತಕಥೆ

ಉದಾಹರಣೆ ಇನ್ಪುಟ್

ಉದಾಹರಣೆ ಆಯ್ಕೆ

ಈ ಚೆಕ್ಬಾಕ್ಸ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ

ಆಯ್ಕೆ ಒಂದು ಇದು ಮತ್ತು ಅದು ಆಯ್ಕೆ ಎರಡು ಎಂಬುದು ಈ ಅಲಂಕಾರಿಕ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳ ಸುತ್ತುವಿಕೆಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ತುಂಬಾ ಉದ್ದವಾಗಿದೆ. ಮೂರು ಆಯ್ಕೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ

ಉದಾಹರಣೆ ಪಠ್ಯ ಪ್ರದೇಶ

ಉದಾಹರಣೆ ದಿನಾಂಕ

ಉದಾಹರಣೆ ಸಮಯ

ಉದಾಹರಣೆ ಔಟ್ಪುಟ್ 100

ಇತರೆ ಅಂಶಗಳು

ವಿಳಾಸ

ನಿಂದ ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಅನ್ನು <address>ಮರುಹೊಂದಿಸಲು ಅಂಶವನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ . ಈಗ ಆನುವಂಶಿಕವಾಗಿದೆ ಮತ್ತು ಸೇರಿಸಲಾಗಿದೆ. ಗಳು ಹತ್ತಿರದ ಪೂರ್ವಜರ ಸಂಪರ್ಕ ಮಾಹಿತಿಯನ್ನು ಪ್ರಸ್ತುತಪಡಿಸಲು (ಅಥವಾ ಸಂಪೂರ್ಣ ಕೆಲಸದ ದೇಹ) ನೊಂದಿಗೆ ಸಾಲುಗಳನ್ನು ಕೊನೆಗೊಳಿಸುವ ಮೂಲಕ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ಸಂರಕ್ಷಿಸಿ .font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

ಪೂರ್ಣ ಹೆಸರು
[email protected]

ಬ್ಲಾಕ್ ಕೋಟ್

ಬ್ಲಾಕ್‌ಕೋಟ್‌ಗಳಲ್ಲಿ ಡೀಫಾಲ್ಟ್ marginಆಗಿದೆ , ಆದ್ದರಿಂದ ನಾವು ಅದನ್ನು ಇತರ ಅಂಶಗಳೊಂದಿಗೆ ಹೆಚ್ಚು ಸ್ಥಿರವಾಗಿ 1em 40pxಮರುಹೊಂದಿಸುತ್ತೇವೆ .0 0 1rem

ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸಿಂಗ್ ಎಲಿಟ್. ಪೂರ್ಣಸಂಖ್ಯೆಯು ಹಿಂದಿನದು.

ಮೂಲ ಶೀರ್ಷಿಕೆಯಲ್ಲಿ ಯಾರೋ ಪ್ರಸಿದ್ಧರು

ಇನ್ಲೈನ್ ಅಂಶಗಳು

ಅಂಶವು ಪ್ಯಾರಾಗ್ರಾಫ್ ಪಠ್ಯದ <abbr>ನಡುವೆ ಎದ್ದು ಕಾಣುವಂತೆ ಮಾಡಲು ಮೂಲಭೂತ ಶೈಲಿಯನ್ನು ಪಡೆಯುತ್ತದೆ.

ನುಲ್ಲಾ ಅಟ್ರ್ ವಿಟೇ ಎಲಿಟ್ ಲಿಬೆರೊ, ಎ ಫಾರೆಟ್ರಾ ಆಗ್.

ಸಾರಾಂಶ

cursorಸಾರಾಂಶದಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಆಗಿರುತ್ತದೆ, ಆದ್ದರಿಂದ ಅಂಶವನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ಅದರೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಬಹುದು ಎಂದು ತಿಳಿಸಲು textನಾವು ಅದನ್ನು ಮರುಹೊಂದಿಸುತ್ತೇವೆ .pointer

ಕೆಲವು ವಿವರಗಳು

ವಿವರಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿ.

ಇನ್ನೂ ಹೆಚ್ಚಿನ ವಿವರಗಳು

ವಿವರಗಳ ಕುರಿತು ಇನ್ನಷ್ಟು ವಿವರಗಳು ಇಲ್ಲಿವೆ.

HTML5 `[hidden]`ಗುಣಲಕ್ಷಣ

HTML5 ಹೆಸರಿನ ಹೊಸ ಜಾಗತಿಕ ಗುಣಲಕ್ಷಣವನ್ನು[hidden] ಸೇರಿಸುತ್ತದೆ , ಇದನ್ನು display: noneಡೀಫಾಲ್ಟ್ ಆಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. PureCSS ನಿಂದ ಕಲ್ಪನೆಯನ್ನು ಎರವಲು ಪಡೆದುಕೊಂಡು, ಆಕಸ್ಮಿಕವಾಗಿ ಅತಿಕ್ರಮಿಸುವುದನ್ನು [hidden] { display: none !important; }ತಡೆಯಲು ಸಹಾಯ ಮಾಡುವ ಮೂಲಕ ನಾವು ಈ ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಸುಧಾರಿಸುತ್ತೇವೆ . IE10 ನಿಂದ ಸ್ಥಳೀಯವಾಗಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲದಿದ್ದರೂ, ನಮ್ಮ CSS ನಲ್ಲಿನ ಸ್ಪಷ್ಟ ಘೋಷಣೆಯು ಆ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತದೆ display.[hidden]

<input type="text" hidden>

jQuery ಅಸಾಮರಸ್ಯ

[hidden]jQuery $(...).hide()ಮತ್ತು $(...).show()ವಿಧಾನಗಳೊಂದಿಗೆ ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ. ಆದ್ದರಿಂದ, ನಾವು ಪ್ರಸ್ತುತ ಅಂಶಗಳ [hidden]ನಿರ್ವಹಣೆಗಾಗಿ ಇತರ ತಂತ್ರಗಳನ್ನು ವಿಶೇಷವಾಗಿ ಅನುಮೋದಿಸುವುದಿಲ್ಲ.display

ಒಂದು ಅಂಶದ ಗೋಚರತೆಯನ್ನು ಕೇವಲ ಟಾಗಲ್ ಮಾಡಲು, ಅಂದರೆ ಅದನ್ನು displayಮಾರ್ಪಡಿಸಲಾಗಿಲ್ಲ ಮತ್ತು ಅಂಶವು ಇನ್ನೂ ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಹರಿವಿನ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು, ಬದಲಿಗೆ.invisible ವರ್ಗವನ್ನು ಬಳಸಿ .