ರೀಬೂಟ್ ಮಾಡಿ

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

ಈ ಪುಟದಲ್ಲಿ

ಅಪ್ರೋಚ್

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

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

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

CSS ಅಸ್ಥಿರ

v5.2.0 ರಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ

v5.1.1 ನೊಂದಿಗೆ, ನಾವು ಸೇರಿಸಲು ನಮ್ಮ ಎಲ್ಲಾ CSS ಬಂಡಲ್‌ಗಳಲ್ಲಿ ( , ಮತ್ತು @importಸೇರಿದಂತೆ ) ನಮಗೆ ಅಗತ್ಯವಿರುವ ಗಳನ್ನು ಪ್ರಮಾಣೀಕರಿಸಿದ್ದೇವೆ . ಇದು ಎಲ್ಲಾ ಬಂಡಲ್‌ಗಳಿಗೆ ಮಟ್ಟದ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ , ಆ ಬಂಡಲ್‌ನಲ್ಲಿ ಎಷ್ಟು ಬಳಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ. ಅಂತಿಮವಾಗಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 5 ಯಾವಾಗಲೂ ಸಾಸ್ ಅನ್ನು ಮರುಸಂಕಲಿಸುವ ಅಗತ್ಯವಿಲ್ಲದೇ ಹೆಚ್ಚು ನೈಜ-ಸಮಯದ ಗ್ರಾಹಕೀಕರಣವನ್ನು ಒದಗಿಸುವ ಸಲುವಾಗಿ, ಕಾಲಾನಂತರದಲ್ಲಿ ಸೇರಿಸಲಾದ ಹೆಚ್ಚಿನ CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ನೋಡುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತದೆ . ನಮ್ಮ ಮೂಲ ಸಾಸ್ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಂಡು ಅವುಗಳನ್ನು CSS ವೇರಿಯೇಬಲ್‌ಗಳಾಗಿ ಪರಿವರ್ತಿಸುವುದು ನಮ್ಮ ವಿಧಾನವಾಗಿದೆ. ಆ ರೀತಿಯಲ್ಲಿ, ನೀವು CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸದಿದ್ದರೂ ಸಹ, ನೀವು ಇನ್ನೂ ಸಾಸ್‌ನ ಎಲ್ಲಾ ಶಕ್ತಿಯನ್ನು ಹೊಂದಿದ್ದೀರಿ. ಇದು ಇನ್ನೂ ಪ್ರಗತಿಯಲ್ಲಿದೆ ಮತ್ತು ಸಂಪೂರ್ಣವಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.bootstrap.cssbootstrap-reboot.cssbootstrap-grid.css_root.scss:root

ಉದಾಹರಣೆಗೆ, :rootಸಾಮಾನ್ಯ <body>ಶೈಲಿಗಳಿಗಾಗಿ ಈ CSS ಅಸ್ಥಿರಗಳನ್ನು ಪರಿಗಣಿಸಿ:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

ಪ್ರಾಯೋಗಿಕವಾಗಿ, ಆ ಅಸ್ಥಿರಗಳನ್ನು ರೀಬೂಟ್‌ನಲ್ಲಿ ಹೀಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

ಪುಟ ಡೀಫಾಲ್ಟ್

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

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

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

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

$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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

ಫಾಂಟ್ ಸ್ಟಾಕ್ ಎಮೋಜಿ ಫಾಂಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವುದರಿಂದ, ಅನೇಕ ಸಾಮಾನ್ಯ ಚಿಹ್ನೆ/ಡಿಂಗ್‌ಬ್ಯಾಟ್ ಯೂನಿಕೋಡ್ ಅಕ್ಷರಗಳನ್ನು ಬಹುವರ್ಣದ ಚಿತ್ರಗ್ರಾಫ್‌ಗಳಾಗಿ ಸಲ್ಲಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಬ್ರೌಸರ್/ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನ ಸ್ಥಳೀಯ ಎಮೋಜಿ ಫಾಂಟ್‌ನಲ್ಲಿ ಬಳಸಿದ ಶೈಲಿಯನ್ನು ಅವಲಂಬಿಸಿ ಅವುಗಳ ನೋಟವು ಬದಲಾಗುತ್ತದೆ ಮತ್ತು ಅವು ಯಾವುದೇ CSS colorಶೈಲಿಗಳಿಂದ ಪ್ರಭಾವಿತವಾಗುವುದಿಲ್ಲ.

ಇದನ್ನು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಾದ್ಯಂತ ಜಾಗತಿಕವಾಗಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಆನುವಂಶಿಕವಾಗಿ 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. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ

ಅಡ್ಡ ನಿಯಮಗಳು

