Στυλ HTML
Το χαρακτηριστικό στυλ HTML χρησιμοποιείται για να προσθέσει στυλ σε ένα στοιχείο, όπως χρώμα, γραμματοσειρά, μέγεθος και περισσότερα.
Μπορείτε να ορίσετε το στυλ ενός στοιχείου μέσω του χαρακτηριστικού style, που έχει τη μορφή ως εξής:
<tagname style="property:value;">
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου έγγραφο HTML</title>
</head>
<body>
<p style="color: red; font-size: 24px">
Αυτό το κείμενο είναι κόκκινο και έχει μέγεθος γραμματοσειράς 24px.
</p>
</body>
</html>
Στο παραπάνω παράδειγμα, ορίζουμε το χρώμα και το μέγεθος γραμματοσειράς του στοιχείου
μέσω του χαρακτηριστικού style. Μπορείτε να προσθέσετε περισσότερες ιδιότητες στυλ μετά το πρώτο, χρησιμοποιώντας τον χαρακτήρα ελληνικού ερωτηματικού (;) και τον χαρακτήρα ανάθεσης (:) για να διαχωρίσετε κάθε ιδιότητα.
Χρώμα φόντου Η ιδιότητα CSS background-color ορίζει το χρώμα φόντου για ένα στοιχείο HTML.
Μπορείτε να ορίσετε το χρώμα φόντου ενός στοιχείου μέσω του χαρακτηριστικού style, που έχει τη μορφή ως εξής:
<tagname style="background-color: color;">
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου έγγραφο HTML</title>
</head>
<body>
<h1 style="background-color: yellow">
Αυτός είναι ο τίτλος με κίτρινο χρώμα φόντου
</h1>
</body>
</html>
[adinserter block=”2″]
Στο παραπάνω παράδειγμα, ορίζουμε το κίτρινο χρώμα φόντου για το στοιχείο <h1> μέσω του χαρακτηριστικού style. Μπορείτε να χρησιμοποιήσετε οποιοδήποτε έγκυρο χρωματικό κώδικα CSS για να ορίσετε το χρώμα του φόντου.
Παράδειγμα το χρώμα φόντου για δύο διαφορετικά στοιχεία:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<h1 style="background-color: yellow">
Αυτός είναι ο τίτλος με κίτρινο χρώμα φόντου
</h1>
<p style="background-color: lightblue">
Αυτό είναι ένα παράδειγμα παραγράφου με ανοιχτό μπλε χρώμα φόντου
</p>
</body>
</html>
Στο παραπάνω παράδειγμα, ορίζουμε το κίτρινο χρώμα φόντου για το στοιχείο <h1> και το ανοιχτό μπλε χρώμα φόντου για το στοιχείο <p> μέσω του χαρακτηριστικού style. Μπορείτε να ορίσετε διαφορετικά χρώματα φόντου για οποιοδήποτε στοιχείο HTML, χρησιμοποιώντας αυτήν τη σύνταξη.
Χρώμα κειμένου Η ιδιότητα CSS color ορίζει το χρώμα κειμένου για ένα στοιχείο HTML.
Μπορείτε να ορίσετε το χρώμα κειμένου ενός στοιχείου μέσω του χαρακτηριστικού style, που έχει τη μορφή ως εξής:
<tagname style="color: color;">
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<h1 style="color: blue">Αυτός είναι ο τίτλος με μπλε χρώμα κειμένου</h1>
</p>
</body>
</html>
Στο παραπάνω παράδειγμα, ορίζουμε το μπλε χρώμα κειμένου για το στοιχείο <h1> μέσω του χαρακτηριστικού style. Μπορείτε να χρησιμοποιήσετε οποιοδήποτε έγκυρο χρωματικό κώδικα CSS για να ορίσετε το χρώμα του κειμένου.
Γραμματοσειρές Η ιδιότητα CSS font-family ορίζει τη γραμματοσειρά που θα χρησιμοποιηθεί για ένα στοιχείο HTML.
[adinserter block=”3″]
Μπορείτε να ορίσετε τη γραμματοσειρά ενός στοιχείου μέσω του χαρακτηριστικού style, που έχει τη μορφή ως εξής:
<tagname style="font-family: fontname;">
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<h1 style="font-family: Arial;">Αυτός είναι ο τίτλος με γραμματοσειρά Arial</h1>
</p>
</body>
</html>
Στο παραπάνω παράδειγμα, ορίζουμε τη γραμματοσειρά Arial για το στοιχείο <h1> μέσω του χαρακτηριστικού style. Μπορείτε να ορίσετε οποιαδήποτε έγκυρη γραμματοσειρά για το στοιχείο HTML. Επιπλέον, μπορείτε να καθορίσετε μια σειρά από γραμματοσειρές σε περίπτωση που η πρώτη επιλογή δεν είναι διαθέσιμη στο σύστημα του χρήστη.
Μέγεθος κειμένου
Η ιδιότητα CSS font-size ορίζει το μέγεθος κειμένου για ένα στοιχείο HTML.
Μπορείτε να ορίσετε το μέγεθος κειμένου ενός στοιχείου μέσω του χαρακτηριστικού style, που έχει τη μορφή ως εξής:
<tagname style="font-size: size;">
Η τιμή του μεγέθους μπορεί να είναι σε pixels, ems, ή ποσοστό του παραγόντα γονέα.
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<h1 style="font-size: 36px;">Αυτός είναι ο τίτλος με μέγεθος κειμένου 36 pixels</h1>
</p>
</body>
</html>
Στο παραπάνω παράδειγμα, ορίζουμε το μέγεθος κειμένου σε 36 pixels για το στοιχείο <h1> μέσω του χαρακτηριστικού style. Μπορείτε να ορίσετε το μέγεθος του κειμένου σε οποιαδήποτε έγκυρη μονάδα μέτρησης, ανάλογα με τις ανάγκες σας και το σχεδιασμό του ιστότοπου σας.
Στοίχιση κειμένου
Η ιδιότητα CSS text-align ορίζει την οριζόντια στοίχιση κειμένου για ένα στοιχείο HTML.
[adinserter block=”4″]
Μπορείτε να ορίσετε την οριζόντια στοίχιση ενός στοιχείου μέσω του χαρακτηριστικού style, που έχει τη μορφή ως εξής:
<tagname style="text-align: alignment;">
Η τιμή της στοίχισης μπορεί να είναι αριστερά, δεξιά, κέντρο, ή δικαιολογημένη.
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<h1 style="text-align: center;">Αυτός είναι ένας κεντραρισμένος τίτλος</h1>
</p>
</body>
</html>
Στο παραπάνω παράδειγμα, ορίζουμε την οριζόντια στοίχιση του στοιχείου <h1> στο κέντρο μέσω του χαρακτηριστικού style. Μπορείτε να ορίσετε οποιαδήποτε έγκυρη στοίχιση για το στοιχείο HTML.
