1 / 13

CSS Cascading Style Sheets

CSS Cascading Style Sheets. Θ. Βαρβαρίγου Καθηγ. ΕΜΠ Τηλ 210 - 772 2484 email: dora@telecom.ntua.gr. CSS. Cascading Style Sheets Τα style καθορίζουν πως τα στοιχεία της HTML θα παρουσιάζονται.

audi
Download Presentation

CSS Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSSCascading Style Sheets • Θ. Βαρβαρίγου • Καθηγ. ΕΜΠ • Τηλ 210 - 772 2484 • email: dora@telecom.ntua.gr

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

  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} ομαδοποίηση στοιχείων. Δικτυακός Προγραμματισμός

  4. Εισαγωγή CSS στην HTML • Υπάρχουν 3 τρόποι: • Εξωτερικό style sheet (χαμηλή προτεραιότητα) • Χρήσιμα για πολλές σελίδες, έτσι αλλάζοντας το CSS αλλάζει ολόκληρο το website. • Το CSS «φορτώνεται» με το <link> tag στο <head> της σελίδας <head> <link rel="stylesheet" type="text/css" href="mystyle.css"/> </head> • Εσωτερικό style sheet - στο head(μεσαία προτεραιότητα) <head> <style type="text/css“> h1 {color:black} p {margin-left:20px} body {background-image:url("images/back40.gif")} </style> </head> • Inline style(υψηλή προτεραιότητα) <p style="color:black;margin-left:20px">This is a paragraph.</p> Δικτυακός Προγραμματισμός

  5. Παράδειγμα <html> <head> <style type="text/css"> body { background-color:green; } h1 {color:orange; text-align:center;} p {color:blue;font-size:20px;} </style> </head> <body> <h1>CSS example!</h1> <p>This is a paragraph.</p> </body> </html> Δικτυακός Προγραμματισμός

  6. Κατηγορίες Ιδιοτήτων CSS • Background • Border and outline • Dimension • Font • List • Margin • Padding • Positioning • Table • Text Αναλυτικά εδώ: http://www.w3schools.com/css/css_reference_atoz.asp Δικτυακός Προγραμματισμός

  7. CSS Classes • Στα CSS μπορούμε να ορίζουμε classes • Γενικά για όλο το HTML CSS: .center {text-align:center} HTML: <div class=“center”> … <p class=“center>… • Για συγκεκριμένα elements: CSS: p.under {text-decoration:underline} p.center {text-align:center} HTML: <p class=“center under”>… Δικτυακός Προγραμματισμός

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

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

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

  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 Δικτυακός Προγραμματισμός

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

  13. Ερωτήσεις Δικτυακός Προγραμματισμός

More Related