Διάλεξη 4η CSS intermediate

Μέγεθος: px

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

Download "Διάλεξη 4η CSS intermediate"

Ἀράχνη Κυπραίος
7 χρόνια πριν
Προβολές:

1 Διάλεξη 4η CSS intermediate Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e (Intelligent Systems & Software Engineering Lab)

2 Στόχος της ώρας Κλάσεις & Ids Εμφώλευση & Ομαδοποίηση Ψευδοκλάσεις Συντομογραφίες Εικόνες φόντου Ιδιότητες Λίστας Περιγράμματα πίνακα

3 Κλάσεις Με τους επιλογείς αναφερόμαστε σε όλες τις ετικέτες ανεξαιρέτως Έχουμε μάθει επιλογείς της HTML p { font-size: 16px; } a { text-decoration: none; } Δεν αρκούν για συγκεκριμένες αλλαγές

4 Παράδειγμα <html> <head> <style> /* blah blah */ </style> </head> <body> <p>κοκκινοσκουφίτσα</p> <p>χελωνονιντζάκια</p> </body> </html>

5 Ιδιότητες των κλάσεων Ομαδοποιούν στοιχεία, ώστε να φέρουν ίδια χαρακτηριστικά Μπαίνουν ως ιδιότητα στους επιλογείς/ετικέτες class= classname Παράδειγμα <p class= first >κοκκινοσκουφίτσα</p> <p class= second >χελωνονιντζάκια</p>

6 Ορισμός κλάσης στο CSS Αναφερόμαστε στην κλάση ως:.classname { } Παράδειγμα.nav { color: blue; } Όπου βλέπεις class= nav, θα κάνεις μπλε τη γραμματοσειρά!

7 Όνομα κλάσης Ο πρώτος χαρακτήρας παύλα ( ) ή λατινικός χαρακτήρας a-z ή A-Z Ο δεύτερος χαρακτήρας: Κάτω παύλα ( _ ) Λατινικός χαρακτήρας a-z ή A-Z Μετά τον δεύτερο χαρακτήρα, βάζουμε όποιο συνδυασμό κάτω παύλας ( _ ), παύλας ( - ), χαρακτήρα ή αριθμού Τουλάχιστον δύο χαρακτήρες σε μήκος

8 Παράδειγμα Ποια είναι έγκυρα? --beos thisisareallyshortclassnamedontyouthink -.- O_o 2bit -chucknorris red

9 Γενικό παράδειγμα <html> <head> <style>.first { color: red; }.second { color: blue; } </style> </head> <body> <p class= first >Red paragraph</p> <p class= second >Blue paragraph</p> </body> </html>

10 Θα εμφανίσει... Red paragraph Blue paragraph

11 Κλάσεις - Εφαρμογή Μια κλάση μπορεί να εφαρμοστεί σε πολλά στοιχεία Ένα στοιχείο μπορεί να 'χει πολλές κλάσεις Παράδειγμα: <p class= first second > I am first and second. I am Chuck Norris, I rule! </p>

12 Κλάσεις Εφαρμογή 2η h1.groups { text-align: center; } Επιλέγει όλα τα h1 με κλάση groups h1.groups.nav { padding-left: 10px; } Επιλέγει τα h1 με κλάση groups & nav

13 ID's Χρησιμοποιείται ένα id για μία μόνο φορά Τα εισάγουμε με # Παράδειγμα: #californication

14 Παράδειγμα <html> <head> <style> #aris { color: yellow; } #pao { color: green; } </style> </head> <body> <p id= aris >I'm Aris.</p> <p id= pao >I'm Panathinaikos.</p> </body> </html>

15 ID's - Εφαρμογή h2#bands { text-align: center; } Επιλέγει το h2 με id bands

16 Εμφώλευση Μπορούμε να εφαρμόσουμε ένα στοιχείο μέσα σε ένα άλλο. Βοηθάει στη σωστή δόμηση του CSS Περιορισμένος κώδικας Λιγότερος χρόνος

