ವೆಬ್ ಆನುವಂಶಿಕತೆಯು ವೆಬ್ ಡಾಕ್ಯುಮೆಂಟ್ಗಳಲ್ಲಿ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ

CSS ನೊಂದಿಗೆ ವೆಬ್ಸೈಟ್ ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವ ಪ್ರಮುಖ ಭಾಗವೆಂದರೆ ಆನುವಂಶಿಕ ಪರಿಕಲ್ಪನೆಯನ್ನು ಅರ್ಥೈಸಿಕೊಳ್ಳುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಆನುವಂಶಿಕತೆಯನ್ನು ಸ್ವತ್ತಿನ ಶೈಲಿಯಿಂದ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. ನೀವು ಶೈಲಿ ಆಸ್ತಿ ಹಿನ್ನಲೆ ಬಣ್ಣವನ್ನು ಹುಡುಕಿದಾಗ, "ಇನ್ಹೆರಿಟೆನ್ಸ್" ಎಂಬ ಶೀರ್ಷಿಕೆಯ ವಿಭಾಗವನ್ನು ನೀವು ನೋಡುತ್ತೀರಿ. ನೀವು ಹೆಚ್ಚಿನ ವೆಬ್ ವಿನ್ಯಾಸಕರಂತೆ ಇದ್ದರೆ, ನೀವು ಆ ವಿಭಾಗವನ್ನು ನಿರ್ಲಕ್ಷಿಸಿರುವಿರಿ, ಆದರೆ ಇದು ಒಂದು ಉದ್ದೇಶವನ್ನು ಪೂರೈಸುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಇನ್ಹೆರಿಟೆನ್ಸ್ ಎಂದರೇನು?

HTML ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಅಂಶವು ಮರದ ಭಾಗವಾಗಿದೆ ಮತ್ತು ಆರಂಭಿಕ ಅಂಶವನ್ನು ಹೊರತುಪಡಿಸಿ ಪ್ರತಿಯೊಂದು ಅಂಶವೂ ಅದು ಆವರಿಸಿರುವ ಪೋಷಕ ಅಂಶವನ್ನು ಹೊಂದಿದೆ. ಗುಣಲಕ್ಷಣಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಬಹುದಾದರೆ ಆ ಮೂಲ ಅಂಶಕ್ಕೆ ಯಾವುದೇ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲಾಗಿರುವ ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದು.

ಉದಾಹರಣೆಗೆ, ಈ ಕೆಳಗಿನ ಎಚ್ಟಿಎಮ್ಎಲ್ ಕೋಡ್ ಇಎಮ್ ಟ್ಯಾಗ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ H1 ಟ್ಯಾಗ್ ಅನ್ನು ಹೊಂದಿದೆ:

ಇದು ಬಿಗ್ ಹೆಡ್ಲೈನ್ ​​ ಆಗಿದೆ

ಇಎಮ್ ಎಲಿಮೆಂಟ್ H1 ಅಂಶದ ಒಂದು ಮಗು, ಮತ್ತು H1 ನ ಯಾವುದೇ ಶೈಲಿಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಇಎಮ್ ಪಠ್ಯಕ್ಕೆ ವರ್ಗಾಯಿಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ:

h1 {font-size: 2em; }

ಫಾಂಟ್-ಗಾತ್ರದ ಆಸ್ತಿಯು ಆನುವಂಶಿಕವಾಗಿರುವುದರಿಂದ, "ಬಿಗ್" (ಇಎಮ್ ಟ್ಯಾಗ್ಗಳೊಳಗೆ ಆವರಿಸಲ್ಪಟ್ಟಿದೆ) ಎಂದು ಹೇಳುವ ಪಠ್ಯವು H1 ನ ಉಳಿದ ಭಾಗಗಳಂತೆಯೇ ಇರುತ್ತದೆ. ಇದು ಏಕೆಂದರೆ CSS ಆಸ್ತಿಯಲ್ಲಿ ಮೌಲ್ಯವನ್ನು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಇನ್ಹೆರಿಟೆನ್ಸ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು

