ನೀವು ಪ್ರತಿ ಅಂಶಕ್ಕೆ ಒಂದೇ ಸಿಎಸ್ಎಸ್ ವರ್ಗಕ್ಕೆ ಸೀಮಿತವಾಗಿಲ್ಲ.
ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ಸ್ (CSS) ನೀವು ಆ ಅಂಶಕ್ಕೆ ಅನ್ವಯವಾಗುವ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಹೋಗು ಮಾಡುವ ಮೂಲಕ ಅಂಶದ ರೂಪವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತದೆ. ಈ ಲಕ್ಷಣಗಳು ಎರಡೂ ಆಗಿರಬಹುದು ಮತ್ತು ID ಅಥವಾ ವರ್ಗ ಮತ್ತು ಎಲ್ಲಾ ಲಕ್ಷಣಗಳಂತೆ, ಅವರು ಜೋಡಿಸಲಾಗಿರುವ ಅಂಶಗಳಿಗೆ ಉಪಯುಕ್ತ ಮಾಹಿತಿಯನ್ನು ಸೇರಿಸುತ್ತವೆ. ನೀವು ಅಂಶಕ್ಕೆ ಸೇರಿಸುವ ಗುಣಲಕ್ಷಣವನ್ನು ಅವಲಂಬಿಸಿ, ಆ ಅಂಶ ಮತ್ತು ವೆಬ್ಸೈಟ್ಗೆ ಒಟ್ಟಾರೆಯಾಗಿ ನೋಟವನ್ನು ಸಾಧಿಸಲು ಅಗತ್ಯವಾದ ದೃಶ್ಯ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು CSS ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬರೆಯಬಹುದು.
ಐಡಿಗಳು ಅಥವಾ ತರಗತಿಗಳು ಸಿಎಸ್ಎಸ್ ನಿಯಮಗಳೊಂದಿಗೆ ಅವುಗಳೊಳಗೆ ಹಚ್ಚೆ ಮಾಡುವ ಉದ್ದೇಶಕ್ಕಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿರುವಾಗ, ಆಧುನಿಕ ವೆಬ್ ವಿನ್ಯಾಸ ವಿಧಾನಗಳು ಭಾಗಶಃ, ID ಗಳ ಮೇಲೆ ತರಗತಿಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ, ಏಕೆಂದರೆ ಅವುಗಳು ಒಟ್ಟಾರೆಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಕಡಿಮೆ ನಿರ್ದಿಷ್ಟ ಮತ್ತು ಸುಲಭವಾಗಿದೆ. ಹೌದು, ನೀವು ID ಗಳನ್ನು ಬಳಸುವ ಅನೇಕ ಸೈಟ್ಗಳನ್ನು ಇನ್ನೂ ಕಾಣುವಿರಿ, ಆದರೆ ಈ ಲಕ್ಷಣಗಳು ಹಿಂದೆಂದಿಗಿಂತಲೂ ಹೆಚ್ಚು ಮಿತವಾಗಿ ಅನ್ವಯಿಸಲ್ಪಡುತ್ತವೆ, ಆದರೆ ತರಗತಿಗಳು ಆಧುನಿಕ ವೆಬ್ ಪುಟಗಳನ್ನು ತೆಗೆದುಕೊಂಡಿದ್ದಾರೆ.
ಸಿಎಸ್ಎಸ್ ನಲ್ಲಿ ಏಕ ಅಥವಾ ಬಹು ತರಗತಿಗಳು?
ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ ನೀವು ಒಂದು ಅಂಶಕ್ಕೆ ಒಂದೇ ವರ್ಗ ಗುಣಲಕ್ಷಣವನ್ನು ನಿಗದಿಪಡಿಸಬಹುದು, ಆದರೆ ನೀವು ನಿಜವಾಗಿ ನೀವು ಒಂದು ID ಯನ್ನು ಹೊಂದಿರುವ ರೀತಿಯಲ್ಲಿಯೇ ಒಂದು ವರ್ಗಕ್ಕೆ ಸೀಮಿತವಾಗಿಲ್ಲ. ಒಂದು ಅಂಶವು ಏಕೈಕ ID ಗುಣಲಕ್ಷಣವನ್ನು ಮಾತ್ರ ಹೊಂದಿದ್ದರೂ, ನೀವು ಸಂಪೂರ್ಣವಾಗಿ ಅನೇಕ ವರ್ಗಗಳನ್ನು ನೀಡಬಹುದು ಮತ್ತು ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ನಿಮ್ಮ ಪುಟವನ್ನು ಶೈಲಿಗೆ ಇನ್ನಷ್ಟು ಸುಲಭವಾಗಿಸುತ್ತದೆ ಮತ್ತು ಸುಲಭವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ!
ನೀವು ಒಂದು ಅಂಶಕ್ಕೆ ಬಹು ವರ್ಗಗಳನ್ನು ನಿಯೋಜಿಸಲು ಬಯಸಿದಲ್ಲಿ, ನೀವು ಹೆಚ್ಚುವರಿ ವರ್ಗಗಳನ್ನು ಸೇರಿಸಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿನ ಜಾಗದಿಂದ ಅವುಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಬಹುದು.
ಉದಾಹರಣೆಗೆ, ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ಗೆ ಮೂರು ವರ್ಗಗಳಿವೆ:
ಪುಲ್ಕೋಟ್ ವೈಶಿಷ್ಟ್ಯಗೊಳಿಸಿದ ಎಡ "> ಇದು ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಪಠ್ಯವಾಗಿರುತ್ತದೆ
ಇದು ಕೆಳಗಿನ ಮೂರು ವರ್ಗಗಳನ್ನು ಪ್ಯಾರಾಗ್ರಾಫ್ ಟ್ಯಾಗ್ನಲ್ಲಿ ಹೊಂದಿಸುತ್ತದೆ:
- ಪುಲ್ಕೋಟ್
- ವೈಶಿಷ್ಟ್ಯ
- ಎಡ
ಈ ವರ್ಗದ ಪ್ರತಿಯೊಂದು ಮೌಲ್ಯಗಳ ನಡುವಿನ ಅಂತರವನ್ನು ಗಮನಿಸಿ. ಆ ಜಾಗಗಳು ವಿಭಿನ್ನ, ಪ್ರತ್ಯೇಕ ವರ್ಗಗಳಾಗಿ ಅವುಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಇದಲ್ಲದೆ ವರ್ಗ ಹೆಸರುಗಳು ಅವುಗಳಲ್ಲಿ ಸ್ಥಳಾವಕಾಶಗಳನ್ನು ಹೊಂದಿಲ್ಲ, ಏಕೆಂದರೆ ಹಾಗೆ ಮಾಡುವುದರಿಂದ ಅವುಗಳನ್ನು ಪ್ರತ್ಯೇಕ ವರ್ಗಗಳಾಗಿ ಹೊಂದಿಸುತ್ತದೆ.
ಉದಾಹರಣೆಗೆ, ನೀವು ಒಂದು ಸ್ಥಳವಿಲ್ಲದೆ "ಪುಲ್ಕೋಟ್-ವೈಶಿಷ್ಟ್ಯ-ಎಡ" ಅನ್ನು ಬಳಸಿದರೆ, ಅದು ಒಂದು ವರ್ಗ ಮೌಲ್ಯವಾಗಿರುತ್ತದೆ, ಆದರೆ ಮೇಲಿನ ಉದಾಹರಣೆಯೆಂದರೆ, ಈ ಮೂರು ಪದಗಳನ್ನು ಸ್ಥಳಾವಕಾಶದೊಂದಿಗೆ ಬೇರ್ಪಡಿಸಲಾಗಿರುತ್ತದೆ, ಅವುಗಳನ್ನು ಪ್ರತ್ಯೇಕ ಮೌಲ್ಯಗಳಾಗಿ ಹೊಂದಿಸುತ್ತದೆ. ನಿಮ್ಮ ವೆಬ್ಪುಟಗಳಲ್ಲಿ ಯಾವ ವರ್ಗ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಲು ನಿರ್ಧರಿಸಬೇಕೆಂಬುದನ್ನು ಈ ಪರಿಕಲ್ಪನೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯ.
ಒಮ್ಮೆ ನೀವು ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ನಿಮ್ಮ ವರ್ಗ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ನಂತರ ನೀವು ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ನಲ್ಲಿ ಈ ವರ್ಗಗಳನ್ನು ನಿಯೋಜಿಸಬಹುದು ಮತ್ತು ನೀವು ಸೇರಿಸಲು ಬಯಸುವ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ.
. ಪುಲ್ಕೋಟ್ {...}
.featured {...}
p.left {...}
ಈ ಉದಾಹರಣೆಗಳಲ್ಲಿ, ಸಿಎಸ್ಎಸ್ ಘೋಷಣೆಗಳು ಮತ್ತು ಮೌಲ್ಯಗಳ ಜೋಡಿಗಳು ಸುರುಳಿಯಾಕಾರದ ಬ್ರೇಸ್ನೊಳಗೆ ಇರುತ್ತದೆ, ಇದು ಸೂಕ್ತವಾದ ಸೆಲೆಕ್ಟರ್ಗೆ ಆ ಶೈಲಿಗಳನ್ನು ಹೇಗೆ ಅನ್ವಯಿಸುತ್ತದೆ.
ಗಮನಿಸಿ - ನಿರ್ದಿಷ್ಟ ವರ್ಗಕ್ಕೆ ಒಂದು ವರ್ಗವನ್ನು ನೀವು ಹೊಂದಿಸಿದರೆ (ಉದಾಹರಣೆಗೆ, p.left), ನೀವು ಅದನ್ನು ವರ್ಗಗಳ ಪಟ್ಟಿಯನ್ನು ಭಾಗವಾಗಿ ಬಳಸಬಹುದು; ಆದಾಗ್ಯೂ, ಇದು ಸಿಎಸ್ಎಸ್ ನಲ್ಲಿ ಸೂಚಿಸಲಾದ ಆ ಅಂಶಗಳನ್ನು ಮಾತ್ರ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ ಎಂದು ತಿಳಿದಿರಲಿ. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ನಿಮ್ಮ ಆಯ್ಕೆಯು ನಿಜವಾಗಿಯೂ "ಎಡಭಾಗದ ವರ್ಗ ಮೌಲ್ಯದೊಂದಿಗೆ ಪ್ಯಾರಾಗಳು" ಗೆ ಅನ್ವಯಿಸಲು ಹೇಳುವ ಕಾರಣ ಈ ವರ್ಗದೊಂದಿಗೆ ಪ್ಯಾರಾಗಳಿಗೆ ಮಾತ್ರ p.left ಶೈಲಿ ಅನ್ವಯವಾಗುತ್ತದೆ. ಇದಕ್ಕೆ ತದ್ವಿರುದ್ಧವಾಗಿ, ಉದಾಹರಣೆಯಲ್ಲಿ ಇತರ ಎರಡು ಆಯ್ಕೆದಾರರು ನಿರ್ದಿಷ್ಟ ಅಂಶವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ಅವುಗಳು ಆ ವರ್ಗ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸುವ ಯಾವುದೇ ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸುತ್ತವೆ.
ಬಹು ವರ್ಗಗಳ ಅನುಕೂಲಗಳು
ಆ ತರಗತಿಗೆ ಸಂಪೂರ್ಣ ಹೊಸ ಶೈಲಿಯನ್ನು ರಚಿಸದೆಯೇ ಅನೇಕ ವರ್ಗಗಳು ಅಂಶಗಳಿಗೆ ವಿಶೇಷ ಪರಿಣಾಮಗಳನ್ನು ಸೇರಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
ಉದಾಹರಣೆಗೆ, ನೀವು ಎಡಕ್ಕೆ ಅಥವಾ ಅಂಶಗಳನ್ನು ತ್ವರಿತವಾಗಿ ತೇಲುವ ಸಾಮರ್ಥ್ಯ ಹೊಂದಲು ಬಯಸಬಹುದು. ನೀವು ಫ್ಲೋಟ್ನೊಂದಿಗೆ ಎರಡು ವರ್ಗಗಳು ಎಡ ಮತ್ತು ಬಲವನ್ನು ಬರೆಯಬಹುದು: ಎಡ; ಮತ್ತು ಫ್ಲೋಟ್: ಬಲ; ಅವುಗಳಲ್ಲಿ. ನಂತರ, ನೀವು ಒಂದು ಅಂಶವನ್ನು ಹೊಂದಿದಾಗಲೆಲ್ಲ ನೀವು ಎಡಕ್ಕೆ ತೇಲುತ್ತಲೇ ಬೇಕು, ನೀವು ಅದರ ವರ್ಗ ಪಟ್ಟಿಗೆ "ಎಡ" ವರ್ಗವನ್ನು ಸೇರಿಸಬಹುದು.
ಆದಾಗ್ಯೂ, ಇಲ್ಲಿ ನಡೆಯಲು ಉತ್ತಮ ಮಾರ್ಗವಿದೆ. ವೆಬ್ ಮಾನದಂಡಗಳು ಶೈಲಿ ಮತ್ತು ರಚನೆಯ ಪ್ರತ್ಯೇಕತೆಯನ್ನು ನಿರ್ದೇಶಿಸುತ್ತವೆ ಎಂದು ನೆನಪಿಡಿ. ರಚನೆಯು ಎಚ್ಟಿಎಮ್ಎಲ್ ಮೂಲಕ ನಿರ್ವಹಿಸಲ್ಪಡುತ್ತದೆ ಮತ್ತು ಶೈಲಿ ಸಿಎಸ್ಎಸ್ ನಲ್ಲಿದೆ.
ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್ ಅಂಶಗಳು ತುಂಬಿದಲ್ಲಿ ಎಲ್ಲವುಗಳು "ಕೆಂಪು" ಅಥವಾ "ಎಡ" ನಂತಹ ವರ್ಗ ಹೆಸರುಗಳನ್ನು ಹೊಂದಿರುತ್ತವೆ, ಅವುಗಳು ಯಾವುವು ಎಂಬುದರ ಬದಲಾಗಿ ಅಂಶಗಳನ್ನು ಹೇಗೆ ನೋಡಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದೇಶಿಸುವ ಹೆಸರುಗಳು, ನೀವು ರಚನೆ ಮತ್ತು ಶೈಲಿಯ ನಡುವಿನ ಆ ಸಾಲುಗಳನ್ನು ಹಾದುಹೋಗುವಿರಿ. ಈ ಕಾರಣಕ್ಕಾಗಿ ನನ್ನ ನಾನ್-ಲಾಕ್ಷಣಿಕ ವರ್ಗ ಹೆಸರುಗಳನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಮಿತಿಗೊಳಿಸಲು ನಾನು ಪ್ರಯತ್ನಿಸುತ್ತೇನೆ.
ಬಹು ತರಗತಿಗಳು, ಸೆಮ್ಯಾಂಟಿಕ್ಸ್, ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
ಬಹು ವರ್ಗಗಳನ್ನು ಬಳಸುವ ಮತ್ತೊಂದು ಪ್ರಯೋಜನವೆಂದರೆ ಅದು ನಿಮಗೆ ಹೆಚ್ಚು ಸಂವಹನ ಸಾಧ್ಯತೆಗಳನ್ನು ನೀಡುತ್ತದೆ.
ಆರಂಭಿಕ ವರ್ಗಗಳಲ್ಲಿ ಯಾವುದನ್ನಾದರೂ ತೆಗೆದುಹಾಕದೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಅಂಶಗಳಿಗೆ ನೀವು ಹೊಸ ವರ್ಗಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು. ಒಂದು ಅಂಶದ ಸೆಮ್ಯಾಂಟಿಕ್ಸ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನೀವು ತರಗತಿಗಳನ್ನು ಕೂಡ ಬಳಸಬಹುದು. ಅಂದರೆ, ಆ ಅಂಶವು ಅರ್ಥಶಾಸ್ತ್ರದ ಅರ್ಥವೇನೆಂದು ವ್ಯಾಖ್ಯಾನಿಸಲು ಹೆಚ್ಚುವರಿ ವರ್ಗಗಳನ್ನು ನೀವು ಸೇರಿಸಬಹುದು. ಮೈಕ್ರೋಫಾರ್ಮ್ಯಾಟ್ಗಳು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂಬುದು ಹೀಗಿರುತ್ತದೆ.
ಬಹು ವರ್ಗಗಳ ಅನಾನುಕೂಲಗಳು
ನಿಮ್ಮ ಅಂಶಗಳಲ್ಲಿ ಬಹು ವರ್ಗಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಅತಿದೊಡ್ಡ ಅನಾನುಕೂಲವೆಂದರೆ ಅದು ಕಾಲಾನಂತರದಲ್ಲಿ ನೋಡಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಅವರಿಗೆ ಅಗಾಧವಾದ ಸಾಮರ್ಥ್ಯವನ್ನು ಮಾಡುತ್ತದೆ. ಯಾವ ಶೈಲಿಗಳು ಒಂದು ಅಂಶವನ್ನು ಪರಿಣಾಮ ಬೀರುತ್ತಿದೆಯೆಂದು ಮತ್ತು ಯಾವುದೇ ಸ್ಕ್ರಿಪ್ಟ್ಗಳು ಪ್ರಭಾವ ಬೀರಿರುವುದನ್ನು ನಿರ್ಧರಿಸಲು ಕಷ್ಟವಾಗಬಹುದು. ಬೂಟ್ಸ್ಟ್ರ್ಯಾಕ್ನಂತಹ ಅನೇಕ ಚೌಕಟ್ಟುಗಳು ಇಂದು ಲಭ್ಯವಿರುವ ಅನೇಕ ವರ್ಗಗಳೊಂದಿಗೆ ಅಂಶಗಳ ಭಾರೀ ಬಳಕೆಯನ್ನು ಮಾಡಿಕೊಳ್ಳುತ್ತವೆ. ನೀವು ಎಚ್ಚರಿಕೆಯಿಂದ ಇಲ್ಲದಿದ್ದರೆ ಆ ಕೋಡ್ ಕೈಯಿಂದ ಹೊರಬರಲು ಮತ್ತು ಬೇಗನೆ ಕೆಲಸ ಮಾಡಲು ಕಷ್ಟವಾಗುತ್ತದೆ.
ನೀವು ಬಹು ವರ್ಗಗಳನ್ನು ಬಳಸುವಾಗ, ನೀವು ಉದ್ದೇಶಿಸದಿದ್ದರೂ ಸಹ ಒಂದು ವರ್ಗಕ್ಕೆ ಒಂದು ಶೈಲಿಯನ್ನು ಅತಿಕ್ರಮಿಸುವ ಶೈಲಿಯನ್ನು ಹೊಂದುವ ಅಪಾಯವನ್ನು ಸಹ ನೀವು ಓಡಿಸುತ್ತೀರಿ. ಹಾಗಾಗಿ ಅವರು ನಿಮ್ಮ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುವುದಿಲ್ಲ ಏಕೆ ಎಂಬುದನ್ನು ಅವರು ಗಮನಿಸಬೇಕು.
ಆ ನಿರ್ದಿಷ್ಟ ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸಲಾದ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ನೀವು ನಿರ್ದಿಷ್ಟತೆಯ ಬಗ್ಗೆ ತಿಳಿದಿರಬೇಕಾಗುತ್ತದೆ!
ಕ್ರೋಮ್ನಲ್ಲಿ ವೆಬ್ಮಾಸ್ಟರ್ ಪರಿಕರಗಳಂತಹ ಉಪಕರಣವನ್ನು ಬಳಸುವುದರ ಮೂಲಕ, ನಿಮ್ಮ ತರಗತಿಗಳು ನಿಮ್ಮ ಶೈಲಿಗಳನ್ನು ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತವೆ ಮತ್ತು ವಿಭಿನ್ನ ಶೈಲಿಗಳು ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳ ಸಮಸ್ಯೆಯನ್ನು ತಪ್ಪಿಸಲು ನೀವು ಸುಲಭವಾಗಿ ನೋಡಬಹುದು.
ಜೆನ್ನಿಫರ್ ಕ್ರಿನಿನ್ರಿಂದ ಮೂಲ ಲೇಖನ. 8/7/17 ರಂದು ಜೆರೆಮಿ ಗಿರಾರ್ಡ್ರಿಂದ ಸಂಪಾದಿಸಲಾಗಿದೆ