Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

Transcript

1

3 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: New - Save Μάθημα 2: Εισαγωγή στη CSS Μάθημα 3: Τρόπος Σύνταξης Μάθημα 4: Σχόλια Μάθημα 5: ID Μάθημα 6: Class Μάθημα 7: Background Color Μάθημα 8: Background Image Μάθημα 9: Background Image Repeat Μάθημα 10: Background Image Position Μάθημα 11: Background Image Attachment Μάθημα 12: Text Color Μάθημα 13: Text Align Μάθημα 14: Text Decoration Μάθημα 15: Text Transform Μάθημα 16: Text Direction Μάθημα 17: Text Indent Μάθημα 18: Text Font Family Μάθημα 19: Text Font Style Μάθημα 20: Text Font Size Μάθημα 21: Style Hyperlinks Μάθημα 22: Style Hyperlinks background Color Μάθημα 23: Style Hyperlinks Text Decoration Μάθημα 24: List Style Type Μάθημα 25: List Style Type Circle & Square Μάθημα 26: Photoshop Save for Web Copyright SYSTEM- All rights reserved 3/159

4 Μάθημα 27: List Style Image Μάθημα 28: List Style Position Μάθημα 29: Table Boarder Μάθημα 30: Table Boarder Collapse Μάθημα 31: Table Width Μάθημα 32: Table Align Μάθημα 33: Table Background Color Μάθημα 34: Table Padding Table Μάθημα 35: CSS Model Box Μάθημα 36: Model Box Μάθημα 37: Width Height Element Paragraph Μάθημα 38: DocType Μάθημα 39: Boarder Style Μάθημα 40: Boarder Width Color Μάθημα 41: Navigation Bars & List Oflinks Μάθημα 42: Navigation Bar List Style Type - None Μάθημα 43: Navigation Bar List Background Color Block Μάθημα 44: Navigation Bar Display Inline Μάθημα 45: Navigation Bar Float Μάθημα 46: Navigation Bar - Interactive Bar Μάθημα 47: Μάθημα 48: Image Gallery Μάθημα 49: Image Opacity Μάθημα 50: Image Box - Transbox Μάθημα 51: Grouping Selector Copyright SYSTEM- All rights reserved 4/159

5 ΚΕΦΑΛΑΙΟ 1-2 NEW/ SAVE ΕΙΣΑΓΩΓΗ ΣΤΗ CSS Η CSS (Cascading Style Sheets-Διαδοχικά Φύλλα Στυλ) ή ( αλληλουχία φύλλων στύλ ) είναι μια γλώσσα υπολογιστή που ανήκει στην κατηγορία των γλωσσών φύλλων στυλ που χρησιμοποιείται για τον έλεγχο της εμφάνισης ενός εγγράφου που έχει γραφτεί με μια γλώσσα σήμανσης. Χρησιμοποιείται δηλαδή για τον έλεγχο της εμφάνισης ενός εγγράφου που γράφτηκε στις γλώσσες HTML και XHTML, δηλαδή για τον έλεγχο της εμφάνισης μιας ιστοσελίδας και γενικότερα ενός ιστοτόπου. Η CSS είναι μια γλώσσα υπολογιστή προορισμένη να αναπτύσσει στυλιστικά μια ιστοσελίδα δηλαδή να διαμορφώνει περισσότερα χαρακτηριστικά, χρώμματα, στοίχιση και δίνει περισσότερες δυνατότητες σε σχέση με την html. Για μια όμορφη και καλοσχεδιασμένη ιστοσελίδα η χρήση της CSS κρίνεται ως απαραίτητη. ΚΕΦΑΛΑΙΟ 1 ο NEW - SAVE ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Ανοίξτε το πρόγραμμα Sublime Text. ΑΠΑΝΤΗΣΗ. Δείξτε Έναρξη/ Προγράμματα/ Sublime Text. 2 ον Ανοίξτε το αρχείο M_01A μέσα από το πρόγραμμα Sublime Text. Στη συνέχεια, αποθηκεύστε το με όνομα Μ_01Α και τύπο CSS μέσα στο δικό σας USB. ΑΠΑΝΤΗΣΗ. Διπλοπατήστε στο εικονίδιο του Sublime Text και δείξτε στο μενού File/ Open/ εντοπίστε το φάκελο Φάκελοι Προγραμμάτων της επιφάνειας/ CSS / M_01Α / επιλέξτε το αρχείο M_01Α.html/ Άνοιγμα. Στη συνέχεια, δείξτε στο μενού File/ Save as/ εντοπίστε το USB/ δώστε το όνομα/στο πεδίο τύπος από το πτυσσόμενο μενού επιλέξτε τον τύπο CSS/Αποθήκευση. 3 ον Ανοίξτε το αρχείο M_01Β μέσα από το πρόγραμμα Sublime Text. Στη συνέχεια, αποθηκεύστε το με όνομα Μ_01Β και τύπο CSS μέσα στο δικό σας USB. ΑΠΑΝΤΗΣΗ. Διπλοπατήστε στο εικονίδιο του Sublime Text και δείξτε στο μενού File/ Open/ εντοπίστε το φάκελο Φάκελοι Προγραμμάτων της επιφάνειας/ CSS / M_01Β / επιλέξτε το αρχείο M_01Β.html/ Άνοιγμα. Στη συνέχεια, δείξτε στο μενού File/ Save as/ εντοπίστε το USB/ δώστε το όνομα/ στο πεδίο τύπος από το πτυσσόμενο μενού επιλέξτε τον τύπο CSS/Αποθήκευση. Copyright SYSTEM- All rights reserved 5/159

