ವೆಬ್ಪುಟದ ವಿನ್ಯಾಸದ ಎಡಭಾಗಕ್ಕೆ ಇಮೇಜ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಲು ಸಿಎಸ್ಎಸ್ ಬಳಸಿ
ಇಂದು ಯಾವುದೇ ವೆಬ್ ಪುಟವನ್ನು ನೋಡಿ ಮತ್ತು ಆ ಪುಟಗಳ ಬಹುಭಾಗವನ್ನು ರಚಿಸುವ ಪಠ್ಯ ಮತ್ತು ಚಿತ್ರಗಳ ಸಂಯೋಜನೆಯನ್ನು ನೀವು ನೋಡುತ್ತೀರಿ. ಒಂದು ಪುಟಕ್ಕೆ ಪಠ್ಯ ಮತ್ತು ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸಲು ಬಹಳ ಸುಲಭ. ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳು, ಪಟ್ಟಿಗಳು, ಮತ್ತು ಶೀರ್ಷಿಕೆಗಳಂತಹ ಸ್ಟ್ಯಾಂಡರ್ಡ್ HTML ಟ್ಯಾಗ್ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪಠ್ಯವನ್ನು ಕೋಡೆಡ್ ಮಾಡಲಾಗಿದ್ದು, ಅಂಶವನ್ನು ಬಳಸಿ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸಲಾಗುವುದು.
ಆ ಪಠ್ಯವನ್ನು ಮತ್ತು ಆ ಚಿತ್ರಗಳನ್ನು ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುವ ಸಾಮರ್ಥ್ಯ ಮಹಾನ್ ವೆಬ್ ವಿನ್ಯಾಸಗಾರರನ್ನು ಹೊರತುಪಡಿಸಿ ಹೊಂದಿಸುತ್ತದೆ! ನಿಮ್ಮ ಪಠ್ಯ ಮತ್ತು ಇಮೇಜ್ಗಳು ಒಂದೊಂದಾಗಿ ಗೋಚರಿಸಬೇಕೆಂದು ನೀವು ಬಯಸುವುದಿಲ್ಲ, ಈ ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಅಂಶಗಳು ಡೀಫಾಲ್ಟ್ ಆಗಿ ಲೇಔಟ್ ಹೇಗೆ ಕಾಣಿಸುತ್ತದೆ ಎಂಬುದು. ಇಲ್ಲ, ಅಂತಿಮವಾಗಿ ಪಠ್ಯ ಮತ್ತು ಚಿತ್ರಗಳು ಒಟ್ಟಿಗೆ ಹರಿಯುವ ಬಗ್ಗೆ ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ನ ದೃಶ್ಯ ವಿನ್ಯಾಸದಲ್ಲಿ ಏನನ್ನಾದರೂ ನಿಯಂತ್ರಿಸಲು ನೀವು ಬಯಸುತ್ತೀರಿ.
ಒಂದು ಪುಟದ ಎಡಭಾಗಕ್ಕೆ ಜೋಡಿಸಲಾದ ಚಿತ್ರವನ್ನು ಹೊಂದಿರುವ ಆ ಪುಟದ ಪಠ್ಯವು ಸುತ್ತಲೂ ಹರಿಯುತ್ತದೆ ಆದರೆ ಮುದ್ರಣ ವಿನ್ಯಾಸ ಮತ್ತು ವೆಬ್ ಪುಟಗಳಿಗಾಗಿ ಸಾಮಾನ್ಯ ವಿನ್ಯಾಸದ ಚಿಕಿತ್ಸೆಯಾಗಿದೆ. ವೆಬ್ ಪದಗಳಲ್ಲಿ, ಈ ಪರಿಣಾಮವನ್ನು ಚಿತ್ರ ತೇಲುತ್ತದೆ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ . "ಫ್ಲೋಟ್" ಗಾಗಿ ಸಿಎಸ್ಎಸ್ ಆಸ್ತಿಯೊಂದಿಗೆ ಈ ಶೈಲಿಯನ್ನು ಸಾಧಿಸಲಾಗುತ್ತದೆ. ಈ ಆಸ್ತಿ ಪಠ್ಯವನ್ನು ಎಡ-ಜೋಡಿಸಿದ ಚಿತ್ರವನ್ನು ಅದರ ಬಲಭಾಗಕ್ಕೆ ಹರಿಯುವಂತೆ ಅನುಮತಿಸುತ್ತದೆ. (ಅಥವಾ ಎಡಬದಿಯಲ್ಲಿ ಬಲ ಜೋಡಿಸಿದ ಚಿತ್ರದ ಸುತ್ತಲೂ.) ಈ ದೃಶ್ಯ ಪರಿಣಾಮವನ್ನು ಹೇಗೆ ಸಾಧಿಸುವುದು ಎಂಬುದನ್ನು ನೋಡೋಣ.
HTML ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ
ನೀವು ಮಾಡಬೇಕಾದ ಮೊದಲ ವಿಷಯವೆಂದರೆ ಕೆಲವು ಎಚ್ಟಿಎಮ್ಎಲ್ ಕೆಲಸ ಮಾಡುವುದು. ನಮ್ಮ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಪಠ್ಯದ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಬರೆಯುತ್ತೇವೆ ಮತ್ತು ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಆರಂಭದಲ್ಲಿ (ಪಠ್ಯಕ್ಕೆ ಮೊದಲು, ಆದರೆ ಆರಂಭಿಕ
ಟ್ಯಾಗ್ನ ನಂತರ) ಚಿತ್ರವನ್ನು ಸೇರಿಸುತ್ತೇವೆ. ಎಚ್ಟಿಎಮ್ಎಲ್ ಮಾರ್ಕ್ಅಪ್ ತೋರುತ್ತಿದೆ:
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ನಮ್ಮ ವೆಬ್ಪುಟವು ಪಠ್ಯದ ಮೇಲಿನ ಚಿತ್ರದೊಂದಿಗೆ ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಏಕೆಂದರೆ ಚಿತ್ರಗಳು ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಅಂಶಗಳಾಗಿವೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಬ್ರೌಸರ್ ಅಂಶವು ಮೊದಲು ಮತ್ತು ನಂತರ ಲೈನ್ ಬ್ರೇಕ್ಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ನಾವು CSS ಗೆ ತಿರುಗಿ ಈ ಡೀಫಾಲ್ಟ್ ನೋಟವನ್ನು ಬದಲಾಯಿಸುತ್ತೇವೆ. ಮೊದಲಿಗೆ, ನಾವು ನಮ್ಮ ಇಮೇಜ್ ಎಲಿಮೆಂಟ್ಗೆ ವರ್ಗ ಮೌಲ್ಯವನ್ನು ಸೇರಿಸುತ್ತೇವೆ. ಆ ವರ್ಗವು ನಂತರ ನಮ್ಮ CSS ನಲ್ಲಿ ನಾವು ಬಳಸುವ "ಹುಕ್" ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
"ಎಡ" ದ ಈ ವರ್ಗ ತನ್ನದೇ ಆದ ಮೇಲೆ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ ಎಂದು ಗಮನಿಸಿ! ನಮ್ಮ ಅಪೇಕ್ಷಿತ ಶೈಲಿಯನ್ನು ಸಾಧಿಸಲು ನಾವು ಮುಂದಿನ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಬಳಸಬೇಕಾಗಿದೆ.
ಸಿಎಸ್ಎಸ್ ಸ್ಟೈಲ್ಸ್
ಸ್ಥಳದಲ್ಲಿ ನಮ್ಮ ಎಚ್ಟಿಎಮ್ಎಲ್ನೊಂದಿಗೆ, "ಎಡ" ನ ನಮ್ಮ ವರ್ಗ ಗುಣಲಕ್ಷಣವನ್ನು ಒಳಗೊಂಡಂತೆ, ನಾವು ಈಗ ಸಿಎಸ್ಎಸ್ ಗೆ ತಿರುಗಬಹುದು. ನಾವು ನಮ್ಮ ಸ್ಟೈಲ್ಶೀಟ್ಗೆ ನಿಯಮವನ್ನು ಸೇರಿಸುತ್ತೇವೆ ಅದು ಆ ಚಿತ್ರವನ್ನು ತೇಲುತ್ತದೆ ಮತ್ತು ಅದರ ಹತ್ತಿರ ಸ್ವಲ್ಪ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಅಂತಿಮವಾಗಿ ಚಿತ್ರದ ಸುತ್ತಲೂ ಸುತ್ತುವ ಪಠ್ಯವು ತುಂಬಾ ನಿಕಟವಾಗಿ ವಿರುದ್ಧವಾಗುವುದಿಲ್ಲ. ನೀವು ಬರೆಯಬಹುದಾದ ಸಿಎಸ್ಎಸ್ ಇಲ್ಲಿದೆ:
. ಎಡ {ಫ್ಲೋಟ್: ಎಡ; ಪ್ಯಾಡಿಂಗ್: 0 20px 20px 0; }ಈ ಶೈಲಿ ಎಡಕ್ಕೆ ಆ ಚಿತ್ರವನ್ನು ತೇಲುತ್ತದೆ ಮತ್ತು ಸ್ವಲ್ಪ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು (ಕೆಲವು ಸಿಎಸ್ಎಸ್ ಸಂಕ್ಷಿಪ್ತ ರೂಪವನ್ನು ಬಳಸಿ) ಚಿತ್ರದ ಬಲ ಮತ್ತು ಕೆಳಭಾಗಕ್ಕೆ ಸೇರಿಸುತ್ತದೆ.
ಬ್ರೌಸರ್ನಲ್ಲಿ ಈ HTML ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಪುಟವನ್ನು ನೀವು ಪರಿಶೀಲಿಸಿದಲ್ಲಿ, ಚಿತ್ರವು ಎಡಕ್ಕೆ ಜೋಡಣೆಗೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಪಠ್ಯವು ಅದರ ಬಲಕ್ಕೆ ಗೋಚರಿಸುತ್ತದೆ ಮತ್ತು ಅವುಗಳ ನಡುವೆ ಸೂಕ್ತವಾದ ಅಂತರವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ನಾವು ಬಳಸಿದ "ಎಡ" ದ ವರ್ಗ ಮೌಲ್ಯವು ಅನಿಯಂತ್ರಿತವಾಗಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. "ಎಡ" ಎಂಬ ಶಬ್ದವು ತನ್ನದೇ ಆದ ಮೇಲೆ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ ಎಂಬ ಕಾರಣದಿಂದ ನಾವು ಅದನ್ನು ಏನೆಂದು ಕರೆಯುತ್ತೇವೆ. ಇದು ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಒಂದು ಕ್ಲಾಸ್ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರಬೇಕು, ಅದು ನೀವು ನಿಜವಾದ ಸಿಎಸ್ಎಸ್ ಶೈಲಿಯೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಮತ್ತು ನೀವು ಮಾಡಲು ಬಯಸುವ ದೃಶ್ಯ ಬದಲಾವಣೆಗಳನ್ನು ನಿರ್ದೇಶಿಸುತ್ತದೆ.
ಈ ಸ್ಟೈಲ್ಸ್ ಸಾಧಿಸಲು ಪರ್ಯಾಯ ಮಾರ್ಗಗಳು
ಚಿತ್ರದ ಅಂಶವನ್ನು ವರ್ಗ ಗುಣಲಕ್ಷಣವನ್ನು ನೀಡುವ ಈ ವಿಧಾನ ಮತ್ತು ನಂತರ ಅಂಶವನ್ನು ತೇಲುವ ಸಾಮಾನ್ಯ CSS ಶೈಲಿಯನ್ನು ಬಳಸಿ ಈ "ಎಡ ಜೋಡಿಸಿದ ಚಿತ್ರ" ನೋಟವನ್ನು ನೀವು ಸಾಧಿಸಬಹುದಾಗಿದೆ. ನೀವು ಚಿತ್ರದ ವರ್ಗದ ಮೌಲ್ಯವನ್ನು ಸಹ ತೆಗೆದುಕೊಳ್ಳಬಹುದು ಮತ್ತು ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟ ಸೆಲೆಕ್ಟರ್ ಬರೆಯುವ ಮೂಲಕ ಅದನ್ನು ಶೈಲಿ ಮಾಡಬಹುದು. ಉದಾಹರಣೆಗೆ, ಆ ಚಿತ್ರವು "ಮುಖ್ಯ-ವಿಷಯ" ದ ವರ್ಗದ ಮೌಲ್ಯದೊಂದಿಗೆ ಒಂದು ವಿಭಾಗದ ಒಳಗೆ ಇರುವ ಒಂದು ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ.
ಈ ಚಿತ್ರ ಶೈಲಿಗೆ, ನೀವು ಈ ಸಿಎಸ್ಎಸ್ ಬರೆಯಬಹುದು:
.ಮೇನ್-ವಿಷಯ img {ಫ್ಲೋಟ್: ಎಡ; ಪ್ಯಾಡಿಂಗ್: 0 20px 20px 0; }ಈ ಸನ್ನಿವೇಶದಲ್ಲಿ, ನಮ್ಮ ಚಿತ್ರವು ಎಡಕ್ಕೆ ಜೋಡಿಸಲ್ಪಡುತ್ತದೆ, ಅದರ ಹಿಂದೆ ಅದರ ಸುತ್ತಲೂ ತೇಲುವ ಪಠ್ಯವು ನಮ್ಮ ಮಾರ್ಕ್ಅಪ್ಗೆ ಹೆಚ್ಚುವರಿ ವರ್ಗ ಮೌಲ್ಯವನ್ನು ಸೇರಿಸಬೇಕಾಗಿಲ್ಲ. ಸ್ಕೇಲ್ನಲ್ಲಿ ಇದನ್ನು ಮಾಡುವುದರಿಂದ ಚಿಕ್ಕ HTML ಫೈಲ್ ಅನ್ನು ರಚಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಇದು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಅಂತಿಮವಾಗಿ, ನಿಮ್ಮ HTML ಮಾರ್ಕ್ಅಪ್ಗೆ ನೇರವಾಗಿ ಈ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಬಹುದು:
ಈ ವಿಧಾನವನ್ನು " ಇನ್ಲೈನ್ ಶೈಲಿಗಳು " ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. ಅದರ ರಚನಾತ್ಮಕ ಮಾರ್ಕ್ಅಪ್ನೊಂದಿಗಿನ ಅಂಶದ ಶೈಲಿಯನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಸಂಯೋಜಿಸುತ್ತದೆ ಏಕೆಂದರೆ ಇದು ಸೂಕ್ತವಲ್ಲ. ಪುಟದ ಶೈಲಿ ಮತ್ತು ವಿನ್ಯಾಸವು ಪ್ರತ್ಯೇಕವಾಗಿ ಉಳಿಯಬೇಕೆಂಬುದನ್ನು ವೆಬ್ ಅತ್ಯುತ್ತಮ ಆಚರಣೆಗಳು ನಿರ್ದೇಶಿಸುತ್ತವೆ. ನಿಮ್ಮ ಪುಟವು ಅದರ ವಿನ್ಯಾಸವನ್ನು ಬದಲಾಯಿಸಲು ಮತ್ತು ವಿವಿಧ ಪರದೆಯ ಗಾತ್ರಗಳು ಮತ್ತು ಸಾಧನಗಳಿಗೆ ಒಂದು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವೆಬ್ಸೈಟ್ನೊಂದಿಗೆ ನೋಡಬೇಕಾದರೆ ಇದು ವಿಶೇಷವಾಗಿ ಸಹಾಯಕವಾಗುತ್ತದೆ. ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಹೆಣೆದುಕೊಂಡ ಪುಟದ ಶೈಲಿಯು ಆ ವಿಭಿನ್ನ ಪರದೆಗಳಿಗೆ ಅಗತ್ಯವಿರುವಂತೆ ನಿಮ್ಮ ಸೈಟ್ನ ನೋಟವನ್ನು ಸರಿಹೊಂದಿಸುವಂತಹ ಲೇಖಕರ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳಿಗೆ ಹೆಚ್ಚು ಕಷ್ಟಕರವಾಗಿಸುತ್ತದೆ.
ಜೆನ್ನಿಫರ್ ಕ್ರಿನಿನ್ರಿಂದ ಮೂಲ ಲೇಖನ. 4/3/17 ರಂದು ಜೆರೆಮಿ ಗಿರಾರ್ಡ್ರಿಂದ ಸಂಪಾದಿಸಲಾಗಿದೆ.