CSS tutorial για αρχάριους.Εισαγωγή και επεξήγηση id,class,border,margin,padding,box model

Anastasis · October 20, 2016

Καλησπέρα σας ..Το συγκεκριμένο tutorial που θα διαβάσετε ξεκινάει τα CSS από μηδενική βάση.Αυτό το βοήθημα είναι αποκλειστικά για αρχάριους στα CSS και σκοπό έχει να τους μυήσει στον κόσμο των Cascading Style Sheets…Το μόνο που χρειάζεται για να ακολουθήσετε το tutorial αυτό είναι να έχετε μία μικρή γνώση html..

Μία μικρή αναφορά στο παρελθόν.Εποχή πριν τα CSS.
Θα ξεκινήσουμε με μία μικρή αναφορά στο παρελθόν γιατί από κει ξεκινάνε όλα..Πριν από κάποια χρόνια οι web designers όταν έπρεπε να δημιουργήσουν μία ιστοσελίδα χρησιμοποιούσαν τη γνωστή σε όλους μας html.Για παράδειγμα, όταν είχαν να δημιουργήσουν μία παράγραφο έγραφαν

Κώδικας:

<p>
Τα περιεχόμενα της παραγράφου πάνε εδώ..
</p>

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

Κώδικας:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
   κλπ.

Όλα καλά μέχρι εδώ.Τι γινόταν όμως όταν χρειαζόταν να δώσουν κάποιο στυλ σε ένα html στοιχείο από τα παραπάνω;Για παράδειγμα τι γινόταν εάν ήθελαν να έχουν ένα τίτλο με έντονα (bold);Για να λυθεί αυτό έγραφαν:

Κώδικας:

<h1><b>This is heading 1</b></h1>

Οτιδήποτε βρισκόταν ανάμεσα στα ‘b’ tags γινόταν bold-δηλαδή έντονο.Φυσικά αντίστοιχες ενέργειες συνέβαιναν εάν ήθελαν να αλλάξουν τη γραμματοσειρά σε μια παράγραφο ή ακόμα και μία λέξη ,να δώσουν διαφορετικό χρώμα σε μία λέξη και πολλά άλλα..Και ποιο είναι το πρόβλημα με όλα αυτά;

Ποιο είναι το βασικό πρόβλημα που ανάγκασε τη δημιουργία των CSS κανόνων;
Το βασικό πρόβλημα που υπήρξε ήταν το εξής…Φανταστείτε να έχουμε δημιουργήσει μία ιστοσελίδα η οποία να αποτελείται από πολλές σελίδες.Κάθε σελίδα έχει 3-5 παραγράφους και πρέπει οι δύο πρώτες παράγραφοι να έχουν διαφορετικό στυλ από τις δύο επόμενες,η τελευταία παράγραφος να έχει κάποια άλλα χαρακτηριστικά και όλα αυτά να επαναλαμβάνονται μέσα στις υπόλοιπες σελίδες της ιστοσελίδας μας.Καταλαβαίνετε τι θα συμβεί;;Θα πρέπει σε κάθε παράγραφο,σε κάθε σελίδα όλες τις πληροφορίες για το στυλ της κάθε παραγράφου να τις επαναλαμβάνουμε σε κάθε σελίδα.Αυτό είναι απλά…ΆΒΟΛΟ..

Η λύση του προβλήματος με CSS
Το παραπάνω πρόβλημα λύθηκε όταν πριν λίγα χρόνια το World Wide Web Consortium ανακοίνωσε ότι όλες οι πληροφορίες στυλ και μορφοποίησης θα τοποθετούνται σε ένα εξωτερικό αρχείο το οποίο θα έχει κατάληξη “.css” και θα μπορούμε να το καλούμε μέσα στα head tags της ιστοσελίδας μας.Δηλαδή Εάν έχουμε την ιστοσελίδα μας, για παράδειγμα index.html και το αρχείο styles.css στον ίδιο φάκελο τότε ανάμεσα στα head tags της σελίδας καλούμε ως εξής το CSS αρχείο :

Κώδικας:

<head>
....
<link rel="stylesheet" href="styles.css"/>
...
</head>

Και οτιδήποτε έχετε γράψει στο αρχείο αυτό εφαρμόζεται στα στην ιστοσελίδα σας.
Σύνταξη CSS.
Αφού είδαμε και πώς καλούμε σε ένα html αρχείο τα CSS μπορούμε να δούμε λίγο τη σύνταξη.

Τα CSS αρχεία μπορούμε να τα δημιουργήσουμε με το notepad αλλά προσωπικά πιστεύω ότι καλό είναι να χρησιμοποιούμε πάντα ένα html editor γιατί μπορούμε να βρίσκουμε τα λάθη μας γρηγορότερα και όχι μόνο.

Η βασική σύνταξη των CSS κανόνων είναι η εξής:

Απ ότι βλέπετε στην παραπάνω εικόνα ,ένα block κώδικα CSS ξεκινάει με τον επιλογέα όπου επιλέγει σε ποιο html element θα εφαρμόσουμε τις εντολές CSS.Στη δική μας περίπτωση έχουμε επιλέξει να εφαρμόσουμε τις CSS εντολές μας σε όλα τα ‘p’ html στοιχεία της σελίδας μας δηλαδή στις παραγράφους.Βλέπουμε ότι όλες οι εντολές CSS βρίσκονται ανάμεσα σε αγκύλες και κάθε εντολή ακολουθείται από το ‘;’ το οποίο επισημαίνει το τέλος της κάθε εντολής.

Όσον αφορά τώρα τις ιδιότητες και τις τιμές που παίρνουν αυτές η αλήθεια είναι ότι υπάρχουν πάρα πολλές ιδιότητες και δεν γίνεται να τις αναφέρουμε όλες..Στην εικόνα βλέπουμε ότι η παράγραφοι μας θα έχουν χρώμα γραμματοσειράς “#dddddd” και η γραμματοσειρά θα είναι της οικογενείας “Kalinga”.Ας το δούμε σε παράδειγμα.
Πίνακας με τις CSS ιδιότητες:
Δείτε εδώ ένα πίνακα με τις CSS properties

Πρώτο Παράδειγμα CSS
Θα δημιουργήσουμε δύο παραγράφους και εν συνεχεία θα εφαρμόσουμε css πάνω σε αυτές.O html κώδικας είναι:

Κώδικας:

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce nulla orci, vehicula ac ultrices venenatis, hendrerit vel lorem.
In hac habitasse platea dictumst. Suspendisse adipiscing risus vel risus consectetur sodales.
Phasellus commodo, velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc
sit amet ante. Quisque pellentesque ligula vel massa placerat eget malesuada ipsum feugiat.
Suspendisse consectetur adipiscing velit dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna.
Mauris eget erat at lacus mattis consectetur.Etiam dignissim nisi in lectus euismod iaculis.
Nulla blandit, arcu et dapibus cursus,nibh mi placerat eros, id fringilla velit diam at enim. Sed turpis ante,
rutrum nec sodales sit amet,tincidunt et est. Aenean pellentesque mollis libero vitae rhoncus.
Fusce semper commodo felis mollis facilisis. Curabitur cursus justo et libero tempus ornare.
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla orci, vehicula ac ultrices veng
risus vel risus consectetur sodales. Phasellus commodo,
velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc sit amet ante. Quisque
pellentesque ligula vel massa placerat eget malesuada ipsum feugiat. Suspendisse consectetur adipiscing
velit in dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna. Mauris eget erat at lacus mattis.
</p>

Ας το δούμε λίγο χωρίς css.

http://akisplace.com/wp-content/them...pics/cssb3.png

Τώρα θα εφαρμόσουμε CSS.Στο αρχείο “styles.css” γράφουμε:

Κώδικας:

p{
/*Χρώμα γραμματοσειράς*/
color:#555555;
/*Ορισμός γραμματοσειράς*/
font-family:Kalinga;
/*Μέγεθος γραμματοσειράς*/
font-size:14px;
/*Πόσο έντονη γραμματοσειρά.Τιμές 100-900*/
font-weight:800;}

