CSS 2. Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο. Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "CSS 2. Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο. Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ"

Ἰεφθάε Αξιώτης
8 χρόνια πριν
Προβολές:

1 CSS 2 Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ

2 Σηόρνο ηεο ώξαο Δπέθηαζε ησλ γλώζεσλ ηνπ CSS 1 Κιάζεηο θαη id Δκθώιεπζε θαη νκαδνπνίεζε επηινγέσλ Χεπδνθιάζεηο Σπληνκνγξαθίεο Δηθόλεο θόληνπ Τππνγξαθία Ηδηόηεηεο ιίζηαο Πεξηγξάκκαηα πίλαθα Κέξζνξεο

3 Κιάζεηο Με έναν CSS επιλογέα πρέπει να μπορούμε να ανθερθούμε ζε οποιοδήποηε ζεη από ζηοιχεία. Μέρξη ηώξα κάζακε επηινγείο HTML Γηα παξάδεηγκα p { font-size: 10px; } table { border: 1px solid black } Όκσο ΔΕΝ είλαη αξθεηνί

4 Κιάζεηο <html> <head> <style> /*???????*/ </style> </head> <body> <p>red paragraph</p> <p>blue paragraph</p> </body> </html>

5 Κιάζεηο Oκαδνπνηνύλ νκνεηδή ζηνηρεία κε ζθνπό λα εθαξκνζηεί θνηλό ζηπι Μπαίλνπλ σο ιδιόηηηα ζηηο εηηθέηεο class= classname Παξάδεηγκα <p class= first >I am a red paragraph</p> <p class= second >I am a blue paragraph</p>

6 Κιάζεηο Αλαθεξόκαζηε ζηα ζηνηρεία θιάζεο κε.classname { } Παξάδεηγκα.menu { color: red; } Σεκαίλεη: Βάιε ρξώκα γξακκαηνζεηξάο θόθθηλν ζε όια ηα ζηνηρεία πνπ έρνπλ class= menu

7 Κιάζεηο Έλα όλνκα θιάζεο πξέπεη λα ππάθνύεη ζηνπο εμήο θαλόλεο: Ο πξώηνο ραξαθηήξαο κπνξεί λα είλαη παύια (-) ή ηίπνηα Ο δεύηεξνο ραξαθηήξαο κπνξεί λα είλαη: Κάησ παύια (_) Λαηηληθόο ραξαθηήξαο a-z θαη Α-Ζ Από ηνλ ηξίην ραξαθηήξα θαη κεηά κπνξεί λα είλαη νπνηνζδήπνηε ζπλδπαζκόο παύιαο, θάησ παύιαο, ραξαθηήξα ή αξηζκνύ Σηην ππαγμαηικόηηηα ένα έγκςπο όνομα κλάζηρ μποπεί να έσει κι άλλερ μοπθέρ πος σπηζιμοποιούνηαι εξαιπεηικά ζπάνια αν όσι καθόλος

8 Κιάζεηο Πνηα από απηά είλαη έγθπξα; --foo _42_ thisissomereallylonglongclassname -.- O_O 8bit ΑΚΥΡΟ ΕΓΚΥΡΟ ΑΚΥΡΟ ΕΓΚΥΡΟ ΑΚΥΡΟ -_-_----_--_ ΕΓΚΥΡΟ ΕΓΚΥΡΟ

9 Κιάζεηο <html> </html> <head> </head> <body> </body> <style>.first { color: red; }.second { color: blue; } </style> <p class= first >Red paragraph</p> <p class= second >Blue paragraph</p>

10 Red paragraph Blue paragraph

11 Κιάζεηο & IDs Μία θιάζε κπνξεί λα εθαξκνζηεί ζε πνιιά ζηνηρεία Έλα ζηνηρείν κπνξεί λα έρεη πνιιέο θιάζεηο <p class= foo bar > I belong to class foo and class bar </p> Κλάζεις IDs HTML class= foo id= foo Επανάληψη Ναη Όχι CSS.foo #foo

12 Παξάδεηγκα <html> <head> <style> #intro { color: red; } #outro { color: blue; } </style> </head> <body> <p id= intro >Red paragraph</p> <p id= outro >Blue paragraph</p> </body> </html>

13 Σπλδπαζκνί HTML & Class selectors p.center { text-align: center; } Δπηιέγεη όια ηα p πνπ έρνπλ ηελ θιάζε center p.center.important { } text-align: center; font-size: 24pt; Δπηιέγεη όια ηα p πνπ έρνπλ ηελ θιάζε center ΚΑΙ ηελ θιάζε important

14 Δκθώιεπζε επηινγέσλ Μπνξνύκε λα εθαξκόζνπκε έλαλ επηινγέα ζε έλαλ άιιν επηινγέα. Σσζηά δνκεκέλν HTML/CSS Πεξηνξηζκέλεο θιάζεηο/id

