Css light

CSS
(Cascading Styles Sheets)
Η μορφή των ιστοσελίδων
Για μαθητές δημοτικού

Τι είναι η CSS
Το CSS είναι ένας τρόπος να δώσουμε στυλ και να παρουσιάσουμε ένα html
έγγραφο. Με την html δημιουργούμε το περιεχόμενο και την δομή σε μια
ιστοσελίδα ώστε να έχει νόημα. Το αν θα είναι όμορφη η ιστοσελίδα αυτή και ο
τρόπος που θα φαίνεται το κάθε στοιχείο html που δημιουργεί ο προγραμματιστής
είναι δουλειά της CSS.
Η CSS βρίσκεται στην έκδοση 3 και για αυτό πολλές φορές συναντάμε το όνομα της
έτσι: CSS3.
H CSS δεν είναι γλώσσα ετικετών όπως η html. Η δομή της δεν έχει καμιά σχέση με
την html. Είναι ακόμη πιο απλή και εύκολη ώστε να την μάθει κάποιος επίδοξος
κατασκευαστής ιστοσελίδων. Η μορφή της γλώσσα αυτής είναι σε πολύ γενικές
γραμμές έτσι:
Μορφή που θέλουμε να αλλάξουμε: τιμή;
Πιο συγκεκριμένα:
background-color: blue;
Στην αρχή βέβαια πρέπει να ορίσουμε σε ποιο στοιχείο του html
κώδικα μας θέλουμε να εφαρμοστεί. Το παρακάτω παράδειγμα σημαίνει
πως στο στοιχείο body της ιστοσελίδας μας θα εφαρμοστεί χρώμα
παρασκηνίου (ιστοσελίδας) μπλε
body { background-color: blue;}
Εφαρμογή CSS στην ιστοσελίδα μας
Υπάρχουν 3 διαφορετικοί τρόποι με τους οποίου μπορούμε να χρησιμοποιήσουμε την CSS
σε ένα έγγραφο html.
Ο πρώτος τρόπος, τον οποίο για διάφορους λόγους που θα συζητηθούν αργότερα ο
συγγραφέας δεν προτείνει, είναι να γράψουμε την CSS μέσα σε ετικέτα της html
χρησιμοποιώντας την ιδιότητα style
<p style="color: red">text</p>
Ο δεύτερος τρόπος, ο οποίος και αυτός δεν προτείνεται, είναι να
συμπεριλάβουμε τον κώδικα CSS μέσα στο τμήμα head του html
εγγράφου μέσα σε ετικέτες style όπως ακριβώς το πιο κάτω
παράδειγμα:

<!DOCTYPE html>
<html>
<head>
<meta charset= “utf-8”>
<title>CSS Example</title>
<style>
p {
color: red;
}
a {
color: blue;
}
</style>
...
Ο καλύτερος τρόπος για να δώσουμε στυλ σε ένα έγγραφο html με την
γλώσσα CSS είναι να δημιουργήσουμε ένα νέο έγγραφο κειμένου, όπως
ακριβώς κάναμε με το html έγγραφο, το οποίο θα έχει όνομα που
επιθυμούμε αλλά κατάληξη css, και το οποίο θα περιέχει όλη την
μορφοποίηση της ιστοσελίδας μας. Η μορφή του εγγράφου αυτού
μπορεί να είναι πολύ απλά έτσι όταν το ανοίγουμε:
p {
color: red;
}
a {
color: blue;
}
………
Πρέπει βέβαια εντός του εγγράφου html να γράψουμε την κατάλληλη
εντολή που υποδηλώνει πως την μορφή της η συγκεκριμένη ιστοσελίδα
την αντλεί από το συγκεκριμένο αρχείο css. Αν το αρχείο αυτό το
έχουμε ονομάσει για παράδειγμα look.css τότε ο απαραίτητος
κώδικας εντός της ιστοσελίδας μας είναι:
<!DOCTYPE html>
<html>
<head>
<meta charset= “utf-8”>

