Στυλ με συνέπεια. Cascading Style Sheets (CSS) Ποιόν σκοπό εξυπηρετούν ? 4 Τα "Στυλιστικά Φύλλα" σκοπό έχουν να επιδρούν στην εμφάνιση των σελίδων με.

Παρουσίαση με θέμα: "Στυλ με συνέπεια. Cascading Style Sheets (CSS) Ποιόν σκοπό εξυπηρετούν ? 4 Τα "Στυλιστικά Φύλλα" σκοπό έχουν να επιδρούν στην εμφάνιση των σελίδων με."— Μεταγράφημα παρουσίασης:

1 Στυλ με συνέπεια

2 Cascading Style Sheets (CSS) Ποιόν σκοπό εξυπηρετούν ? 4 Τα "Στυλιστικά Φύλλα" σκοπό έχουν να επιδρούν στην εμφάνιση των σελίδων με ένα συνεπή, εύκολο και ολοκληρωμένο τρόπο. 4 Διευκολύνουν το συγγραφικό έργο. 4 Συντελούν στην συστηματική τήρηση κανόνων αισθητικής ομοιομορφίας. 4 Επιπλέον προσθέτουν δυνατότητες διαμόρφωσης των ετικετών πέραν αυτών της HTML

3 Υποστήριξη 4 Firefox 4 Microsoft Internet Explorer 4 Chrome 4 Opera 4 Amaya 4 Safari... και συνεχώς η λίστα αυξάνει.

4 Γενική εμφάνιση Η εμφάνιση ενός συνόλου εντολών διαμόρφωσης δίδεται ως παράδειγμα στην επόμενη διαφάνεια. Αν και αρχικά φαίνεται πολύπλοκη, στην ουσία είναι απλή.

5 * {margin:0; padding:0;} body#BST{background-image: url("IMAGES/yellow_paper.gif"); border: none;max-width:1097px; padding: 3px;} h2#CEN {border: none; text-align: center; width: 280px; height: 130px; float:left; padding:20px 0 0 0; font-size: 16pt; } img#LS {border: none; float:left;} img#RS {border: none; float:right;} div#TOP {border: none;background-image: url("IMAGES/stone.gif"); height:150px;} div#CL {clear: both; background-color:#10CC10;} span#BCI{color:blue;font-style: italic;}.TAB{background-color: #10CC10; display:inline; margin-right: 10px; font-size: 12pt;color: #FFFFFF; font-weight: bold; font-face: Arial, sans-serif;} A:link {text-decoration: none; color: #FFFFFF;} A:visited {text-decoration: none; color: #00FFFF;} A:hover{text-decoration: none; color: #FF00FF;} A:active {text-decoration: none; color: #00FF00;}

6 Εισαγωγικά Παραδείγματα CSS Example H1 {font-size: 32pt; color: red} H2 {font-size: 24pt; color: blue} Η ετικέτα … Τοποθετείται μεταξύ …

7 Επεξηγήσεις vΗ ετικέτα επιτρέπει την διαμόρφωση των παραμέτρων των ετικετών της HTML. vH1 {font-size: 32pt; color: red} Καθορίζει ότι η ετικέτα θα χρησιμοποιεί γραμματοσειρά μεγέθους 32 στιγμών και χρώματος κόκκινου. vH2 {font-size: 24pt; color: blue} Αντίστοιχα για την ετικέτα

8 Στυλιστική Σύνταξη TAG { Ιδιότητα_1: τιμή; Ιδιότητα_2: τιμή; … } Όπου TAG οποιοδήποτε όνομα HTML ετικέτας, πχ : vΗ1 vBODY vP Απομένει να καθοριστούν οι ιδιότητες και οι αντίστοιχες τιμές.

9 Παραδείγματα Ιδιοτήτων … P { text-indent: 3em ; color: red; font-size: 18pt } vΚαθορίζει ότι για την παράγραφο ( … ), η εσοχή θα είναι 3 φορές το μέγεθος της γραμματοσειράς. vΤο χρώμα της γραμματοσειράς κόκκινο. vΤο μέγεθος της γραμματοσειράς 18 στιγμών.