Έχουμε γράψει και σχόλια στον κώδικά μας.Ας τρέξουμε λίγο τη σελίδα μας..Θα δούμε στον browser το εξής:

http://akisplace.com/wp-content/them...pics/cssb2.png

Είδατε ποσό διαφορετικό φαίνεται το αποτέλεσμα..Θέλετε να δώσουμε και ένα συγκεκριμένο πλάτος στην κάθε παράγραφο και να κάνουμε το κείμενο να είναι aligned αριστερά;Ας προσθέσουμε 2 εντολές στο αρχείο CSS.

Κώδικας:

p{
color:#555555;
font-family:Kalinga;
font-size:14px;
font-weight:800;
width:400px;
text-align:left;}

Με τις τελευταίες δύο εντολές κάνουμε τις παραγράφους μας να είναι 400px σε πλάτος και η στοίχιση του κειμένου είναι στα αριστερά.
Με το ίδιο τρόπο ακριβώς μπορούμε να δώσουμε στυλ και σε άλλα html στοιχεία,όπως divs, img, a,h1,h2…h6,p και πολλά άλλα.

Δεύτερο παράδειγμα CSS-Χρήση του id

Ας φανταστούμε το εξής.Έστω ότι θέλουμε να δώσουμε διαφορετικά στυλ σε ίδια html στοιχεία σε μία σελίδα.Δηλαδή εάν έχουμε 5 παραγράφους και εμείς θέλουμε στη μία να εφαρμόζεται διαφορετικό css στυλ από ότι στις υπόλοιπες.Τι κάνουμε τότε…;Τότε θα αναφερθούμε στο id του συγκεκριμένου html στοιχείου.Τι είναι το ‘id΄ ενός html στοιχείου:

Κάθε html στοιχείο εκτός από το html tag που το αντιπροσωπεύει έχει και κάποια “χαρακτηριστικά” τα οποία ονομάζονται html attributes.Κάποια από αυτά είναι:”id”, “class”, “title”, “alt” κλπ..Στα CSS πολλές φορές χρησιμοποιούμε το id ενός στοιχείου ώστε να ξέρουμε που θα εφαρμοστεί το στυλ που ορίζουμε .

Ας κάνουμε ένα δεύτερο παράδειγμα.Θα έχουμε 3 παραγράφους.Στις δύο θα εφαρμόσουμε CSS στυλ για τις παραγράφους γενικότερα,όπως πάνω, ενώ στη τρίτη θα χρησιμοποιήσουμε το id της και θα τις εφαρμόσουμε στυλ που θα ορίζει κόκκινη γραμματοσειρά.Το id το ονομάζουμε όπως θέλουμε.
Ας δούμε λίγο τον html κώδικα:

Κώδικας:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce nulla orci, vehicula ac ultrices venenatis, hendrerit vel lorem.
In hac habitasse platea dictumst. Suspendisse adipiscing risus vel risus consectetur sodales.
Phasellus commodo, velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc
sit amet ante. Quisque pellentesque ligula vel massa placerat eget malesuada ipsum feugiat.
Suspendisse consectetur adipiscing velit dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna.
Mauris eget erat at lacus mattis consectetur.Etiam dignissim nisi in lectus euismod iaculis.
Nulla blandit, arcu et dapibus cursus,nibh mi placerat eros, id fringilla velit diam at enim. Sed turpis ante,
rutrum nec sodales sit amet,tincidunt et est. Aenean pellentesque mollis libero vitae rhoncus.
Fusce semper commodo felis mollis facilisis. Curabitur cursus justo et libero tempus ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla orci, vehicula ac ultrices veng
risus vel risus consectetur sodales. Phasellus commodo,
velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc sit amet ante. Quisque
pellentesque ligula vel massa placerat eget malesuada ipsum feugiat. Suspendisse consectetur adipiscing
velit in dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna. Mauris eget erat at lacus mattis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce nulla orci, vehicula ac ultrices venenatis, hendrerit vel lorem.
In hac habitasse platea dictumst. Suspendisse adipiscing risus vel risus consectetur sodales.
Phasellus commodo, velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc
sit amet ante. Quisque pellentesque ligula vel massa placerat eget malesuada ipsum feugiat.
Suspendisse consectetur adipiscing velit dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna.
Mauris eget erat at lacus mattis consectetur.Etiam dignissim nisi in lectus euismod iaculis.
Nulla blandit, arcu et dapibus cursus,nibh mi placerat eros, id fringilla velit diam at enim. Sed turpis ante,
rutrum nec sodales sit amet,tincidunt et est. Aenean pellentesque mollis libero vitae rhoncus.
Fusce semper commodo felis mollis facilisis. Curabitur cursus justo et libero tempus ornare.