<title>CSS παράδειγμα</title>
<link rel="stylesheet" type="text/css" ref="look.css">
...
Επιλογείς – Πώς θα διαλέξω το στοιχείο που θα εφαρμόσω την
μορφοποίηση
Όπως η html έχει ετικέτες, η css έχει επιλογείς (selectors). Ένας επιλογέας αντιστοιχίζεται
με βάση το όνομα του με μια περιοχή του Html εγγράφου όπου επιθυμούμε να δώσουμε
ένα συγκεκριμένο στυλ. Το όνομα του επιλογέα μπορεί να είναι αυτό μιας html ετικέτας.
Αρχικά θα ασχοληθούμε με επιλογείς που αναφέρονται σε html ετικέτες. Στην συνέχεια θα
μελετήσουμε κι άλλους επιλογείς.
p {
color: red;
}
Στο παραπάνω παράδειγμα ο επιλογέας είναι η ετικέτα <p>. Σε όλα τα <p> του html
έγγραφου που πρόκειται να εφαρμοστεί το συγκεκριμένο στυλ θα εφαρμοστεί η
μορφοποίηση που βρίσκεται ανάμεσα στις αγκύλες {}
Για κάθε επιλογέα, μέσα στις αγκύλες μπορούν να χρησιμοποιηθούν ένα σύνολο από
ιδιότητες που είναι δυνατόν, ο προγραμματιστής, να αλλάξει τις τιμές τους. Μια ιδιότητα
στην πραγματικότητα είναι μια μορφή που μπορεί να αλλάξει κωδικοποιημένη σε ένα
όνομα.
body {
font-size: 14px;
color: navy;
}
Στο πιο πάνω παράδειγμα αλλάζουμε το χρώμα της γραμματοσειράς σε navy (γαλάζιο) και
το μέγεθος της γραμματοσειράς σε 14px. Αυτή η αλλαγή θα εφαρμοστεί σε όλο το έγγραφο
html που βλέπει ο χρήστης (body).
Επιλογέας
Ιδιότητα «μέγεθος
κειμένου»
Ιδιότητα «χρώμα
κειμένου»

Περισσότεροι επιλογείς
Σε ένα αρχείο css, όπως έχει ειπωθεί μπορούμε να δίνουμε μια μορφή για τις παραγράφους
ως εξής:
p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
}
Η συγκεκριμένη μορφή θα εφαρμοστεί σε όλες τις παραγράφους της ιστοσελίδας. Μερικές
φορές αυτό είναι ιδιαίτερα βολικό. Αν όμως επιθυμούμε κάποιες παράγραφοι να έχουν
διαφορετική μορφή;
Υπάρχει η δυνατότητα ο προγραμματιστής να δημιουργήσει τους δικούς του επιλογείς με
την σωστή χρήση των ιδιοτήτων class και id.
• Σε ένα στοιχείο html υπάρχει η δυνατότητα να οριστεί η ιδιότητα class. Στην
ιδιότητα αυτή ο ίδιος προγραμματιστής μπορεί να δώσει ένα όνομα της επιλογής
του. Π.χ
<p class= “morfh1”> Δοκιμαστικό κείμενο </p>
Την τιμή της ιδιότητας αυτή την χρησιμοποιεί o προγραμματιστής για να
δημιουργήσει επιλογέα με αυτό το όνομα στο css αρχείο.
.morfh1{
/* Διάφορες μορφοποιήσεις*/
}
Ο επιλογέας αυτός ξεκινά με την . (τελεία) και στην συνέχεια περιλαμβάνει το όνομα
της κλάσης και τις ιδιότητες της.
Σημαντικό είναι να αναφερθεί πως την ίδια κλάση μπορεί να διαθέτουν διάφορα
στοιχεία του html εγγράφου οπότε και την ίδια μορφή.
Μια άλλη δυνατότητα να χρησιμοποιήσουμε τις κλάσεις είναι με τον παρακάτω τρόπο:
p.morfh1{
}
Δηλαδή να εφαρμοστούν οι μορφές σε όλες τις παραγράφους (p) που έχουν όμως την
κλάση morfh1
• Επίσης ένα οποιοδήποτε στοιχείο html μπορεί να διαθέτει id. Η σημαντική διαφορά
που παρατηρούμε σε αυτό το σημείο σε σχέση με τις κλάσεις είναι πως η τιμή που
θα δώσει ο προγραμματιστής στην ιδιότητα id πρέπει να είναι μοναδική στο html

έγγραφο. Δεν μπορούν να υπάρχουν στο ίδιο html έγγραφο 2 στοιχεία με το ίδιο id.
<p id= “prwth_paragrafos”> tra lala lal la lala</p>
Όπως πιθανότατα ο αναγνώστης έχει αντιληφθεί, ο προγραμματιστής μπορεί να
χρησιμοποιήσει την τιμή της id οποιουδήποτε στοιχείου της html για να δημιουργήσει
μια μοναδική μορφοποίηση για αυτό το στοιχείο. Η σωστή σύνταξη είναι όπως
παρακάτω:
#prwth_paragrafos {
}
Προτεραιότητες
Πολλές φορές για το ίδιο το στοιχείο μπορεί να ταιριάζουν αρκετοί κανόνες CSS, ορισμένοι
εκ των οποίων να περιέχουν ιδιότητες που «συγκρούονται». Για παράδειγμα, έστω ότι
έχουμε στο CSS αρχείο μας τις παρακάτω μορφοποιήσεις:
.testclass {color: red;}
div {color: gray;}
και στο html έγγραφο υπάρχει ο παρακάτω κώδικας:
<div class= “testclass”> δοκιμαστικό κείμενο </div>
Στο αποτέλεσμα στον πλοηγό το κείμενο θα είναι κόκκινο ή γκρι;
Απάντηση: Το κείμενο θα είναι κόκκινο, διότι ο επιλογέας .testclass είναι πιο
συγκεκριμένος.
Σε περίπτωση που μια μορφή που δηλώνεται με μια κλάση «συγκρούεται» με μια άλλη
μορφή που δηλώνεται με άλλη κλάση τότε θα εφαρμοστεί η μορφοποίηση που διαβάστηκε
τελευταία από τον πλοηγό.
Βασικές ιδιότητες CSS
Σχόλια
Σε ένα αρχείο css μπορείτε να προσθέσετε σχόλια, δηλαδή κείμενο που θα αγνοήσει ο
πλοηγός (browser), και θα βοηθήσει στην συγγραφή του κώδικά σας με την χρήση των
χαρακτήρων /* και */
/* σχόλια έτσι*/

