ರೀಬೂಟ್ ಮಾಡಿ
ರೀಬೂಟ್, ಒಂದೇ ಫೈಲ್ನಲ್ಲಿನ ಅಂಶ-ನಿರ್ದಿಷ್ಟ CSS ಬದಲಾವಣೆಗಳ ಸಂಗ್ರಹ, ಕಿಕ್ಸ್ಟಾರ್ಟ್ ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ನಿರ್ಮಿಸಲು ಸೊಗಸಾದ, ಸ್ಥಿರ ಮತ್ತು ಸರಳ ಬೇಸ್ಲೈನ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಅಪ್ರೋಚ್
ಸಾಮಾನ್ಯೀಕರಣದ ಮೇಲೆ ರೀಬೂಟ್ ನಿರ್ಮಿಸುತ್ತದೆ, ಕೇವಲ ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ವಲ್ಪ ಅಭಿಪ್ರಾಯದ ಶೈಲಿಗಳೊಂದಿಗೆ ಅನೇಕ HTML ಅಂಶಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಹೆಚ್ಚುವರಿ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ತರಗತಿಗಳೊಂದಿಗೆ ಮಾತ್ರ ಮಾಡಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನಾವು <table>
ಸರಳವಾದ ಬೇಸ್ಲೈನ್ಗಾಗಿ ಕೆಲವು ಶೈಲಿಗಳನ್ನು ರೀಬೂಟ್ ಮಾಡುತ್ತೇವೆ ಮತ್ತು ನಂತರ .table
, .table-bordered
, ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಒದಗಿಸುತ್ತೇವೆ.
ರೀಬೂಟ್ನಲ್ಲಿ ಯಾವುದನ್ನು ಅತಿಕ್ರಮಿಸಬೇಕೆಂದು ಆಯ್ಕೆಮಾಡಲು ನಮ್ಮ ಮಾರ್ಗಸೂಚಿಗಳು ಮತ್ತು ಕಾರಣಗಳು ಇಲ್ಲಿವೆ:
- ಸ್ಕೇಲೆಬಲ್ ಕಾಂಪೊನೆಂಟ್ ಸ್ಪೇಸಿಂಗ್ಗಾಗಿ
rem
s ಬದಲಿಗೆ s ಅನ್ನು ಬಳಸಲು ಕೆಲವು ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳನ್ನು ನವೀಕರಿಸಿ .em
- ತಪ್ಪಿಸಿ
margin-top
. ಲಂಬ ಅಂಚುಗಳು ಕುಸಿಯಬಹುದು, ಅನಿರೀಕ್ಷಿತ ಫಲಿತಾಂಶಗಳನ್ನು ನೀಡುತ್ತದೆ. ಹೆಚ್ಚು ಮುಖ್ಯವಾಗಿ, ಒಂದೇ ನಿರ್ದೇಶನವುmargin
ಸರಳವಾದ ಮಾನಸಿಕ ಮಾದರಿಯಾಗಿದೆ. rem
ಸಾಧನದ ಗಾತ್ರಗಳಾದ್ಯಂತ ಸುಲಭವಾಗಿ ಸ್ಕೇಲಿಂಗ್ ಮಾಡಲು, ಬ್ಲಾಕ್ ಅಂಶಗಳು s ಗೆ s ಅನ್ನು ಬಳಸಬೇಕುmargin
.- ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ಬಳಸಿ -ಸಂಬಂಧಿತ ಗುಣಲಕ್ಷಣಗಳ ಘೋಷಣೆಗಳನ್ನು
font
ಕನಿಷ್ಠಕ್ಕೆ ಇರಿಸಿ.inherit
ಪುಟ ಡೀಫಾಲ್ಟ್
<html>
ಉತ್ತಮವಾದ ಪುಟ-ವ್ಯಾಪಕ ಡಿಫಾಲ್ಟ್ಗಳನ್ನು ಒದಗಿಸಲು ಮತ್ತು <body>
ಅಂಶಗಳನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ . ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾಗಿ:
- ಪ್ರತಿ ಅಂಶದ ಮೇಲೆ
box-sizing
ಜಾಗತಿಕವಾಗಿ ಹೊಂದಿಸಲಾಗಿದೆ - ಸೇರಿದಂತೆ*::before
ಮತ್ತು . ಪ್ಯಾಡಿಂಗ್ ಅಥವಾ ಗಡಿಯಿಂದಾಗಿ ಅಂಶದ ಘೋಷಿತ ಅಗಲವು ಎಂದಿಗೂ ಮೀರುವುದಿಲ್ಲ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.*::after
border-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 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;
ಫಾಂಟ್ ಸ್ಟಾಕ್ ಎಮೋಜಿ ಫಾಂಟ್ಗಳನ್ನು ಒಳಗೊಂಡಿರುವುದರಿಂದ, ಅನೇಕ ಸಾಮಾನ್ಯ ಚಿಹ್ನೆ/ಡಿಂಗ್ಬ್ಯಾಟ್ ಯುನಿಕೋಡ್ ಅಕ್ಷರಗಳನ್ನು ಬಹು-ಬಣ್ಣದ ಚಿತ್ರಗ್ರಾಫ್ಗಳಾಗಿ ಸಲ್ಲಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಬ್ರೌಸರ್/ಪ್ಲಾಟ್ಫಾರ್ಮ್ನ ಸ್ಥಳೀಯ ಎಮೋಜಿ ಫಾಂಟ್ನಲ್ಲಿ ಬಳಸಿದ ಶೈಲಿಯನ್ನು ಅವಲಂಬಿಸಿ ಅವುಗಳ ನೋಟವು ಬದಲಾಗುತ್ತದೆ ಮತ್ತು ಅವು ಯಾವುದೇ 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. ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಶಿರೋನಾಮೆ |
ಪಟ್ಟಿಗಳು
ಎಲ್ಲಾ ಪಟ್ಟಿಗಳು- <ul>
, <ol>
, ಮತ್ತು <dl>
-ಅವುಗಳನ್ನು margin-top
ತೆಗೆದುಹಾಕಲಾಗಿದೆ ಮತ್ತು a margin-bottom: 1rem
. ನೆಸ್ಟೆಡ್ ಪಟ್ಟಿಗಳು ಇಲ್ಲ margin-bottom
.
- ಎಲ್ಲಾ ಪಟ್ಟಿಗಳ ಮೇಲಿನ ಅಂಚುಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ
- ಮತ್ತು ಅವರ ಕೆಳಭಾಗದ ಅಂಚು ಸಾಮಾನ್ಯವಾಗಿದೆ
- ನೆಸ್ಟೆಡ್ ಪಟ್ಟಿಗಳು ಕೆಳಭಾಗದ ಅಂಚು ಹೊಂದಿಲ್ಲ
- ಈ ರೀತಿಯಾಗಿ ಅವರು ಹೆಚ್ಚು ಏಕರೂಪದ ನೋಟವನ್ನು ಹೊಂದಿದ್ದಾರೆ
- ವಿಶೇಷವಾಗಿ ಹೆಚ್ಚಿನ ಪಟ್ಟಿ ಐಟಂಗಳನ್ನು ಅನುಸರಿಸಿದಾಗ
- ಎಡ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸಹ ಮರುಹೊಂದಿಸಲಾಗಿದೆ
- ಆದೇಶ ಪಟ್ಟಿ ಇಲ್ಲಿದೆ
- ಕೆಲವು ಪಟ್ಟಿ ಐಟಂಗಳೊಂದಿಗೆ
- ಇದು ಒಟ್ಟಾರೆಯಾಗಿ ಅದೇ ನೋಟವನ್ನು ಹೊಂದಿದೆ
- ಹಿಂದಿನ ಕ್ರಮವಿಲ್ಲದ ಪಟ್ಟಿಯಂತೆ
ಸರಳವಾದ ಸ್ಟೈಲಿಂಗ್, ಸ್ಪಷ್ಟ ಕ್ರಮಾನುಗತ ಮತ್ತು ಉತ್ತಮ ಅಂತರಕ್ಕಾಗಿ, ವಿವರಣೆ ಪಟ್ಟಿಗಳನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ margin
s. ಗೆ <dd>
ಮರುಹೊಂದಿಸಿ ಮತ್ತು ಸೇರಿಸಿ . ಗಳು ಬೋಲ್ಡ್ ಆಗಿವೆ .margin-left
0
margin-bottom: .5rem
<dt>
- ವಿವರಣೆ ಪಟ್ಟಿಗಳು
- ಪದಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ವಿವರಣೆ ಪಟ್ಟಿಯು ಪರಿಪೂರ್ಣವಾಗಿದೆ.
- ಅವಧಿ
- ಪದಕ್ಕೆ ವ್ಯಾಖ್ಯಾನ.
- ಅದೇ ಪದಕ್ಕೆ ಎರಡನೇ ವ್ಯಾಖ್ಯಾನ.
- ಮತ್ತೊಂದು ಪದ
- ಈ ಇತರ ಪದಕ್ಕೆ ವ್ಯಾಖ್ಯಾನ.
ಪೂರ್ವ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಿದ ಪಠ್ಯ
<pre>
ಅಂಶವನ್ನು ತೆಗೆದುಹಾಕಲು ಮತ್ತು ಅದರ ಘಟಕಗಳನ್ನು ಬಳಸಲು margin-top
ಮರುಹೊಂದಿಸಲಾಗಿದೆ .rem
margin-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>
ಸಮತಲ ಮರುಗಾತ್ರಗೊಳಿಸುವಿಕೆಯು ಪುಟದ ವಿನ್ಯಾಸವನ್ನು "ಬ್ರೇಕ್" ಮಾಡುವುದರಿಂದ ಗಳನ್ನು ಲಂಬವಾಗಿ ಮಾತ್ರ ಮರುಗಾತ್ರಗೊಳಿಸುವಂತೆ ಮಾರ್ಪಡಿಸಲಾಗಿದೆ.<button>
s ಮತ್ತು<input>
ಬಟನ್ ಅಂಶಗಳುcursor: pointer
ಯಾವಾಗ:not(:disabled)
.
ಈ ಬದಲಾವಣೆಗಳು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ಕೆಳಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.
ಗುಂಡಿಗಳ ಮೇಲಿನ ಪಾಯಿಂಟರ್ಗಳು
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; }
ತಡೆಯಲು ಸಹಾಯ ಮಾಡುವ ಮೂಲಕ ನಾವು ಈ ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಸುಧಾರಿಸುತ್ತೇವೆ . IE10 ನಿಂದ ಸ್ಥಳೀಯವಾಗಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲದಿದ್ದರೂ, ನಮ್ಮ CSS ನಲ್ಲಿನ ಸ್ಪಷ್ಟ ಘೋಷಣೆಯು ಆ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತದೆ display
.[hidden]
<input type="text" hidden>
jQuery ಅಸಾಮರಸ್ಯ
[hidden]
jQuery $(...).hide()
ಮತ್ತು $(...).show()
ವಿಧಾನಗಳೊಂದಿಗೆ ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ. ಆದ್ದರಿಂದ, ನಾವು ಪ್ರಸ್ತುತ ಅಂಶಗಳ [hidden]
ನಿರ್ವಹಣೆಗಾಗಿ ಇತರ ತಂತ್ರಗಳನ್ನು ವಿಶೇಷವಾಗಿ ಅನುಮೋದಿಸುವುದಿಲ್ಲ.display
ಒಂದು ಅಂಶದ ಗೋಚರತೆಯನ್ನು ಕೇವಲ ಟಾಗಲ್ ಮಾಡಲು, ಅಂದರೆ ಅದನ್ನು display
ಮಾರ್ಪಡಿಸಲಾಗಿಲ್ಲ ಮತ್ತು ಅಂಶವು ಇನ್ನೂ ಡಾಕ್ಯುಮೆಂಟ್ನ ಹರಿವಿನ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು, ಬದಲಿಗೆ.invisible
ವರ್ಗವನ್ನು ಬಳಸಿ .