Ας δούμε το CSS τώρα που θα εφαρμόσουμε και ύστερα θα σας εξηγήσουμε κάτι πολύ σημαντικό…!

Κώδικας:

p{
color:#555555;
font-family:Kalinga;
font-size:14px;
font-weight:800;
}
/*Το id εδώ είναι ίδιο με αυτό που ορίζουμε στον html κώδικα.Το id στα CSS ορίζεται ξεκινώντας πάντα με "#" */
#diffPar{
    color:red;
}

Ας δούμε ένα στιγμιότυπο..

http://akisplace.com/wp-content/them...pics/cssb4.png

Παρατηρείτε ότι η τελευταία παράγραφος έχει κόκκινο χρώμα;;;Άρα βλέπουμε πώς λειτουργεί το id στην εφαρμογή των CSS.Κάπου εδώ πρέπει να τονίσουμε κάτι πολύ σημαντικό!!!!

Σημαντική παρατήρηση!!!
Παρατηρήστε το εξής:Η παράγραφος με τα κόκκινα γράμματα, δεν είναι ολόιδια κατά τα άλλα με τις άλλες δύο παραγράφους;To μόνο που άλλαξε ήταν το χρώμα της γραμματοσειράς.Άρα λοιπόν η παράγραφος με το id=”diffPar” ουσιαστικά “κληρονομεί” όλα το css στυλ που εφαρμόζουμε στο στοιχείο ‘p’ και το μόνο που αλλάζει είναι το χρώμα γραμματοσειράς..Άρα λοιπόν βγάζουμε το εξής συμπέρασμα.Εάν δημιουργήσουμε css κώδικα για κάποιο html στοιχείο όπως p,h1,h2,a κλπ τότε όλα τα στοιχεία του ίδιου τύπου κληρονομούν αυτό το CSS.Έτσι έγινε και με το παραπάνω παράδειγμά μας.Με τη χρήση του id ναι μεν κληρονομήσαμε το css που είχε οριστεί για την παράγραφο γενικότερα αλλά αλλάξαμε το χρώμα της γραμματοσειράς..Να το θυμάστε αυτό με την κληρονομικότητα.Είναι πολύ σημαντικό.

Τρίτο παράδειγμα CSS.Χρήση του class.
Όπως είπαμε παραπάνω κάθε html στοιχείο έχει κάποια html attibutes.Ένα από αυτά είναι και το “class”.To class το χρησιμοποιούμε στα CSS με τον ίδιο τρόπο που χρησιμοποιούμε το “id” εκτός από μία μεγάλη διαφορά..Με το “id” μπορούμε να εφαρμόσουμε στυλ μόνο σε ΕΝΑ html στοιχείο, σε αυτό που θα έχει το αντίστοιχο id.Δεν γίνεται 2 στοιχεία να έχουν το ίδιο id…Με το “class” μπορούμε να εφαρμόσουμε CSS στυλ σε περισσότερα από ένα html στοιχεία..
Ας δούμε ένα παράδειγμα.Θα έχουμε 3 παραγράφους.Θα ορίσω css στυλ για μία παράγραφο που θα έχει ένα id και για 2 παραγράφους που θα έχουν μία κοινή κλάση (class).

Ας δούμε λίγο τον html κώδικα.

