Blogger: Στυλ CSS για κώδικα στο ιστολόγιό σας
Ένας φίλος με ρώτησε πώς έφτιαξα τις περιοχές κώδικα στην καταχώριση στο Blogger. Το έκανα χρησιμοποιώντας μια ετικέτα στυλ για CSS στο πρότυπο Blogger μου. Να τι πρόσθεσα:
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
: Αυτός είναι ένας κανόνας CSS που στοχεύει την HTML<p>
στοιχεία με το όνομα κλάσης "code". Σημαίνει ότι οποιαδήποτε παράγραφος με αυτήν την κλάση θα διαμορφωθεί σύμφωνα με τις ακόλουθες ιδιότητες.font-family: Courier New;
: Αυτή η ιδιότητα ορίζει την οικογένεια γραμματοσειρών σε "Courier New". Καθορίζει τη γραμματοσειρά που θα χρησιμοποιηθεί για το κείμενο εντός των στοχευόμενων στοιχείων.font-size: 8pt;
: Αυτή η ιδιότητα ορίζει το μέγεθος της γραμματοσειράς σε 8 σημεία. Το κείμενο εντός των στοχευόμενων στοιχείων θα εμφανίζεται σε αυτό το μέγεθος γραμματοσειράς.border-style: inset;
: Αυτή η ιδιότητα ορίζει το στυλ περιγράμματος σε "inset". Δημιουργεί μια βυθισμένη ή συμπιεσμένη εμφάνιση για το περίγραμμα γύρω από τα στοχευμένα στοιχεία.border-width: 3px;
: Αυτή η ιδιότητα ορίζει το πλάτος περιγράμματος σε 3 pixel. Το περίγραμμα γύρω από τα στοιχεία θα έχει πάχος 3 pixel.padding: 5px;
: Αυτή η ιδιότητα προσθέτει 5 pixel padding γύρω από το περιεχόμενο μέσα στα στοχευμένα στοιχεία. Παρέχει απόσταση μεταξύ του κειμένου και του περιγράμματος.background-color: #FFFFFF;
: Αυτή η ιδιότητα ορίζει το χρώμα φόντου σε λευκό (#FFFFFF). Το περιεχόμενο εντός των στοχευμένων στοιχείων θα έχει λευκό φόντο.line-height: 100%;
: Αυτή η ιδιότητα ορίζει το ύψος της γραμμής στο 100% του μεγέθους της γραμματοσειράς. Εξασφαλίζει ότι οι γραμμές κειμένου απέχουν μεταξύ τους ανάλογα με το μέγεθος της γραμματοσειράς.margin: 10px;
: Αυτή η ιδιότητα προσθέτει ένα περιθώριο 10 pixel γύρω από ολόκληρο το στοιχείο. Παρέχει απόσταση μεταξύ αυτού του στοιχείου και άλλων στοιχείων στη σελίδα.
Ο παρεχόμενος κώδικας CSS ορίζει ένα στυλ για παραγράφους HTML με την κλάση "code". Ορίζει τη γραμματοσειρά, το μέγεθος γραμματοσειράς, το στυλ περιγράμματος, το πλάτος του περιγράμματος, το padding, το χρώμα φόντου, το ύψος γραμμής και το περιθώριο για αυτές τις παραγράφους. Αυτό το στυλ μπορεί να εφαρμοστεί σε αποσπάσματα κώδικα ή προδιαμορφωμένο κείμενο σε μια ανάρτηση στο Blogger για να τους δώσει μια συγκεκριμένη εμφάνιση.
Δείτε πώς θα φαίνεται:
p.code {
font-family: Courier New;
μέγεθος γραμματοσειράς: 8pt;
στιλ περιγράμματος: ένθετο;
πλάτος περιγράμματος: 3px;
padding: 5px?
χρώμα φόντου: #FFFFFF;
Ύψος γραμμής: 100%;
περιθώριο: 10px;
}
Καλή κωδικοποίηση!