Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

Η παρουσίαση φορτώνεται. Παρακαλείστε να περιμένετε

CSS Cascading Style Sheets Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ 210 - 772 2484

Παρόμοιες παρουσιάσεις


Παρουσίαση με θέμα: "CSS Cascading Style Sheets Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ 210 - 772 2484"— Μεταγράφημα παρουσίασης:

1 CSS Cascading Style Sheets Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ

2 CSS Cascading Style Sheets Τα style καθορίζουν πως τα στοιχεία της HTML θα παρουσιάζονται. Αρχικά η HTML δεν περιελάμβανε στοιχεία για την εμφάνιση / παρουσίαση της πληροφορίας αλλά μόνο για τη δομή. Μόλις η HTML εμπλουτίστηκε με elements / attributes εμφάνισης η διαδικασία του προγραμματισμού έγινε αρκετά πολύπλοκή –Τα CSS λύνουν το πρόβλημα αυτό και επιταχύνουν / διευκολύνουν τον προγραμματισμό σελίδων. 2/3/2009Δικτυακός Προγραμματισμός2

3 Σύνταξη CSS Η σύνταξη CSS αποτελείται από 3 τμήματα: selector, property και value: –selector {property:value} Ο selector είναι το element/tag που επιθυμούμε να ορίσουμε, το property είναι η παράμετρος που θέλουμε να αλλάξουμε και τέλος, το value η τιμή της. Παραδείγματα: –body {background-color:black} –p {font-family:"sans serif"} "" εάν έχουμε περισσότερες λέξεις. –p {text-align:center;color:red} ; εάν έχουμε περισσότερες παραμέτρους. –h1,h2,h3,h4,h5,h6 {color:green} ομαδοποίηση στοιχείων. 2/3/2009Δικτυακός Προγραμματισμός3

4 Εισαγωγή CSS στην HTML Υπάρχουν 3 τρόποι: –Εξωτερικό style sheet (χαμηλή προτεραιότητα) Χρήσιμα για πολλές σελίδες, έτσι αλλάζοντας το CSS αλλάζει ολόκληρο το web site. Το CSS «φορτώνεται» με το tag στο της σελίδας –Εσωτερικό style sheet - στο head (μεσαία προτεραιότητα) h1 {color:black} p {margin-left:20px} body {background-image:url("images/back40.gif")} –Inline style (υψηλή προτεραιότητα) This is a paragraph. 2/3/2009Δικτυακός Προγραμματισμός4

5 Παράδειγμα body { background- color:green; } h1 {color:orange; text- align:center;} p {color:blue;font-size:20px;} CSS example! This is a paragraph. 2/3/2009Δικτυακός Προγραμματισμός5

6 Κατηγορίες Ιδιοτήτων CSS Background Border and outline Dimension Font List Margin Padding Positioning Table Text Αναλυτικά εδώ: 2/3/2009Δικτυακός Προγραμματισμός6

7 CSS Classes Στα CSS μπορούμε να ορίζουμε classes –Γενικά για όλο το HTML CSS:.center {text-align:center} HTML: … –Για συγκεκριμένα elements: CSS: p.under {text-decoration:underline} p.center {text-align:center} HTML: … 2/3/2009Δικτυακός Προγραμματισμός7

8 CSS IDs Μπορούμε να ορίσουμε styles για συγκεκριμένα elements με τη χρήση IDs τα οποία πρέπει να είναι μοναδικά σε ένα HTML. –Δεν επιτρέπεται σε περισσότερα από ένα html element να έχουν το ίδιο id. Παράδειγμα: –Το style: #para1 {text-align:center;color:red;} –Εφαρμόζεται στο element: … Μπορούμε να συνδυάζουμε classes και IDs! 2/3/2009Δικτυακός Προγραμματισμός8

9 Ιεραρχία στα CSS Μπορούμε να δημιουργήσουμε πιο πολύπλοκα CSS που να αναφέρονται σε συγκεκριμένα στοιχεία της σελίδας. Παράδειγμα: –.aclass h3 {…} Aφορά όλα τα elements κάτω από element με class=“aclass”. –table.aclass tr {magrin:20px;} Aφορά όλα τα elements κάτω από element με class=“aclass”. 2/3/2009Δικτυακός Προγραμματισμός9

10 Παράδειγμα p { color:blue; text-align:center; }.marked { background-color:blue; }.marked p { color:white; } This is a blue, center-aligned paragraph. This p element should not be blue. p elements inside a "marked" classed element keeps the alignment style, but has a different text color. 2/3/2009Δικτυακός Προγραμματισμός10

11 Μονάδες στα CSS Measurement Values (τα πιο σημαντικά) % px – pixel in – inch cm – centimeters mm – milimeters em – 1em ισοδυναμεί με ένα font size Color Values όνομα : π.χ. white, blue, green κτλ. rgb(x,x,x) : π.χ. rgb(255,0,0) HEX : π.χ. #ff0000 2/3/2009Δικτυακός Προγραμματισμός11

12 To CSS Box Model Αν θεωρήσουμε κάθε ένα html element σαν ένα κουτί (box) τότε στο css μπορούμε να ορίζουμε αντίστοιχα τις ακόλουθες παραμέτρους: –Margin : Η περιοχή γύρω από το border. Είναι διαφανή / transparent. –Border : Το πλαίσιο γύρω από το padding και το content. –Padding : Η περιοχή γύρω από το content. Έχει το χρώμα του background. –Content : Εδώ εμφανίζεται το κείμενο και οι εικόνες. 2/3/2009Δικτυακός Προγραμματισμός12 Παράδειγμα: width:250px; padding:10px; border:5px solid gray; margin:10px; Total width= 300px!!

13 Ερωτήσεις 2/3/2009Δικτυακός Προγραμματισμός13


Κατέβασμα ppt "CSS Cascading Style Sheets Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ 210 - 772 2484"

Παρόμοιες παρουσιάσεις


Διαφημίσεις Google