Προγραμματισμός Παγκόσμιου Ιστού

Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 5 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 27 Μαρτίου 2017

Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης CSS Ιεραρχία CSS Selectors Προτεραιότητα Κληρονομικότητα CSS Box Model Positioning Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 2

Εισαγωγή CSS σε HTML Εξωτερικό style sheet (χαμηλή προτεραιότητα) Χρήσιμα για πολλές σελίδες, έτσι αλλάζοντας το CSS αλλάζει ολόκληρο το web site ή για διαφορετικούς λόγους (screen, media, handheld, κλπ) Το CSS «φορτώνεται» με το <link> tag στο <head> της σελίδας <head> <link rel="stylesheet" href="/path/stylesheet.css" type="text/css" media="print"/> </head> Εσωτερικό style sheet - στο head (μεσαία προτεραιότητα) <head> <style> 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> 3

Παράδειγμα επικάλυψης CSS κανόνων <html><head> <link rel="stylesheet" type="text/css" href="demostyles.css"> <style > h3 {font-size: 25pt; font-style: italic} </style></head> <body> <h3>css tutorial</h3> <h3 style= "font-style: normal"> Applying CSS rules </h3> <h2>syntax</h2> <p class=p1>remember:</p> <p class=p2>inline rules prevail!</p> </body></html> Ενσωματωμένο στυλ Ένθετο στυλ Εξωτερικό αρχείο CSS κανόνων demostyles.css: h2 {text-decoration: underline;} h3 {font-family: serif; font-size: 130%; color: red;}.p1 {font-size: 11pt; margin-left: 100px;}.p2 {font-family: arial; font-type: bold;} 4

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 > Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 5

CSS IDs Είναι εφικτός και ο ορισμός styles για συγκεκριμένα elements με τη χρήση IDs (τα οποία πρέπει να είναι μοναδικά σε ένα HTML) Δεν επιτρέπεται σε περισσότερα από ένα html element να έχουν το ίδιο id Παράδειγμα Το style: #para1 {text-align:center;color:red;} Εφαρμόζεται στο element: <p id= para1 > Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 6

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

Μονάδες στα 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 Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 8

Γραμματοσειρές (1/2) HTML & CSS, Design and Build Websites, Jon Duckett Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 9

Γραμματοσειρές (2/2) HTML & CSS, Design and Build Websites, Jon Duckett Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 10

Fonts font-family: Μια λίστα με fonts για την περίπτωση όπου κάποιο font δεν είναι διαθέσιμο στο σύστημα του χρήστη π.χ. p {font-family:"times New Roman", Times, serif;} font-style: Το στυλ του font π.χ. p.normal {font-style:normal;} ή p.italic {font-style:italic;} font-size: Το μέγεθος του font. Μπορεί να πάρει και τιμές xx-small xx-large, smaller, larger π.χ. p {font-size:14px;} ή h1 {font-size:2.5em;} font-weight: Πόσο σκούρο είναι το font. Μπορεί να πάρει και τιμές 100 900, bolder, lighter π.χ. p.bold {font-weight:bold;} font-variant: Σε κάποιες γραμματοσειρές επιτρέπεται το small-caps π.χ. p.var {font-variant:small-caps;} Shortcut: font { font: style weight variant size font-family } π.χ. p {font: oblique bold small-caps 1.5em Verdana, Arial, sans-serif;} 11

Κείμενο text-align: Στοίχιση του κειμένου σε left, right, center, justify π.χ. p {text-align: justify;} text-transform: Μετατροπή του κειμένου σε uppercase, lowercase, capitalize π.χ. p.uppercase {text-transform:uppercase;} text-decoration: Παρουσίαση του κειμένου σε none, underline, overline, line-through π.χ. h2 {text-decoration:line-through;} letter-spacing, word-spacing: Αποστάσεις ανάμεσα στους χαρακτήρες και τις λέξεις αντίστοιχα text-indent: Διάστημα κειμένου από border π.χ. p#par1 { text-indent: 2em; } π.χ. p#par2 { text-indent: 25%; } π.χ. p#par3 { text-indent: -35px; } 12