Κώδικας:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce nulla orci, vehicula ac ultrices venenatis, hendrerit vel lorem.
In hac habitasse platea dictumst. Suspendisse adipiscing risus vel risus consectetur sodales.
Phasellus commodo, velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc
sit amet ante. Quisque pellentesque ligula vel massa placerat eget malesuada ipsum feugiat.
Suspendisse consectetur adipiscing velit dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna.
Mauris eget erat at lacus mattis consectetur.Etiam dignissim nisi in lectus euismod iaculis.
Nulla blandit, arcu et dapibus cursus,nibh mi placerat eros, id fringilla velit diam at enim. Sed turpis ante,
rutrum nec sodales sit amet,tincidunt et est. Aenean pellentesque mollis libero vitae rhoncus.
Fusce semper commodo felis mollis facilisis. Curabitur cursus justo et libero tempus ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla orci, vehicula ac ultrices veng
risus vel risus consectetur sodales. Phasellus commodo,
velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc sit amet ante. Quisque
pellentesque ligula vel massa placerat eget malesuada ipsum feugiat. Suspendisse consectetur adipiscing
velit in dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna. Mauris eget erat at lacus mattis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce nulla orci, vehicula ac ultrices venenatis, hendrerit vel lorem.
In hac habitasse platea dictumst. Suspendisse adipiscing risus vel risus consectetur sodales.
Phasellus commodo, velit vel blandit condimentum, lectus metus vulputate purus, vel porta elit nunc
sit amet ante. Quisque pellentesque ligula vel massa placerat eget malesuada ipsum feugiat.
Suspendisse consectetur adipiscing velit dapibus. Suspendisse vitae orci lorem, vitae vestibulum urna.
Mauris eget erat at lacus mattis consectetur.Etiam dignissim nisi in lectus euismod iaculis.
Nulla blandit, arcu et dapibus cursus,nibh mi placerat eros, id fringilla velit diam at enim. Sed turpis ante,
rutrum nec sodales sit amet,tincidunt et est. Aenean pellentesque mollis libero vitae rhoncus.
Fusce semper commodo felis mollis facilisis. Curabitur cursus justo et libero tempus ornare.

Ας δούμε και το css….

Κώδικας:

/*Η παρακάτω εντολή εφαρμόζεται στο html στοιχείο με id=diffPar*/
#diffPar{
    color:red;

}
/*Oι παρακάτω γραμμές κώδικα εφαρμόζονται στα στοιχεία που έχουν κλάση "classPar".Στα CSS η κλάση δηλώνεται πάντα με την '.'*/
.classPar{
    color:blue;
    font-family:Calibri;
    font-size:14px;
/*Το πλάτος θα είναι 500px*/
    width:500px;
}

Ας δούμε ένα στιγμιότυπο!!!

http://akisplace.com/wp-content/them...pics/cssb5.png

Στη συνέχεια του tutorial αυτού θα μιλήσουμε για το box model,border,padding και margin.

Τι είναι το box model στα CSS και γιατί πρέπει να το ξέρω;;
Είναι πολύ σημαντικό να γνωρίζετε ότι στα CSS όλα τα html στοιχεία θεωρούνται σαν να είναι τετράγωνα κουτιά.Δηλαδή μία εικόνα,μία παράγραφος, μία ενότητα(div) θεωρούνται ότι έχουν σχήμα κουτιού.Ας δούμε μία εικόνα:

Στην παραπάνω εικόνα διαπιστώνουμε και οπτικά αυτό που είπαμε παραπάνω.Βλέπουμε ότι έχουμε μια div η οποία περιέχει μία παράγραφο και μέσα στην παράγραφο υπάρχει μία εικόνα.Όλα αυτά τα html στοιχεία “συμπεριφέρονται” σαν κουτιά.Φυσικά μιλάμε για ένα νοητό κουτί το οποίο περιέχει το κάθε ένα html στοιχείο.Άρα γνωρίζοντας εμείς το box model , μπορούμε να τοποθετούμε το κάθε html στοιχείο μέσα σε μία σελίδα όπου θέλουμε σε σχέση με τα υπόλοιπα html στοιχεία.

To box model.Margin,padding,border.

