You are on page 1of 13

ΕΙΣΑΓΩΓΉ ΣΤΑ

CSS
Τι είναι CSS;
 Η ονομασία CSS βγαίνει από τις λέξεις
Cascading Style Sheets δηλαδή,
διαδοχικά φύλλα στυλ.

 Πρόκειται για μια τεχνολογία ορισμού


προβολής δεδομένων σε μια
ιστοσελίδα η οποία έρχεται και δένει μαζί
με αυτή της HTML η οποία με την σειρά
της καθορίζει την δομή μιας σελίδας.
 Τα CSS καθορίζουν τον τρόπο μορφοποίησης με τον οποίο
θα προβάλλεται το περιεχόμενο μιας html σελίδας όπως
είναι τα χρώματα και η θέση των στοιχείων της σελίδας.

 Ένα μεγάλο πλεονέκτημα των CSS είναι ότι μπορούν να


αποθηκευτούν σε εξωτερικό αρχείο με κατάληξη .css και να
χρησιμοποιηθούν από κοινού σε περισσότερες από
μια .html σελίδες, εξοικονομώντας με τον τρόπο αυτό χρόνο
και κόπο υλοποίησης.

 Αυτό πρακτικά σημαίνει πως μια αλλαγή σε αυτό το


αρχείο θα ενημερώσει όλες τις html σελίδες με τις οποίες
συνδέεται.
CSS

PAGE1.HTML PAGE2.HTML PAGE3.HTML PAGE4.HTML


Σύνταξη των CSS
 Ένας κανόνας CSS αποτελείται από τον επιλογέα και μια ομάδα από ορισμούς.

 Ο επιλογέας μπορεί να είναι μια ετικέτα html την οποία θέλουμε να μορφοποιήσουμε
ή ένα δικό μας όνομα το οποίο θα το εφαρμόσουμε σε κάποιο σημείο στον κώδικα
html.

 Οι ορισμοί δηλώνονται ανάμεσα στα σύμβολα με τα άγκιστρα { }.

 Κάθε ορισμός αφορά μια ιδιότητα, την οποία θέλουμε να μεταβάλουμε και την τιμή
την οποία παίρνει.
 Μεταξύ αυτών των δύο χρησιμοποιείται το σύμβολο άνω-κάτω τελεία :

 Στο τέλος κάθε ορισμού υπάρχει το ελληνικό ερωτηματικό ;

 Μπορούμε να βάλουμε όσους ορισμούς χρειαζόμαστε για τον κάθε έναν επιλογέα.
 Πρέπει να είμαστε προσεκτικοί με την
σύνταξη των κανόνων γενικά επειδή ένα
λάθος θα αποτρέψει την εφαρμογή του
συγκεκριμένου κανόνα στο οποίο
σφάλαμε.
Παράδειγμα ορισμού παραγράφου

p {color:blue; text-align:center;}

Αυτός ο κανόνας ισχύει για κάθε μια ετικέτα


παραγράφου <p> η οποία θα χρησιμοποιηθεί.
Σε αυτόν ορίζεται ένας κανόνας για το χρώμα
των γραμμάτων και ένας κανόνας κεντρικής
στοίχισης του κειμένου.
Παράδειγμα ορισμού επικεφαλίδας

H1 {font-family: "Times New Roman", Times, serif;}

Ο κανόνας αυτός ορίζει την γραμματοσειρά για την


επικεφαλίδα 1 <H1>. Θα εφαρμοστεί αυτόματα σε όποιο
σημείο της σελίδας οριστεί το κείμενο ως επικεφαλίδα 1.
Τρόπος γραφής των κανόνων CSS
Ο τρόπος γραφής των κανόνων έχει να κάνει καθαρά με τον τρόπο
εμφάνισης τους. Για παράδειγμα, οι κανόνες στο προηγούμενο
παράδειγμα θα μπορούσαν να γραφτούν ως εξής:

p{
color:blue;
text-align:center;
}

H1 {
font-family: "Times New Roman", Times, serif;
}
Τέλος, η χρήση των πεζών ή κεφαλαίων είναι
θέμα προτίμησης, δηλαδή δεν υπάρχει
διαφορά ότι και αν χρησιμοποιήσουμε.

You might also like