Χρώματα κειμένων
Για να ορίσουμε τα χρώματα της ιστοσελίδας μας μπορούμε να χρησιμοποιήσουμε
διάφορους τρόπους όπως υπαγορεύει και το παρακάτω παράδειγμα:
color: red;
Ή
color: rgb(255,0,0);
ή
color: #ff0000;
Ορισμένα από τα προκαθορισμένα χρώματα που μπορείτε να χρησιμοποιήσετε (1η
περίπτωση) βρίσκονται στην παρακάτω λίστα. Δοκιμάστε τα.
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple,red, silver, teal, w
hite, aqua και yellow. Transparent.
Πιθανότατα θα γνωρίζετε πως μπορούμε να πάρουμε οποιοδήποτε χρώμα αν αναμίξουμε
κατάλληλα το κόκκινο (red) το πράσινο(green) και το μπλε(blue). H html ορίζει 255
διαβαθμίσεις του κόκκινου άλλες τόσες του πράσινου και το ίδιο και για το μπλε. Με την
τιμή rgb(255,0,0) ορίζουμε ένα χρώμα με 255 βαθμούς κόκκινο, 0 βαθμούς πράσινο και 0
βαθμούς μπλε.
Οι τιμές των χρωμάτων που ξεκινάνε από # βασίζονται σε αριθμούς με βάση το 16 – κάτι
που δεν έχει νόημα να εξηγήσουμε τι είναι αυτήν την στιγμή-. Τα χρώματα αυτής της
κατηγορίας δεν διαφέρουν από τα χρώματα που χρησιμοποιούμε με το rgb. Αναφέρεται σε
αυτό το σημείο γιατί αυτό ο τρόπος αναπαράστασης των χρωμάτων χρησιμοποιείται
αρκετά από τους κατασκευαστές ιστοσελίδων, χωρίς όμως να προσφέρει κάποιο ιδιαίτερο
συγκριτικό πλεονέκτημα με τους υπόλοιπους τρόπους.
Χρησιμοποιήστε αυτήν την ιστοσελίδα:
http://www.w3schools.com/tags/ref_colorpicker.asp για να εντοπίσετε ακριβώς το χρώμα
και την τιμή του για τους επιλογείς της ιστοσελίδας σας.
Ένας ιδιαίτερα σύγχρονος τρόπος να ορίζουμε τα χρώματα μας είναι με την μέτρηση rgba.
Με την μέθοδο αυτή εκτός από τις διαβαθμίσεις των βασικών χρωμάτων κόκκινου –
πράσινου και μπλε ορίζουμε και το βαθμός της διαφάνειας (πόσο διαφανές είναι) το
στοιχείο που ορίζουμε το χρώμα (κανάλι alfa). Η ελάχιστή τιμή όπου το αντικείμενο είναι
εντελώς διαφανές – οπότε και δεν φαίνεται είναι το 0 και η μέγιστη το 1.
Δοκιμάστε την τιμή
color: rgba(0,0,0,0.6);
Σε ένα επιλογέα παραγράφου (<p>) ή επικεφαλίδας π.χ <h1> για να καταλάβετε την
διαφορά.