Σύνδεσμοι Στα link μπορεί να αλλάζει η εμφάνιση των καταστάσεων που βρίσκονται a:link {color:#ff0000;} /* unvisited link */ a:visited {color:#00ff00;} /* visited link */ a:hover {color:#ff00ff;} /* mouse over link */ for rollover effects a:active {color:#0000ff;} /* selected link */ Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 13

Pseudo-elements Elements που παρέχουν συγκεκριμένη λειτουργία όπου εφαρμόζονται :first-line color, font, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height :first-letter Color, font, text-decoration, text-transform, vertical-align, text-transform, background, margin, padding, border, float, letter-spacing, word-spacing :first-child :lang() π.χ. p:first-letter {font-size: 300%; color: orange;} π.χ. a:hover {color: maroon; text-decoration: underline; background-color: #C4CEF8; } <a href="http://www.ds.unipi.gr">university of Piraeus, Department of Digital Systems</a> 14

Backgrounds background-color: Το χρώμα του background π.χ. body {background-color:#b0c4de;} background-image: Μια εικόνα σαν background που μάλιστα μπορεί και να επαναλαμβάνεται π.χ. body {background-image: url('gradient.png'); background-repeat: repeat-x;} background-position: Η θέση του background. Μπορεί να πάρει τιμές left, center, right, top, bottom, ποσοστά και τιμές σε pixels π.χ. { background-position: 200px 50px; } Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 15

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

CSS Selectors Selector Σημασία Παράδειγμα Universal Selector Όλα τα elements της σελίδας * {} Type Selector Συγκεκριμένα elements της σελίδας h1, h2, h3 {} Class Selector Όλα τα elements (ή τα elements τύπου) που έχουν το συγκεκριμένο class attribute.note {} p.note {} ID Selector Όλα τα elements που έχουν το συγκεκριμένο attribute #introduction {} Child Selector Descendant Selector Μόνο τα elements που είναι «απ ευθείας παιδιά» ενός άλλου element (σε πρώτο επίπεδο) Όλα τα elements συγκεκριμένου τύπου που είναι «απόγονοι» ενός άλλου element li>a {} p a {} Adjacent Sibling Selector Το πρώτο element που ακολουθεί ένα άλλο element h1+p {} General Sibling Selector Όλα τα elements συγκεκριμένου τύπου που ακολουθούν ένα άλλο element h1~p {} Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 18

Προτεραιότητα Εάν δύο selectors είναι ίδιοι, τότε εφαρμόζεται μόνο ο τελευταίος ( last one listed wins ) Εάν ένας selector είναι πιο συγκεκριμένος από κάποιον άλλο, τότε ο πιο συγκεκριμένος είναι αυτός που εφαρμόζεται π.χ. το h1 είναι πιο συγκεκριμένο από το * Εάν στο τέλος κάποιας ιδιότητας προσθέσουμε το!important, τότε η ιδιότητα αυτή θεωρείται πιο σημαντική από άλλους κανόνες που σχετίζονται με το συγκεκριμένο element. Cascading? Για την περίπτωση των conflicts! h1 {color: green!important;} <h1 style="color:yellow">cascading case</h1> Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 20

Κληρονομικότητα Οι περισσότερες από τις ιδιότητες που ορίζουμε σε γενικά elements, όπως το body, κληρονομούνται από όλα τα άλλα elements της σελίδας Εάν δηλώνεται font στο body δε χρειάζεται να οριστεί για τα p και h1 κτλ Με αυτό τον τρόπο αποφεύγουμε την επανάληψη κώδικα Με την τιμή inherit σε κάποια ιδιότητα, επιβάλλουμε να κληρονομήσει την τιμή της από τους προγόνους της <div class="page"> <h1>potatoes</h1> <p>there are dozens of different potato varieties.</p> <p>they are usually described as early, second early and maincrop potatoes.</p> </div> body {.page { font-family: Arial, Verdana, sans-serif; color: #665544; padding: 10px;} border: 1px solid #665544; background-color: #efefef; padding: inherit;} 21

CSS Box Model Αν θεωρήσουμε κάθε ένα html element σαν ένα κουτί (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!! Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 23

Μέγεθος width, height: Tο μέγεθος της συγκεκριμένης περιοχής π.χ. div.mydiv {height: 300px; width: 50%;} min-width, min-height: Tο ελάχιστο μέγεθος της συγκεκριμένης περιοχής π.χ. div.mydiv {min-height: 300px; min-width: 300px;} max-width, max-height: Tο μέγιστο μέγεθος της συγκεκριμένης περιοχής π.χ. div.mydiv {max-height: 300px; max-width: 300px;} Overflow: Η ιδιότητα αυτή καθορίζει πως θα εμφανίζεται το κείμενο αν δε χωράει σε συγκεκριμένη περιοχή visible (default), hidden, scroll Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 24

Borders border-style: Δηλώνει τον τύπο του border. Μπορούν να δηλώνονται μεγέθη για κάθε πλευρά του border (border-top-style, border-right-style, border-bottom-style, border-left-style) π.χ. div.mydiv {border-style:solid;} border-width: Δηλώνει το μέγεθος του border. Μπορούν να δηλώνονται μεγέθη για κάθε πλευρά του border (border-top-width, border-rightwidth, border-bottom-width, border-left-width). Εκτός από απόλυτα μεγέθη μπορεί να πάρει τιμές: thin medium thick π.χ. div.mydiv {border-width:5px;} border-color: Δηλώνει το χρώμα του border π.χ. div.mydiv {border-color:red;} Οι ιδιότητες δηλώνονται είτε ξεχωριστά για κάθε πλευρά ή όλες μαζί π.χ. div.mydiv {border-left-color:red; border-right-style:dotted;} π.χ. div.mydiv {border:5px solid red;} Στα tables, η ιδιότητα border-collapse:collapse; ορίζει ότι τα borders των κελιών ταυτίζονται με τα borders των διπλανών τους Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 25

border-style p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;} Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 26

Padding Η ιδιότητα αυτή καθορίζει την απόσταση του περιεχομένου μιας περιοχής από το border της Ομοίως με το border μπορούν να ορίζονται με διαφορετικές αποστάσεις για κάθε πλευρά ή όλες μαζί padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; padding:25px 50px; top/bottom = 25px, right/left = 50px padding:25px 50px 75px; top = 25px, right/left = 50px, bottom = 75px padding:25px 50px 75px 100px; top = 25px, right = 50px, bottom = 75px, left = 100px Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 27

Margin Η ιδιότητα αυτή καθορίζει το κενό γύρω από την περιοχή Ομοίως με το border και το padding μπορούν να ορίζονται διαφορετικές αποστάσεις για κάθε πλευρά ή όλες μαζί margin-top:25px; margin-bottom:25px; margin-right:50px; margin-left:50px; margin:25px 50px; top/bottom = 25px, right/left = 50px margin:25px 50px 75px; top = 25px, right/left = 50px, bottom = 75px margin:25px 50px 75px 100px; Σημειώσεις: top = 25px, right = 50px, bottom = 75px, left = 100px Τόσο για το padding όσο και για το margin είναι προτιμότερο να χρησιμοποιούνται τιμές «em» ώστε το μέγεθος να αλλάζει αντίστοιχα με το κείμενο Προσοχή τα margins μπορεί να συμπτυχθούν! Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 28

Σχεδιασμός διεπαφών Βασικές προσεγγίσεις Liquid layouts Fixed layouts Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 30

Παράδειγμα Liquid Layout <div id="header"> Masthead and headline </div> <div id="main"> Main article... </div> <div id="extras"> List of links and news </div> <div id="footer"> Copyright information </div> #header { background: #CCC; padding: 15px; } #main { background-color: aqua; float: left; /* floats the whole main article to the left */ width: 60%; margin-right: 5%; /* adds space between columns */ margin-left: 5%; } #extras { margin-right: 5%} /* space on the right of the side column */ #footer { clear: left; /* starts the footer below the floated content */ padding: 15px; background: #CCC; } 31

Παράδειγμα Fixed Layout <div id="container"> <div id="header"> Masthead and headline </div> <div id="links"> List of links </div> <div id="main"> Main article... </div> <div id="news"> News and announcements... </div> <div id="footer"> Copyright information </div> </div> #container { width: 750px; border: solid 1px; } #header { background: #CCC; padding: 15px; } #links { background-color: fuchsia; float: left; width: 175px; } #main { background-color: aqua; float: left; width: 400px; } #news { background-color: green; float: left; width: 175px; } 32

Position position:static: Η standard επιλογή των browsers όπου το περιεχόμενο ακολουθεί το ένα το άλλο position:relative: Τοποθετεί το περιεχόμενο σε σχέση με εκεί που θα έπρεπε με βάση την static επιλογή. Το αρχικό σημείο παραμένει κενό π.χ. div.content {position: relative; top:10px; left:100px; background-color: fuchsia;} position:absolute: Το περιεχόμενο δεν ακολουθεί τη ροή και δεν επηρεάζει τα άλλα στοιχεία της σελίδας π.χ. h1 { position: absolute; top: 0px; left: 500px;} position:fixed: Το περιεχόμενο τοποθετείται σε συγκεκριμένο σημείο του παραθύρου π.χ. h1 { position:fixed ; top: 0px; left: 0px;} Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 33

Relative βάσει containing block Όταν ένα element βρίσκεται «μέσα» σε κάποιο άλλο που έχει το position του relative, absolute, ή fixed, το element θα τοποθετηθεί με βάση το συγκεκριμένο element στο οποίο βρίσκεται p { } img { } position: relative; background-color: green; border: 2px solid black; position: absolute; bottom: 0%; right: 0%; Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 34

Float To float χρησιμοποιείται για να τοποθετούμε περιεχόμενο δεξιά (float:right) ή αριστερά (float:left) στη σελίδα μας και το υπόλοιπο περιεχόμενο να το «περικυκλώνει» Η επιλογή clear σταματά τα element να συνεχίσουν γύρω από ένα floating element, όπως για παράδειγμα όταν θέλω να έχω μια νέα γραμμή p#end {clear: left;} <p id="end"> </p> Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 35

Floating inline elements Υπάρχει η δυνατότητα ένα element να τοποθετείται παράλληλα με κάποιο άλλο inline element <span class="disclaimer">probably a disclaimer in the page.</span> span.disclaimer { } float: right; margin: 10px; width: 200px; color: white; background-color: red; padding: 4px; Σημείωση: Σε κείμενο πρέπει πάντα να δίνεται width Περιορίζεται στη συγκεκριμένη περιοχή Δε γίνεται collapse με άλλα elements Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 36

Floating block elements Η ιδιότητα των inline elements μπορεί να χρησιμοποιηθεί και για block elements <p id="float">this will be floating text...</p> #float { float: left; width: 200px; margin-top: 0px; background: #A5D3DE; } Σημείωση: Πρέπει πάντα να δίνεται width σε κείμενο Περιορίζεται στη συγκεκριμένη περιοχή Αυτός είναι ο σκοπός του floating Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 37

Cursor Μπορούμε να αλλάζουμε δυναμικά την εμφάνιση του cursor μέσα από το css π.χ. a{cursor: move;} Επιλογές auto crosshair default pointer move text wait help url("cursor.gif") Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 38

Reset css Οι διάφοροι browsers έχουν διαφορετικά αρχικά styles με αποτέλεσμα οι html σελίδες να εμφανίζονται ανομοιόμορφα Για να αντιμετωπιστεί αυτό το πρόβλημα έχουν δημιουργηθεί css styles που δημιουργούν ένα ομοιογενές περιβάλλον για την «υλοποίηση» συγκεκριμένων style Παραδείγματα: Eric Meyer s Reset CSS 2.0 Yahoo! (YUI 3) Reset CSS Πλήρης λίστα: http://www.cssreset.com/ Προγραμματισμός Παγκόσμιου Ιστού, 5η Διάλεξη 39