ΟΜΙΛΗΤΗΣ: Αποδεικνύεται ότι η HTML δεν είναι η μόνη γλώσσα που μπορείτε να χρησιμοποιήσετε μέσα μιας σελίδας web. Μπορείτε να χρησιμοποιήσετε κάτι που ονομάζεται CSS, ή Τα επικαλυπτόμενα φύλλα στυλ, καθώς και. CSS σας επιτρέπει να ορίσετε πολύ περισσότερο ακριβώς η αισθητική ενός web σελίδα, περιλαμβανομένης και της διαμόρφωσης και τα μεγέθη και χρώματα και τις γραμματοσειρές και πολλά άλλα. Για παράδειγμα, ας δημιουργήσουμε μια ιστοσελίδα εδώ που ονομάζεται CSS0 που αντιπροσωπεύει μια αρχική σελίδα για, ας πούμε, John Harvard. 

Σε αυτή τη σελίδα, θα έχουμε John Χάρβαρντ όνομα, κάτω από το οποίο θα ένα ωραίο μήνυμα για τους επισκέπτες του, κάτω από η οποία θα είναι μια υποσημείωση, με λένε, κάποιες πληροφορίες πνευματικών δικαιωμάτων. Για να το κάνετε αυτό, ας ορίσουμε τρία τμήματα για τη σελίδα χρησιμοποιώντας ένα tag ονομάζεται div. Open div βραχίονα, John Harvard, κοντά βραχίονα div, ένα άλλο ανοικτό στήριγμα div, και τώρα θα ορίσουμε κάτι όπως, καλώς ήρθατε στην προσωπική μου σελίδα! Και ας κλείσει αυτό το div, καθώς και. 

Και τώρα το ένα τρίτο και τελικό div, τα δικαιώματα πνευματικής ιδιοκτησίας. Ακριβώς για να είναι φανταχτερό, επιτρέψτε μου να χρησιμοποιήσω τώρα ένα HTML οντότητα, ένα σύμβολο που αντιπροσωπεύει ένας χαρακτήρας που δεν θα μπορούσε αλλιώς πληκτρολογείτε στο πληκτρολόγιό σας. Ειδικότερα, Πάω να κάνουμε σύμβολο, λίρα, 169, τελεία. Αποδεικνύεται ότι το αριθμητικό κωδικό για το σύμβολο πνευματικών δικαιωμάτων. Στη συνέχεια, ας καθορίσετε John Harvard εδώ στο κάτω μέρος. Ας κλείσει το div και να αποθηκεύσετε το αρχείο. 

Τώρα, τι είναι αυτό το tag div; Το tag div απλώς ορίζει ένα τμήμα της σελίδας, η οποία είναι ουσιαστικά ένα ορθογώνια περιοχή. Έτσι, σε αυτή τη στιγμή, έχω τρεις ορθογώνιες περιοχές, το ένα στην κορυφή του άλλου. Έτσι, για τώρα, το αποτέλεσμα είναι σχεδόν το ίδιο αν είχα τρεις παραγράφους. Αλλά δεν θα δούμε τόσο πολύ λευκό κενό μεταξύ τους. 

Ας αποθηκεύσετε αυτό το αρχείο, η αλλαγή του δικαιώματα, και ρίξτε μια ματιά για μια στιγμή στο Chrome. Chmod a + r CSS0.html. Ας τώρα να ανοίξει Chrome και επίσκεψη http://localhost.CSS0.html. Πράγματι, εδώ είναι μια αρχική σελίδα για τον John Harvard. Ας τώρα στυλιζάρω λίγο περισσότερο ακρίβεια χρησιμοποιώντας κάποια CSS. 

Πίσω στο gedit, ας πάμε σε αυτό πρώτη tag div και να προσθέσετε ένα στυλ αποδίδουν διευκρινίζοντας ότι θα ήθελα μια το μέγεθος της γραμματοσειράς του, ας πούμε, 36 εικονοστοιχεία, ή px. Και θα ήθελα το βάρος αυτής της γραμματοσειράς να είναι τολμηρή και όχι την προεπιλογή, το οποίο είναι φυσιολογικό. Για τη δεύτερη div, ας καθορίσετε άλλο χαρακτηριστικό στυλ που έχει το μέγεθος της γραμματοσειράς των 24 pixels, έτσι λίγο μικρότερο. Κλείστε αποσπάσματα μετά την τελεία. 