ಅದನ್ನು ಬಳಸಲು ಸುಲಭವಾದ ಮಾರ್ಗವೆಂದರೆ ಮತ್ತು ಆನುವಂಶಿಕವಾಗಿಲ್ಲದ ಸಿಎಸ್ಎಸ್ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಪರಿಚಿತವಾಗಿದೆ. ಆಸ್ತಿಯು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆದಿದ್ದರೆ, ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಪ್ರತಿ ಮಗುವಿನ ಅಂಶಕ್ಕೆ ಮೌಲ್ಯವು ಒಂದೇ ಆಗಿರುತ್ತದೆ ಎಂದು ನಿಮಗೆ ತಿಳಿದಿದೆ.

BODY ನಂತಹ ಅತ್ಯಂತ ಉನ್ನತ ಮಟ್ಟದ ಅಂಶದ ಮೇಲೆ ನಿಮ್ಮ ಮೂಲ ಶೈಲಿಗಳನ್ನು ಹೊಂದಿಸುವುದು ಇದರ ಬಳಕೆಗೆ ಉತ್ತಮ ಮಾರ್ಗವಾಗಿದೆ. ದೇಹ ಆಸ್ತಿಯ ಮೇಲೆ ನಿಮ್ಮ ಫಾಂಟ್-ಕುಟುಂಬವನ್ನು ನೀವು ಹೊಂದಿಸಿದರೆ, ನಂತರ, ಪಿತ್ರಾರ್ಜಿತವಾಗಿ ಧನ್ಯವಾದಗಳು, ಇಡೀ ಡಾಕ್ಯುಮೆಂಟ್ ಅದೇ ಫಾಂಟ್-ಕುಟುಂಬವನ್ನು ಇರಿಸುತ್ತದೆ. ಇದು ವಾಸ್ತವವಾಗಿ ಸಣ್ಣ ಸ್ಟೈಲ್ಶೀಟ್ಗಳಿಗಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ, ಏಕೆಂದರೆ ಅದು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗಿರುತ್ತದೆ, ಏಕೆಂದರೆ ಒಟ್ಟಾರೆ ಶೈಲಿಗಳು ಕಡಿಮೆ. ಉದಾಹರಣೆಗೆ:

ದೇಹ {ಫಾಂಟ್-ಕುಟುಂಬ: ಏರಿಯಲ್, ಸಾನ್ಸ್-ಸೆರಿಫ್; }

ಇನ್ಹೆರಿಟ್ ಶೈಲಿ ಮೌಲ್ಯವನ್ನು ಬಳಸಿ

ಪ್ರತಿ ಸಿಎಸ್ಎಸ್ ಆಸ್ತಿಯು ಸಂಭವನೀಯ ಆಯ್ಕೆಯನ್ನು "ಆನುವಂಶಿಕವಾಗಿ" ಮೌಲ್ಯವನ್ನು ಒಳಗೊಂಡಿದೆ. ಆಸ್ತಿಯನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲಾಗದಿದ್ದರೂ ಸಹ ಅದು ಪೋಷಕನಂತೆ ಅದೇ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರಬೇಕು ಎಂದು ವೆಬ್ ಬ್ರೌಸರ್ಗೆ ಹೇಳುತ್ತದೆ. ನೀವು ಆನುವಂಶಿಕವಾಗಿಲ್ಲದ ಅಂಚುಗಳಂತಹ ಶೈಲಿಯನ್ನು ಹೊಂದಿಸಿದರೆ, ನಂತರದ ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿ ಪೋಷಕನಂತೆಯೇ ಅದೇ ಅಂಚುಗೆ ನೀವು ಆನುವಂಶಿಕ ಮೌಲ್ಯವನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ:

ದೇಹದ {margin: 1em; } p {margin: inherit; }

