ಶೈಲಿ ತರಗತಿಗಳು ಮತ್ತು ID ಗಳನ್ನು ಬಳಸುವುದು

ತರಗತಿಗಳು ಮತ್ತು ID ಗಳು ಸಹಾಯ ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ವಿಸ್ತರಿಸಿ

ಇಂದಿನ ವೆಬ್ನಲ್ಲಿ ಕಟ್ಟಡ ವೆಬ್ಸೈಟ್ಗಳಲ್ಲಿ ಸಿಎಸ್ಎಸ್ (ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ಸ್) ಕುರಿತು ಆಳವಾದ ತಿಳುವಳಿಕೆಯ ಅಗತ್ಯವಿದೆ. ಬ್ರೌಸರ್ ವಿಂಡೋದಲ್ಲಿ ಲೇಔಟ್ ಹೇಗೆ ವಿನ್ಯಾಸ ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸಲು ನೀವು ವೆಬ್ಸೈಟ್ ಅನ್ನು ನೀಡುವ ಸೂಚನೆಗಳಾಗಿವೆ. ನಿಮ್ಮ ವೆಬ್ ಪುಟದ ನೋಟ ಮತ್ತು ಭಾವನೆಯನ್ನು ರಚಿಸುವ ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್ಗೆ ನೀವು "ಶೈಲಿಗಳು" ಸರಣಿಯನ್ನು ಅನ್ವಯಿಸುತ್ತೀರಿ.

ಡಾಕ್ಯುಮೆಂಟ್ನಾದ್ಯಂತ ಆ ಮೇಲೆ ತಿಳಿಸಲಾದ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ಹಲವು ಮಾರ್ಗಗಳಿವೆ, ಆದರೆ ಅನೇಕ ವೇಳೆ ನೀವು ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿನ ಕೆಲವೊಂದು ಅಂಶಗಳನ್ನು ಮಾತ್ರ ಶೈಲಿಯಲ್ಲಿ ಬಳಸಲು ಬಯಸುತ್ತೀರಿ, ಆದರೆ ಆ ಅಂಶದ ಎಲ್ಲ ಸಂದರ್ಭಗಳಿಲ್ಲ.

ಪ್ರತಿಯೊಂದು ದಾಖಲೆಯ ಶೈಲಿ ನಿಯಮವನ್ನು ಪುನರಾವರ್ತಿಸದೆಯೇ ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿನ ಹಲವಾರು ಅಂಶಗಳಿಗೆ ನೀವು ಅನ್ವಯಿಸಬಹುದಾದ ಶೈಲಿಯನ್ನು ರಚಿಸಲು ನೀವು ಬಯಸಬಹುದು. ಈ ಅಪೇಕ್ಷಿತ ಶೈಲಿಗಳನ್ನು ಸಾಧಿಸಲು, ನೀವು ವರ್ಗ ಮತ್ತು ID HTML ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುತ್ತೀರಿ. ಈ ಗುಣಲಕ್ಷಣಗಳು ಪ್ರತಿಯೊಂದು HTML ಟ್ಯಾಗ್ಗೂ ಅನ್ವಯವಾಗುವಂತಹ ಜಾಗತಿಕ ಲಕ್ಷಣಗಳಾಗಿವೆ .ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ನೀವು ವಿಭಾಗಗಳು, ಪ್ಯಾರಾಗಳು, ಲಿಂಕ್ಗಳು, ಪಟ್ಟಿಗಳು ಅಥವಾ HTML ನ ಇತರ ತುಣುಕುಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುತ್ತಿದ್ದೀರಾ, ನೀವು ವರ್ಗ ಮತ್ತು ID ಲಕ್ಷಣಗಳಿಗೆ ಈ ಕೆಲಸವನ್ನು ಸಾಧಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಿ!

ವರ್ಗ ಆಯ್ಕೆದಾರರು

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