Το φόντο
Στην ενότητα αυτή θα δούμε με ποιόν τρόπο ορίζουμε φόντο σε διάφορα στοιχεία μιας
σελίδας με χρήση των CSS ιδιοτήτων background-. Οι CSS ιδιότητες με τις οποίες εισάγουμε
φόντο είναι οι παρακάτω:
• background-color (ορίζουμε ένα χρώμα σαν φόντο)
Παράδειγμα:
body {
background-color: blue; /*το φόντο όλη της ιστοσελίδας σε μπλε */
}
θα μπορούσαμε να χρησιμοποιήσουμε εναλλακτικά και τις υπόλοιπες τιμές (rga, rgba,
δεκαεξαδικό σύστημα) που συζητήσαμε στην προηγούμενη παράγραφο)
• background-image (ορίζουμε μια εικόνα σαν φόντο)
div #menu_bar {
background-image: url('only_logo.jpg');
}
Το παραπάνω στυλ ορίζει την εικόνα only_logo.jpg σαν φόνο σε ολόκληρο το div με
id=menu_bar. Η εικόνα θα επαναλαμβάνεται μέχρι να γεμίσει το τμήμα div.
• background-repeat (ορίζουμε αν θέλουμε να επαναλαμβάνεται η εικόνα που
θέτουμε σαν φόντο)
body {
background-repeat: repeat-x; /*δοκιμάστε την τιμή repeat-y για κάθετη
επανάληψη*/
}
Όπως είπαμε η εικόνα που ορίζουμε σαν φόντο σε ένα στοιχείο, εξορισμού
επαναλαμβάνεται σε όλο το στοιχείο αυτό μέχρι να το γεμίσει οριζόντια και κάθετα. Με την
ιδιότητα background-repeat, μπορούμε να ορίσουμε η εικόνα να επαναλαμβάνεται μόνο
οριζόντια, βάζοντας την τιμή repeat-x, ή μόνο κάθετα βάζοντας την τιμή repeat-y. Έχουμε
επίσης την δυνατότητα να ορίσουμε την μη επανάληψη της εικόνας, βάζοντας την τιμή no-
repeat.
• background-attachment (ορίζουμε αν η εικόνα που θέτουμε σαν φόντο θα γίνετε
scroll μαζί με το περιεχόμενο της σελίδας ή θα παραμένει σταθερή (fixed).)
Επίσης έχουμε την δυνατότητα να ορίσουμε την εικόνα σταθερή (fixed) σε σχέση με
το περιεχόμενο της σελίδας όταν αυτή γίνεται scroll ή να κινείται μαζί με το
περιεχόμενο (scroll).

body {
background-repeat: no-repeat;
background-attachment: fixed; /*εναλλακτική τιμή: scroll*/
}
• background-position (ορίζουμε την θέση της εικόνας που θέτουμε σαν φόντο)
Με την ιδιότητα background-position μπορούμε να ορίσουμε την ακριβή θέση της εικόνας
που ορίζουμε σαν φόντο μέσα σε ένα στοιχείο. Οι τιμές που παίρνει η ιδιότητα αυτή είναι
δύο: η πρώτη τιμή αντιστοιχεί στην οριζόντια θέση της εικόνας και η δεύτερη αντιστοιχεί
στην κάθετη θέση της ίδιας εικόνας. Έτσι μ' αυτόν τον τρόπο ορίζουμε το σημείο
τοποθέτησης της εικόνας μέσα στο στοιχείο. Οι τιμές που μπορεί να πάρει αυτή η ιδιότητα
είναι οι εξής:
• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• x% y%
• Θέση-x Θέση-y
body {
background-repeat: no-repeat;
background-position: 50px 100px;
}
Το σημείο που θα τοποθετηθεί η εικόνα φόντου, σύμφωνα με το στυλ, είναι το σημείο
50,100 της επιφάνειας της σελίδας.
Προσοχή: η ιδιότητα background-position, για να δουλέψει, προϋποθέτει την ύπαρξη της
ιδιότητας background-repeat έχοντας την τιμή no-repeat.
Για συντομία μπορούμε να ορίσουμε όλες τις παραπάνω ιδιότητες σε μια γραμμή! Για
κοιτάξτε τον παρακάτω κώδικα (ιδιότητα background):
body {
background: green url('only_logo.jpg') no-repeat fixed right center;
}

Κείμενο
Οι γραμματοσειρά (απλά ο γραφικός χαρακτήρας των γραμμάτων) που προβάλλονται οι
ιστοσελίδες βρίσκονται στον υπολογιστή του χρήστη και όχι του προγραμματιστή. Πρέπει
λοιπόν ο προγραμματιστής να είναι ιδιαίτερα προσεκτικός ώστε να μην χρησιμοποιεί
εξεζητημένες γραμματοσειρές που δεν μπορούν να προβληθούν σε όλους τους υπολογιστές
καθώς υπάρχει η πιθανότητα κάποιος χρήστης να μην μπορεί να διαβάσει τα περιεχόμενα
της ιστοσελίδας σας.
Για το παραπάνω λόγο όταν ορίζουμε την γραμματοσειρά ενός επιλογέα δεν αρκούμαστε
να ορίσουμε μόνο μια αλλά μια λίστα με γραμματοσειρές. Το νόημα είναι πως αν κάποιος
χρήστης δεν διαθέτει την 1η τότε θα εφαρμοστεί η 2η
κοκ.
Παράδειγμα
font-family: arial, helvetica, serif;
εξερευνήστε διάφορες γραμματοσειρές που είναι ασφαλές να χρησιμοποιήσετε
από αυτήν την ιστοσελίδα:
http://www.w3schools.com/cssref/css_websafe_fonts.asp
• Για έντονο κείμενο (test) χρησιμοποιήστε την παρακάτω ιδιότητα:
font-weight: bold;
Και
font-weight: normal;
Αν είναι έντονο και θέλουμε να το επαναφέρουμε.
• Πλάγια γραφή:
font-style: italic;
και
font-style: normal;
Αν είναι πλάγιο και θέλουμε να το επαναφέρουμε
• Υπογράμμιση και γραμμή ενδιάμεσα
Text-decoration: underline;
Υπογράμμιση
Text-decoration: overline;
Γραμμή πάνω από το κείμενο
Text-decoration: line-through;
Γραμμή ενδιάμεσα στο κείμενο
Text-decoration: none;
Αφαιρεί οποιαδήποτε υπογράμμιση

