Με την ιδιότητα class ορίζουμε στυλ (Cascading Style Sheets - CSS) για τα στοιχεία της σελίδας μας. Με την βοήθεια της CSS ορίζουμε την εμφάνιση (το χρώμα, το μέγεθος, κτλ.) των στοιχείων της σελίδας.
Μάθετε CSS
Μάθετε CSS
Παράδειγμα 1
Παράδειγμα 1
<em class="thema">Μαθήματα CSS</em>
Με τον παραπάνω κώδικα ορίζουμε ένα στυλ για κάθε κείμενο που βρίσκεται μέσα στην ετικέτα <em>
<HTML>
<HEAD>
<style type="text/css">
em.thema {
FONT-SIZE: 12px;
FONT-FAMILY: arial;
COLOR: Blue;
FONT-WEIGHT: normal;
TEXT-DECORATION: none;
}
</style>
</HEAD>
<BODY>
<em class="thema">Μαθήματα CSS</em>
</BODY>
</HTML>
<HEAD>
<style type="text/css">
em.thema {
FONT-SIZE: 12px;
FONT-FAMILY: arial;
COLOR: Blue;
FONT-WEIGHT: normal;
TEXT-DECORATION: none;
}
</style>
</HEAD>
<BODY>
<em class="thema">Μαθήματα CSS</em>
</BODY>
</HTML>
Αποτέλεσμα στον browser:
Μαθήματα CSS
Το στυλ ορίζεται στην ενότητα HEAD της σελίδας, μέσα στην ετικέτα <style type="text/css">. Με αυτόν τον τρόπο ορίζουμε ένα στυλ για κάθε κείμενο που βρίσκεται μέσα στην ετικέτα <em>, το οποίο έχει χρώμα γραμματοσειράς Μπλε (Blue), μέγεθος γραμματοσειράς 12 pixels και όνομα γραμματοσειράς Arial. Μπορούμε μέσα στην σελίδα μας να ορίσουμε με αυτό το στυλ όσα κείμενα επιθυμούμε. Έτσι αλλάζοντας τον κώδικα CSS στην ενότητα HEAD, αλλάζουν αυτόματα όλα τα κείμενα που ορίζονται με αυτό το στυλ
Παράδειγμα 2
Παράδειγμα 2
<HTML>
<HEAD>
<style type="text/css">
a.etiketa {
FONT-SIZE: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
COLOR: #FF6347; FONT-WEIGHT: normal;
TEXT-DECORATION: underline;
}
a.etiketa:hover {
FONT-SIZE: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
COLOR: #CE2900;
FONT-WEIGHT: normal;
TEXT-DECORATION: none;
}
a.etiketa:visited {
FONT-SIZE: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
}
</style>
</HEAD>
<BODY>
<a class="etiketa" xhref="etiketes/etiketa_a.html">Ετικέτα <A></a>
</BODY>
</HTML>
<HEAD>
<style type="text/css">
a.etiketa {
FONT-SIZE: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
COLOR: #FF6347; FONT-WEIGHT: normal;
TEXT-DECORATION: underline;
}
a.etiketa:hover {
FONT-SIZE: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
COLOR: #CE2900;
FONT-WEIGHT: normal;
TEXT-DECORATION: none;
}
a.etiketa:visited {
FONT-SIZE: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
}
</style>
</HEAD>
<BODY>
<a class="etiketa" xhref="etiketes/etiketa_a.html">Ετικέτα <A></a>
</BODY>
</HTML>
Με τον παραπάνω κώδικα ορίζουμε ένα στυλ για κάθε σύνδεσμο που βρίσκεται μέσα στην σελίδα
Σχετικά θέματα