17 Παράδειγμα 1ο Πρόβλημα: Θέλω μόνο η κλάση groups που είναι μέσα στο <div> να έχει έντονα γράμματα. Λύση: Note: H κλάση groups είναι παιδί του div. div.groups { font-weight: bold; }

18 Παράδειγμα 2ο Πρόβλημα: Θέλω τα p που περιέχονται μέσα στην κλάση bands να έχουν κεντρική στοίχιση. Λύση: Αντίστοιχα με προηγουμένως.

19 Παράδειγμα 3ο Πρόβλημα: Θέλω στο div που φέρει το id wrapper, τα <a> που περιέχονται μέσα σε οποιοδήποτε element με κλάση main να έχουν text-decoration: none; Λύση: Your turn... ;-)

20 Παράδειγμα 4ο Πρόβλημα: Θέλω την Jennifer Lopez! Λύση: Get back to reality, dude.

21 Ομαδοποίηση Παράδειγμα: p { color: blue; } h1 { color: blue; } Ομαδοποιείται σε: p, h1 { color: blue; }

22 Check up Τι κάνουν τα παρακάτω:.choco.freta.lila.pause #lavache,.quirit p.ipa div#apisti.com div.apisti#com ul li div li

23 Ψευδοκλάσεις Αναφερόμαστε στην κατάσταση ενός στοιχείου :link, κάτι που δεν έχουμε επισκεφτεί :visited, κάτι που έχουμε επισκεφτεί :active, ενεργό στοιχείο :hover, όταν περνάμε το ποντίκι από πάνω

24 Παράδειγμα <a href="monkey.html">me and my monkey</a> a { text-decoration: none; } a:hover { background-color: turquoise; color: white; }

25 Θα δώσει... Όταν δεν είναι το ποντίκι πάνω: Όταν περάσει το ποντίκι από πάνω: Quiz: Τι css έλειπε? Γραμματοσειρά 32px, arial.

26 Παράδειγμα 2ο - Active To active ενεργοποιείται όταν επιλέγουμε το στοιχείο. a:active { } border: 2px solid blue;

27 Παράδειγμα 3ο - Καθολικό

28 Ψευδοστοιχεία Προσθέτουν εφέ σε συγκεκριμένους επιλογείς Σύνταξη όπως και με τις ψευδοκλάσεις selector:pseudo-element { Συνδυασμός και με κλάσεις property: value; selector.class:pseudo-element { } property: value; }

29 first-line Μορφοποιεί την πρώτη σειρά σε ένα επιλογέα Σύνταξη: selector:first-line { } property: value;

30 Παράδειγμα /* CSS */ body { color: gray; text-align: center; font-style: italic; font-family: arial; } h1:first-line { color:black; font-variant: small-caps; font-style: normal; }

31 Αποτέλεσμα

