ಸಿಎಸ್ಎಸ್ ಜೊತೆ ವೆಬ್ಸೈಟ್ ಫಾಂಟ್ ಬಣ್ಣಗಳು ಬದಲಿಸಿ ಹೇಗೆ

ಒಳ್ಳೆಯ ಮುದ್ರಣದ ವಿನ್ಯಾಸ ಯಶಸ್ವಿ ವೆಬ್ಸೈಟ್ನ ಒಂದು ಪ್ರಮುಖ ಭಾಗವಾಗಿದೆ. ವೆಬ್ ಪುಟಗಳಲ್ಲಿ ನೀವು ನಿರ್ಮಿಸುವ ವೆಬ್ ಪುಟಗಳ ಪಠ್ಯದ ನೋಟವನ್ನು ಸಿಎಸ್ಎಸ್ ನಿಮಗೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣ ನೀಡುತ್ತದೆ. ಇದು ನೀವು ಬಳಸುವ ಯಾವುದೇ ಫಾಂಟ್ಗಳ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಒಳಗೊಂಡಿದೆ.

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

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

ಫಾಂಟ್ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಲು ಶೈಲಿಗಳನ್ನು ಸೇರಿಸುವುದು

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

ನಿಮ್ಮ ಬಾಹ್ಯ ಸ್ಟೈಲ್ ಹಾಳೆಯನ್ನು ಬಳಸಿ ಪ್ಯಾರಾಗ್ರಾಫ್ ಟ್ಯಾಗ್ಗಳ ಒಳಗೆ ಪಠ್ಯದ ಫಾಂಟ್ ಬಣ್ಣವನ್ನು ಹೇಗೆ ಬದಲಾಯಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿರುತ್ತದೆ.

ಬಣ್ಣದ ಮೌಲ್ಯಗಳನ್ನು ಬಣ್ಣ ಕೀವರ್ಡ್ಗಳು, RGB ವರ್ಣ ಸಂಖ್ಯೆಗಳು, ಅಥವಾ ಹೆಕ್ಸಾಡೆಸಿಮಲ್ ಬಣ್ಣ ಸಂಖ್ಯೆಗಳಾಗಿ ವ್ಯಕ್ತಪಡಿಸಬಹುದು.

1. ಪ್ಯಾರಾಗ್ರಾಫ್ ಟ್ಯಾಗ್ಗಾಗಿ ಶೈಲಿ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ:
   1. p {}
2. ಬಣ್ಣದ ಆಸ್ತಿಯನ್ನು ಶೈಲಿಯಲ್ಲಿ ಇರಿಸಿ. ಆಸ್ತಿಯ ನಂತರ ಕೊಲೊನ್ ಇರಿಸಿ:
   1. ಪು {ಬಣ್ಣ:}
3. ಆಸ್ತಿಯ ನಂತರ ನಿಮ್ಮ ಬಣ್ಣದ ಮೌಲ್ಯವನ್ನು ಸೇರಿಸಿ. ಆ ಮೌಲ್ಯವನ್ನು ಅರೆ ಕೊಲೊನ್ ಜೊತೆ ಕೊನೆಗೊಳಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:
   1. ಪು {ಬಣ್ಣ: ಕಪ್ಪು;}

ನಿಮ್ಮ ಪುಟದಲ್ಲಿನ ಪ್ಯಾರಾಗಳು ಈಗ ಕಪ್ಪು ಆಗಿರುತ್ತವೆ.

ಈ ಉದಾಹರಣೆಯು ಒಂದು ಬಣ್ಣದ ಕೀವರ್ಡ್ - "ಕಪ್ಪು" ಅನ್ನು ಬಳಸುತ್ತದೆ. CSS ನಲ್ಲಿ ಬಣ್ಣವನ್ನು ಸೇರಿಸುವ ಒಂದು ಮಾರ್ಗವೆಂದರೆ ಅದು ತುಂಬಾ ಸೀಮಿತವಾಗಿದೆ. "ಎರಡು" ಬಣ್ಣಗಳು ಬಹಳ ನಿರ್ದಿಷ್ಟವಾಗಿರುವುದರಿಂದ "ಕಪ್ಪು" ಮತ್ತು "ಬಿಳಿ" ಗಾಗಿ ಕೀವರ್ಡ್ಗಳನ್ನು ಬಳಸುವುದು ಸರಳವಾಗಿದೆ, ಆದರೆ ನೀವು "ಕೆಂಪು", "ನೀಲಿ", ಅಥವಾ "ಹಸಿರು" ನಂತಹ ಕೀವರ್ಡ್ಗಳನ್ನು ಬಳಸಿದರೆ ಏನಾಗುತ್ತದೆ? ಕೆಂಪು, ನೀಲಿ, ಅಥವಾ ಹಸಿರು ಬಣ್ಣವನ್ನು ನೀವು ನಿಖರವಾಗಿ ಪಡೆಯುತ್ತೀರಿ? ಕೀವರ್ಡ್ಗಳೊಂದಿಗೆ ನೀವು ಬಯಸುವ ಬಣ್ಣವನ್ನು ನಿಖರವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗುವುದಿಲ್ಲ. ಇದಕ್ಕಾಗಿಯೇ ಹೆಕ್ಸಾಡೆಸಿಮಲ್ ಮೌಲ್ಯಗಳನ್ನು ಹೆಚ್ಚಾಗಿ ಬಣ್ಣ ಕೀವರ್ಡ್ಗಳ ಬದಲಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ.