15 Δκθώιεπζε επηινγέσλ <ul> <li>cat</li> <li>dog</li> <li>frog</li> </ul> <ul> <li>pencil</li> <li>pen</li> <li>eraser</li> </ul>

16 Δκθώιεπζε επηινγέσλ Φσξίο εκθώιεπζε: Δθαξκόδνπκε κηα θιάζε ζε θάζε ζηνηρείν ηεο θάζε ιίζηαο <ul> </ul> <ul> </ul> <li class= animal >cat</li> <li class= animal >dog</li> <li class= animal >frog</li> <li class= cocktail >mojito</li> <li class= cocktail >bloody mary</li> <li class= cocktail >caipirinha</li>

17 Δκθώιεπζε επηινγέσλ Καη γξάθνπκε ην αληίζηνηρν CSS li.animal { border: 1px solid blue; } li.cocktail { } border: 1px solid red;

18 Δκθώιεπζε επηινγέσλ <ul id= animals > <li>cat</li> <li>dog</li> <li>frog</li> </ul> <ul id= cocktails > <li>mojito</li> <li>bloody mary</li> <li>caipirinha</li> </ul>

19 Δκθώιεπζε επηινγέσλ Τόηε ην αληίζηνηρν CSS γίλεηαη: #animals li { border: 1px solid blue; } #cocktails li { } border: 1px solid red;

20 Οκαδνπνίεζε επηινγέσλ Πνιινί επηινγείο κε θνηλέο ηδηόηεηεο Έλαο νκαδνπνηεκέλνο επηινγέαο Οη επηκέξνπο επηινγείο ρσξίδνληαη κε θόκκαηα

21 Οκαδνπνίεζε επηινγέσλ Παξάδεηγκα: p { } color: red;.foo { color: red; } Τν παξαπάλσ κπνξεί λα γξαθηεί: p,.foo { } color: red;

22 Pop quiz Τη επηιέγνπλ;.foo.bar.foo.bar.foo,.bar.foo,.bar p.koko div#lala.liruliru div.liruliru#lala ul li div li

23 Χεπδνθιάζεηο Αλαθεξόκαζηε ζηελ θαηάζηαζε ελόο ζηνηρείνπ :link :visited :active :hover links πνπ δελ έρνπλ επηζθεθηεί links πνπ έρνπλ επηζθεθηεί Δλεξγό ζηνηρείν Σηνηρείν θάησ από ην πνληίθη

24 Χεπδνθιάζεηο Παξάδεηγκα <a href= home.html >Home</a> + a:hover { background-color: yellow; }

25 Χεπδνθιάζεηο :active

26 :visited :link :link :visited :visited :link :link

28 Δξγαζία 2 ε (half cleanroom) Παξάδνζε κε FTP Να αλεβάζεηε ην αξρείν CSS ζηνλ θάθειό ζαο Παξάδνζε κέρξη 25/10/2010 Να κνξθνπνηήζεηε ην αξρείν html πνπ δίλεηαη Να είλαη παλνκνηόηππν κε ην screenshot Αξθνύλ νη ηδηόηεηεο πνπ έρνπκε δείμεη Γίλνληαη Τν αξρείν HTML Οη δηεπζύλζεηο ησλ εηθόλσλ Τα ρξώκαηα πνπ ρξεζηκνπνηνύληαη Οη γξακκαηνζεηξέο Screenshot γηα ην δεηνύκελν απνηέιεζκα

29 Σπληνκνγξαθίεο Σπκπηύζζνπλ πνιιέο ηδηόηεηεο ζε κία ηδηόηεηα

30 Σπληνκνγξαθίεο border: 1px solid black; border-width: 1px; border-style: solid; border-color: black;

31 Σπληνκνγξαθίεο

32 Σπληνκνγξαθίεο

33 Σπληνκνγξαθίεο

34 Σπληνκνγξαθίεο

35 Σπληνκνγξαθίεο padding: 1px 2px 3px; padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 2px;

36 Σπληνκνγξαθίεο border-width: 1px 2px; border-top-width: 1px; border-right-width: 2px; border-bottom-width: 1px; border-left-width: 2px;

37 Σπληνκνγξαθίεο border-width: 1px 4px 8px 16px; border-top-width: 1px; border-right-width: 4px; border-bottom-width: 8px; border-left-width: 16px;

38 Σπληνκνγξαθίεο border-style: solid dotted dashed none; border-top-style: solid; border-right-style: dotted; border-bottom-style: dashed; border-left-style: none;

39 Σπληνκνγξαθίεο border-color: red green blue black; border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: black;

40 Σπληνκνγξαθίεο προαιρεηικά font: bold normal italic 24px Verdana, sans-serif; font-weight font-variant font-style font-size font-family

41 Δηθόλεο θόληνπ Δθαξκόδεηαη ζηελ πεξηνρή εζσηεξηθά ηνπ border (ζπκπεξηιακβάλεηαη ε πεξηνρή ηνπ padding) Σρεδηάδνληαη πάλσ ζην νξηζκέλν background-color Μπνξεί λα είλαη αξρείν JPG, GIF, PNG Οη ζρεηηθέο δηεπζύλζεηο εηθόλσλ ζρεηίδνληαη κε ηε δηεύζπλζε ηνπ αξρείνπ CSS