• Μετατροπή σε κεφαλαία
Text-transform: capitalize;
Μετατρέπει το πρώτο γράμμα κάθε λέξης
Text-transform: uppercase;
Μετατρέπει όλα τα γράμματα σε κεφαλαία
Text-transform: lowercase;
Μετατρέπει όλα τα γράμματα σε μικρά
Text-transform: none;
Αφαιρεί οποιαδήποτε μορφή κεφαλαίων – μικρών.
• Τα κενά ανάμεσα στο κείμενο
Αντιγράψτε στην περιοχή body ενός html εγγράφου τον παρακάτω κώδικα
<p>
Lorem ipsum dolor sit amet, neque vel venenatis aenean, nam vehicula et proin. Volutpat sed.
Molestie torquent sem wisi duis urna urna, fermentum suspendisse vehicula proin pharetra est lectus,
sit vel leo ut gravida tortor, vestibulum lacinia sit dolor pretium, purus at ac morbi eget leo. Tincidunt
vulputate sapien, pellentesque non, vitae tempor vestibulum rutrum duis ut ut, magna metus nunc eget.
Lacus sit quis rerum, possimus proin. Condimentum eget, diam tortor leo ultrices orci, ornare
sollicitudin, lacus ut nunc blandit massa autem, arcu dignissim. Bibendum vehicula tempor. Vel non
potenti vehicula felis, pede condimentum lorem, donec erat, velit tortor cum aliquet, proin mollis enim
massa vestibulum in. Fusce bibendum blanditiis potenti dictumst elit arcu.
</p>
Στην περιοχή head προσθέστε τον κώδικα που προσδίδει αναφορά σε αρχείο css όπως
παρακάτω
<link rel="stylesheet" href="look.css">
Δημιουργήστε το αρχείο look.css και αντιγράψτε τον παρακάτω κώδικα:
p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
}
Αποθηκεύστε και τα 2 αρχεία στον ίδιο φάκελο και δοκιμάστε την ιστοσελίδα σας. Στην
συνέχεια αλλάξτε τις τιμές από τις ιδιότητες στο αρχείο css όσες φορές χρειαστεί για να
καταλάβετε τον ρόλο της κάθε μιας από αυτές. Μην ξεχάσετε κάθε φορά που κάνετε μια

αλλαγή στο αρχείο css να την αποθηκεύετε και να ανανεώνεται το περιεχόμενο της
ιστοσελίδας (π.χ πατώντας το πλήκτρο F5) για να βλέπετε τις αλλαγές.
Οι τιμές που μπορεί να πάρει η ιδιότητα text-align είναι
Left ή right ή center ή justify ή initial ή inherit – Προς το παρόν
αγνοήστε την τιμή inherit
Πλαίσια
Για να δημιουργήσετε ένα πλαίσιο γύρω από ένα στοιχείο της html χρειάζεστε την ιδιότητα
border-style. Η ιδιότητα αυτή μπορεί να πάρει τις τιμές:
solid, dotted, dashed, double, groove, ridge, inset και outset.
Επιπρόσθετα μπορεί να χρησιμοποιηθεί η ιδιότητα border-width για να οριστεί το πλάτος
του πλαισίου. Υπάρχουν ακόμη οι ιδιότητες
border-top-width, border-right-width, border-bottom-width και border-left-width.
Για να ορίσετε ξεχωριστά το μέγεθος ενός μέρους του πλαισίου. Επίσης η ιδιότητα border-
color ορίζει το χρώμα του πλαισίου.
Ας δοκιμάσουμε τα παραπάνω στην πράξη
Αντιγράψτε στην περιοχή body ενός html εγγράφου τον παρακάτω κώδικα
<h2>
Lorem ipsum dolor sit amet
</h2>
Στην περιοχή head προσθέστε τον κώδικα που προσδίδει αναφορά σε αρχείο css όπως
παρακάτω
<link rel="stylesheet" href="look.css">
Δημιουργήστε το αρχείο look.css και αντιγράψτε τον παρακάτω κώδικα:
Για το μέγεθος της γραμματοσειράς αντί για την μονάδα px (αν δεν το αλλάξετε καθόλου η
προεπιλεγμένη μορφή είναι 12px) μπορείτε να χρησιμοποιήσετε την μονάδα em. Π.χ font-size:
2em; που σημαίνει 2 φορές το μέγεθος που είναι τώρα. Μπορείτε επίσης να χρησιμοποιήσετε
ποσοστά. Π.χ font-size: 110%;
Υπάρχουν και άλλοι τρόπο για να μετρήσουμε τα μεγέθη αλλά τα παραπάνω είναι αυτά που
χρησιμοποιούνται περισσότερο
Προχωρημένη γνώση