Στο τέλος του css tutorial θα δούμε μία οπτική απεικόνιση του box model.Πρώτα όμως θα μιλήσουμε για 3 στοιχεία που έχουν όλα τα html elements στα CSS.
Το πρώτο που θα δούμε είναι το “border“

Όπως και τα κανονικά κουτιά έτσι και στα CSS τα html στοιχεία έχουν κάποια όρια τα οποία όρια κυκλώνουν τα στοιχεία αυτά.Για να το δούμε και οπτικά θα δημιουργήσουμε μία div και θα τις εφαρμόσουμε με css ένα border ,το οποίο θα την κυκλώσει, ώστε να δούμε τα όρια της και οπτικά.Το border αυτό θα είναι 5px πλάτος και χρώματος μαύρου.Ας δούμε τον κώδικα html και το css που θα εφαρμόσουμε.

Κώδικας:

<!--Δίνουμε ένα id για να το χρησιμοποιήσουμε με το CSS κώδικα -->
<div id="borderDiv">
Με περικυκλώνει ένα μαύρο πλαίσιο!
</div>

To css που θα εφαρμόσουμε ώστε να δούμε το πως λειτουργεί το border:

Κώδικας:

#borderDiv{
/*Ορίζω ένα πλάτος για την div μου.Δεν είναι υποχρεωτικό αυτό .*/
width:300px;
/*Εδώ δίνουμε 5px border το οποίο είναι τύπου solid και χρώματος μαύρου.*/
border:5px solid black;
}

Ας δούμε ένα στιγμιότυπο:

Βλέπετε που το κείμενο μας περικυκλώνεται από ένα μαύρο όριο;;;Αυτό ουσιαστικά είναι το border.Κάτι πολύ σημαντικό!!!!!

Ορίσαμε η div μας να έχει πλάτος 300px.Προσοχή.Όταν εφαρμόζουμε ένα border σε αυτή για παράδειγμα 5px τότε αυτά τα 5px προστίθενται και δεξιά και αριστερά και πάνω και κάτω…Δηλαδή πλέον η div μας έχει πλάτος 5px(border δεξί)+300px(μέγεθος div)+5px(border αριστερό)= 310px.

Επιπλέον παραδείγματα με css border.
Border μόνο σε συγκεκριμένες πλευρές.
Έστω ότι θέλω σε μια div να φαίνεται border μόνο από την κάτω και από την αριστερή πλευρά.Το CSS που θα εφαρμόσω (έστω ότι έχω μία div σαν την παραπάνω με id = “leftBottomBorder”):

Κώδικας:

#leftBottomBorder{
    width:300px;
/*Πρέπει πάντα να δηλώνουμε πόσο παχύ θα είναι το border,τι στυλ θα είναι και τι χρώμα θα έχει!!!*/
    border-left:4px solid green;
    border-bottom:5px solid red;
}

Ας δούμε ένα στιγμιότυπο!!!

Border διαφορετικού στυλ
Όπως έχουμε δει στα παραπάνω CSS κομμάτια κώδικα ορίζουμε ότι το border μας θέλουμε να είναι τύπου “solid“.Υπάρχουν και άλλοι τύποι όπως για παράδειγμα :dotted,double,dashed.Ας εφαρμόσουμε CSS σε μία div με id = “diffstyleBorder” και να δούμε ένα στιγμιότυπο!

Κώδικας:

#diffstyleBorder{

    width:300px;
    border-left:4px dotted #7C6BDC;
    border-bottom:5px double #804040;
    border-top:3px solid green;
    border-right: 7px dashed #FF8000;
}

Ας δούμε ένα στιγμιότυπο:

Είδατε λοιπόν πόσο εύκολο είναι να εφαρμόσουμε ένα border γύρω από τα html στοιχεία.Ας δούμε τώρα το δεύτερο και πολύ βασικό στοιχείο,το padding.
Το δεύτερο που θα δούμε είναι το “padding“..

