ಬ್ಲಾಗರ್: ನಿಮ್ಮ ಬ್ಲಾಗ್ನಲ್ಲಿ ಕೋಡ್ಗಾಗಿ CSS ಶೈಲಿ
ಬ್ಲಾಗರ್ ಪ್ರವೇಶದಲ್ಲಿ ನಾನು ಕೋಡ್ ಪ್ರದೇಶಗಳನ್ನು ಹೇಗೆ ಮಾಡಿದ್ದೇನೆ ಎಂದು ಸ್ನೇಹಿತರೊಬ್ಬರು ನನ್ನನ್ನು ಕೇಳಿದರು. ನನ್ನ ಬ್ಲಾಗರ್ ಟೆಂಪ್ಲೇಟ್ನಲ್ಲಿ CSS ಗಾಗಿ ಸ್ಟೈಲ್ ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನಾನು ಇದನ್ನು ಮಾಡಿದ್ದೇನೆ. ನಾನು ಸೇರಿಸಿದ್ದು ಇಲ್ಲಿದೆ:
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: ಇದು HTML ಅನ್ನು ಗುರಿಯಾಗಿಸುವ CSS ನಿಯಮವಾಗಿದೆ<p>
ವರ್ಗ ಹೆಸರಿನ "ಕೋಡ್" ಹೊಂದಿರುವ ಅಂಶಗಳು. ಇದರರ್ಥ ಈ ವರ್ಗದೊಂದಿಗಿನ ಯಾವುದೇ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಈ ಕೆಳಗಿನ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಅನುಗುಣವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗುವುದು.font-family: Courier New;
: ಈ ಆಸ್ತಿ ಫಾಂಟ್ ಕುಟುಂಬವನ್ನು "ಕೊರಿಯರ್ ನ್ಯೂ" ಗೆ ಹೊಂದಿಸುತ್ತದೆ. ಉದ್ದೇಶಿತ ಅಂಶಗಳಲ್ಲಿ ಪಠ್ಯಕ್ಕಾಗಿ ಬಳಸಲಾಗುವ ಫಾಂಟ್ ಅನ್ನು ಇದು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.font-size: 8pt;
: ಈ ಆಸ್ತಿಯು ಫಾಂಟ್ ಗಾತ್ರವನ್ನು 8 ಅಂಕಗಳಿಗೆ ಹೊಂದಿಸುತ್ತದೆ. ಉದ್ದೇಶಿತ ಅಂಶಗಳಲ್ಲಿರುವ ಪಠ್ಯವನ್ನು ಈ ಫಾಂಟ್ ಗಾತ್ರದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.border-style: inset;
: ಈ ಆಸ್ತಿ ಗಡಿ ಶೈಲಿಯನ್ನು "ಇನ್ಸೆಟ್" ಗೆ ಹೊಂದಿಸುತ್ತದೆ. ಇದು ಉದ್ದೇಶಿತ ಅಂಶಗಳ ಸುತ್ತಲಿನ ಗಡಿಗೆ ಮುಳುಗಿದ ಅಥವಾ ಒತ್ತಿದ ನೋಟವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.border-width: 3px;
: ಈ ಗುಣಲಕ್ಷಣವು ಗಡಿಯ ಅಗಲವನ್ನು 3 ಪಿಕ್ಸೆಲ್ಗಳಿಗೆ ಹೊಂದಿಸುತ್ತದೆ. ಅಂಶಗಳ ಸುತ್ತಲಿನ ಅಂಚು 3 ಪಿಕ್ಸೆಲ್ಗಳ ದಪ್ಪವಾಗಿರುತ್ತದೆ.padding: 5px;
: ಈ ಗುಣಲಕ್ಷಣವು ಉದ್ದೇಶಿತ ಅಂಶಗಳ ಒಳಗಿನ ವಿಷಯದ ಸುತ್ತಲೂ 5 ಪಿಕ್ಸೆಲ್ಗಳ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ಇದು ಪಠ್ಯ ಮತ್ತು ಗಡಿಯ ನಡುವಿನ ಅಂತರವನ್ನು ಒದಗಿಸುತ್ತದೆ.background-color: #FFFFFF;
: ಈ ಗುಣಲಕ್ಷಣವು ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಬಿಳಿ ಬಣ್ಣಕ್ಕೆ ಹೊಂದಿಸುತ್ತದೆ (#FFFFFF). ಉದ್ದೇಶಿತ ಅಂಶಗಳಲ್ಲಿನ ವಿಷಯವು ಬಿಳಿ ಹಿನ್ನೆಲೆಯನ್ನು ಹೊಂದಿರುತ್ತದೆ.line-height: 100%;
: ಈ ಆಸ್ತಿಯು ಸಾಲಿನ ಎತ್ತರವನ್ನು ಫಾಂಟ್ ಗಾತ್ರದ 100% ಗೆ ಹೊಂದಿಸುತ್ತದೆ. ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಪಠ್ಯ ಸಾಲುಗಳು ಅಂತರದಲ್ಲಿರುತ್ತವೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.margin: 10px;
: ಈ ಗುಣಲಕ್ಷಣವು ಸಂಪೂರ್ಣ ಅಂಶದ ಸುತ್ತಲೂ 10 ಪಿಕ್ಸೆಲ್ಗಳ ಅಂಚನ್ನು ಸೇರಿಸುತ್ತದೆ. ಇದು ಈ ಅಂಶ ಮತ್ತು ಪುಟದಲ್ಲಿನ ಇತರ ಅಂಶಗಳ ನಡುವೆ ಅಂತರವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಒದಗಿಸಿದ CSS ಕೋಡ್ ವರ್ಗ "ಕೋಡ್" ನೊಂದಿಗೆ HTML ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳಿಗೆ ಶೈಲಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದು ಈ ಪ್ಯಾರಾಗಳಿಗೆ ಫಾಂಟ್, ಫಾಂಟ್ ಗಾತ್ರ, ಗಡಿ ಶೈಲಿ, ಗಡಿ ಅಗಲ, ಪ್ಯಾಡಿಂಗ್, ಹಿನ್ನೆಲೆ ಬಣ್ಣ, ಸಾಲಿನ ಎತ್ತರ ಮತ್ತು ಅಂಚುಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಈ ಶೈಲಿಯನ್ನು ಬ್ಲಾಗರ್ ಪೋಸ್ಟ್ನಲ್ಲಿ ಕೋಡ್ ತುಣುಕುಗಳು ಅಥವಾ ಪೂರ್ವ ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಿದ ಪಠ್ಯಕ್ಕೆ ನಿರ್ದಿಷ್ಟ ನೋಟವನ್ನು ನೀಡಲು ಅನ್ವಯಿಸಬಹುದು.
ಇದು ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:
p.code {
ಫಾಂಟ್-ಕುಟುಂಬ: ಕೊರಿಯರ್ ಹೊಸ;
ಫಾಂಟ್ ಗಾತ್ರ: 8pt;
ಗಡಿ ಶೈಲಿ: ಒಳಹರಿವು;
ಗಡಿ ಅಗಲ: 3px;
ಪ್ಯಾಡಿಂಗ್: 5px;
ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: #FFFFFF;
ಲೈನ್-ಎತ್ತರ: 100%;
ಅಂಚು: 10px;
}
ಹ್ಯಾಪಿ ಕೋಡಿಂಗ್!