h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}
Αποθηκεύστε και τα 2 αρχεία στον ίδιο φάκελο και δοκιμάστε την ιστοσελίδα σας. Στην
συνέχεια αλλάξτε τις τιμές από τις ιδιότητες στο αρχείο css όσες φορές χρειαστεί για να
καταλάβετε τον ρόλο της κάθε μιας από αυτές. Μην ξεχάσετε κάθε φορά που κάνετε μια
αλλαγή στο αρχείο css να την αποθηκεύετε και να ανανεώνεται το περιεχόμενο της
ιστοσελίδας (π.χ πατώντας το πλήκτρο F5) για να βλέπετε τις αλλαγές.
Περιθώρια και γεμίσματα (margins and padding)
Τα margins και τα paddings είναι 2 ιδιότητες πολύ συχνά χρησιμοποιούμενες στην html και
την css. Ένα περιθώριο (margin) είναι ο χώρος έξω από ένα στοιχείο ενώ το γέμισμα
(padding) είναι ο κενός χώρος μέσα στο στοιχείο που διαχειριζόμαστε. Η παρακάτω εικόνα
θα σας βοηθήσει ιδιαίτερα να καταλάβετε ακριβώς τι αντιπροσωπεύουν οι 2 αυτές
ιδιότητες.
Το παραπάνω μοντέλο μπορεί να χρησιμοποιηθεί σε οποιοδήποτε στοιχείο (element) της
html
Θα δοκιμάσουμε όλα αυτά στα αρχεία που δημιουργήσαμε για το παραπάνω παράδειγμα.
Εάν δεν τα δημιουργήσατε κάντε το τώρα.
Στο αρχείο look.css μέσα στο επιλογέα h2 προσθέστε τις παρακάτω γραμμές
background-color: #ccc;
margin: 20px;
padding: 40px;
Και αφού αποθηκεύσετε δοκιμάστε την ιστοσελίδα σας.

Στην συνέχεια πειραματιστείτε με τις τιμές του margin και του padding. Μπορείτε
εναλλακτικά να χρησιμοποιήσετε τις ιδιότητες:
margin-top
margin-right
margin-bottom
margin-left
padding-top
padding-right
padding-bottom
padding-left
Για να αλλάξετε τις αποστάσεις από συγκεκριμένα μέρη των στοιχείων και όχι κατά ανάγκη
γύρω – γύρω.
Μέγεθος στοιχείων (διαστάσεις)
Οι ιδιότητες της CSS για τον ορισμό των διαστάσεων, μας επιτρέπουν να ορίσουμε το ύψος
και το μήκος διάφορων στοιχείων της σελίδας. Οι ιδιότητες που μπορείτε να
χρησιμοποιήσετε είναι οι παρακάτω:
height Ορίζει το ύψος του στοιχείου
max-height Ορίζει το μέγιστο ύψος που θα έχει ένα στοιχείο
min-height Ορίζει το ελάχιστο ύψος που θα έχει ένα στοιχείο
width  Ορίζει το μήκος του στοιχείου
max-width Ορίζει το μέγιστο μήκος που θα έχει ένα στοιχείο
min-width Ορίζει το ελάχιστο μήκος του στοιχείου
Οι τιμές που μπορούν να πάρουν αυτές οι ιδιότητες είναι:
auto (το φυσικό μέγεθος αν π.χ πρόκειται για εικόνα)
αριθμός σε pixels
αριθμός σε cm
αριθμός σε %
#third{
background-color: red;
width:33%;
}