10 Κατηγορίες Είναι δυνατόν να δημιουργήσουμε διάφορες κατηγορίες διαμόρφωσης για την ίδια ετικέτα. Δηλαδή η ίδια ετικέτα μπορεί να έχει περισσότερα του ενός στυλ. Παράδειγμα: 4 H1.norm { color: #0000FF; font-size: 24pt } 4 H1.enh { color: #FF2288; font-size: 32pt } Classes

11 Στο παράδειγμα κατασκευάστηκαν δύο κατηγορίες για την ετικέτα Η1. v norm v enh Xρησιμοποιούνται ως εξής: Εισαγωγή ΚΕΦΑΛΑΙΟ VI Η και η

12 4 Οι κατηγορίες μπορούν να ορίζονται και ξεχωριστά, χωρίς την παρουσία κάποιας ετικέτας HTML. Πχ:.norm { color: #0000FF; font-size: 24pt }.enh { color: #FF2288; font-size: 32pt } Χρησιμοποιούνται δε ως εξής: Εισαγωγή ΚΕΦΑΛΑΙΟ VI

13 Ένας εναλλακτικός τρόπος για τον καθορισμό του στυλ είναι ο ID επιλογέας (ID selector). v #pib {color: black; font-size: 40pt } Χρησιμοποιείται δε ως: v Εισαγωγή Προσοχή !!! Ο κάθε ID επιλογέας μπορεί να καθορίζει μια και μόνο ετικέτα, ενώ μια κατηγορία μπορεί να εφαρμόζεται σε πολλές ετικέτες.

14 Ετικέτες σε συνάφεια Contextual selectors Παράδειγμα: P EM { background: yellow } Το παραπάνω στυλ ερμηνεύεται ως εξής: Κείμενο που είναι εντός και των δύο ετικετών: … κείμενο … Θα έχει κίτρινο φόντο. Προσοχή: Όχι κόμμα !!!

15 Παράδειγμα P EM { background: yellow } Παράδειγμα This is an emphasized piece of text and it is treated specially Isn't it great ? INDEED !!!

16 Παράδειγμα This is an emphasized piece of text and it is treated specially Isn't it great ? INDEED !!!Εμφάνιση

17 Ομαδοποίηση Είναι δυνατόν να ορίσει κανείς κοινές ιδιότητες για μια ομάδα ετικετών. Π.χ: H1, H2, H3 {color: red; font-family:sans-serif} font-family:sans-serif} Grouping Ο παραπάνω κανόνας επιβάλει ότι για τις ετικέτες, και το χρώμα θα είναι κόκκινο και η γραμματοσειρά τύπου sans-serif. Προσοχή στα κόμματα

18 Ψευδοκατηγορίες 4 A:link {color: red} 4 A:visited {color: green; font-size: 85% } 4 A:hover {color: black} 4 A:active { color: blue; font-size: 125% } Επηρεάζουν τους δεσμούς ως: 4 Οι αχρησιμοποίητοι, κόκκινοι 4 Οι κάτω από το ποντίκι, μαύροι 4 Οι χρησιμοποιημένοι, πράσινοι, μεγέθους 85% 4 Οι ενεργοί μπλε, μεγέθους 125% Pseudo-classes Anchor pseudo-classes

19 Εξωτερικά CSS Οι δηλώσεις των CSS μπορεί να είναι αποθηκευμένες σε ένα αρχείο και να καλούνται από την HTML μέσω της ετικέτας. Έστω ότι το αρχείο: mystyles.css, περιέχει τις δηλώσεις: body {color: #0000FF; font-family: arial;} h1 {font-style: oblique; font-size: 32pt; color: red} p {font-family: serif; font-size: 24pt }

20 Εξωτερικά CSS: Εξωτερικά CSS: Εξωτερικά CSS <link href="mystyles.css" type="text/css" rel="stylesheet"> Relativity The principle of relativity is relative and cannot be made absolute This is very interesting Καθορισμός του αρχείου Τύπος αρχείου Χρήση του αρχείου ως:

21

22 Ιδιότητες 4 Font 4 Color & Background 4 Text 4 Box Ορίζονται ιδιότητες σχετικά με τις παρακάτω έννοιες

23 FONT 4 Font-Family 4 Font-Style 4 Font-Variant 4 Font-Weight 4 Font-Size 4 Line-Height 4 Font

24 Font-Family Font-family: Name1, Name2, …, Generic1, Generic2, … P {Font-Family: Arial, Times, serif} Name1, Name2 είναι ονόματα γραμματοσειρών Generic1, … είναι κατηγορίες γραμματοσειρών Δυνατές τιμές για τα Generic1, … είναι : serifTimes sans-serif Arial cursive Zapf-Chancery fantasy Impact monospace Courier ΚατηγορίεςΠαραδείγματα serifTimes sans-serif Arial cursive Zapf-Chancery fantasy Impact monospace Courier ΠαραδείγματαΚατηγορίες serifTimes sans-serif Arial cursive Zapf-Chancery fantasy Impact monospace Courier Παραδείγματα

25 Font-Style 4 Font-Style: XXX Όπου: XXX μπορεί να είναι: 4 normal 4 italic 4 oblique H1 { font-style: oblique } P { font-style: normal }

26 Font-Variant 4 Font-Variant: XXX Όπου: XXX μπορεί να είναι: 4 normal 4 small-caps H1 { font-variant:small-caps }

27 Font-Weight 4 Font-Weight: XXX Όπου: XXX μπορεί να είναι: 4 normal 4 bold bolder lighter 4 100 200 … 900 H1 { font-weight: 800 } P { font-weight: 300 }

28 Font-Size 4 Font-Size: XXX Όπου: XXX μπορεί να είναι: 4 xx-small x-small small medium large x- large xx-large 4 larger smaller 4 Aριθμός σε pt ή in (points/inches) 4 Αριθμός σε % P { font-size: 90% }

29 Line-Height 4 line-height: XXX Όπου: XXX μπορεί να είναι: 4 Αριθμός 4 Αριθμός ακολουθούμενος από μονάδα μέτρησης 4 Αριθμός % Πολλαπλασιάζει το τρέχον μέγεθος της γραμματοσειράς Ποσοστό του τρέχοντος μεγέθους της γραμματοσειράς πχ: 3px ή 12pt ή 0.5cm p {line-height: 10px; font-family:Times;}

30 Font Font (Συνοπτική δήλωση) 4 Font: XXX Όπου: XXX μπορεί να είναι: 4 font-style, font-variant, font-weight 4 font-size/line-height P { font: italic bold 12pt/14pt Times, serif } P { font-style: italic; font-weight: bold; font-size:12pt; line-height:14pt; font-family:Times, serif ;} Ισοδύναμες δηλώσεις

31 Χρώματα: RGB

32 Χρώματα: CMY

33 Σύνθεση χρωμάτων

34 Χρώματα: HSL (ή HBS) H=Hue S= Saturation B= Brightness L= Lightness

35 CMY (Κυανό, Μωβ, Κίτρινο)

36 HSL σε RGB αντιστοιχία

37 Διαφάνεια και Αδιαφάνεια 4 Μοντέλο RGBA –Προσθέτει ως τέταρτη παράμετρο το ποσοστό αδιαφάνειας (r,g,b,a) 0<a<1 4 Μοντέλο HLSA –Προσθέτει ως τέταρτη παράμετρο το ποσοστό διαφάνειας (h,s,l,a) 0<a<1 background-color: rgb(0,0,255,0.2) color: hsla(0,100%,100%,0.5) color: hsla(120,50%,80%,0.7)

38 Background 4 background-color 4 background-image 4 background-repeat 4 background-attachment 4 background-position

39 Background color background-color: Blue background-color: #0000ff background-color: rgb(0,0,100) Καθορίζει το χρώμα του υποβάθρου p { background-color: Blue; } Το φόντο της παραγράφου έχει χρώμα: Blue

40 Background-image background-image: url("img_tree.gif") Το δενδράκι επαναλαμβάνεται οριζόντια και κατακόρυφα και έτσι δημιουργείται το φόντο.

41 background-repeat background-repeat: XXX Το XXX μπορεί να είναι: 4 repeat (προεπιλογή) 4 no-repeat Χωρίς επανάληψη 4 repeat-x Οριζόντια επανάληψη 4 repeat-y Κατακόρυφη επανάληψη

42 background-attachment background-attachment: XXX Το XXX μπορεί να είναι: 1. fixed 2. scroll (προεπιλογή) Αντίστοιχα το γραφικό παραμένει σταθερό ή “ανεβοκατεβαίνει” με την σελίδα.

43 background-position background-position: XXX Το XXX μπορεί να είναι: left top left center left bottom right top right center right bottom center top center center center bottom X% Y% Συντεταγμένες σε % X Y Απόλυτες Συντεταγμένες Εάν μια λέξη παραλειφθεί, εκλαμβάνεται ως: center

44 Εμφάνιση Κειμένου (Text) Οι δηλώσεις: 4 P:first-line {font-variant: small-caps; font-weight: bold} 4 P:first-letter {font-size: 300% ; float: left} Επηρεάζουν αντίστοιχα την πρώτη γραμμή και το πρώτο γράμμα μιας παραγράφου. Εμφάνιση Κειμένου (Text) Πρώτη Γραμμή - Πρώτο γράμμα

45 Text Color color: Blue color: #0000ff color: rgb(0,0,255) Καθορισμός με όνομα Καθορισμός στο δεκαεξαδικό Καθορισμός στο δεκαδικό Καθορίζει το χρώμα για το κείμενο p {color: #ff9999;}

46 Text Alignment text-align: XXX Όπου XXX παίρνει τις τιμές: 1. left 2. center 3. right 4. justify Στοίχιση αριστερά (προεπιλογή) Στοίχιση στο κέντρο Στοίχιση δεξιά Στοίχιση ισορροπημένη h1 {text-align: center;}

47 text-decoration text-decoration: XXX Όπου XXX παίρνει τις τιμές: none underline overline line-through underline overline line-through h2 {text-decoration: line-through;}

48 text-transform text-transform: ΧΧΧ Με ΧΧΧ να παίρνει τις τιμές: none capitalize uppercase lowercase Αναλλοίωτος Κάθε λέξη με κεφαλαίο αρχικό Όλα κεφαλαία Όλα μικρά p {text-transform: capitalize;}

49 text-indent text-indent: ΧΧΧ ΧΧΧ αριθμός σε μονάδες (px, pt,cm) ή αριθμός με ποσοστά (επί του εύρους) Παράδειγμα: p {text-indent: 50px;} Καθορίζει την εσοχή στην αρχή της παραγράφου, στα 50 pixels.

50 word-spacing word-spacing: ΧΧΧ ΧΧΧ αριθμός ακολουθούμενος από μονάδα μέτρησης, πχ. px, pt, cm, em Επιτρέπονται και αρνητικοί αριθμοί. p { word-spacing: 30px;} Good morning. Today we describe new stuff.

51 letter-spacing letter-spacing: XXX ΧΧΧ αριθμός ακολουθούμενος από μονάδα μέτρησης, πχ. px, pt, cm, em Επιτρέπονται και αρνητικοί αριθμοί. h1 { letter-spacing: -3px;} h2 { letter-spacing: 2px;}

52 Ετικέτα … Η ετικέτα χρησιμοποιείται για να διαιρέσει μια HTML σελίδα σε τμήματα που θα διαμορφωθούν με την βοήθεια των στυλιστικών φύλλων (CSS). … …

53 Embedded Styles 4 Είναι δυνατόν να ενθέσουμε ένα στυλ απευθείας σε μία ετικέτα, ως εξής:

54 Embedded Styles The principle of Anti-matter We start explaining how...

55 Βιβλιογραφία 1. Jon Duckett, HTML & CSS Design and Build Websites 2. Charles Wyke-Smith, Stylin’ with CSS: A Designer’s Guide, Second Edition 3. Eric A. Meyer, Cascading Style Sheets: The Definitive Guide 4. Keith Schengili-Roberts, Core CSS 5. Tommy Olsson & Paul O’Brien, The Ultimate CSS Reference