Αναζήτηση:

Type: Posts; Χρήστης: akisplace; Λέξη(εις) Κλειδιά:

Αναζήτηση: Η αναζήτηση ολοκληρώθηκε σε 1,86 δευτερόλεπτα

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

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

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


    Τα περιεχομενα της παραγραφου πανε εδω..



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

    Heading 1


    Heading 2


    Heading 3


    κλπ.

    Ολα καλα μεχρι εδω.Τι γινοταν ομως οταν χρειαζοταν να δωσουν καποιο στυλ σε ενα html στοιχειο απο τα παραπανω;Για παραδειγμα τι γινοταν εαν ηθελαν να εχουν ενα τιτλο με εντονα (bold);Για να λυθει αυτο εγραφαν:

    This is heading 1



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

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

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


    ....

    ...


    Και οτιδηποτε εχετε γραψει στο αρχειο αυτο εφαρμοζεται στα στην ιστοσελιδα σας.
    Συνταξη CSS.
    Αφου ειδαμε και πως καλουμε σε ενα html αρχειο τα CSS μπορουμε να δουμε λιγο τη συνταξη.

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

    Η βασικη συνταξη των CSS κανονων ειναι η εξης:
    http://akisplace.com/wp-content/themes/newscast/tutpics/cssb1.png

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

    Οσον αφορα τωρα τις ιδιοτητες και τις τιμες που παιρνουν αυτες η αληθεια ειναι οτι υπαρχουν παρα πολλες ιδιοτητες και δεν γινεται να τις αναφερουμε ολες..Στην εικονα βλεπουμε οτι η παραγραφοι μας θα εχουν χρωμα γραμματοσειρας “#dddddd” και η γραμματοσειρα θα ειναι της οικογενειας “Kalinga”.Ας το δουμε σε παραδειγμα.
    Πινακας με τις CSS ιδιοτητες:
    Δειτε εδω ενα πινακα με τις CSS properties

    Πρωτο Παραδειγμα CSS
    Θα δημιουργησουμε δυο παραγραφους και εν συνεχεια θα εφαρμοσουμε css πανω σε αυτες.O 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.



    Ας το δουμε λιγο χωρις css.

    74867
    http://akisplace.com/wp-content/themes/newscast/tutpics/cssb3.png


    Τωρα θα εφαρμοσουμε CSS.Στο αρχειο “styles.css” γραφουμε:

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

    Εχουμε γραψει και σχολια στον κωδικα μας.Ας τρεξουμε λιγο τη σελιδα μας..Θα δουμε στον browser το εξης:

    74870
    http://akisplace.com/wp-content/themes/newscast/tutpics/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;
    }


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

    74869
    http://akisplace.com/wp-content/themes/newscast/tutpics/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;
    }

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

    74871
    http://akisplace.com/wp-content/themes/newscast/tutpics/cssb5.png

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

    Τι ειναι το box model στα CSS και γιατι πρεπει να το ξερω;;
    Ειναι πολυ σημαντικο να γνωριζετε οτι στα CSS ολα τα html στοιχεια θεωρουνται σαν να ειναι τετραγωνα κουτια.Δηλαδη μια εικονα,μια παραγραφος, μια ενοτητα(div) θεωρουνται οτι εχουν σχημα κουτιου.Ας δουμε μια εικονα:
    http://akisplace.com/wp-content/themes/newscast/tutpics/cssp1.png

    Στην παραπανω εικονα διαπιστωνουμε και οπτικα αυτο που ειπαμε παραπανω.Βλεπουμε οτι εχουμε μια 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 που θα εφαρμοσουμε.




    Με περικυκλωνει ενα μαυρο πλαισιο!



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


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


    Ας δουμε ενα στιγμιοτυπο:
    http://akisplace.com/wp-content/themes/newscast/tutpics/cssp2.png

    Βλεπετε που το κειμενο μας περικυκλωνεται απο ενα μαυρο οριο;;;Αυτο ουσιαστικα ειναι το 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;
    }


    Ας δουμε ενα στιγμιοτυπο!!!
    http://akisplace.com/wp-content/themes/newscast/tutpics/cssp3.png

    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;
    }

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

    http://akisplace.com/wp-content/themes/newscast/tutpics/cssp4.png

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

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


    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.




    Ας δουμε τον CSS κωδικα στον οποιο θα οριζουμε το border για την παραγραφο μας καθως και το μηκος της:

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


    Ας δουμε ενα στιγμιοτυπο!!
    http://akisplace.com/wp-content/themes/newscast/tutpics/cssp5.png

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

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


    Ας δω ενα στιγμιοτυπο!!
    http://akisplace.com/wp-content/themes/newscast/tutpics/cssp6.png

    Βλεπετε πως λειτουργει το 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 στοιχειο.
    http://akisplace.com/wp-content/themes/newscast/tutpics/cssp7.png

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

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






    O CSS κωδικας εχει ως εξης:
    #redDiv{
    /*Με το width και το height δημιουργουμε κουτι με πλατος και υψος.*/

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


    Ας δουμε ενα στιγμιοτυπο..
    http://akisplace.com/wp-content/themes/newscast/tutpics/cssp8.png

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

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


    Ας δουμε τωρα ενα στιγμιοτυπο!!
    http://akisplace.com/wp-content/themes/newscast/tutpics/cssp9.png

    Με το “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.
    Ας δουμε την παρακατω εικονα που περικλειει οσα ειπαμε παραπανω!!
    http://akisplace.com/wp-content/themes/newscast/tutpics/cssp10.png

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

    πηγη:akisplace.com
  2. Μηνύματα
    152
    Εμφανίσεις
    10.112

    Καλησπέρα παιδιά και από μένα.

    Καλησπερα παιδια και απο μενα.Ονομαζομαι Αρχιμηδης και ειμαι νεο μελος.Χαιρετω!:):)
Εμφάνιση 1-2 από 2