<hr>ಅಂಶವನ್ನು ಸರಳೀಕರಿಸಲಾಗಿದೆ . ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್‌ಗಳಂತೆಯೇ, <hr>ಗಳು ಮೂಲಕ ಶೈಲಿಯನ್ನು border-topಹೊಂದಿದ್ದು, ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಹೊಂದಿವೆ ಮತ್ತು ಪೋಷಕರ ಮೂಲಕ ಹೊಂದಿಸಿದಾಗ ಅವುಗಳ ಮೂಲಕ opacity: .25ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆದುಕೊಳ್ಳುತ್ತವೆ . ಅವುಗಳನ್ನು ಪಠ್ಯ, ಗಡಿ ಮತ್ತು ಅಪಾರದರ್ಶಕತೆಯ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಮಾರ್ಪಡಿಸಬಹುದು.border-colorcolorcolor

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

ಪಟ್ಟಿಗಳು

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

ಎಲ್ಲಾ ಪಟ್ಟಿಗಳ ಮೇಲಿನ ಅಂಚುಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ
ಮತ್ತು ಅವರ ಕೆಳಭಾಗದ ಅಂಚು ಸಾಮಾನ್ಯವಾಗಿದೆ
ನೆಸ್ಟೆಡ್ ಪಟ್ಟಿಗಳು ಕೆಳಭಾಗದ ಅಂಚು ಹೊಂದಿಲ್ಲ
- ಈ ರೀತಿಯಾಗಿ ಅವರು ಹೆಚ್ಚು ಏಕರೂಪದ ನೋಟವನ್ನು ಹೊಂದಿದ್ದಾರೆ
- ವಿಶೇಷವಾಗಿ ಹೆಚ್ಚಿನ ಪಟ್ಟಿ ಐಟಂಗಳನ್ನು ಅನುಸರಿಸಿದಾಗ
ಎಡ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸಹ ಮರುಹೊಂದಿಸಲಾಗಿದೆ

ಆದೇಶ ಪಟ್ಟಿ ಇಲ್ಲಿದೆ
ಕೆಲವು ಪಟ್ಟಿ ಐಟಂಗಳೊಂದಿಗೆ
ಇದು ಒಟ್ಟಾರೆಯಾಗಿ ಅದೇ ನೋಟವನ್ನು ಹೊಂದಿದೆ
ಹಿಂದಿನ ಕ್ರಮವಿಲ್ಲದ ಪಟ್ಟಿಯಂತೆ

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

ವಿವರಣೆ ಪಟ್ಟಿಗಳು: ಪದಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ವಿವರಣೆ ಪಟ್ಟಿಯು ಪರಿಪೂರ್ಣವಾಗಿದೆ.
ಅವಧಿ: ಪದಕ್ಕೆ ವ್ಯಾಖ್ಯಾನ.; ಅದೇ ಪದಕ್ಕೆ ಎರಡನೇ ವ್ಯಾಖ್ಯಾನ.
ಮತ್ತೊಂದು ಪದ: ಈ ಇತರ ಪದಕ್ಕೆ ವ್ಯಾಖ್ಯಾನ.

ಇನ್ಲೈನ್ ಕೋಡ್

ನೊಂದಿಗೆ ಕೋಡ್‌ನ ಇನ್‌ಲೈನ್ ತುಣುಕುಗಳನ್ನು ಸುತ್ತಿ <code>. HTML ಕೋನ ಆವರಣಗಳಿಂದ ತಪ್ಪಿಸಿಕೊಳ್ಳಲು ಮರೆಯದಿರಿ.

ಉದಾಹರಣೆಗೆ, <section>ಇನ್ಲೈನ್ನಂತೆ ಸುತ್ತಿಡಬೇಕು.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ಕೋಡ್ ಬ್ಲಾಕ್ಗಳು

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

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

ಅಸ್ಥಿರ

ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಸೂಚಿಸಲು <var>ಟ್ಯಾಗ್ ಬಳಸಿ.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ಬಳಕೆದಾರರ ಇನ್ಪುಟ್

<kbd>ಕೀಬೋರ್ಡ್ ಮೂಲಕ ಸಾಮಾನ್ಯವಾಗಿ ನಮೂದಿಸಲಾದ ಇನ್‌ಪುಟ್ ಅನ್ನು ಸೂಚಿಸಲು ಬಳಸಿ .

cdಡೈರೆಕ್ಟರಿಗಳನ್ನು ಬದಲಾಯಿಸಲು, ಡೈರೆಕ್ಟರಿಯ ಹೆಸರನ್ನು ಟೈಪ್ ಮಾಡಿ.
ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಎಡಿಟ್ ಮಾಡಲು, ಒತ್ತಿರಿ ctrl + ,

html

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>ಟ್ಯಾಗ್ ಬಳಸಿ.

