ಹೆಚ್ಚಿನ ಶೈಲಿಯ ಮತ್ತು ಲೇಔಟ್ ನಿಯಂತ್ರಣಕ್ಕಾಗಿ CSS ನೊಂದಿಗೆ ಸ್ಪ್ಯಾನ್ ಮತ್ತು ಡಿವ್ ಬಳಸಿ.
ವೆಬ್ ವಿನ್ಯಾಸ ಮತ್ತು HTML / CSS ಗೆ ಹೊಸದಾಗಿರುವ ಅನೇಕ ಜನರು ಮತ್ತು DIV ಅಂಶವು ನಿಮ್ಮ ವೆಬ್ ಪುಟದಲ್ಲಿ ತಾರ್ಕಿಕ ವಿಭಾಗಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದು ಮೂಲಭೂತವಾಗಿ ನೀವು ಇತರ ಎಚ್ಟಿಎಮ್ಎಲ್ ಘಟಕಗಳನ್ನು ತಾರ್ಕಿಕವಾಗಿ ಒಗ್ಗೂಡಿಸುವಂತಹ ಬಾಕ್ಸ್ ಅನ್ನು ಇರಿಸಬಹುದು. ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳು, ಶಿರೋನಾಮೆಗಳು, ಪಟ್ಟಿಗಳು, ಕೊಂಡಿಗಳು, ಚಿತ್ರಗಳು, ಮುಂತಾದವುಗಳಲ್ಲಿ ಒಂದು ವಿಭಜನೆಯು ಇತರ ಅನೇಕ ಅಂಶಗಳನ್ನು ಹೊಂದಿರಬಹುದು. ಇದು ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್ಗೆ ಹೆಚ್ಚಿನ ರಚನೆ ಮತ್ತು ಸಂಘಟನೆಯನ್ನು ಒದಗಿಸಲು ಅದರೊಳಗೆ ಇತರ ವಿಭಾಗಗಳನ್ನು ಸಹ ಹೊಂದಬಹುದು. DIV ಅಂಶವನ್ನು ಬಳಸಲು, ಪ್ರತ್ಯೇಕ ವಿಭಾಗವಾಗಿ ನೀವು ಬಯಸುವ ನಿಮ್ಮ ಪುಟದ ಪ್ರದೇಶಕ್ಕೆ ಮುಂಚಿತವಾಗಿ ಮುಕ್ತ div ನ ವಿಷಯಗಳು ನಿಮ್ಮ ಪುಟದ ಪ್ರದೇಶವು ನೀವು ನಂತರ ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ಶೈಲಿಗೆ ಬಳಸುವ ಕೆಲವು ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿ ಅಗತ್ಯವಿದ್ದರೆ, ನೀವು ಐಡಿ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಸೇರಿಸಬಹುದು (ಉದಾ. id = "myDiv">), ಅಥವಾ ಒಂದು ವರ್ಗ ಆಯ್ಕೆ (ಉದಾ, ವರ್ಗ = "bigDiv">). ಈ ಎರಡೂ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನಂತರ ಸಿಎಸ್ಎಸ್ ಬಳಸಿ ಆಯ್ಕೆ ಮಾಡಬಹುದು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಬದಲಾಯಿಸಲಾಗಿತ್ತು. ಪ್ರಸ್ತುತ ಅತ್ಯುತ್ತಮ ಆಚರಣೆಗಳು ID ಗಳ ಬದಲಾಗಿ ವರ್ಗ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸುವ ಕಡೆಗೆ ಒಲವು ತೋರುತ್ತವೆ, ಭಾಗಶಃ ನಿರ್ದಿಷ್ಟ ID ಸೆಲೆಕ್ಟರ್ಗಳು ಹೇಗೆ. ಸತ್ಯದಲ್ಲಿ ಹೇಗಾದರೂ, ನೀವು ಒಂದನ್ನು ಬಳಸಬಹುದಾಗಿರುತ್ತದೆ ಮತ್ತು ಒಂದು ಡಿವಿಷನ್ ಅನ್ನು ಒಂದು ID ಮತ್ತು ವರ್ಗ ಸೆಲೆಕ್ಟರ್ ಎರಡನ್ನೂ ಸಹ ನೀಡಬಹುದು. ಡಿವಿ ಅಂಶವು HTML5 ವಿಭಾಗ ಅಂಶಕ್ಕಿಂತ ವಿಭಿನ್ನವಾಗಿದೆ ಏಕೆಂದರೆ ಅದು ಸುತ್ತುವರಿದ ವಿಷಯವನ್ನು ಯಾವುದೇ ಶಬ್ದಾರ್ಥದ ಅರ್ಥವನ್ನು ನೀಡುವುದಿಲ್ಲ. ವಿಷಯದ ಬ್ಲಾಕ್ ಒಂದು DIV ಅಥವಾ ವಿಭಾಗವಾಗಿರಬೇಕು ಎಂದು ನಿಮಗೆ ಖಾತ್ರಿಯಿಲ್ಲದಿದ್ದರೆ, ಯಾವ ಅಂಶದ ಉದ್ದೇಶ ಮತ್ತು ವಿಷಯವನ್ನು ಬಳಸಬೇಕೆಂದು ನಿರ್ಧರಿಸಲು ಸಹಾಯ ಮಾಡುವುದು ಏನು ಎಂದು ಯೋಚಿಸಿ: ಅಂತಿಮವಾಗಿ, ಎರಡೂ ವಿಭಾಗಗಳು ಮತ್ತು ವಿಭಾಗಗಳು ಒಂದೇ ರೀತಿ ವರ್ತಿಸುತ್ತವೆ ಮತ್ತು ನೀವು ನಿಮ್ಮ ಸೈಟ್ನ ನೋಟವನ್ನು ಪಡೆಯಲು ನೀವು ಅವುಗಳೆರಡರಲ್ಲಿ ಗುಣಲಕ್ಷಣಗಳ ಮೌಲ್ಯಗಳನ್ನು ಮತ್ತು CSS ನೊಂದಿಗೆ ಶೈಲಿ ನೀಡಬಹುದು. ಇವೆರಡೂ ಬ್ಲಾಕ್ ಮಟ್ಟದ ಅಂಶಗಳಾಗಿವೆ. Span ಅಂಶವು ಡೀಫಾಲ್ಟ್ ಆಗಿ ಇನ್ಲೈನ್ ಅಂಶವಾಗಿದೆ. ಇದು ಡಿವಿ ಮತ್ತು ವಿಭಾಗ ಅಂಶಗಳಿಂದ ಪ್ರತ್ಯೇಕಗೊಳ್ಳುತ್ತದೆ. ಸ್ಪ್ಯಾನ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ನಿರ್ದಿಷ್ಟವಾದ ವಿಷಯದ ತುಂಡು, ಸಾಮಾನ್ಯವಾಗಿ ಪಠ್ಯವನ್ನು ಸುತ್ತುವಂತೆ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ, ನಂತರ ಇದನ್ನು "ಹೈಕ್" ಅನ್ನು ನಂತರ ವಿನ್ಯಾಸಗೊಳಿಸಬಹುದು. ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ಉಪಯೋಗಿಸಿದಾಗ, ಇದು ಒಳಗೊಳ್ಳುವ ಪಠ್ಯದ ಶೈಲಿಯನ್ನು ಬದಲಾಯಿಸಬಹುದು; ಆದಾಗ್ಯೂ, ಯಾವುದೇ ಶೈಲಿಯ ಲಕ್ಷಣಗಳಿಲ್ಲದೆ, ಸ್ಪ್ಯಾನ್ ಅಂಶವು ಕೇವಲ ಪಠ್ಯದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ. ಇದು ಸ್ಪ್ಯಾನ್ ಮತ್ತು ಡಿವಿ ಅಂಶಗಳ ನಡುವಿನ ಪ್ರಮುಖ ವ್ಯತ್ಯಾಸವಾಗಿದೆ. ಮೇಲೆ ತಿಳಿಸಿದಂತೆ, DIV ಅಂಶವು ಪ್ಯಾರಾಗ್ರಾಫ್ ಬ್ರೇಕ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಆದರೆ span ಅಂಶವು ಟ್ಯಾಗ್ಗಳಿಂದ ಸುತ್ತುವರೆದಿದ್ದಕ್ಕೆ ಸಂಬಂಧಿಸಿದ CSS ಶೈಲಿ ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಲು ಬ್ರೌಸರ್ಗೆ ಮಾತ್ರ ಹೇಳುತ್ತದೆ: ಹೈಲೈಟ್ ಮಾಡಿದ ಪಠ್ಯ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡದ ಪಠ್ಯ. CSS = (ಉದಾ, class = "highlight">) ಪಠ್ಯದೊಂದಿಗೆ ಶೈಲಿ = "ಹೈಲೈಟ್" ಅಥವಾ ಇತರ ವರ್ಗವನ್ನು span ಅಂಶಕ್ಕೆ ಸೇರಿಸಿ. ಸ್ಪ್ಯಾನ್ ಅಂಶವು ಅಗತ್ಯವಾದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿಲ್ಲ, ಆದರೆ ಹೆಚ್ಚು ಉಪಯುಕ್ತವಾದ ಮೂರು ಅಂಶಗಳು ಡಿವಿ ಅಂಶದಂತೆಯೇ ಇರುತ್ತವೆ: ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿನ ಹೊಸ ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಎಲಿಮೆಂಟ್ನಂತೆ ವಿಷಯವನ್ನು ವಿವರಿಸದೆಯೇ ನೀವು ವಿಷಯದ ಶೈಲಿಯನ್ನು ಬದಲಾಯಿಸಲು ಬಯಸಿದಾಗ ಸ್ಪ್ಯಾನ್ ಅನ್ನು ಬಳಸಿ. ಉದಾಹರಣೆಗೆ, ನೀವು H3 ಶೀರ್ಷಿಕೆಯ ಎರಡನೇ ಪದವನ್ನು ಕೆಂಪು ಎಂದು ಬಯಸಿದರೆ, ನೀವು ಆ ಪದವನ್ನು ಸ್ಪ್ಯಾನ್ ಎಲಿಮೆಂಟ್ನೊಂದಿಗೆ ಸುತ್ತುವರೆದಿರಬಹುದು, ಅದು ಕೆಂಪು ಪಠ್ಯದಂತೆ ಆ ಪದವನ್ನು ಶೈಲಿಯನ್ನಾಗಿ ಮಾಡುತ್ತದೆ. ಪದ ಇನ್ನೂ H3 ಅಂಶ ಭಾಗವಾಗಿ ಉಳಿದಿದೆ, ಆದರೆ ಈಗ ಸಹ ಕೆಂಪು ತೋರಿಸುತ್ತದೆ: 2/2/17 ರಂದು ಜೆರೆಮಿ ಗಿರಾರ್ಡ್ರಿಂದ ಸಂಪಾದಿಸಲಾಗಿದೆ
ಅಂಶವನ್ನು ಬಳಸಿ
ಇದು ನನ್ನ ಅದ್ಭುತ ಹೆಡ್ಲೈನ್ ಆಗಿದೆ