Η χρήση της ιδιότητας max-width σε σχέση με την ιδιότητα width προσφέρει ιδιαίτερα
πλεονεκτήματα όταν το περιεχόμενο του στοιχείου προβάλλεται σε μικρές οθόνες. Δείτε
στο παρακάτω παράδειγμα 2 στοιχεία div με την μοναδική διαφορά στην μορφή τους πως
στο πρώτο έχει οριστεί το μέγεθος με την ιδιότητα width και στο δεύτερο με την ιδιότητα
max-width. Στο παράδειγμα μας φαίνεται η παρουσίαση τους σε οθόνη κινητού – μεγέθους
μικρότερη από τα στοιχεία.
div.ex1 {
width: 500px;
margin: auto; /*στοίχιση στο κέντρο*/
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto; /*στοίχιση στο κέντρο*/
border: 3px solid #73AD21;
}
Περισσότερα: http://www.w3schools.com/css/css_max-width.asp
Διάταξη της ιστοσελίδας μας με την χρήση divs (θέση στοιχείων)
Η χρήση των divs είναι απαραίτητη ώστε να μπορείτε να δημιουργείτε ιστοσελίδες που
περιέχουν στήλες ώστε να τοποθετείτε περιεχόμενο (π.χ κείμενο, εικόνες, πίνακες κ.α) σε
οποιοδήποτε σημείο του html εγγράφου.
Το στοιχείο div αντιπροσωπεύει ένα ορθογώνιο μπλοκ περιεχομένου το οποίο εκτείνεται σε
όλο το μήκος της οθόνης. 2 div συνεχόμενα βρίσκονται το ένα κάτω από το άλλο με τα
περιγράμματα τους να αγγίζουν το ένα το άλλο και το κείμενο που διαθέτουν πολύ κοντά
σε αυτά.

Στον παρακάτω κώδικα δημιουργήσαμε 6 div και θέσαμε σε αυτά χρώμα φόντου και
πλαίσια. Προσέξτε πως το 2ο
div περιέχει τα div 3,4 και 5. Σε κάποια από αυτά υπάρχει
κείμενο το οποίο είναι τυχαίο - δοκιμαστικό.
HTML:
<body>
<div id="first">
<p> Πρώτο div </p>
</div>
<div id="second">
<p>Δεύτερο div </p>
<div id="third">
<p>Τρίτο div - Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id="forth">
<p>Τέταρτο div - Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo.
</p>
</div>
<div id="five">
<p>Πέμπτο div - At vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditiis praesentium voluptatum deleniti atque
corrupti
quos dolores et quas molestias excepturi sint occaecati cupiditate
non provident.
</p>
</div>
</div>
<div id="six">
<p> Έκτο div</p>
</div>
</body>

CSS:
div {
border-width: 1px;
border-style: solid;
}
#first{
background-color: yellow;
}
#second{
background-color: cyan;
}
#third{
}
#forth{
background-color: brown;
}
#five{
background-color: green;
}
#six{
background-color: orange;
}
Το αποτέλεσμα στον πλοηγό:
Χρησιμοποιώντας κώδικα CSS θα επιχειρήσουμε να αλλάξουμε την τοποθέτηση των
παραπάνω div ώστε να καταφέρουμε να τοποθετήσουμε τα div 2,3 και 4 σε διάταξη

στηλών. Η διάταξη αυτή είναι ιδιαίτερα χρήσιμη καθώς έτσι μπορούμε να δημιουργήσουμε
οποιαδήποτε ιστοσελίδα επιθυμούμε. Στην παρακάτω εικόνα δείτε το αποτέλεσμα που θα
επιτύχουμε με την ορθή χρήση εντολών CSS

Για να καταφέρουμε το παραπάνω αποτέλεσμα θα μελετήσουμε ιδιότητες που αφορούν
τόσο τις διαστάσεις όσο και τις θέσεις στοιχείων (ισχύουν τόσο για τα div όσο και
για τα υπόλοιπα στοιχεία). Κάποιες από τις ιδιότητες που θα αναφέρουμε δεν θα
χρησιμοποιηθούν τελικά για την δημιουργία του παραπάνω αποτελέσματος αλλά
παρατίθενται με την ευκαιρία καθώς είναι χρήσιμες για την δημιουργία παρόμοιων
ιστοσελίδων.
Σημαντικές ιδιότητες που αφορούν την θέση των στοιχείων