ಈ ಪಠ್ಯವನ್ನು ಕಂಪ್ಯೂಟರ್ ಪ್ರೋಗ್ರಾಂನಿಂದ ಮಾದರಿ ಔಟ್ಪುಟ್ ಎಂದು ಪರಿಗಣಿಸಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

ಕೋಷ್ಟಕಗಳು

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

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

ರೂಪಗಳು

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

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

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

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

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

ಉದಾಹರಣೆ ಇಮೇಲ್

ಉದಾಹರಣೆ ದೂರವಾಣಿ

ಉದಾಹರಣೆ url

ಉದಾಹರಣೆ ಸಂಖ್ಯೆ

ಉದಾಹರಣೆ ಹುಡುಕಾಟ

ಉದಾಹರಣೆ ಶ್ರೇಣಿ

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

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

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

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

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

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

ಉದಾಹರಣೆ ಸಮಯ

ಉದಾಹರಣೆ ಪಾಸ್ವರ್ಡ್

ಉದಾಹರಣೆ ದಿನಾಂಕ-ಸ್ಥಳೀಯ

ಉದಾಹರಣೆ ವಾರ

ಉದಾಹರಣೆ ತಿಂಗಳು

ಉದಾಹರಣೆ ಬಣ್ಣ

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

ದಿನಾಂಕ ಮತ್ತು ಬಣ್ಣ ಇನ್‌ಪುಟ್ ಬೆಂಬಲ

ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಿಂದ ದಿನಾಂಕದ ಒಳಹರಿವು ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ , ಅವುಗಳೆಂದರೆ Safari.

ಗುಂಡಿಗಳ ಮೇಲಿನ ಪಾಯಿಂಟರ್‌ಗಳು

role="button"ಡೀಫಾಲ್ಟ್ ಕರ್ಸರ್ ಅನ್ನು ಗೆ ಬದಲಾಯಿಸಲು ರೀಬೂಟ್ ವರ್ಧನೆಯನ್ನು ಒಳಗೊಂಡಿದೆ pointer. ಅಂಶಗಳು ಸಂವಾದಾತ್ಮಕವಾಗಿವೆ ಎಂದು ಸೂಚಿಸಲು ಸಹಾಯ ಮಾಡಲು ಈ ಗುಣಲಕ್ಷಣವನ್ನು ಅಂಶಗಳಿಗೆ ಸೇರಿಸಿ. <button>ತಮ್ಮದೇ ಆದ cursorಬದಲಾವಣೆಯನ್ನು ಪಡೆಯುವ ಅಂಶಗಳಿಗೆ ಈ ಪಾತ್ರವು ಅಗತ್ಯವಿಲ್ಲ .

ಬಟನ್ ಅಲ್ಲದ ಅಂಶ ಬಟನ್

html

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

ಇತರೆ ಅಂಶಗಳು

ವಿಳಾಸ

ನಿಂದ ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಅನ್ನು <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>ನಡುವೆ ಎದ್ದು ಕಾಣುವಂತೆ ಮಾಡಲು ಮೂಲಭೂತ ಶೈಲಿಯನ್ನು ಪಡೆಯುತ್ತದೆ.

HTML ಸಂಕ್ಷೇಪಣ ಅಂಶ .

ಸಾರಾಂಶ

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

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

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

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

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

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

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

<input type="text" hidden>

jQuery ಅಸಾಮರಸ್ಯ

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

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

ರೀಬೂಟ್ ಮಾಡಿ

ಅಪ್ರೋಚ್

CSS ಅಸ್ಥಿರ

ಪುಟ ಡೀಫಾಲ್ಟ್

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

ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ಪ್ಯಾರಾಗಳು

ಅಡ್ಡ ನಿಯಮಗಳು

ಪಟ್ಟಿಗಳು

ಇನ್ಲೈನ್ ​​ಕೋಡ್

ಕೋಡ್ ಬ್ಲಾಕ್ಗಳು

ಅಸ್ಥಿರ

ಬಳಕೆದಾರರ ಇನ್ಪುಟ್

ಮಾದರಿ ಔಟ್ಪುಟ್

ಕೋಷ್ಟಕಗಳು

ರೂಪಗಳು

ದಿನಾಂಕ ಮತ್ತು ಬಣ್ಣ ಇನ್‌ಪುಟ್ ಬೆಂಬಲ

ಗುಂಡಿಗಳ ಮೇಲಿನ ಪಾಯಿಂಟರ್‌ಗಳು

ಇತರೆ ಅಂಶಗಳು

ವಿಳಾಸ

ಬ್ಲಾಕ್ ಕೋಟ್

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

ಸಾರಾಂಶ

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

jQuery ಅಸಾಮರಸ್ಯ

ಇನ್ಲೈನ್ ಕೋಡ್

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

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