Τέλος, σε αυτό το τρίτο div, ας κάνουμε στυλ ισούται με το μέγεθος απόσπασμα, τη γραμματοσειρά και ας πούμε 12 pixels αυτή τη φορά. Κλείσιμο απόσπασμα μετά την τελεία. Παρατηρήστε τότε που φαίνεται να έχουν καθορίζεται ένα κομμάτι της στυλιζάρισμα για κάθε μία από αυτές τις τρεις divs χρήση, αποδεικνύεται, CSS. Στην πραγματικότητα, η σύνταξη που βλέπετε στην μεταξύ αυτών διπλά εισαγωγικά είναι CSS, Συγκεκριμένα CSS ιδιότητες με τις αξίες. Και για το πρώτο ετικέτα, όπου είχα δύο τέτοιες ιδιότητες, μέγεθος γραμματοσειράς και font βάρος, εγώ απλά χωρίζονται τους με ένα ερωτηματικό. 

Τώρα, μόνο για λόγους ύφους, I Περιλαμβάνονται επίσης ερωτηματικά σε το τέλος της κάθε γραμμής. Αλλά δεν είναι απολύτως αναγκαίο, ιδιαίτερα όταν έχετε μόνο ένα ιδιοκτησίας που ορίζεται. Ας τώρα να αποθηκεύσετε το αρχείο και επαναλάβετε τη φόρτωση στο Chrome, και να δούμε τι το καθαρό αποτέλεσμα είναι. Πίσω στο Chrome εδώ, ας κλικ Reload. 

Τώρα έχουμε μια ελαφρώς πιο ενδιαφέρουσα Αρχική σελίδα για τον John Χάρβαρντ, όπου η πρώτη γραμμή με το όνομά του, το οποίο είναι μέσα από αυτό πρώτη div, είναι 36 pixels ύψος και έντονους, οπότε η δεύτερη γραμμή, που είναι σε αυτό το δεύτερο div, είναι 24 pixels ψηλός, αλλά όχι έντονη γραφή. Και σύμφωνα με την οποία η τρίτη γραμμή στην εν λόγω τρίτη div είναι 12 pixels ύψος και Δεν με έντονους χαρακτήρες. Αλλά ας υποθέσουμε ότι τώρα θα ήθελα να στραφούν όλα αυτό το κείμενο πάνω έτσι ώστε να είναι κεντραρισμένο. 

Θα μπορούσε να ευθυγραμμίσει κάθε επιμέρους Divs ως επίκεντρο. Αλλά πιο εύκολα, θα μπορούσα να τυλίξετε εκείνες τρεις divs εσωτερικό ενός τέταρτου div, ένα μητρική div, να το πω έτσι, και να καθορίσετε ότι το div και όλα της απόγονοι θα πρέπει να είναι κειμένου στοιχίζονται κέντρο; Ας ρίξουμε μια ματιά. 

Μέσα από gedit, ας πάμε πίσω στο μου το σώμα και να προσθέσετε μια νέα div επάνω στην κορυφή με div, το στυλ ισούται με παράθεση unquote κέντρο ευθυγράμμιση κειμένου, κοντά παραθέσω μετά την τελεία. Και τώρα, ας πάμε μπροστά και παύλα όλα από αυτές τις γραμμές που έχουμε πληκτρολογήσει στο παρελθόν. Και κάτω από την εν λόγω τρίτη div, ας κλείστε αυτό το νέο div. 

Με άλλα λόγια, επειδή τα τρία αυτά αρχική divs είναι τώρα τα παιδιά, έτσι ώστε να μιλούν, μίας νέας μητρικής div και έχω διευκρινίζεται ότι θα ήθελα να ευθυγραμμίσει το κείμενο της εν λόγω μητρικής div στο κέντρο της σελίδας, ότι η ιδιοκτησία θα είναι κληρονομείται από όλα αυτά τα παιδιά. Πράγματι, ας αποθηκεύσετε το αρχείο και ρίξτε μια ματιά σε ένα πρόγραμμα περιήγησης. Ας φορτώσετε στο Chrome. Και εκεί αυτό, ένα ακόμη καλύτερο έχουν αρχική σελίδα για τον John Harvard.