Το padding είναι το περιθώριο που δίνουμε από τη μέσα μεριά..Έστω λοιπόν ότι έχουμε μία παράγραφο πλάτους 400px,με border και θέλουμε τα γράμματα να έχουν απόσταση 10px από όλα τα borders.Ας δω λίγο τον html κώδικα,ένα στιγμιότυπο πριν την εφαρμογή του padding και ένα στιγμιότυπο μετά την εφαρμογή του padding.

Κώδικας:

<p id="paddingParagraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam urna erat,
imperdiet eu eleifend et, porttitor eu tortor. Phasellus bibendum porta enim eu luctus.
Sed venenatis facilisis tellus, vel porta ligula feugiat ut. In eleifend, tellus ut adipiscing ullamcorper,
sapien diam tempor libero, id rutrum lectus velit eu purus. Quisque feugiat turpis sapien. Praesent malesuada
quam quis nisl dictum vel luctus erat tempor. Nunc ut lectus eget elit commodo porttitor. Aliquam luctus
turpis a nisi placerat mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Proin rutrum laoreet diam, vel vulputate mi rhoncus sit amet. Curabitur blandit rutrum auctor. In eros orci,
sollicitudin sit amet commodo sed, hendrerit semper est. Aliquam consequat arcu vitae elit vulputate viverra.
In ultricies accumsan velit, sed mollis ipsum hendrerit ac. Aenean enim justo, consequat egestas auctor id,
dignissim ut sem.
</p>

Ας δούμε τον CSS κώδικα στον οποίο θα ορίζουμε το border για την παράγραφό μας καθώς και το μήκος της:

Κώδικας:

#paddingParagraph{
    width:400px;
    border:1px solid blue;
}

Ας δούμε ένα στιγμιότυπο!!

Βλέπετε το μπλε border;Τώρα θα εφαρμόσω padding ώστε το περιεχόμενο της παραγράφου μου ,να απέχει 10pixels από όλα τα borders!Στη συνέχεια θα δω ένα στιγμιότυπο!

Κώδικας:

#paddingParagraph{
    width:400px;
    border:1px solid blue;
    padding:10px;
}

Ας δω ένα στιγμιότυπο!!

Βλέπετε πώς λειτουργεί το padding;Το περιεχόμενο της παραγράφου μου είναι 10px μακριά από όλα το borders!!
ΠΡΟΣΟΧΗ:Όταν εφαρμόζουμε padding σε ένα html στοιχείο,συμβαίνει το ίδιο όπως και με το border.Αυξάνεται το μέγεθος του στοιχείου.Στο παράδειγμα μας αυξήθηκε το μέγεθος του στοιχείου κατά 10px αριστερά ,δεξιά,πάνω και κάτω!!Αυτό είναι πολύ σημαντικό διότι εάν το ξεχάσουμε μπορεί να δημιουργήσουμε προβλήματα στην εμφάνιση του layout της ιστοσελίδας μας.Επίσης μπορούμε να εφαρμόσουμε padding σε μία μεριά,για παράδειγμα “padding-left”,σε δύο μεριές κλπ…!
Συντομογραφία για το padding
Εάν θέλουμε να εφαρμόσουμε padding αριστερά,δεξιά και κάτω μπορούμε να γράψουμε το εξής:

Κώδικας:

padding-left:10px;
padding-right:10px;
padding-bottom:5px;

To ίδιο ακριβώς αποτέλεσμα θα μας δώσει η παρακάτω εντολή:

Κώδικας:

/*Padding πάνω,δεξιά ,κάτω ,αριστερά.*/
padding:0 10px 5px 10px;

Ουσιαστικά δεν έχουμε να πούμε τίποτα περισσότερο για το padding.Ας δούμε το τελευταίο στοιχείο που απαρτίζει το box model το “margin“.

Το τρίτο που θα δούμε είναι το “margin“
Το margin είναι το περιθώριο που δίνουμε στο html στοιχείο μας από την έξω μεριά.Θα μπορούσαμε να πούμε ότι με το margin δίνουμε ένα περιθώριο από το border και προς τα έξω.Ας δούμε μία απλή εικόνα στην οποία θα εφαρμόζουμε ένα margin σε ένα html στοιχείο.