42 Δηθόλεο θόληνπ background-image: url( foo.png ); Φξεζηκνπνηεί γηα θόλην ηελ εηθόλα foo.png Μπνξεί λα είλαη απόιπηε ή ζρεηηθή δηεύζπλζε

43 Δηθόλεο θόληνπ background-repeat Οξίδεη αλ ζα επαλαιακβάλεηαη ην θόλην Μπνξεί λα πάξεη ηηκέο: repeat (προεπιλογή) θάζεηε θαη νξηδόληηα επαλάιεςε repeat-y θάζεηε επαλάιεςε repeat-x νξηδόληηα επαλάιεςε no-repeat εκθάληζε κία θνξά

44 Δηθόλεο θόληνπ background-position Οξίδεη ηελ ζέζε ηνπ θόληνπ ζην πιαίζην ηνπ ζηνηρείνπ Από απηή ηε ζέζε αξρίδεη ε επαλάιεςε Μπνξεί λα πάξεη ηηκέο: [left center right] [top center bottom] Ζ ζεηξά δεν έχει ζεκαζία <απόσταση από αριστερά> <απόσταση από πάνω> Ζ ζεηξά έχει ζεκαζία. Παξάδεηγκα: background-position: center top; background-position: 20px 30px;

45 by darkxmatt

46 Τππνγξαθία line-height Οξίδεη ην ύςνο ηεο γξακκήο ζε έλα θείκελν line-height: normal; line-height: 20pt;

47 Τππνγξαθία letter-spacing Οξίδεη ηελ απόζηαζε κεηαμύ ησλ γξακκάησλ letter-spacing: normal; letter-spacing: 3px;

48 Τππνγξαθία word-spacing Οξίδεη ηελ απόζηαζε κεηαμύ ησλ ιέμεσλ word-spacing: normal; word-spacing: 10px;

49 Τππνγξαθία font-variant Οξίδεη αλ ην θείκελν ζα είλαη small-caps ή normal font-variant: normal; font-variant: small-caps;

50 Ηδηόηεηεο ιίζηαο list-style-type Οξίδεη ηνλ ηύπν ζεκαδηνύ ή ην ζύζηεκα αξίζκεζεο Κάπνηεο από ηηο ηηκέο: disc (πξνεπηινγή ζηα ul) circle square decimal (πξνεπηινγή ζηα ol) lower-roman i ii iii upper-roman I II III lower-greek α β γ lower-latin a b c armenian Ա Բ Գ none Γελ εκθαλίδεη θάπνην ζεκάδη

51 Ηδηόηεηεο ιίζηαο list-style-position Οξίδεη αλ ηα ζεκάδηα ηεο ιίζηαο είλαη έμσ ή κέζα από ην πιαίζην border: 1px solid black; list-style-position: outside; border: 1px solid black; list-style-position: inside;

52 Ηδηόηεηεο ιίζηαο list-style-image Οξίδεη κηα εηθόλα σο ζεκάδη ηεο ιίζηαο list-style-image: url( 'sqpurple.gif' );

53 Ηδηόηεηεο ιίζηαο list-style Σπληνκνγξαθία ησλ ηξηώλ πξνεγνύκελσλ ηδηόηήησλ list-style: square url( icon.gif ) inside; list-style-type list-style-image list-style-position Ζ ζεηξά δεν έχει ζεκαζία Οπνηνδήπνηε κπνξεί λα παξαιεθζεί

54 Πεξηγξάκκαηα πίλαθα border-collapse Οξίδεη αλ ηα πιαίζηα ησλ θειηώλ ελόο πίλαθα ζα επηθαιύπηνληαη ή όρη Δθαξκόδεηαη ζην <table> border-collapse: separate; (πξνεπηινγή) border-collapse: collapse;

55 Κέξζνξεο cursor Οξίδεη ηνλ θέξζνξα ηνπ πνληηθηνύ πάλσ από θάπνην ζηνηρείν Κάπνηεο από ηηο ηηκέο ηνπ: auto pointer crosshair move wait help progress default Ανάλογα ηην πεπίζηαζη (προεπιλογή)

56 Μάζακε Κιάζεηο θαη id Δκθώιεπζε θαη νκαδνπνίεζε επηινγέσλ Χεπδνθιάζεηο Σπληνκνγξαθίεο Δηθόλεο θόληνπ Τππνγξαθία Ηδηόηεηεο ιίζηαο Πεξηγξάκκαηα πίλαθα Κέξζνξεο

57 Τελ επόκελε θνξά... Τειεπηαίν κάζεκα HTML Πνιιά πξαθηηθά παξαδείγκαηα!

Σχετικά έγγραφα

CSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

CSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών CSS 2 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης