ರೀಬೂಟ್ ಮಾಡಿ
ರೀಬೂಟ್, ಒಂದೇ ಫೈಲ್ನಲ್ಲಿನ ಅಂಶ-ನಿರ್ದಿಷ್ಟ CSS ಬದಲಾವಣೆಗಳ ಸಂಗ್ರಹ, ಕಿಕ್ಸ್ಟಾರ್ಟ್ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ನಿರ್ಮಿಸಲು ಸೊಗಸಾದ, ಸ್ಥಿರ ಮತ್ತು ಸರಳ ಬೇಸ್ಲೈನ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಅಪ್ರೋಚ್
ಸಾಮಾನ್ಯೀಕರಣದ ಮೇಲೆ ರೀಬೂಟ್ ನಿರ್ಮಿಸುತ್ತದೆ, ಕೇವಲ ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ವಲ್ಪ ಅಭಿಪ್ರಾಯದ ಶೈಲಿಗಳೊಂದಿಗೆ ಅನೇಕ HTML ಅಂಶಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಹೆಚ್ಚುವರಿ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ತರಗತಿಗಳೊಂದಿಗೆ ಮಾತ್ರ ಮಾಡಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನಾವು <table>
ಸರಳವಾದ ಬೇಸ್ಲೈನ್ಗಾಗಿ ಕೆಲವು ಶೈಲಿಗಳನ್ನು ರೀಬೂಟ್ ಮಾಡುತ್ತೇವೆ ಮತ್ತು ನಂತರ .table
, .table-bordered
, ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಒದಗಿಸುತ್ತೇವೆ.
ರೀಬೂಟ್ನಲ್ಲಿ ಯಾವುದನ್ನು ಅತಿಕ್ರಮಿಸಬೇಕೆಂದು ಆಯ್ಕೆಮಾಡಲು ನಮ್ಮ ಮಾರ್ಗಸೂಚಿಗಳು ಮತ್ತು ಕಾರಣಗಳು ಇಲ್ಲಿವೆ:
- ಸ್ಕೇಲೆಬಲ್ ಕಾಂಪೊನೆಂಟ್ ಸ್ಪೇಸಿಂಗ್ಗಾಗಿ
rem
s ಬದಲಿಗೆ s ಅನ್ನು ಬಳಸಲು ಕೆಲವು ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳನ್ನು ನವೀಕರಿಸಿ .em
- ತಪ್ಪಿಸಿ
margin-top
. ಲಂಬ ಅಂಚುಗಳು ಕುಸಿಯಬಹುದು, ಅನಿರೀಕ್ಷಿತ ಫಲಿತಾಂಶಗಳನ್ನು ನೀಡುತ್ತದೆ. ಹೆಚ್ಚು ಮುಖ್ಯವಾಗಿ, ಒಂದೇ ನಿರ್ದೇಶನವುmargin
ಸರಳವಾದ ಮಾನಸಿಕ ಮಾದರಿಯಾಗಿದೆ. rem
ಸಾಧನದ ಗಾತ್ರಗಳಾದ್ಯಂತ ಸುಲಭವಾಗಿ ಸ್ಕೇಲಿಂಗ್ ಮಾಡಲು, ಬ್ಲಾಕ್ ಅಂಶಗಳು s ಗೆ s ಅನ್ನು ಬಳಸಬೇಕುmargin
.- ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ಬಳಸಿ -ಸಂಬಂಧಿತ ಗುಣಲಕ್ಷಣಗಳ ಘೋಷಣೆಗಳನ್ನು
font
ಕನಿಷ್ಠಕ್ಕೆ ಇರಿಸಿ.inherit
CSS ಅಸ್ಥಿರ
v5.1.1 ರಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ
v5.1.1 ನೊಂದಿಗೆ, ನಮ್ಮ ಎಲ್ಲಾ CSS ಬಂಡಲ್ಗಳಲ್ಲಿ ನಮಗೆ ಅಗತ್ಯವಿರುವ ಗಳನ್ನು ನಾವು ಪ್ರಮಾಣೀಕರಿಸಿದ್ದೇವೆ @import
(ಸೇರಿದಂತೆ bootstrap.css
, bootstrap-reboot.css
ಮತ್ತು bootstrap-grid.css
ಸೇರಿಸಲು _root.scss
. ಇದು ಎಲ್ಲಾ ಬಂಡಲ್ಗಳಿಗೆ ಮಟ್ಟದ CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ :root
, ಆ ಬಂಡಲ್ನಲ್ಲಿ ಎಷ್ಟು ಬಳಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ. ಅಂತಿಮವಾಗಿ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 5 ಮುಂದುವರಿಯುತ್ತದೆ ಕಾಲಾನಂತರದಲ್ಲಿ ಸೇರಿಸಲಾದ ಹೆಚ್ಚಿನ 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
.
ಸ್ಥಳೀಯ ಫಾಂಟ್ ಸ್ಟಾಕ್
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ರತಿ ಸಾಧನ ಮತ್ತು 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,
// 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;
ಫಾಂಟ್ ಸ್ಟಾಕ್ ಎಮೋಜಿ ಫಾಂಟ್ಗಳನ್ನು ಒಳಗೊಂಡಿರುವುದರಿಂದ, ಅನೇಕ ಸಾಮಾನ್ಯ ಚಿಹ್ನೆ/ಡಿಂಗ್ಬ್ಯಾಟ್ ಯುನಿಕೋಡ್ ಅಕ್ಷರಗಳನ್ನು ಬಹು-ಬಣ್ಣದ ಚಿತ್ರಗ್ರಾಫ್ಗಳಾಗಿ ಸಲ್ಲಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಬ್ರೌಸರ್/ಪ್ಲಾಟ್ಫಾರ್ಮ್ನ ಸ್ಥಳೀಯ ಎಮೋಜಿ ಫಾಂಟ್ನಲ್ಲಿ ಬಳಸಿದ ಶೈಲಿಯನ್ನು ಅವಲಂಬಿಸಿ ಅವುಗಳ ನೋಟವು ಬದಲಾಗುತ್ತದೆ ಮತ್ತು ಅವು ಯಾವುದೇ CSS color
ಶೈಲಿಗಳಿಂದ ಪ್ರಭಾವಿತವಾಗುವುದಿಲ್ಲ.
ಇದನ್ನು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಾದ್ಯಂತ ಜಾಗತಿಕವಾಗಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಆನುವಂಶಿಕವಾಗಿ font-family
ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ . <body>
ಜಾಗತಿಕ ಬದಲಾಯಿಸಲು, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು font-family
ನವೀಕರಿಸಿ $font-family-base
ಮತ್ತು ಮರುಸಂಕಲಿಸಿ.
CSS ಅಸ್ಥಿರ
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ 5 ಪ್ರಬುದ್ಧವಾಗುವುದನ್ನು ಮುಂದುವರಿಸಿದಂತೆ , ಯಾವಾಗಲೂ ಸಾಸ್ ಅನ್ನು ಮರುಸಂಕಲಿಸುವ ಅಗತ್ಯವಿಲ್ಲದೇ ಹೆಚ್ಚು ನೈಜ-ಸಮಯದ ಗ್ರಾಹಕೀಕರಣವನ್ನು ಒದಗಿಸುವ ಸಾಧನವಾಗಿ ಹೆಚ್ಚು ಹೆಚ್ಚು ಶೈಲಿಗಳನ್ನು CSS ವೇರಿಯೇಬಲ್ಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗುತ್ತದೆ. ನಮ್ಮ ಮೂಲ ಸಾಸ್ ವೇರಿಯೇಬಲ್ಗಳನ್ನು ತೆಗೆದುಕೊಂಡು ಅವುಗಳನ್ನು CSS ವೇರಿಯೇಬಲ್ಗಳಾಗಿ ಪರಿವರ್ತಿಸುವುದು ನಮ್ಮ ವಿಧಾನವಾಗಿದೆ. ಆ ರೀತಿಯಲ್ಲಿ, ನೀವು CSS ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಬಳಸದಿದ್ದರೂ ಸಹ, ನೀವು ಇನ್ನೂ ಸಾಸ್ನ ಎಲ್ಲಾ ಶಕ್ತಿಯನ್ನು ಹೊಂದಿದ್ದೀರಿ. ಇದು ಇನ್ನೂ ಪ್ರಗತಿಯಲ್ಲಿದೆ ಮತ್ತು ಸಂಪೂರ್ಣವಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.
ಉದಾಹರಣೆಗೆ, :root
ಸಾಮಾನ್ಯ <body>
ಶೈಲಿಗಳಿಗಾಗಿ ಈ CSS ಅಸ್ಥಿರಗಳನ್ನು ಪರಿಗಣಿಸಿ:
@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> |
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
. ನಾವು padding-left
ಆನ್ <ul>
ಮತ್ತು <ol>
ಅಂಶಗಳನ್ನು ಸಹ ಮರುಹೊಂದಿಸಿದ್ದೇವೆ.
- ಎಲ್ಲಾ ಪಟ್ಟಿಗಳ ಮೇಲಿನ ಅಂಚುಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ
- ಮತ್ತು ಅವರ ಕೆಳಭಾಗದ ಅಂಚು ಸಾಮಾನ್ಯವಾಗಿದೆ
- ನೆಸ್ಟೆಡ್ ಪಟ್ಟಿಗಳು ಕೆಳಭಾಗದ ಅಂಚು ಹೊಂದಿಲ್ಲ
- ಈ ರೀತಿಯಾಗಿ ಅವರು ಹೆಚ್ಚು ಏಕರೂಪದ ನೋಟವನ್ನು ಹೊಂದಿದ್ದಾರೆ
- ವಿಶೇಷವಾಗಿ ಹೆಚ್ಚಿನ ಪಟ್ಟಿ ಐಟಂಗಳನ್ನು ಅನುಸರಿಸಿದಾಗ
- ಎಡ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸಹ ಮರುಹೊಂದಿಸಲಾಗಿದೆ
- ಆದೇಶ ಪಟ್ಟಿ ಇಲ್ಲಿದೆ
- ಕೆಲವು ಪಟ್ಟಿ ಐಟಂಗಳೊಂದಿಗೆ
- ಇದು ಒಟ್ಟಾರೆಯಾಗಿ ಅದೇ ನೋಟವನ್ನು ಹೊಂದಿದೆ
- ಹಿಂದಿನ ಕ್ರಮವಿಲ್ಲದ ಪಟ್ಟಿಯಂತೆ
ಸರಳವಾದ ಸ್ಟೈಲಿಂಗ್, ಸ್ಪಷ್ಟ ಕ್ರಮಾನುಗತ ಮತ್ತು ಉತ್ತಮ ಅಂತರಕ್ಕಾಗಿ, ವಿವರಣೆ ಪಟ್ಟಿಗಳನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ margin
s. ಗೆ <dd>
ಮರುಹೊಂದಿಸಿ ಮತ್ತು ಸೇರಿಸಿ . ಗಳು ಬೋಲ್ಡ್ ಆಗಿವೆ .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>
ಗಳು ಯಾವುದೇ ಗಡಿಗಳು, ಪ್ಯಾಡಿಂಗ್ ಅಥವಾ ಅಂಚುಗಳನ್ನು ಹೊಂದಿಲ್ಲ ಆದ್ದರಿಂದ ಅವುಗಳನ್ನು ವೈಯಕ್ತಿಕ ಒಳಹರಿವು ಅಥವಾ ಇನ್ಪುಟ್ಗಳ ಗುಂಪುಗಳಿಗೆ ಹೊದಿಕೆಗಳಾಗಿ ಸುಲಭವಾಗಿ ಬಳಸಬಹುದು.<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)
.
ಈ ಬದಲಾವಣೆಗಳು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಕೆಳಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.
ದಿನಾಂಕ ಮತ್ತು ಬಣ್ಣ ಇನ್ಪುಟ್ ಬೆಂಬಲ
ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳಿಂದ ದಿನಾಂಕದ ಒಳಹರಿವು ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ , ಅವುಗಳೆಂದರೆ Safari.
ಗುಂಡಿಗಳ ಮೇಲಿನ ಪಾಯಿಂಟರ್ಗಳು
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>
<br>
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; }
ತಡೆಯಲು ಸಹಾಯ ಮಾಡುವ ಮೂಲಕ ನಾವು ಈ ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಸುಧಾರಿಸುತ್ತೇವೆ .display
<input type="text" hidden>
jQuery ಅಸಾಮರಸ್ಯ
[hidden]
jQuery $(...).hide()
ಮತ್ತು $(...).show()
ವಿಧಾನಗಳೊಂದಿಗೆ ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ. ಆದ್ದರಿಂದ, ನಾವು ಪ್ರಸ್ತುತ ಅಂಶಗಳ [hidden]
ನಿರ್ವಹಣೆಗಾಗಿ ಇತರ ತಂತ್ರಗಳನ್ನು ವಿಶೇಷವಾಗಿ ಅನುಮೋದಿಸುವುದಿಲ್ಲ.display
ಒಂದು ಅಂಶದ ಗೋಚರತೆಯನ್ನು ಕೇವಲ ಟಾಗಲ್ ಮಾಡಲು, ಅಂದರೆ ಅದನ್ನು display
ಮಾರ್ಪಡಿಸಲಾಗಿಲ್ಲ ಮತ್ತು ಅಂಶವು ಇನ್ನೂ ಡಾಕ್ಯುಮೆಂಟ್ನ ಹರಿವಿನ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು, ಬದಲಿಗೆ.invisible
ವರ್ಗವನ್ನು ಬಳಸಿ .