Βλέπετε την κόκκινη περιοχή έξω από το border μας;Αυτό ουσιαστικά είναι το margin το οποίο είναι σα να καθαρίζει την περιοχή γύρω από το border.Μέσα σε αυτή την κόκκινη περιοχή δεν μπορούμε να τοποθετήσουμε τίποτα.Το margin στην πραγματικότητα είναι διαφανές και δεν φαίνεται.Απλά στο σχέδιο μας το κάναμε κόκκινο ώστε να το βλέπουμε!Ας δούμε ένα απλό παράδειγμα με margin ώστε να γίνει πιο κατανοητό!!Θα έχουμε 2 divs με κάποιο περιεχόμενο.Θα εφαρμόσουμε σε αυτές δύο διαφορετικά CSS ένα με margin kai ένα χωρίς margin και θα δούμε τις διαφορές του πριν και του μετά.

Παράδειγμα με margin
Θα δημιουργήσουμε 2 divs.Μια με κόκκινο φόντο και μία με πράσινο φόντο.Ας δούμε το html καθώς και το CSS που θα εφαρμόσουμε.Στη συνέχεια θα δούμε ένα στιγμιότυπο.
O html κώδικας είναι ο εξής:

Κώδικας:

<!-- Δεν χρειάζεται οι divs να περιέχουν κάτι ,θα τις κάνουμε με CSS να μοιάζουν με κουτιά. -->
<div id="redDiv"></div>
<div id="greenDiv"></div>

O CSS κώδικας έχει ως εξής:

Κώδικας:

#redDiv{
/*Με το width και το height δημιουργούμε κουτί με πλάτος και ύψος.*/

    width:300px;
    height:100px;
    background: red;
}
#greenDiv{
    width:300px;
    height:100px;
    background: green;
}

Ας δούμε ένα στιγμιότυπο..

Αυτό που βλέπουμε είναι ότι έχουμε δυο divs ,η μία κάτω από την άλλη που μεταξύ τους δεν υπάρχει κάποιο κενό.Δηλαδή η μία είναι σαν να είναι η συνέχεια της άλλης.Αν θέλουμε να δημιουργήσουμε ένα κενό μεταξύ τους μπορούμε να εφαρμόσουμε στην κόκκινη div ένα “margin” προς τα κάτω ,5px για παράδειγμα και θα δούμε ότι μεταξύ τους υπάρχει κενό.Ας το κάνουμε αλλάζοντας το CSS για την κόκκινη div.

Κώδικας:

#redDiv{
    width:300px;
    height:100px;
    background: red;
    margin-bottom:5px;
}

Ας δούμε τώρα ένα στιγμιότυπο!!

Με το “margin-bottom:5px” κάνουμε το εξής: Ζητάμε στην κόκκινη div να υπάρχει περιθώριο από το κάτω border 5px γι αυτό και η επόμενη div αρχίζει 5px πιο κάτω.Το ίδιο ακριβώς αποτέλεσμα θα είχαμε εάν στην πράσινη div προσθέταμε την εντολή “margin-top:5px;“.Διαπιστώνουμε λοιπόν ότι μπορούμε να έχουμε κάποια html στοιχεία και εφαρμόζοντας margin να μπορούμε να τα μετακινούμε όλα μαζί.Το margin μπορεί να εφαρμοστεί από πάνω από κάτω από αριστερά και από δεξιά.

Συντομογραφία για το margin.

Έστω ότι έχω θέλω να εφαρμόσω 5px margin από πάνω,5px στα δεξιά,6px από κάτω και 10 στα αριστερά.Μπορώ να γράψω…

Κώδικας:

margin: 5px 5px 6px 10px;

Ας δούμε συνολικά το box model στα CSS.
Ας δούμε την παρακάτω εικόνα που περικλείει όσα είπαμε παραπάνω!!

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

Sign In

CSS tutorial για αρχάριους.Εισαγωγή και επεξήγηση id,class,border,margin,padding,box model

Recommended Posts

Anastasis 48

Share this post

Link to post

Share on other sites

Join the conversation

Browse

Activity