Sample css

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

www.facetoface.gr ΑΘΗΝΑ: ΚΑΝΙΓΓΟΣ 13 ΤΗΛ.: 2103803806 ΔΑΦΝΗ: ΑΒΕΡΩΦ 48 ΤΗΛ.: 210 9761101

ΜΑΡΟΥΣΙ: ΔΗΜΗΤΡΟΣ 3 ΤΗΛ.: 210 8026216

Copyright© 2009-2012 -SYSTEM- All rights reserved 2/159





ΠΕΡΙΕΧΟΜΕΝΑ

Μάθημα 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





Μάθημα 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





ΚΕΦΑΛΑΙΟ 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/Αποθήκευση.





ΚΕΦΑΛΑΙΟ 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 μορφοποίησης.





ΚΕΦΑΛΑΙΟ 3 ΤΡΟΠΟΣ ΣΥΝΤΑΞΗΣ CSS

Ένας κανόνας CSS έχει δύο κύρια μέρη: έναν επιλογέα, και μία ή περισσότερες δηλώσεις. Ο επιλογέας είναι συνήθως το στοιχείο που θέλετε να έχει στυλ. Κάθε δήλωση αποτελείται από μία αγκύλη και μια τιμή. Μια δήλωση CSS τελειώνει πάντα με ένα ερωτηματικό, και οι ομάδες δήλωση περιβάλλονται από αγκύλες. Παράδειγμα CSS Μια δήλωση CSS τελειώνει πάντα με ένα ερωτηματικό, και οι ομάδες δήλωση περιβάλλονται από αγκύλες: p {color:blue;font-size:12;} Καλό είναι για το CSS κάθε δήλωση να είναι σε μια ξεχωριστεί γραμμή. p { color:blue; font-size:12; } ΑΣΚΗΣΕΙΣ – ΑΠΑΝΤΗΣΕΙΣ 1ον Από πόσα μέρη αποτελείται ένας κανόνας CSS; Α. Από ένα μέρος. Β. Από δύο μέρη. Γ. Από τρία μέρη. Δ. Από κανένα. Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Β. Από δύο μέρη. 2ον Τι είναι ο επιλογέας (selector); Α. Είναι συνήθως το στοιχείου που θέλουμε να έχει στυλ. Β. Είναι οι αγκύλες που πληκτρολογούμε μέσα τις ετικέτες.Γ. Είναι η αξία του κάθε στοιχείου Δ. Κανένα από τα παραπάνω Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Είναι το στοιχείο που θέλουμε να έχει στυλ. 3ον Με ποιο χαρακτήρα διαχωρίζεται η κάθε ενέργεια; Α. Με κόμμα. Β. Με κενό. Γ. Με αγκύλες.





Δ. Με ελληνικό ερωτηματικό. Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Δ. Με ελληνικό ερωτηματικό. 4ον Πόσους τρόπους γραφής έχουμε στο CSS; Α. Δύο Β. Έναν Γ. Τρείς Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Α. Δύο.

ΚΕΦΑΛΑΙΟ 4 CSS ΣΧΟΛΙΑ

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





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





ΚΕΦΑΛΑΙΟ 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/Αποθήκευση.





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.





ΚΕΦΑΛΑΙΟ 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/Αποθήκευση.





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.





ΚΕΦΑΛΑΙΟ 7

BACKGROUND COLOR www.colorpicker.com

Το χρώμα φόντου, καθορίζει το χρώμα του φόντου ενός στοιχείου. Το χρώμα του φόντου μιας σελίδας καθορίζεται από τον επιλογέα του σώματος: body {background-color:#FB2DBE; }

ΑΣΚΗΣΕΙΣ – ΑΠΑΝΤΗΣΕΙΣ 1ον Ποια από τις παρακάτω διευθύνσεις μπορείτε να χρησιμοποιήσετε για την επιλογή χρώματος; Α. www.backgroundcolor.com Β. www.colorpicker.gr Γ. www.colorpicker.com Δ. Καμία από τις παραπάνω Επιλέξτε τη σωστή απάντηση με το ποντίκι. ΑΠΑΝΤΗΣΗ. Η σωστή απάντηση είναι Γ. www.colorpicker.com 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ον Μέσω του φυλλομετρητή, μεταβείτε στη διεύθυνση www.colorpicker.com. ΑΠΑΝΤΗΣΗ. Διπλό πάτημα επάνω στο φυλλομετρητή/ στη γραμμή διευθύνσεων πληκτρολογήστε τη διεύθυνση www.colorpicker.com και πατήστε enter.

4ον Αλλάξτε το χρώμα του φόντου σε #D9A9F5. ΑΠΑΝΤΗΣΗ. Στη σελίδα του colorpicker εντοπίστε το χρώμα #D9AF5 και αντιγράψτε τον κωδικό του ονόματός. Με επιλεγμένο το αρχείο M_07.CSS, πληκτρολογήστε την ετικέτα: body {

Sample css

Education

Transcript of Sample css