p {color: # 0000ff; }
p.alert {color: # ff0000; }

ಈ ಶೈಲಿಗಳು ಎಲ್ಲಾ ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳ ಬಣ್ಣವನ್ನು ನೀಲಿ (# 0000ff) ಗೆ ಹೊಂದಿಸುತ್ತದೆ, ಆದರೆ ಕೆಂಪು ಬಣ್ಣದಲ್ಲಿ (# ff0000) ವಿನ್ಯಾಸಗೊಳಿಸಿದ "ಎಚ್ಚರಿಕೆಯನ್ನು" ಒಂದು ವರ್ಗ ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಯಾವುದೇ ಪ್ಯಾರಾಗ್ರಾಫ್. ಇದು ಏಕೆಂದರೆ ವರ್ಗ ಗುಣಲಕ್ಷಣವು ಮೊದಲ ಸಿಎಸ್ಎಸ್ ನಿಯಮಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಹೊಂದಿರುತ್ತದೆ, ಇದು ಟ್ಯಾಗ್ ಆಯ್ಕೆದಾರನನ್ನು ಮಾತ್ರ ಬಳಸುತ್ತದೆ.

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

ಇಲ್ಲಿ ಕೆಲವು ಎಚ್ಟಿಎಮ್ಎಲ್ ಮಾರ್ಕ್ಅಪ್ನಲ್ಲಿ ಇದನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು:

ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ನೀಲಿ ಬಣ್ಣದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ, ಇದು ಪುಟಕ್ಕೆ ಡೀಫಾಲ್ಟ್ ಆಗಿರುತ್ತದೆ.

ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ ಸಹ ನೀಲಿ ಬಣ್ಣದಲ್ಲಿರುತ್ತದೆ.

ಮತ್ತು ಅಂಶ ಪ್ಯಾರಾಗ್ರಾಫ್ ಸ್ಟ್ಯಾಂಡರ್ಡ್ ನೀಲಿ ಬಣ್ಣವನ್ನು ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್ ಸ್ಟೈಲಿಂಗ್ನಿಂದ ಬದಲಿಸಿರುವುದರಿಂದ ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಕೆಂಪು ಬಣ್ಣದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

ಆ ಉದಾಹರಣೆಯಲ್ಲಿ, "p.alert" ಶೈಲಿಯು "ಎಚ್ಚರಿಕೆ" ವರ್ಗವನ್ನು ಬಳಸುವ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅಂಶಗಳಿಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ. ನೀವು ಬಹು ಎಚ್ಟಿಎಮ್ಎಲ್ ಘಟಕಗಳಲ್ಲಿ ಆ ವರ್ಗವನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ, ನೀವು HTML ಅಂಶವನ್ನು ಶೈಲಿಯ ಕರೆ (ಸ್ಥಳದಲ್ಲಿ (.) ಬಿಡಲು ಮರೆಯದಿರಿ), ಹೀಗೆ:

.alert {background-color: # ff0000;}

ಈ ವರ್ಗವು ಈಗ ಅಗತ್ಯವಿರುವ ಯಾವುದೇ ಅಂಶಕ್ಕೆ ಲಭ್ಯವಿದೆ. "ಎಚ್ಚರಿಕೆಯನ್ನು" ಒಂದು ವರ್ಗ ಗುಣಲಕ್ಷಣ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರುವ ನಿಮ್ಮ HTML ನ ಯಾವುದೇ ತುಣುಕು ಈಗ ಈ ಶೈಲಿಯನ್ನು ಪಡೆಯುತ್ತದೆ. ಕೆಳಗಿನ HTML ನಲ್ಲಿ, ನಮಗೆ "ಎಚ್ಚರಿಕೆ" ವರ್ಗವನ್ನು ಬಳಸುವ ಪ್ಯಾರಾಗ್ರಾಫ್ ಮತ್ತು ಶಿರೋನಾಮೆ ಮಟ್ಟ 2 ಇವೆ. ಇವುಗಳೆರಡೂ ನಾವು ತೋರಿಸಿದ ಸಿಎಸ್ಎಸ್ ಆಧಾರಿತ ಹಿನ್ನೆಲೆಯ-ಬಣ್ಣವನ್ನು ಹೊಂದಿರುತ್ತದೆ.

ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಕೆಂಪು ಬಣ್ಣದಲ್ಲಿ ಬರೆಯಲಾಗುತ್ತದೆ.

ಮತ್ತು ಈ h2 ಸಹ ಕೆಂಪು ಬಣ್ಣದ್ದಾಗಿರುತ್ತದೆ.

ಇಂದು ವೆಬ್ಸೈಟ್ಗಳಲ್ಲಿ, ವರ್ಗ ಲಕ್ಷಣಗಳು ಹೆಚ್ಚಾಗಿ ಹೆಚ್ಚಿನ ಅಂಶಗಳಲ್ಲಿ ಬಳಸಲ್ಪಡುತ್ತವೆ ಏಕೆಂದರೆ ಅವು ID ಗಳು ಎಂದು ನಿರ್ದಿಷ್ಟವಾದ ದೃಷ್ಟಿಕೋನದಿಂದ ಕೆಲಸ ಮಾಡಲು ಸುಲಭವಾಗಿದೆ. ನೀವು ಪ್ರಸ್ತುತ HTML ಪುಟಗಳನ್ನು ವರ್ಗ ಲಕ್ಷಣಗಳೊಂದಿಗೆ ತುಂಬಲು ಕಾಣುವಿರಿ, ಅವುಗಳಲ್ಲಿ ಕೆಲವು ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಅನೇಕ ಬಾರಿ ಪುನರಾವರ್ತಿತವಾಗುತ್ತವೆ ಮತ್ತು ಇತರರು ಒಮ್ಮೆ ಮಾತ್ರ ಕಾಣಿಸಿಕೊಳ್ಳಬಹುದು.

ID ಆಯ್ಕೆದಾರರು

ID ಸೆಲೆಕ್ಟರ್ ನಿಮಗೆ ಟ್ಯಾಗ್ ಅಥವಾ ಇತರ ಎಚ್ಟಿಎಮ್ಎಲ್ ಎಲಿಮೆಂಟ್ನೊಂದಿಗೆ ಸಂಯೋಜಿಸದೆಯೇ ಒಂದು ನಿರ್ದಿಷ್ಟ ಶೈಲಿಗೆ ಹೆಸರನ್ನು ನೀಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಈವೆಂಟ್ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಹೊಂದಿರುವ ನಿಮ್ಮ HTML ಮಾರ್ಕ್ಅಪ್ನಲ್ಲಿ ನೀವು ವಿಭಾಗವನ್ನು ಹೊಂದಿದ್ದೀರಿ ಎಂದು ಹೇಳಿ.

ನೀವು ಈ ವಿಭಾಗವನ್ನು "ಈವೆಂಟ್" ನ ID ಗುಣಲಕ್ಷಣವನ್ನು ನೀಡಬಹುದು, ಮತ್ತು ನೀವು 1-ಪಿಕ್ಸೆಲ್ ವಿಶಾಲವಾದ ಕಪ್ಪು ಅಂಚನ್ನು ಹೊಂದಿರುವ ವಿಭಾಗವನ್ನು ರೂಪಿಸಲು ಬಯಸಿದರೆ ಈ ರೀತಿಯ ಒಂದು ID ಸಂಕೇತವನ್ನು ಬರೆಯಿರಿ:

#event {border: 1px solid # 000; }

ID ಸೆಲೆಕ್ಟರ್ಗಳೊಂದಿಗೆ ಸವಾಲು ಅವರು HTML ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಪುನರಾವರ್ತಿಸಲಾಗುವುದಿಲ್ಲ ಎಂಬುದು. ಅವು ಅನನ್ಯವಾಗಿರಬೇಕು (ನಿಮ್ಮ ಸೈಟ್ನ ಬಹು ಪುಟಗಳಲ್ಲಿ ಒಂದೇ ID ಅನ್ನು ನೀವು ಬಳಸಬಹುದು, ಆದರೆ ಒಮ್ಮೆ ಪ್ರತಿಯೊಂದು HTML ಡಾಕ್ಯುಮೆಂಟಿನಲ್ಲಿ ಮಾತ್ರ). ಹಾಗಾಗಿ ನೀವು ಈ ಎಲ್ಲ ಗಡಿಗಳನ್ನು ಹೊಂದಿದ್ದೀರಿ ಎಂದು 3 ಈವೆಂಟ್ಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ನೀವು ಅವುಗಳನ್ನು "event1", "event2" ಮತ್ತು "event3" ನ ID ಗುಣಲಕ್ಷಣಗಳನ್ನು ನೀಡಬೇಕು ಮತ್ತು ಅವುಗಳಲ್ಲಿ ಪ್ರತಿಯೊಂದಕ್ಕೂ ಶೈಲಿಯನ್ನು ನೀಡಬೇಕಾಗುತ್ತದೆ. ಆದ್ದರಿಂದ, "ಈವೆಂಟ್" ನ ಮೇಲೆ ತಿಳಿಸಲಾದ ವರ್ಗ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಲು ಮತ್ತು ಅವುಗಳನ್ನು ಒಂದೇ ಬಾರಿಗೆ ಶೈಲಿಯನ್ನಾಗಿ ಮಾಡುವುದು ಸುಲಭವಾಗಿದೆ.

ID ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಮತ್ತೊಂದು ಸವಾಲು ಅವರು ವರ್ಗ ಲಕ್ಷಣಗಳಿಗಿಂತ ಹೆಚ್ಚಿನ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಹೊಂದಿರುತ್ತಾರೆ. ಈ ಹಿಂದೆ ನೀವು ಸ್ಥಾಪಿಸಿದ ಶೈಲಿಯನ್ನು ಅತಿಕ್ರಮಿಸುವ ಸಿಎಸ್ಎಸ್ ಅಗತ್ಯವಿದ್ದರೆ, ನೀವು ID ಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತವಾಗಿದ್ದರೆ ಅದನ್ನು ಮಾಡಲು ಕಷ್ಟವಾಗಬಹುದು. ಈ ಕಾರಣಕ್ಕಾಗಿ ಅನೇಕ ವೆಬ್ ಡೆವಲಪರ್ಗಳು ತಮ್ಮ ಮಾರ್ಕ್ಅಪ್ನಲ್ಲಿ ಐಡಿಗಳನ್ನು ಬಳಸದಂತೆ ದೂರ ಹೋಗಿದ್ದಾರೆ, ಅವರು ಒಮ್ಮೆ ಮಾತ್ರ ಆ ಮೌಲ್ಯವನ್ನು ಬಳಸಲು ಬಯಸಿದರೆ, ಮತ್ತು ಬದಲಾಗಿ ಎಲ್ಲಾ ಶೈಲಿಗಳಿಗೂ ಕಡಿಮೆ-ನಿರ್ದಿಷ್ಟ ವರ್ಗ ಲಕ್ಷಣಗಳಿಗೆ ತಿರುಗಿದ್ದಾರೆ.

ಇನ್-ಪುಟ ಆಂಕರ್ ಲಿಂಕ್ಗಳನ್ನು ಹೊಂದಿರುವ ಪುಟವನ್ನು ರಚಿಸಲು ನೀವು ಬಯಸಿದಾಗ ID ಗುಣಲಕ್ಷಣಗಳು ಆಡುವ ಸ್ಥಳವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಆ ಪುಟದ ವಿವಿಧ ಭಾಗಗಳಿಗೆ "ಜಿಗಿತ" ಕೊಂಡಿರುವ ಲಿಂಕ್ಗಳೊಂದಿಗೆ ಒಂದು ಪುಟದಲ್ಲಿ ಎಲ್ಲಾ ವಿಷಯವನ್ನು ಒಳಗೊಂಡಿರುವ ಒಂದು ಭ್ರಂಶ ಶೈಲಿ ವೆಬ್ಸೈಟ್ ಹೊಂದಿದ್ದರೆ. ಈ ಆಂಕರ್ ಲಿಂಕ್ಗಳನ್ನು ಬಳಸುವ ಐಡಿ ಲಕ್ಷಣಗಳು ಮತ್ತು ಪಠ್ಯ ಲಿಂಕ್ಗಳನ್ನು ಬಳಸಿ ಇದನ್ನು ಮಾಡಲಾಗುತ್ತದೆ.

ಈ ಗುಣಲಕ್ಷಣದ ಮೌಲ್ಯವನ್ನು ನೀವು # ಸಂಕೇತದಿಂದ ಮೊದಲು ಲಿಂಕ್ನ href ಗುಣಲಕ್ಷಣಕ್ಕೆ ಸೇರಿಸಬಹುದು, ಹೀಗೆ:

ಇದು ಲಿಂಕ್ ಆಗಿದೆ

ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅಥವಾ ಸ್ಪರ್ಶಿಸಿದಾಗ, ಈ ಲಿಂಕ್ ಈ ID ಗುಣಲಕ್ಷಣ ಹೊಂದಿರುವ ಪುಟದ ಭಾಗಕ್ಕೆ ಹೋಗುತ್ತದೆ. ಪುಟದಲ್ಲಿನ ಯಾವುದೇ ಅಂಶವು ಈ ಐಡಿ ಮೌಲ್ಯವನ್ನು ಬಳಸದಿದ್ದರೆ, ಲಿಂಕ್ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ.

ನೆನಪಿಡಿ, ನೀವು ಸೈಟ್ನಲ್ಲಿ ಇನ್-ಪುಟ ಲಿಂಕ್ ಮಾಡುವಿಕೆಯನ್ನು ರಚಿಸಲು ಬಯಸಿದರೆ, ID ಲಕ್ಷಣಗಳ ಬಳಕೆಯನ್ನು ಅಗತ್ಯವಿದೆ, ಆದರೆ ನೀವು ಇನ್ನೂ ಸಾಮಾನ್ಯ ಸಿಎಸ್ಎಸ್ ಶೈಲಿಯ ಉದ್ದೇಶಗಳಿಗಾಗಿ ವರ್ಗಗಳಾಗಿ ಪರಿವರ್ತಿಸಬಹುದು. ಇಂದು ನಾನು ಪುಟಗಳನ್ನು ಹೇಗೆ ಮಾರ್ಕ್ ಮಾಡಿದ್ದೇನೆ - ನಾನು ಕ್ಲಾಸ್ ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ಎಷ್ಟು ಸಾಧ್ಯವೋ ಅಷ್ಟು ಬಳಸುತ್ತಿದ್ದೆ ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಗೆ ಕೊಂಡಿಯಂತೆ ಮಾತ್ರವಲ್ಲದೆ ಪುಟದ ಲಿಂಕ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಗುಣಲಕ್ಷಣ ಅಗತ್ಯವಾದಾಗ ಮಾತ್ರ ID ಗೆ ತಿರುಗುತ್ತದೆ.

ಜೆನ್ನಿಫರ್ ಕ್ರಿನಿನ್ರಿಂದ ಮೂಲ ಲೇಖನ. 8/9/17 ರಂದು ಜೆರೆಮಿ ಗಿರಾರ್ಡ್ರಿಂದ ಸಂಪಾದಿಸಲಾಗಿದೆ