6 ΚΕΦΑΛΑΙΟ 2 ο ΕΙΣΑΓΩΓΗ ΣΤΗ CSS ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Από ποια αρχικά λέξεων έχουμε το CSS; Α. Cascading Style Sleep. Β. Casting Style Sheets. Γ. Cascading Stolen Sheets. Δ. Cascading Style Sheets. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Cascading Style Sheets 2 ον Τι ορίζει τα στυλ; Α. Τον τρόπο εμφάνισης των στοιχείων που βρίσκονται στον κώδικά HTML. Β. Τον τρόπο αποθήκευσης των στοιχείων που βρίσκονται στον κώδικά HTML. Γ. Τον τρόπο επεξεργασίας των στοιχείων μιας σελίδας. Δ. Τίποτε από τα παραπάνω. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Τον τρόπο εμφάνισης των στοιχείων που βρίσκονται στον κώδικά HTML. 3 ον Για ποιο λόγο προστέθηκαν τα CSS αρχεία; Α. Για να λύνουν μαθηματικά προβλήματα. Β. Για να λύνουν αποθηκευτικά προβλήματα στην HTML4. Γ. Για να λύνουν αυτοματοποιημένα προβλήματα στην HTML 4 μορφοποίησης. Δ. Κανένα από τα παραπάνω. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Για να λύνουν αυτοματοποιημένα προβλήματα στην HTML 4 μορφοποίησης. Copyright SYSTEM- All rights reserved 6/159

7 ΚΕΦΑΛΑΙΟ 3 ΤΡΟΠΟΣ ΣΥΝΤΑΞΗΣ CSS Ένας κανόνας CSS έχει δύο κύρια μέρη: έναν επιλογέα, και μία ή περισσότερες δηλώσεις. Ο επιλογέας είναι συνήθως το στοιχείο που θέλετε να έχει στυλ. Κάθε δήλωση αποτελείται από μία αγκύλη και μια τιμή. Μια δήλωση CSS τελειώνει πάντα με ένα ερωτηματικό, και οι ομάδες δήλωση περιβάλλονται από αγκύλες. Παράδειγμα CSS Μια δήλωση CSS τελειώνει πάντα με ένα ερωτηματικό, και οι ομάδες δήλωση περιβάλλονται από αγκύλες: p color:blue;font-size:12; Καλό είναι για το CSS κάθε δήλωση να είναι σε μια ξεχωριστεί γραμμή. p color:blue; font-size:12; ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Από πόσα μέρη αποτελείται ένας κανόνας CSS; Α. Από ένα μέρος. Β. Από δύο μέρη. Γ. Από τρία μέρη. Δ. Από κανένα. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Β. Από δύο μέρη. 2 ον Τι είναι ο επιλογέας (selector); Α. Είναι συνήθως το στοιχείου που θέλουμε να έχει στυλ. Β. Είναι οι αγκύλες που πληκτρολογούμε μέσα τις ετικέτες. Γ. Είναι η αξία του κάθε στοιχείου Δ. Κανένα από τα παραπάνω ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Είναι το στοιχείο που θέλουμε να έχει στυλ. 3 ον Με ποιο χαρακτήρα διαχωρίζεται η κάθε ενέργεια; Α. Με κόμμα. Β. Με κενό. Γ. Με αγκύλες. Copyright SYSTEM- All rights reserved 7/159

8 Δ. Με ελληνικό ερωτηματικό. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Με ελληνικό ερωτηματικό. 4 ον Πόσους τρόπους γραφής έχουμε στο CSS; Α. Δύο Β. Έναν Γ. Τρείς ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Δύο. ΚΕΦΑΛΑΙΟ 4 CSS ΣΧΟΛΙΑ Σχόλια χρησιμοποιούνται για να σας βοηθήσουν κατά την επεξεργασία του πηγαίου κώδικα σε κάποια άλλη στιγμή. Επισημαίνουμε ότι τα Σχόλια αγνοούνται από τους browsers. Ένα σχόλιο CSS ξεκινάει με "/ *", και τελειώνει με "* /". /*ΔΗΜΙΟΥΡΓΙΑΣ 2012-FACETOFACE.GR*/ p color:blue; font-size:12; ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Για ποιο λόγο χρησιμοποιούνται τα σχόλια; Α. Για επεξήγηση. Β. Για Βοήθεια. Γ. Και για τα δύο. Δ. Για κανένα από τα παραπάνω ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Και για τα δύο. 2 ον Συμπληρώστε τη σωστή πρόταση. Τα σχόλια Α. Εμφανίζονται στους Browsers. Β. Δεν υποστηρίζονται από Browsers. Γ. Ενδιαφέρουν τους επισκέπτες. Δ. Αγνοούνται από τους Browsers. Copyright SYSTEM- All rights reserved 8/159

9 ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Αγνοούνται από τους browsers. 3 ον Με τι χρώμα εμφανίζονται τα σχόλια; Α. Άσπρο. Β. Κίτρινο. Γ. Κόκκινο. Δ. Γκρι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Γκρι. 4 ον Ποιος από τους παρακάτω είναι ο σωστός τρόπος πληκτρολόγησης ενός σχολίου; Α. /* Ημερομηνία Δημιουργίας/. Β. * Ημερομηνία Δημιουργίας*. Γ. /*Ημερομηνία Δημιουργίας*/. Δ. /Ημερομηνία Δημιουργίας/. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. /*Ημερομηνία Δημιουργίας*/. Copyright SYSTEM- All rights reserved 9/159

10 ΚΕΦΑΛΑΙΟ 5 ID Εκτός από τον καθορισμό ενός στυλ για ένα HTML στοιχείο, το CSS σας επιτρέπει να ορίσετε τη δική σας επιλογή που ονομάζεται "id" και "κατηγορία". Ο επιλογέας id χρησιμοποιείται για να καθορίσετε ένα στυλ για ένα ενιαίο, μοναδικό στοιχείο. Ο κωδικός επιλογής χρησιμοποιεί το χαρακτηριστικό id του στοιχείου HTML, και ορίζεται με "#". Μεταφέρεστε στο αρχείο HTML πχ. Πληκτρολογείτε <p id= css1 Ο κανόνας στυλ που ακολουθεί θα πρέπει να εφαρμόζονται στο στοιχείο με id = "css1p": #css1p color:blue; font-size:12; Σας επισημαίνουμε ότι δεν πρέπει να ξεκινήσετε ένα όνομα με ένα αναγνωριστικό αριθμό! Διότι δεν θα λειτουργήσει σε Mozilla / Firefox. ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Τι ορίζει η ετικέτα ID; Α. Καθορίζει ένα στυλ για τις παραγράφους. Β. Καθορίζει ένα στυλ για ένα μοναδικό στοιχείο. Γ. Και τα δύο Δ. Κανένας από τα παραπάνω ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Β. Καθορίζει ένα στυλ για ένα μοναδικό στοιχείο. 2 ον Ανοίξτε το αρχείο M_05 μέσα από το πρόγραμμα Sublime Text. Στη συνέχεια, δημιουργήστε ένα νέο αρχείο στο Sublime Text με όνομα Μ_05 και τύπο CSS και αποθηκεύστε μέσα στο δικό σας USB. ΑΠΑΝΤΗΣΗ. Διπλοπατήστε στο εικονίδιο του Sublime Text και δείξτε στο μενού File/ Open/ εντοπίστε το φάκελο Φάκελοι Προγραμμάτων της επιφάνειας/ CSS / M_05 / επιλέξτε το αρχείο M_05.html/ Άνοιγμα. Στη συνέχεια, δείξτε στο μενού File/New/ Save as/ εντοπίστε το USB/ δώστε το όνομα/στο πεδίο τύπος από το πτυσσόμενο μενού επιλέξτε τον τύπο CSS/Αποθήκευση. Copyright SYSTEM- All rights reserved 10/159

11 3 ον Στο αρχείο M_05.html, στη γραμμή 5 προσθέστε την ετικέτα: <link rel="stylesheet" type="css" href="m_05.css">. ΑΠΑΝΤΗΣΗ. Με επιλεγμένο το αρχείο Μ_05.html, μεταβείτε στη γραμμή 5 και πληκτρολογήστε την ετικέτα: <link rel="stylesheet" type="css" href="m_05.css">. 4 ον Αλλάξτε το χρώμα της 1 ης παραγράφου σε μπλε. ΑΠΑΝΤΗΣΗ. Με επιλεγμένο το αρχείο Μ_05.CSS, πληκτρολογήστε: body p color:blue; 5 ον Αποθηκεύστε στο δικό σας USB με όνομα Μ_05.html, στη συνέχεια, αποθηκεύστε και τις αλλαγές στο αρχείο Μ_05.CSS και κάντε προεπισκόπηση μέσα από τον Google Chrome το αρχείο Μ_05.html. ΑΠΑΝΤΗΣΗ. Δείξτε στο μενού File/ Save as/ εντοπίστε το USB/ δώστε το όνομα/ Αποθήκευση. Μεταβείτε στο αρχείο Μ-05.CSS και δείξτε File/ Save. Τέλος, εντοπίστε το μέσα από το USB/ δεξί πάτημα/ Άνοιγμα με./ Google Chrome. Copyright SYSTEM- All rights reserved 11/159

12 ΚΕΦΑΛΑΙΟ 6 CLASS Ο επιλογέας κλάση χρησιμοποιείται για να καθορίσετε ένα στυλ για μια ομάδα στοιχείων. Σε αντίθεση με το id επιλογέα, που προσδιορίζει ένα στοιχείο. Αυτό σας επιτρέπει να ορίσετε ένα συγκεκριμένο στυλ ταυτόχρονα για πολλά στοιχεία της HTML με την ίδια κατηγορία. Η Class κλάση επιλογή χρησιμοποιεί το χαρακτηριστικό HTML Class, και ορίζεται με μία τελεία "." Σας επισημαίνουμε ότι δεν πρέπει,να ξεκινήσετε ένα όνομα κατηγορίας με μια σειρά! Διότι αυτό υποστηρίζεται μόνο στον Internet Explorer..title1 text-align:center; Μπορείτε επίσης να καθορίσετε ότι μόνο συγκεκριμένα στοιχεία HTML θα πρέπει να επηρεαστεί από μια κλάση. Στο παρακάτω παράδειγμα, όλα τα στοιχεία p με class = "center" θα είναι στοιχισμένο στο κέντρο: ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Τι ορίζει η ετικέτα Class; Α. Καθορίζει ένα όνομα για το αρχείο. Β. Καθορίζει ένα όνομα για μια ομάδα στοιχείων. Γ. Καθορίζει τη μορφοποίηση μιας ομάδας στοιχείων. Δ. Κανένας από τα παραπάνω. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. Καθορίζει τη μορφοποίηση μιας ομάδας στοιχείων. 2 ον Ανοίξτε το αρχείο M_06 μέσα από το πρόγραμμα Sublime Text. Στη συνέχεια, δημιουργήστε ένα νέο αρχείο στο Sublime Text με όνομα Μ_06 και τύπο CSS και αποθηκεύστε μέσα στο δικό σας USB. ΑΠΑΝΤΗΣΗ. Διπλοπατήστε στο εικονίδιο του Sublime Text και δείξτε στο μενού File/ Open/ εντοπίστε το φάκελο Φάκελοι Προγραμμάτων της επιφάνειας/ CSS / M_06 / επιλέξτε το αρχείο M_06.html/ Άνοιγμα. Στη συνέχεια, δείξτε στο μενού File/New/ Save as/ εντοπίστε το USB/ δώστε το όνομα/στο πεδίο τύπος από το πτυσσόμενο μενού επιλέξτε τον τύπο CSS/Αποθήκευση. Copyright SYSTEM- All rights reserved 12/159

13 3 ον Στο αρχείο M_06.html, στη γραμμή 5 προσθέστε την ετικέτα: <link rel="stylesheet" type="css" href="m_06.css">. Στη συνέχεια, αλλάξτε το χρώμα της 1 ης παραγράφου σε μπλε και αλλάξτε και τη ΑΠΑΝΤΗΣΗ. Με επιλεγμένο το αρχείο Μ_06.html, μεταβείτε στη γραμμή 5 και πληκτρολογήστε την ετικέτα: <link rel="stylesheet" type="css" href="m_06.css">. Με επιλεγμένο το αρχείο Μ_06.CSS, πληκτρολογήστε: body p color:blue; 4 ον Ορίστε στο αρχείο Μ_06.html, ο τίτλος με στυλ επικεφαλίδας Η1 να έχει στοίχιση κέντρο. ΑΠΑΝΤΗΣΗ. Με επιλεγμένο το αρχείο Μ_06.html, μεταβείτε στη γραμμή 10 και πληκτρολογήστε την ετικέτα: <h1 class="title12">χρώματα Ίριδας</h1>. Στη συνέχεια, επιλέξτε το αρχείο Μ_06.CSS και στη γραμμή 6 πληκτρολογήστε:.title1 text-align:center; 5 ον Αποθηκεύστε στο δικό σας USB με όνομα Μ_06.html, στη συνέχεια, αποθηκεύστε και τις αλλαγές στο αρχείο Μ_06.CSS και κάντε προεπισκόπηση μέσα από τον Google Chrome το αρχείο Μ_06.html. ΑΠΑΝΤΗΣΗ. Δείξτε στο μενού File/ Save as/ εντοπίστε το USB/ δώστε το όνομα/ Αποθήκευση. Μεταβείτε στο αρχείο Μ-06.CSS και δείξτε File/ Save. Τέλος, εντοπίστε το μέσα από το USB/ δεξί πάτημα/ Άνοιγμα με./ Google Chrome. Copyright SYSTEM- All rights reserved 13/159

15 ΚΕΦΑΛΑΙΟ 7 BACKGROUND COLOR Το χρώμα φόντου, καθορίζει το χρώμα του φόντου ενός στοιχείου. Το χρώμα του φόντου μιας σελίδας καθορίζεται από τον επιλογέα του σώματος: body background-color:#fb2dbe; ΑΣΚΗΣΕΙΣ ΑΠΑΝΤΗΣΕΙΣ 1 ον Ποια από τις παρακάτω διευθύνσεις μπορείτε να χρησιμοποιήσετε για την επιλογή χρώματος; Α. Β. Γ. Δ. Καμία από τις παραπάνω ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. 2 ον Ανοίξτε το αρχείο M_07 μέσα από το πρόγραμμα Sublime Text. Στη συνέχεια, δημιουργήστε ένα νέο αρχείο στο Sublime Text με όνομα Μ_07 και τύπο CSS και αποθηκεύστε μέσα στο δικό σας USB. ΑΠΑΝΤΗΣΗ. Διπλοπατήστε στο εικονίδιο του Sublime Text και δείξτε στο μενού File/ Open/ εντοπίστε το φάκελο Φάκελοι Προγραμμάτων της επιφάνειας/ CSS / M_07 / επιλέξτε το αρχείο M_07.html/ Άνοιγμα. Στη συνέχεια, δείξτε στο μενού File/New/ Save as/ εντοπίστε το USB/ δώστε το όνομα/στο πεδίο τύπος από το πτυσσόμενο μενού επιλέξτε τον τύπο CSS/Αποθήκευση. 3 ον Μέσω του φυλλομετρητή, μεταβείτε στη διεύθυνση ΑΠΑΝΤΗΣΗ. Διπλό πάτημα επάνω στο φυλλομετρητή/ στη γραμμή διευθύνσεων πληκτρολογήστε τη διεύθυνση και πατήστε enter. 4 ον Αλλάξτε το χρώμα του φόντου σε #D9A9F5. ΑΠΑΝΤΗΣΗ. Στη σελίδα του colorpicker εντοπίστε το χρώμα #D9AF5 και αντιγράψτε τον κωδικό του ονόματός. Με επιλεγμένο το αρχείο M_07.CSS, πληκτρολογήστε την ετικέτα: body Copyright SYSTEM- All rights reserved 15/159