μορφοποίηση στη html
μορφοποίηση στη html
φοιτητικά νέα

Στη γλώσσα HTML η μορφοποίηση των στοιχείων γίνεται με το χαρακτηριστικό style.
Η σύνταξη του style γίνεται με τον ακόλουθο τρόπο:

<tagname style=»property:value;»>

Το property είναι μια ιδιότητα του CSS. Το value είναι η τιμή της ιδιότητας.

Μπορείτε να μάθετε περισσότερα για το CSS στην αντίστοιχη ενότητα.
Μπορείτε να ξεκινήσετε διαβάζοντας το άρθρο μας για την εισαγωγή στο css.

Το παράδειγμα που ακολουθεί θα σας βοηθήσει να ξεκαθαρίσετε τη χρήση του property και του value σε δυο επικαφαλίδες html.


<!DOCTYPE html>
<html>
<body>

<h2 style=»color:red;»>Εδώ βλέπουμε κόκκινο </h2>
<h2 style=»color:blue;»>Εδώ βλέπουμε μπλε </h2>

</body>
</html>


Εδώ βλέπουμε το αποτέλεσμα της μορφοποίησης html:

παράδειγμα μορφοποίησης html
παράδειγμα μορφοποίησης html

Το χρώμα φόντου στην html

Η ιδιότητα background-color καθορίζει το χρώμα φόντου ενός στοιχείου html.
Στο παράδειγμα που ακολουθεί ρυθμίζουμε το χρώμα φόντου μιας σελίδας:


χρώμα φόντου στην html
χρώμα φόντου στην html

</body>
</html>


Εδώ βλέπουμε το αποτέλεσμα το φυλλομετρητή, με αλλαγμένο το φόντο:

Το χρώμα κειμένου στην html

Η ιδιότητα color καθορίζει το χρώμα κειμένου ενός στοιχείου HTML.
Στο παράδειγμα που ακολουθεί βάζουμε χρώμα κειμένου σε μια επικεφαλίδα και σε μια παράγραφο:


<!DOCTYPE html>
<html>
<body>

<h1 style=»color:blue;»>Εδώ έχουμε μια επικεφαλίδα</h1>
<p style=»color:red;»>Εδώ έχουμε μια παράγραφο.</p>

</body>
</html>


Γραμματοσειρές στην html

Η ιδιότητα font-family καθορίζει τη γραμματοσειρά που θα χρησιμοποιηθεί στο στοιχείο HTML.
Στο παράδειγμα που ακολουθεί καθορίζουμε το χρώμα που θα χρησιμοποιηθεί σε μια επικεφαλίδα και σε μια παράγραφο:


<!DOCTYPE html>
<html>
<body>

<h1 style=»font-family:verdana;»>Εδώ έχουμε μια επικεφαλίδα</h1>
<p style=»font-family:courier;»>Εδώ έχουμε μια παράγραφο.</p>

</body>
</html>


Μέγεθος κειμένου στην html

Η ιδιότητα font-size καθορίζει το μέγεθος του κειμένου ενός στοιχείου HTML.
Στο παράδειγμα που ακολουθεί ρυθμίζουμε το το μέγεθος κειμένου μιας επικεφαλίδας και μιας παραγράφου:


<!DOCTYPE html>
<html>
<body>

<h1 style=»font-size:300%;»>Εδώ έχουμε μια επικεφαλίδα</h1>
<p style=»font-size:160%;»>Εδώ έχουμε μια παράγραφο.</p>

</body>
</html>


Δείτε το αποτέλεσμα της αλλαγής μεγέθους των γραμμάτων στην παράγραφο και στην επικεφαλίδα:

Μέγεθος κειμένου στην html
Μέγεθος κειμένου στην html

Στοίχιση κειμένου στην html

Η ιδιότητα text-align μας επιτρέπει να ρυθμίσουμε την οριζόντια στοιχίση του κειμένου μέσα σε ένα στοιχείο HTML.
Στο παράδειγμα που ακολουθεί ορίζουμε τη στοίχιση του κειμένου μιας επικεφαλίδας και μιας παραγράφου:


<!DOCTYPE html>
<html>
<body>

<h1 style=»text-align:center;»>Επικεφαλίδα στοιχισμένη στο κέντρο</h1>
<p style=»text-align:center;»>Παράγραφος στοιχισμένη στο κέντρο.</p>

</body>
</html>


Παρουσιάζοπυμε το αποτέλεσμα της στοίχισης κειμένου στην html:
Στοίχιση κειμένου στην html