p {color: # 000000; }

ಈ ಸಿಎಸ್ಎಸ್ ಶೈಲಿಯು ನಿಮ್ಮ ಪ್ಯಾರಾಗಳ ಬಣ್ಣವನ್ನು ಕಪ್ಪು ಬಣ್ಣಕ್ಕೆ ಹೊಂದಿಸುತ್ತದೆ, ಏಕೆಂದರೆ # 000000 ರ ಹೆಕ್ಸ್ ಕೋಡ್ ಕಪ್ಪು ಎಂದು ಅನುವಾದಿಸುತ್ತದೆ. ಆ ಹೆಕ್ಸ್ ಮೌಲ್ಯದೊಂದಿಗೆ ನೀವು ಸಂಕ್ಷಿಪ್ತ ಶಬ್ದವನ್ನು ಬಳಸಬಹುದು ಮತ್ತು ಅದನ್ನು ಕೇವಲ # 000 ಎಂದು ಬರೆಯಬಹುದು ಮತ್ತು ನೀವು ಒಂದೇ ವಿಷಯವನ್ನು ಪಡೆಯುತ್ತೀರಿ.

ನಾವು ಈಗಾಗಲೇ ಹೇಳಿದಂತೆ, ಹೆಕ್ಸ್ ಮೌಲ್ಯಗಳು ಸರಳವಾಗಿ ಕಪ್ಪು ಅಥವಾ ಬಿಳಿ ಬಣ್ಣವನ್ನು ಹೊಂದಿರುವಾಗ ಚೆನ್ನಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ಇಲ್ಲಿ ಒಂದು ಉದಾಹರಣೆಯಾಗಿದೆ:

p {color: # 2f5687; }

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

ಅಂತಿಮವಾಗಿ, ಫಾಂಟ್ ಬಣ್ಣಗಳಿಗೆ RGBA ಬಣ್ಣದ ಮೌಲ್ಯಗಳನ್ನು ನೀವು ಬಳಸಬಹುದು. ಆರ್ಜಿಸಿಎ ಈಗ ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿದೆ, ಆದ್ದರಿಂದ ನೀವು ಈ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವಲ್ಪ ಕಳವಳದಿಂದ ಬಳಸಬಹುದು ಮತ್ತು ಅದು ವೆಬ್ ಬ್ರೌಸರ್ನಲ್ಲಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ, ಆದರೆ ನೀವು ಸುಲಭವಾಗಿ ಫಾಲ್ಬ್ಯಾಕ್ ಹೊಂದಿಸಬಹುದು.

p {color: rgba (47,86,135,1); }

ಈ RGBA ಮೌಲ್ಯವು ಮೊದಲೇ ಸೂಚಿಸಲಾದ ಸ್ಲೇಟ್ ನೀಲಿ ಬಣ್ಣದಂತೆಯೇ ಇರುತ್ತದೆ. ಮೊದಲ 3 ಮೌಲ್ಯಗಳು ಕೆಂಪು, ಹಸಿರು ಮತ್ತು ನೀಲಿ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿಸಿವೆ ಮತ್ತು ಕೊನೆಯ ಸಂಖ್ಯೆಯು ಆಲ್ಫಾ ಸೆಟ್ಟಿಂಗ್ ಆಗಿದೆ. ಇದು "1" ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ, ಅಂದರೆ "100%", ಆದ್ದರಿಂದ ಈ ಬಣ್ಣವು ಯಾವುದೇ ಪಾರದರ್ಶಕತೆ ಹೊಂದಿರುವುದಿಲ್ಲ. ನೀವು 85 ರಂತೆ ದಶಮಾಂಶ ಸಂಖ್ಯೆಯನ್ನು ಹೊಂದಿಸಿದರೆ ಅದು 85% ಅಪಾರದರ್ಶಕತೆಗೆ ಅನುವಾದಿಸುತ್ತದೆ ಮತ್ತು ಬಣ್ಣವು ಸ್ವಲ್ಪ ಪಾರದರ್ಶಕವಾಗಿರುತ್ತದೆ.

ನಿಮ್ಮ ಬಣ್ಣದ ಮೌಲ್ಯಗಳನ್ನು ಬುಲೆಟ್ ಮಾಡಲು ನೀವು ಬಯಸಿದರೆ, ನೀವು ಹೀಗೆ ಮಾಡುತ್ತೀರಿ:

p {
ಬಣ್ಣ: # 2f5687;
ಬಣ್ಣ: rgba (47,86,135,1);
}

ಈ ಸಿಂಟ್ಯಾಕ್ಸ್ ಮೊದಲ ಹೆಕ್ಸ್ ಕೋಡ್ ಅನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಅದು ಆ ಮೌಲ್ಯವನ್ನು RGBA ಸಂಖ್ಯೆಯೊಂದಿಗೆ ಬರೆಯುತ್ತದೆ. ಇದರ ಅರ್ಥ RGBA ಅನ್ನು ಬೆಂಬಲಿಸದ ಯಾವುದೇ ಹಳೆಯ ಬ್ರೌಸರ್ ಮೊದಲ ಮೌಲ್ಯವನ್ನು ಪಡೆಯುತ್ತದೆ ಮತ್ತು ಎರಡನೆಯದನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ. ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳು ಪ್ರತಿ ಸೆಕೆಂಡ್ ಕ್ಯಾಸ್ಕೇಡ್ ಅನ್ನು ಬಳಸುತ್ತವೆ.