box-sizing content-box
border-box
padding-box
Ορίζεται ο τρόπος που υπολογίζεται το μήκος
(width) ενός στοιχείου.
content-box= Είναι η προεπιλεγμένη τιμή ενός
στοιχείου. Το μήκος υπολογίζεται μόνο με βάση το
περιεχόμενο χωρίς να περιλαμβάνονται τα πλαίσια
και τα περιθώρια και γεμίσματα
border-box= Το μήκος του στοιχείου περιλαμβάνει
επίσης πλαίσια και περιθώρια γεμίσματα
padding-box= Το μήκος του στοιχείου περιλαμβάνει
το περιεχόμενο και τα γεμίσματα (padding)
μόνο
Με την χρήση λοιπόν κάποιων εκ των παραπάνω ιδιοτήτων λύνουμε το πρόβλημα που
περιγράφηκε στην προηγούμενη παράγραφο και απεικονίζεται πιο κάτω:
div {
border-width: 1px;
}
#first{
}
#second{

}
#third{
width: 33%;
float:left;
box-sizing: border-box;
}
#forth{
width: 33%;
float:left;
}
#five{
width: 34%;
float:left;
}
#six{
clear:both;
}
div {
border-width: 1px;
}
#first{
}
#second{
}
#third{
width: 33%;
float:left;

}
#forth{
width: 33%;
float:left;
}
#five{
width: 34%;
float:left;
}
#six{
clear:both;
}
Άλλες σημαντικές μορφοποιήσεις
Κεντράρισμα στον πλοηγό
Η δημιουργία μιας ιστοσελίδας που περιέχει στο κέντρο των στοιχείων της περιεχόμενο το
οποίο παραμένει στο κέντρο ακόμη και σε περίπτωση που το παράθυρο του πλοηγού
αλλάξει μέγεθος είναι σημαντική. Για να πετύχετε κάτι τέτοιο θα πρέπει να ορίσετε ένα div
με συγκεκριμένο μέγεθος (width) και στην συνέχεια να θέσετε τα περιθώρια αριστερά και
δεξιά του σε auto.
#divcontainer{
width: 60%;
margin-left: auto;
margin-right: auto;
background-color: chartreuse;
}
Προσοχή! Χωρίς τον ορισμό του width ο τρόπος δεν «δουλεύει».
Στοιχεία με κυκλικές γωνίες
Σε παλιότερες εκδόσεις της CSS αυτή η μορφοποίηση ήτανε πραγματικά για
«προχωρημένους». Σήμερα, με την CSS3 το πρόβλημα λύνεται με μια και μόνο ιδιότητα!
Την border-radius. Σημαντικό είναι να αναφερθεί πως δεν είναι απαραίτητο το στοιχείο που
θα εφαρμόσετε κυκλικές γωνίες να έχει πλαίσιο (border).

#divcontainer{
width: 60%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
Εναλλακτικά μπορείτε να χρησιμοποιήσετε τις ιδιότητες: border-top-left-radius, border-
top-right-radius, border-bottom-right-radius, και border-bottom-left-radius, για να
«στοχεύσετε» συγκεκριμένες γωνίες ξεχωριστά. Οι ιδιότητες αυτές μπορούν να
«συντομευτούν» από την παρακάτω ιδιότητα:
border-radius: 10px 6px 9px 12px;
Προσέξτε πώς με την χρήση της ιδιότητας αυτής μπορείτε να δημιουργήσετε κυκλικές
εικόνες που είναι αρκετά εντυπωσιακές:
CSS
#circle {
width: 100px;
height: 100px;
background-image: url('cat.jpg');
background-size: 100% 100%; /* Η εικόνα να καλύπτει όλο το div*/
}
HTML
<div id ="circle">
</div>
Αποτέλεσμα:
Η συγκεκριμένη δυνατότητα γίνεται πολύ εύκολα με το πρότυπο bootstrap.

Σκιές σε κείμενο και πλαίσια
Υπάρχει η δυνατότητα να δώσετε σκιές τόσο σε κείμενο όσο και σε πλαίσια με την χρήση
μιας μόνο ιδιότητας! Για τα πλαίσια η ιδιότητα λέγεται box-shadow και εφαρμόζεται έτσι:
#divcontainer{
width: 60%;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 3px 1px #999;
}
Η 1η τιμή ορίζει δεξιά θα «τραβηχτεί» η σκιά (αν είναι αρνητική αριστερά). Η 2η τιμή ορίζει
πόσο προς τα κάτω θα ωθηθεί η σκιά (αν είναι αρνητική προς τα πάνω). Η 3η τιμή όσο
μεγαλύτερη είναι τόσο λιγότερο έντονη είναι η σκιά. Η 4η τιμή περιγράφει την απόσταση
διάδοσης της. Στο τέλος περιγράφεται το χρώμα της σκιάς. Οι 3 τελευταίες τιμές είναι
προαιρετικές.
Για να θέσετε σκιά εσωτερικά του πλαισίου χρησιμοποιήστε έτσι την εντολή
box-shadow: inset 5px 5px 3px 1px #999;
Με παρόμοιο τρόπο μπορείτε να εφαρμόσετε σκιά και σε κείμενο.
text-shadow: 5px 5px 3px #999;
Η 1η
τιμή αφορά την οριζόντια μετακίνηση της σκιάς, η 2η
την κάθετη, η 3η
το πόσο έντονη
είναι και στο τέλος έχουμε το χρώμα.
Διαφάνεια πλαισίων
Η ιδιότητα opacity καθορίζει την διαφάνεια ενός στοιχείου. Στην τιμή 1 η διαφάνεια είναι
ελάχιστή και στην 0 είναι τόσο μεγάλη που το στοιχείο δεν φαίνεται.
Opacity: 0.5;
Η εφαρμογή της ιδιότητας στο div που ορίσαμε σε προηγούμενο παράδειγμα δείχνει
εμφανώς την αδιαφάνεια της εικόνας:

http://www.tsevdos.com/category/css/

Css light

Recommended

More Related Content

What's hot

What's hot (12)

Viewers also liked

Viewers also liked (12)

Similar to Css light

Similar to Css light (18)

More from dourvas

More from dourvas (20)

Recently uploaded

Recently uploaded (18)

Css light