ಇನ್ಹೆರಿಟೆನ್ಸ್ ಕಂಪ್ಯೂಟೆಡ್ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸುತ್ತದೆ

ಉದ್ದವನ್ನು ಬಳಸುವ ಫಾಂಟ್ ಗಾತ್ರಗಳಂತಹ ಅನುವಂಶಿಕ ಮೌಲ್ಯಗಳಿಗೆ ಇದು ಮುಖ್ಯವಾಗಿದೆ. ಒಂದು ಕಂಪ್ಯೂಟೆಡ್ ಮೌಲ್ಯವು ವೆಬ್ ಪುಟದಲ್ಲಿನ ಕೆಲವು ಇತರ ಮೌಲ್ಯಗಳಿಗೆ ಹೋಲಿಸಿದರೆ ಒಂದು ಮೌಲ್ಯವಾಗಿದೆ.

ನಿಮ್ಮ BODY ಅಂಶದಲ್ಲಿ ನೀವು 1em ನ ಫಾಂಟ್-ಗಾತ್ರವನ್ನು ಹೊಂದಿಸಿದರೆ, ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಪುಟವು ಕೇವಲ 1em ಗಾತ್ರದಷ್ಟಲ್ಲ. ಏಕೆಂದರೆ ಹೆಡಿಂಗ್ಗಳು (H1-H6) ಮತ್ತು ಇತರ ಅಂಶಗಳು (ಕೆಲವು ಬ್ರೌಸರ್ಗಳು ಟೇಬಲ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ವಿಭಿನ್ನವಾಗಿ ಲೆಕ್ಕಹಾಕುತ್ತವೆ) ವೆಬ್ ಬ್ರೌಸರ್ನಲ್ಲಿ ಸಾಪೇಕ್ಷ ಗಾತ್ರವನ್ನು ಹೊಂದಿವೆ. ಇತರ ಫಾಂಟ್ ಗಾತ್ರ ಮಾಹಿತಿಯ ಅನುಪಸ್ಥಿತಿಯಲ್ಲಿ, ವೆಬ್ ಬ್ರೌಸರ್ ಯಾವಾಗಲೂ ಪುಟದಲ್ಲಿ ದೊಡ್ಡ ಪಠ್ಯವನ್ನು H1 ಶಿರೋನಾಮೆ ಮಾಡುತ್ತದೆ, ನಂತರ H2 ಮತ್ತು ಅದಕ್ಕೂ ಮುಂಚೆ. ನಿಮ್ಮ BODY ಅಂಶವನ್ನು ಒಂದು ನಿರ್ದಿಷ್ಟ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ನೀವು ಹೊಂದಿಸಿದಾಗ, ಅದು "ಸರಾಸರಿ" ಫಾಂಟ್ ಗಾತ್ರವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ, ಮತ್ತು ಶಿರೋನಾಮೆ ಅಂಶಗಳನ್ನು ಅದರಿಂದ ಲೆಕ್ಕಾಚಾರ ಮಾಡಲಾಗುತ್ತದೆ.

ಇನ್ಹೆರಿಟೆನ್ಸ್ ಮತ್ತು ಹಿನ್ನೆಲೆ ಪ್ರಾಪರ್ಟೀಸ್ ಬಗ್ಗೆ ಒಂದು ಸೂಚನೆ

ಪಟ್ಟಿ ಮಾಡಲಾಗಿರುವ ಅನೇಕ ಶೈಲಿಗಳು W3C ಯಲ್ಲಿ CSS 2 ರಲ್ಲಿ ಆನುವಂಶಿಕವಾಗಿಲ್ಲ, ಆದರೆ ವೆಬ್ ಬ್ರೌಸರ್ಗಳು ಈಗಲೂ ಮೌಲ್ಯಗಳನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಈ ಕೆಳಗಿನ HTML ಮತ್ತು CSS ಅನ್ನು ಬರೆದರೆ: