Σύνδεση
Μενού

Μορφοποίηση εγγράφων HTML με CSS

Αν θέλετε να πραγματοποιήσετε κάποια μορφοποίηση στα έγγραφα σας, τότε δεν έχετε παρά να γράψετε CSS. Η θέση του CSS σε μια ιστοσελίδα είναι να μορφοποιήσει το περιεχόμενο, προσθέτοντας χρώματα, γραμματοσειρές, μεγέθη γραμματοσειρών περιγράμματα κα.

Στην HTML για να προσθέσετε CSS έχετε τρις διαφορετικούς τρόπους στη διάθεση σας και είναι οι ακόλουθοι:

  • Δημιουργία αρχείων CSS
  • Ενσωμάτωση CSS κώδικα μέσα στο ίδιο το έγγραφο σε ετικέτες <style>
  • Ενσωμάτωση CSS κώδικα σε ετικέτα στην ιδιότητα της style.

Από τους τρις παραπάνω τρόπους εισαγωγής κώδικα μορφοποίησης CSS ο ποιο ευέλικτος είναι αυτός με τα αρχεία CSS, ενώ οι άλλοι δυο είναι λιγότερο ευέλικτοι.

Ειδικά η χρήστη κώδικα CSS στην ιδιότητα style των ετικετών είναι εξαιρετικά κακή τακτική, αν αυτό αφορά το σύνολο της ιστοσελίδας σας γιατί εκτός από την επανάληψη του κώδικα CSS μέσα σε ένα web site η τακτική αυτή κάνει δύσκολη και τη συντήρηση μιας ιστοσελίδας, ο κώδικας σας είναι ποιο δύσκολος στην ανάγνωση και επόμενες αλλαγές στην HTML είναι ποιο δύσκολες.

Ο ιδανικός τρόπος εισαγωγής κώδικα μορφοποίησης CSS σε ένα web site είναι με αρχεία CSS. Σε αυτή την περίπτωση, ο κώδικας μορφοποίησης είναι όλος συγκεντρωμένος σε ένα ή και περισσότερα αρχεία, δεν είναι ενσωματωμένος μέσα στην ιστοσελίδας σας οπότε έχετε ποιο καθαρό κώδικα και είναι πολύ ποιο εύκολη η συντήρηση του.

Όπως και να έχεις, σε αυτό το άρθρο θα σας παρουσιάσουμε την τεχνική μορφοποίησης με την ιδιότητα style των ετικετών του εγγράφου της HTML γιατί θα είναι ποιο εύκολα κατανοητός από εσάς.

Παραδείγματα μορφοποίησης

<html>
<body style=”background-color:yellowgreen”>
<h2 style=”color: red;”>Μια επικεφαλίδα με κόκκινο χρώμα</h2>
<p style=”color: magenta;”>Μια παράγραφος με χρώμα magenta</p>
</html>

Δείτε το παράδειγμα ζωντανά

Στο παραπάνω παράδειγμα η εντολή μορφοποίησης του CSS “background-color” καταργεί την ιδιότητα της HTML “bgcolor”.

Παράδειγμα μορφοποίησης εγγράφου με γραμματοσειρά, χρώμα και μέγεθος γραμματοσειράς

Οι εντολές font-family, color και font-size ορίζουν τη γραμματοσειρά, το χρώμα και το μέγεθος μια γραμματοσειράς αντίστοιχα.

<html>
<body>
<h1 style=”font-family:Courier;”>Μια επικεφαλίδα με γραμματοσειρά Courier</h1>
<p style=”font-family:arial;color: blue;font-size:20px;”>Μια παράγραφος με μπλε γράμματα, μεγέθους 20 εικονοστοιχείων και γραμματοσειρά Arial</p>
</body>
</html>

Δείτε το παράδειγμα ζωντανά

Οι εντολές των CSS font-family, color και font-size αντικαθιστούν την ετικέτα <font> της HTML.

Παράδειγμα στοίχισης κειμένου

<html>
<body>
<h1 style=”text-align:center;”>Επικεφαλίδα στοιχισμένη στο κέντρο</h1>
<p style=”text-align:right;”>Μια παράγραφος στοιχισμένη στα δεξιά<p>
<body>
</html>

Δείτε το παράδειγμα ζωντανά

Η εντολή text-align των CSS αντικαθιστά την παλιά ετικέτα της HTML <center>

Καταργημένες ετικέτες και ιδιότητες της HTML

Στην HTML 4 ορισμένες ετικέτες και ιδιότητες καταργήθηκαν. Αυτό σημαίνει πως σε επόμενες εκδόσεις της HTML αυτές οι ετικέτες δεν θα υπάρχουν.

Οι ακόλουθες ετικέτες και ιδιότητες θα πρέπει να μην χρησιμοποιούνται για να μορφοποιήσετε τα έγγραφα σας.

Ετικέτα Περιγραφή
<center> Καταργήθηκε. Ορίζει ένα κείμενο στοιχισμένο στο κέντρο
<font> και <basefont> Καταργήθηκε. Ορίζει μια γραμματοσειρά στην HTML
<s> και <strike> Καταργήθηκε. Ορίζει ένα διαγραμμένο κείμενο.
<u> Καταργήθηκε. Ορίζει ένα υπογραμμισμένο κείμενο.
Ιδιότητα Περιγραφή
align Καταργήθηκε. Ορίζει την στοίχιση ενός κειμένου
bgcolor Καταργήθηκε. Ορίζει το χρώμα φόντου του στοιχείου
color Καταργήθηκε. Ορίζει το χρώμα του κειμένου

[COL size=”one_half”]« Γραμματοσειρές στην HTML[/COL] [COL size=’one_half’ last=’last’]

Σύνδεσμοι στην HTML »

[/COL]