32 first-letter Μορφοποιεί το πρώτο γράμμα του επιλογέα Σύνταξη ίδια με τα προηγούμενα Quiz: Τι θα παίρναμε αν γράφαμε... /*css file */ p.article:first-letter {color:#ff0000;}  <p class="article">a paragraph in an article</p>

33 Συντομογραφίες Συμπτύσσουν πολλές ιδιότητες σε μία Παρόμοιος τρόπος με το box model Εφαρμόζονται σε: box model γραμματοσειρές

34 Η ωρολογιακή φορά...

35 Παράδειγμα 1ο 4 παράμετροι

36 Παράδειγμα 2ο 3 παράμετροι

37 Παράδειγμα 3ο 2 παράμετροι

38 Παράδειγμα 4ο 1 παράμετρος

39 Συντομογραφίες Παράδειγμα: padding: 1px 2px 3px; Ισοδυναμεί με: padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 2px;

40 Συντομογραφίες Παράδειγμα: border-width: 2px 4px; Ισοδυναμεί με: border-top-width: 2px; border-right-width: 4px; border-bottom-width: 2px; border-left-width: 4px;

41 Συντομογραφίες Παράδειγμα: border-width: 2px 4px 6px 8px; Ισοδυναμεί με: border-top-width: 2px; border-right-width: 4px; border-bottom-width: 6px; border-left-width: 8px;

42 Συντομογραφίες Παράδειγμα: border-style: solid dotted dashed none; Ισοδυναμεί με: border-top-style: solid; border-right-style: dotted; border-bottom-style: dashed; border-left-style: none;

43 Συντομογραφίες Παράδειγμα: border-color: red blue green yellow; Ισοδυναμεί με: border-top-color: red; border-right-color: blue; border-bottom-color: green; border-left-color: yellow;

44 Συντομογραφίες - Γραμματοσειρές

45 Εικόνες Φόντου Εφαρμόζονται εντός του border Σχεδιάζονται πάνω στο background Δεκτοί τύποι αρχείων.jpg,.gif,.png Σχετικές διευθύνσεις σύμφωνα με τη διεύθυνση του αρχείου *.css

46 Εικόνες Φόντου Σύνταξη: background-image: url( pamela.png ); Η διεύθυνση μπορεί να 'ναι και απόλυτη Χρησιμοποιείται για φόντο η pamela.png

47 Εικόνες Φόντου background-repeat Ορίζει αν επαλαμβάνεται το φόντο Παίρνει τις τιμές: repeat (προεπιλογή): κάθετη/οριζόντια επανάληψη repeat-y: κάθετη επανάληψη repeat-x: οριζόντια επανάληψη no-repeat: εμφάνιση μια μόνο φορά

48 Εικόνες Φόντου background-position Ορίζει τη θέση της εικόνας Απ' αυτή τη θέση αρχίζει η επανάληψη Παίρνει τιμές σύμφωνα με το: Left / Center / Right Top / Center / Bottom Απόσταση από αριστερά Απόσταση από πάνω

49 Quiz Πού θα πήγαινε η εικόνα αν είχαμε: background-position: left top; background-position: left center; background-position: left bottom; background-position: right center; background-position: center center; background-position: center bottom; background-position: 25% 75%; background-position: 10px 200px;

50 Ιδιότητες λίστας list-style-type Ορίζει το πώς εμφανίζεται ο αριθμός σε αριθμημένες λίστες Ορίζει το πώς εμφανίζεται το σύμβολο σε μη αριθμημένες λίστες

51 Παραδείγματα disc circle square decimal lower-roman upper-roman lower-greek lower-latin none

52 Θέση Λίστας list-style-position Ορίζει αν τα σύμβολα / αριθμοί της λίστας θα είναι μέσα ή έξω από το πλαίσιο

53 Παραδείγμα 1ο ul { list-style-type: square; list-style-position: outside; } li { } border: 1px solid black;

54 Παράδειγμα 2ο ul { list-style-type: disc; list-style-position: inside; } li { } border: 1px solid black;

55 Ιδιότητες Λίστας list-style-image Ορίζεται μια εικόνα αντί για αριθμός / σύμβολο Παράδειγμα: list-style-image: url( square.gif );

56 Ιδιότητες Λίστας Μπορώ να συμπτύξω όλες τις ιδιότητες σε μία Παράδειγμα list-style: square url( icon.gif ) inside; ΔΕΝ έχει σημασία η σειρά που τα γράφω Αν θέλουμε κάποιο το παραλείπουμε

57 Περίγραμμα Πίνακα border-collapse: Ορίζει αν τα περιγράμματα των κελιών του πίνακα θα επικαλύπτονται ή όχι Για επικάλυψη γράφουμε: border-collapse: collapse; Για μη επικάλυψη: border-collapse: separate; (default) Εφαρμόζεται μέσα στο <table>

58 Κέρσορες cursor: Ορίζει το πώς θα εμφανίζεται ο κέρσορας στην οθόνη Παίρνει τις τιμές: auto pointer crosshair move wait help progress default

59 Quiz Ποιο είναι τι?

60 Μάθαμε Κλάσεις & Ids Εμφώλευση & Ομαδοποίηση Ψευδοκλάσεις Συντομογραφίες Εικόνες φόντου Ιδιότητες Λίστας Περιγράμματα πίνακα

61 Επόμενη φορά... Τελευταίο μάθημα html XHTML vs HTML Mastering the tags Favicons Entities Labels Titles Πολλά παραδείγματα

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

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

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