ಒಂದು ವೆಬ್ ಪುಟದಲ್ಲಿನ ಐಟಂಗಳ ನಿಯೋಜನೆಯು ಅದರ ಒಟ್ಟಾರೆ ವಿನ್ಯಾಸಕ್ಕೆ ಅವಶ್ಯಕವಾಗಿದೆ. ಲೇಔಟ್ಗಳ ಮೇಲೆ ಪ್ರಭಾವ ಬೀರಲು ಇತರ ಮಾರ್ಗಗಳಿವೆ, ಉದಾಹರಣೆಗೆ ಕೋಷ್ಟಕಗಳನ್ನು ಬಳಸುವುದು ( ನಾವು ಶಿಫಾರಸು ಮಾಡುವುದಿಲ್ಲ ), ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಬಳಸುವುದು ಉತ್ತಮ .
ಕೆಳಗೆ, ಚಿತ್ರಗಳು, ಕೋಷ್ಟಕಗಳು, ಪ್ಯಾರಾಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳನ್ನು ಒಗ್ಗೂಡಿಸಲು ಸರಳ CSS ಶೈಲಿಯ ಇನ್-ಲೈನ್ ಆಸ್ತಿಯನ್ನು ಹೇಗೆ ಬಳಸಬೇಕೆಂದು ನಾವು ನೋಡೋಣ.
ಗಮನಿಸಿ: ಈ ರೀತಿಯ ವಿಧಾನಗಳನ್ನು ಬಾಹ್ಯ ಸ್ಟೈಲ್ ಹಾಳೆಗಳಲ್ಲೂ ಸಹ ಬಳಸಬಹುದು ಆದರೆ ಇವುಗಳು ವೈಯಕ್ತಿಕ ವಸ್ತುಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತವೆ ಮತ್ತು ಆ ರೀತಿಯಲ್ಲಿ ಉಳಿಯಲು ಸಾಧ್ಯವಿದೆ, ಕೆಳಗಿನಂತೆ ಏನು ಹೇಳಲಾಗಿದೆ ಎಂಬಂತೆ ಇನ್-ಲೈನ್ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಬಳಸಲು ಉತ್ತಮವಾಗಿದೆ.
ಪಠ್ಯ ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳನ್ನು ಒಗ್ಗೂಡಿಸಿ
ಪ್ಯಾರಾಗ್ರಾಫ್ ಟ್ಯಾಗ್ ನಿಮ್ಮ ವೆಬ್ ಪುಟವನ್ನು ಹಾಕುವಲ್ಲಿ ಪ್ರಾರಂಭಿಸುವ ಮೊದಲ ಸ್ಥಳವಾಗಿದೆ. ಟ್ಯಾಗ್ಗಳನ್ನು ತೆರೆಯುವ ಮತ್ತು ಮುಚ್ಚುವಿಕೆಯು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:
ಪ್ಯಾರಾಗ್ರಾಫ್ನಲ್ಲಿನ ಪಠ್ಯದ ಡೀಫಾಲ್ಟ್ ಜೋಡಣೆ ಪುಟದ ಎಡಭಾಗದಲ್ಲಿದೆ, ಆದರೆ ನೀವು ನಿಮ್ಮ ಪ್ಯಾರಾಗಳನ್ನು ಬಲ ಮತ್ತು ಕೇಂದ್ರಕ್ಕೆ ಹೊಂದಿಸಬಹುದು.
ಫ್ಲೋಟ್ ಆಸ್ತಿ ಬಳಸಿ ಪೋಷಕ ಅಂಶಗಳ ಬಲ ಅಥವಾ ಎಡಕ್ಕೆ ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳನ್ನು ಜೋಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಮೂಲ ಅಂಶದ ಒಳಗೆ ಯಾವುದೇ ಇತರ ಅಂಶಗಳು ತೇಲುವ ಅಂಶದ ಸುತ್ತಲೂ ಹರಿಯುತ್ತವೆ.
ಪ್ಯಾರಾಗ್ರಾಫ್ನೊಂದಿಗೆ ಅತ್ಯುತ್ತಮ ಪರಿಣಾಮವನ್ನು ಪಡೆಯಲು, ಧಾರಕ (ಪೋಷಕ) ಅಂಶಕ್ಕಿಂತ ಸಣ್ಣದಾದ ಪ್ಯಾರಾಗ್ರಾಫ್ನಲ್ಲಿ ಅಗಲವನ್ನು ಹೊಂದಿಸುವುದು ಉತ್ತಮವಾಗಿದೆ.
ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳ ಒಳಗೆ ಪಠ್ಯವನ್ನು ಹೊಂದಿಸಿ
ವಾದಯೋಗ್ಯವಾಗಿ, ಪ್ಯಾರಾಗ್ರಾಫ್ ಪಠ್ಯಕ್ಕಾಗಿ ಅತ್ಯಂತ ಆಸಕ್ತಿದಾಯಕ ಜೋಡಣೆಯು "ಸಮರ್ಥನೆ" ಆಗಿದೆ, ಅದು ಪಠ್ಯವನ್ನು ಸರಿಹೊಂದಿಸಲು, ಮೂಲಭೂತವಾಗಿ, ವಿಂಡೋದ ಬಲ ಮತ್ತು ಎಡ ಭಾಗಗಳಿಗೆ ಪ್ರದರ್ಶಿಸಲು ಬ್ರೌಸರ್ಗೆ ಹೇಳುತ್ತದೆ.
ಪ್ಯಾರಾಗ್ರಾಫ್ನಲ್ಲಿ ಪಠ್ಯವನ್ನು ಸಮರ್ಥಿಸಲು, ನೀವು ಪಠ್ಯ-ಅಲೈನ್ ಆಸ್ತಿಯನ್ನು ಬಳಸುತ್ತೀರಿ.
ಟೆಕ್ಸ್ಟ್-ಅಲೈನ್ ಆಸ್ತಿ ಬಳಸಿ, ಬಲಭಾಗದ ಅಥವಾ ಎಡಕ್ಕೆ (ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ) ಪ್ಯಾರಾಗ್ರಾಫ್ನಲ್ಲಿರುವ ಎಲ್ಲಾ ಪಠ್ಯವನ್ನೂ ಸಹ ನೀವು ಹೊಂದಿಸಬಹುದು.
ಪಠ್ಯ-ಅಲೈನ್ ಆಸ್ತಿ ಅಂಶ ಒಳಗೆ ಪಠ್ಯವನ್ನು align ಮಾಡುತ್ತದೆ. ತಾಂತ್ರಿಕವಾಗಿ, ಇದು ಪ್ಯಾರಾಗ್ರಾಫ್ ಅಥವಾ ಇತರ ಅಂಶಗಳ ಒಳಗೆ ಇರುವಂತಹ ಚಿತ್ರಗಳನ್ನು ಅಲೈನ್ ಮಾಡಲು ಬಯಸುವುದಿಲ್ಲ, ಆದರೆ ಹೆಚ್ಚಿನ ಬ್ರೌಸರ್ಗಳು ಚಿತ್ರಗಳನ್ನು ಈ ಆಸ್ತಿಗಾಗಿ ಇನ್ಲೈನ್ ಆಗಿ ಪರಿಗಣಿಸುತ್ತವೆ.
ಚಿತ್ರಗಳನ್ನು ಜೋಡಿಸುವುದು
ಇಮೇಜ್ ಟ್ಯಾಗ್ನಲ್ಲಿ ಫ್ಲೋಟ್ ಆಸ್ತಿ ಬಳಸಿ ನೀವು ಚಿತ್ರದ ಚಿತ್ರಗಳನ್ನು ಪುಟದಲ್ಲಿ ಮತ್ತು ಅವುಗಳ ಸುತ್ತಲಿನ ಪಠ್ಯವನ್ನು ಹೇಗೆ ಸುತ್ತುತ್ತದೆ ಎಂದು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು.
ಮೇಲೆ ಪ್ಯಾರಾಗಳು ಹಾಗೆ, ಚಿತ್ರ ಟ್ಯಾಗ್ನಲ್ಲಿ ಫ್ಲೋಟ್ ಶೈಲಿ ಆಸ್ತಿ ಪುಟದಲ್ಲಿ ನಿಮ್ಮ ಇಮೇಜ್ ಸ್ಥಾನ ಮತ್ತು ಪಠ್ಯ ಮತ್ತು ಇತರ ಚಿತ್ರಗಳ ಸುತ್ತ ಹರಿವು ಹೇಗೆ ಬ್ರೌಸರ್ ಹೇಳುತ್ತದೆ.
ಮೇಲಿನ ಚಿತ್ರದ ಟ್ಯಾಗ್ ಅನ್ನು ಅನುಸರಿಸುವ ಪಠ್ಯವು ಪರದೆಯ ಎಡಭಾಗದಲ್ಲಿರುವ ಚಿತ್ರದ ಪ್ರದರ್ಶನಗಳಂತೆ ಚಿತ್ರದ ಸುತ್ತಲೂ ಹರಿಯುತ್ತದೆ.
ಚಿತ್ರದ ಸುತ್ತಲೂ ಸುತ್ತುವುದನ್ನು ನಿಲ್ಲಿಸಲು ನಾನು ಬಯಸಿದರೆ, ನಾನು ಸ್ಪಷ್ಟ ಆಸ್ತಿಯನ್ನು ಬಳಸುತ್ತೇನೆ:
ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳನ್ನು ಹೆಚ್ಚು ಜೋಡಿಸಿ
ಆದಾಗ್ಯೂ, ನೀವು ಕೇವಲ ಒಂದು ಪ್ಯಾರಾಗ್ರಾಫ್ ಅಥವಾ ಇಮೇಜ್ಗಿಂತ ಹೆಚ್ಚಿನದನ್ನು align ಮಾಡಲು ಬಯಸಿದರೆ ಏನು? ಪ್ರತಿ ಪ್ಯಾರಾಗ್ರಾಫ್ನಲ್ಲಿ ನೀವು ಶೈಲಿ ಆಸ್ತಿಯನ್ನು ಸರಳವಾಗಿ ಇರಿಸಬಹುದು, ಆದರೆ ನೀವು ಬಳಸಬಹುದಾದ ಟ್ಯಾಗ್ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ:
ಟ್ಯಾಗ್ ಮತ್ತು ಶೈಲಿ ಆಸ್ತಿ (ಫ್ಲೋಟ್ ಅಥವಾ ಟೆಕ್ಸ್ಟ್-ಅಲೈನ್) ಜೊತೆಗೆ ಪಠ್ಯ ಮತ್ತು ಇಮೇಜ್ಗಳನ್ನು ( HTML ಟ್ಯಾಗ್ಗಳನ್ನು ಒಳಗೊಂಡಂತೆ) ಸುತ್ತುವರಿಯಿರಿ ಮತ್ತು ಆ ವಿಭಾಗದಲ್ಲಿ ಎಲ್ಲವನ್ನೂ ನೀವು ಹೇಗೆ ಬಯಸುತ್ತೀರಿ ಎಂಬುದನ್ನು ಜೋಡಿಸಲಾಗುತ್ತದೆ.
ವಿಭಾಗದಲ್ಲಿ ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳು ಅಥವಾ ಇಮೇಜ್ಗಳಿಗೆ ಸೇರಿಸಲಾದ ಜೋಡಣೆಗಳನ್ನು ಗೌರವಿಸಲಾಗುವುದು, ಟ್ಯಾಗ್ ಅನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ.