ಈ ಸಿಎಸ್ಎಸ್ ಚೀಟ್ ಶೀಟ್ನೊಂದಿಗೆ ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ಸ್ ತಿಳಿದುಕೊಳ್ಳಿ

ಮಾದರಿ ಸ್ಟೈಲ್ ಶೀಟ್ನೊಂದಿಗೆ ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ಸ್ನ ಒಂದು ಅವಲೋಕನ

ನೀವು ಮೊದಲಿನಿಂದ ವೆಬ್ಸೈಟ್ ನಿರ್ಮಿಸಿದಾಗ, ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಮೂಲ ಶೈಲಿಗಳೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲು ಇದು ಉತ್ತಮವಾಗಿದೆ. ಸ್ವಚ್ಛವಾದ ಕ್ಯಾನ್ವಾಸ್ ಮತ್ತು ತಾಜಾ ಕುಂಚಗಳ ಮೂಲಕ ಪ್ರಾರಂಭಿಸುವುದು ಹೀಗಿದೆ. ವೆಬ್ ವಿನ್ಯಾಸಗಾರರು ಎದುರಿಸುತ್ತಿರುವ ಮೊದಲ ಸಮಸ್ಯೆಗಳಲ್ಲಿ ಯಾವುವೆಂದರೆ ವೆಬ್ ಬ್ರೌಸರ್ಗಳು ಎಲ್ಲಾ ವಿಭಿನ್ನವಾಗಿವೆ. ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರ ವೇದಿಕೆಗೆ ವೇದಿಕೆಗಿಂತ ವಿಭಿನ್ನವಾಗಿದೆ, ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಕುಟುಂಬ ವಿಭಿನ್ನವಾಗಿದೆ, ಕೆಲವು ಬ್ರೌಸರ್ಗಳು ಅಂಚುಗಳನ್ನು ಮತ್ತು ದೇಹದ ಟ್ಯಾಗ್ನಲ್ಲಿ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ, ಆದರೆ ಇತರರು ಮಾಡದೇ ಇರುವುದಿಲ್ಲ. ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳಿಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಶೈಲಿಗಳನ್ನು ವಿವರಿಸುವ ಮೂಲಕ ಈ ಅಸ್ಥಿರತೆಗಳನ್ನು ಪಡೆಯಿರಿ.

ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಅಕ್ಷರ ಸೆಟ್

ಮೊದಲನೆಯದಾಗಿ, ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಡಾಕ್ಯುಮೆಂಟ್ಗಳ ಅಕ್ಷರ ಸೆಟ್ ಅನ್ನು utf-8 ಗೆ ಹೊಂದಿಸಿ . ನೀವು ವಿನ್ಯಾಸಗೊಳಿಸಿದ ಬಹುಪಾಲು ಪುಟಗಳನ್ನು ಇಂಗ್ಲಿಷ್ನಲ್ಲಿ ಬರೆಯಲಾಗುತ್ತಿದ್ದರೂ, ಕೆಲವು ಭಾಷೆಗಳು ವಿಭಿನ್ನ ಭಾಷಾ ಮತ್ತು ಸಾಂಸ್ಕೃತಿಕ ಸನ್ನಿವೇಶಗಳಿಗೆ ಅಳವಡಿಸಿಕೊಳ್ಳಬಹುದು. ಅವುಗಳು ಯಾವಾಗ, utf-8 ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ. ಬಾಹ್ಯ ಸ್ಟೈಲ್ ಹಾಳೆಯಲ್ಲಿ ಸೆಟ್ ಮಾಡುವ ಅಕ್ಷರವನ್ನು HTTP ಹೆಡರ್ ಮೇಲೆ ಆದ್ಯತೆ ತೆಗೆದುಕೊಳ್ಳುವುದಿಲ್ಲ, ಆದರೆ ಇತರ ಎಲ್ಲ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಅದು ತಿನ್ನುವೆ.

ಅಕ್ಷರ ಸೆಟ್ ಅನ್ನು ಹೊಂದಿಸುವುದು ಸುಲಭ. ಸಿಎಸ್ಎಸ್ ಡಾಕ್ಯುಮೆಂಟ್ನ ಮೊದಲ ಸಾಲಿಗಾಗಿ ಬರೆಯಿರಿ:

@ ಚಾರ್ಸೆಟ್ "utf-8";

ಈ ರೀತಿಯಲ್ಲಿ, ನೀವು ವಿಷಯ ಆಸ್ತಿಯಲ್ಲಿ ಅಥವಾ ವರ್ಗ ಮತ್ತು ID ಹೆಸರುಗಳ ಅಂತರಾಷ್ಟ್ರೀಯ ಅಕ್ಷರಗಳನ್ನು ಬಳಸಿದರೆ , ಸ್ಟೈಲ್ ಶೀಟ್ ಇನ್ನೂ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ.

ಪುಟ ದೇಹವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದು

ಡೀಫಾಲ್ಟ್ ಸ್ಟೈಲ್ ಶೀಟ್ ಅಗತ್ಯವಿರುವ ಮುಂದಿನ ವಿಷಯವೆಂದರೆ ಅಂಚುಗಳು, ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಗಡಿಗಳನ್ನು ಶೂನ್ಯಕ್ಕೆ ಶೈಲಿಗಳು. ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳು ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ವಿಷಯವನ್ನು ಇರಿಸಿವೆ ಮತ್ತು ಬ್ರೌಸರ್ ಮತ್ತು ವಿಷಯದ ನಡುವೆ ಯಾವುದೇ ಗುಪ್ತ ಸ್ಥಳಗಳಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಹೆಚ್ಚಿನ ವೆಬ್ ಪುಟಗಳಿಗಾಗಿ, ಇದು ಪಠ್ಯಕ್ಕಾಗಿ ಅಂಚಿಗೆ ತುಂಬಾ ಹತ್ತಿರದಲ್ಲಿದೆ, ಆದರೆ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಮತ್ತು ಲೇಔಟ್ ವಿಭಾಗಗಳು ಸರಿಯಾಗಿ ಪೂರೈಸಲ್ಪಟ್ಟಿರುವುದರಿಂದ ಅಲ್ಲಿ ಪ್ರಾರಂಭಿಸಲು ಮುಖ್ಯವಾಗಿದೆ.

html, ದೇಹ {margin: 0px; ಪ್ಯಾಡಿಂಗ್: 0px; ಗಡಿ: 0px; }

ಪೂರ್ವನಿಯೋಜಿತ ಮುನ್ನೆಲೆ ಅಥವಾ ಫಾಂಟ್ ಬಣ್ಣವನ್ನು ಕಪ್ಪು ಮತ್ತು ಪೂರ್ವನಿಯೋಜಿತ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಬಿಳಿಯಾಗಿ ಹೊಂದಿಸಿ. ಹೆಚ್ಚಿನ ವೆಬ್ಪುಟದ ವಿನ್ಯಾಸಗಳಿಗೆ ಇದು ಹೆಚ್ಚಾಗಿ ಬದಲಾಗುತ್ತಿರುವಾಗ, ದೇಹ ಮತ್ತು HTML ಟ್ಯಾಗ್ನ ಮೇಲೆ ಈ ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಬಣ್ಣಗಳನ್ನು ಹೊಂದಿದ ನಂತರ ಪುಟವು ಸುಲಭವಾಗಿ ಓದಲು ಮತ್ತು ಕೆಲಸ ಮಾಡುತ್ತದೆ.

HTML, ದೇಹ {ಬಣ್ಣ: # 000; ಹಿನ್ನೆಲೆ: #fff; }

ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಸ್ಟೈಲ್ಸ್

ಫಾಂಟ್ ಗಾತ್ರ ಮತ್ತು ಫಾಂಟ್ ಕುಟುಂಬವು ವಿನ್ಯಾಸವನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಂಡರೆ ಅನಿವಾರ್ಯವಾಗಿ ಬದಲಾಗಬಹುದು ಆದರೆ 1 ಎಮ್ ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಗಾತ್ರ ಮತ್ತು ಏರಿಯಲ್, ಜಿನೀವಾ, ಅಥವಾ ಇನ್ನಿತರ ಸಾನ್ಸ್-ಸೆರಿಫ್ ಫಾಂಟ್ನ ಡೀಫಾಲ್ಟ್ ಫಾಂಟ್ ಕುಟುಂಬದೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ಎಮ್ಸ್ ಬಳಕೆಯು ಪುಟವನ್ನು ಸುಲಭವಾಗಿ ಸಾಧ್ಯವಾಗುವಂತೆ ಇರಿಸಿಕೊಳ್ಳುತ್ತದೆ, ಮತ್ತು ಸಾನ್ಸ್-ಸೆರಿಫ್ ಫಾಂಟ್ ಪರದೆಯ ಮೇಲೆ ಹೆಚ್ಚು ಸ್ಪಷ್ಟವಾಗಿರುತ್ತದೆ.

html, ದೇಹ, p, th, td, li, dd, dt {font: 1em ಏರಿಯಲ್, ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್; }

ನೀವು ಪಠ್ಯವನ್ನು ಕಂಡುಕೊಳ್ಳುವ ಇತರ ಸ್ಥಳಗಳು ಇರಬಹುದು, ಆದರೆ p , th , td , li , dd , ಮತ್ತು dt ಗಳು ಬೇಸ್ ಫಾಂಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಉತ್ತಮ ಆರಂಭವಾಗಿದೆ. ಎಚ್ಟಿಎಮ್ಎಲ್ ಮತ್ತು ದೇಹವನ್ನು ಮಾತ್ರ ಸೇರಿಸಿ, ಆದರೆ HTML ಅಥವಾ ದೇಹಕ್ಕಾಗಿ ನಿಮ್ಮ ಫಾಂಟ್ಗಳನ್ನು ನೀವು ಮಾತ್ರ ವ್ಯಾಖ್ಯಾನಿಸಿದರೆ ಅನೇಕ ಬ್ರೌಸರ್ಗಳು ಫಾಂಟ್ ಆಯ್ಕೆಗಳನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತವೆ.

ಮುಖ್ಯಾಂಶಗಳು

ಎಚ್ಟಿಎಮ್ಎಲ್ ಶಿರೋನಾಮೆಗಳು ನಿಮ್ಮ ಸೈಟ್ ಔಟ್ಲೈನ್ಗೆ ಸಹಾಯ ಮಾಡಲು ಮತ್ತು ಮುಖ್ಯವಾಗಿ ನಿಮ್ಮ ಸೈಟ್ಗೆ ಹುಡುಕಾಟ ಇಂಜಿನ್ಗಳನ್ನು ಪಡೆಯಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ. ಶೈಲಿಗಳಿಲ್ಲದೆಯೇ, ಅವರು ಎಲ್ಲಾ ಕೊಳಕುಗಳಾಗಿದ್ದಾರೆ, ಆದ್ದರಿಂದ ಅವುಗಳನ್ನು ಎಲ್ಲಾ ಡೀಫಾಲ್ಟ್ ಶೈಲಿಗಳನ್ನು ಹೊಂದಿಸಿ ಮತ್ತು ಫಾಂಟ್ ಕುಟುಂಬ ಮತ್ತು ಪ್ರತಿ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತಾರೆ.

h1, h2, h3, h4, h5, h6 {font-family: ಏರಿಯಲ್, ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }

ಲಿಂಕ್ಸ್ ಫರ್ಗೆಟ್ ಮಾಡಬೇಡಿ

ಲಿಂಕ್ ಬಣ್ಣಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡುವುದು ಯಾವಾಗಲೂ ವಿನ್ಯಾಸದ ಒಂದು ನಿರ್ಣಾಯಕ ಭಾಗವಾಗಿದೆ, ಆದರೆ ನೀವು ಅವುಗಳನ್ನು ಡೀಫಾಲ್ಟ್ ಶೈಲಿಯಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸದಿದ್ದರೆ, ನೀವು ಕನಿಷ್ಟ ಒಂದು ಸೂಕ್ಷ್ಮ-ತರಗತಿಗಳನ್ನು ಮರೆತುಬಿಡುವ ಸಾಧ್ಯತೆಗಳಿವೆ. ನೀಲಿ ಬಣ್ಣದಲ್ಲಿ ಕೆಲವು ಸಣ್ಣ ಬದಲಾವಣೆಗಳೊಂದಿಗೆ ಅವುಗಳನ್ನು ವಿವರಿಸಿ ನಂತರ ಸೈಟ್ ವ್ಯಾಖ್ಯಾನಿಸಿದ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ನೀವು ಒಮ್ಮೆ ಬದಲಾಯಿಸಿ.

ನೀಲಿ ಬಣ್ಣದ ಛಾಯೆಗಳಲ್ಲಿ ಲಿಂಕ್ಗಳನ್ನು ಹೊಂದಿಸಲು, ಹೊಂದಿಸಿ:

• ನೀಲಿ ಬಣ್ಣಗಳು
• ಗಾಢ ನೀಲಿ ಬಣ್ಣಕ್ಕೆ ಲಿಂಕ್ಗಳನ್ನು ಭೇಟಿ ಮಾಡಿದರು
• ಹಗುರವಾದ ನೀಲಿ ಬಣ್ಣದಂತೆ ಲಿಂಕ್ಗಳನ್ನು ಮೇಲಿದ್ದು
• ಸಕ್ರಿಯ ಕೊಂಡಿಗಳು ಸಹ ನೀಲಿ ಬಣ್ಣದ್ದಾಗಿರುತ್ತವೆ

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ:

a: link {color: # 00f; } a: ಭೇಟಿ {ಬಣ್ಣ: # 009; } a: ಹೂವರ್ {color: # 06f; } a: ಸಕ್ರಿಯ {color: # 0cf; } ಸಾಕಷ್ಟು ನಿರುಪದ್ರವಿ ಬಣ್ಣದ ಯೋಜನೆ ಹೊಂದಿರುವ ಲಿಂಕ್ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದರ ಮೂಲಕ ನಾನು ಯಾವುದೇ ವರ್ಗಗಳನ್ನು ಮರೆಯುವುದಿಲ್ಲ ಮತ್ತು ಡೀಫಾಲ್ಟ್ ನೀಲಿ, ಕೆಂಪು ಮತ್ತು ನೇರಳೆ ಬಣ್ಣಗಳಿಗಿಂತ ಸ್ವಲ್ಪ ಕಡಿಮೆ ಜೋರಾಗಿ ಮಾಡುತ್ತದೆ.

ಪೂರ್ಣ ಶೈಲಿ ಹಾಳೆ

ಇಲ್ಲಿ ಪೂರ್ಣ ಶೈಲಿ ಹಾಳೆಯಾಗಿದೆ:

@ ಚಾರ್ಸೆಟ್ "utf-8"; html, ದೇಹ {margin: 0px; ಪ್ಯಾಡಿಂಗ್: 0px; ಗಡಿ: 0px; ಬಣ್ಣ: # 000; ಹಿನ್ನೆಲೆ: #fff; } html, ದೇಹ, p, th, td, li, dd, dt {font: 1em ಏರಿಯಲ್, ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್; } h1, h2, h3, h4, h5, h6 {font-family: ಏರಿಯಲ್, ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {color: # 00f; } a: ಭೇಟಿ {ಬಣ್ಣ: # 009; } a: ಹೂವರ್ {color: # 06f; } a: ಸಕ್ರಿಯ {color: # 0cf; }