Στυλ CSS για κώδικα στο ιστολόγιό σας

css

Ένας φίλος μου με ρώτησε πώς έφτιαξα τις περιοχές κώδικα στην τελευταία μου καταχώρηση στο blog. Στην πραγματικότητα «πλαστά» την περιοχή κώδικα χρησιμοποιώντας ένα στυλ. Στο Blogger, μπορείτε να επεξεργαστείτε το πρότυπό σας. Πρόσθεσα το ακόλουθο στυλ:

p.code {font-family: Courier New; μέγεθος γραμματοσειράς: 8pt; περίγραμμα-στυλ: ένθετο; πλάτος περιγράμματος: 3 εικονοστοιχεία; επένδυση: 5px; χρώμα φόντου: #FFFFFF; ύψος γραμμής: 100%; περιθώριο: 10px}

Το επόμενο βήμα είναι να επεξεργαστώ την ετικέτα μου στη λειτουργία «Επεξεργασία Html». Απλώς επισημαίνω το νέο μου στυλ κάνοντας την ετικέτα. Βόιλα! Αναλύοντας τα στυλ:

  • Ορίστε τη γραμματοσειρά σε Courier New… μοιάζει με ένα γενικό πρόγραμμα επεξεργασίας κώδικα
  • Ορίστε το μέγεθος της γραμματοσειράς σε 8pt για να φαίνεται σωστά
  • Ορίστε το στυλ περιγράμματος παραγράφου σε «ένθετο». Αυτό επαναλαμβάνει πώς μοιάζει ένα textarea στη σελίδα.
  • Ορίστε το πλάτος του περιγράμματος σε 2 ή 3 pixel. Αυτό κάνει το ένθετο περίγραμμα στυλ να φαίνεται σωστό.
  • Το Padding ορίζει την απόσταση μεταξύ του περιγράμματος και του κειμένου μέσα.
  • Χρώμα φόντου… ορίστε το σε λευκό (#FFFFFF)
  • Ύψος γραμμής - Το έκανα προσαρμοσμένο στο 100% επειδή μερικά από τα άλλα στυλ στο θέμα του blogger έκαναν το ύψος της γραμμής μου περίπου 200%
  • Ορίστε το περιθώριο στα 10 px. Αυτό μετακινεί την παράγραφο (ετικέτα p) 10 pixel μακριά από τα πάντα.

Αυτό είναι το μόνο που υπάρχει! Μία σημείωση: Το πρόγραμμα επεξεργασίας που συνοδεύει το Blogger δεν είναι σε θέση να εμφανίσει το όπως θα εμφανίζεται στο ιστολόγιό σας. Αλλά λειτουργεί και φαίνεται υπέροχο!

Μια ακόμη σημείωση… αφού κάνετε την επεξεργασία της ετικέτας, ο συντάκτης του Blogger αρέσει να την χρησιμοποιεί τυχαία αλλού στην ανάρτησή σας. Είναι λίγο ενοχλητικό! Η συμβουλή μου θα ήταν να γράψετε ολόκληρη την ανάρτησή σας και στη συνέχεια να κάνετε τη μικρή επεξεργασία μετά.

Μια τελική σημείωση… φροντίστε να χρησιμοποιήσετε HTML Entities για να εμφανίσετε τα σύμβολα σας! Μερικά παραδείγματα:

  • Τα αποσπάσματα (") είναι"
  • > είναι>
  • > είναι>

Καλή κωδικοποίηση!

3 Σχόλια

  1. 1

    Είμαι απλώς περίεργος να μάθω αν μπορώ να προσθέσω ροές από έναν ιστότοπο ειδήσεων, έτσι ώστε τα νέα να εμφανίζονται στην πλευρική μου μπάρα;

  2. 2
  3. 3

    πράγμα που δεν χρειάζεται να γράψω τώρα. μπορείτε να χρησιμοποιήσετε χρήσιμους συντάκτες. μπορείτε να επιλέξετε χρώμα, περίγραμμα κ.λπ ..

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.