[Παίζει μουσική] 

DOUG LLOYD: Ας ρίξουμε μια πιο βίντεο για να μιλήσουμε για μία ακόμη γλώσσα. Αυτή τη φορά θα μιλήσουμε για CSS. Έτσι, CSS, η οποία είναι μικρή για Cascading Style Sheets, είναι μια άλλη γλώσσα που χρησιμοποιούμε κατά την κατασκευή δικτυακών τόπων. Σκεφτείτε το σαν αυτό. Αν HTML είναι αυτό που χρησιμοποιείτε για να οργανώσετε το περιεχόμενο που θέλετε να βάλετε στην σελίδα μας, CSS είναι το εργαλείο που χρησιμοποιούμε συνήθως για να προσαρμόσετε τον τρόπο κοιτάξουμε τις ιστοσελίδες μας, και πώς η εμπειρία του χρήστη πραγματικά είναι, αλληλεπιδρούν με την ιστοσελίδα μας. 

Παρόμοια με την HTML, CSS είναι δεν είναι μια γλώσσα προγραμματισμού. Δεν έχει λογική. Δεν έχει μεταβλητές. Δεν έχει κανενός είδους που ροής που σχετίζονται με τα πράγματα που κάνει C. Είναι μια γλώσσα styling. Και η σύνταξη του είναι αρκετά απλό, και απλά περιγράφει πως τα στοιχεία του μας σελίδα έχει ορισμένα HTML στοιχεία θα πρέπει να τροποποιηθεί. Για το σκοπό αυτό, εάν δεν έχετε ακόμη παρακολούθησαν βίντεο μας στο HTML, ή είναι εξοικειωμένοι με HTML γενικά, μπορείτε μπορεί να θέλετε να ρίξετε μια ματιά σε αυτό πρώτον, επειδή αυτή η συζήτηση του CSS θα εξαρτηθεί από κάποια γνώση της HTML. 

Έτσι, εδώ είναι μια πραγματικά απλή CSS στυλ. Ακόμα κι αν δεν έχετε προγραμματιστεί με CSS πριν, Είμαι απόλυτα βέβαιος ότι μπορείτε να καταλάβω τι ακριβώς κάνει αυτό το στυλ. Τι κάνει? Λοιπόν, εφαρμόζονται στο σώμα της ιστοσελίδας μας σελίδα, ό, τι μεταξύ των ετικετών σώματος HTML για μας, και θέτει το χρώμα του φόντου της σελίδας σε μπλε. Λοιπόν, αυτό είναι ένα πολύ απλό στυλ. Είναι πραγματικά πολύ ανθρώπινο φιλική γλώσσα, CSS. Έτσι, ακόμη και αν δεν έχετε χρησιμοποιήσει πριν, ίσως θα μπορούσε να μαντέψει τι έκανε αυτό. Στην πραγματικότητα, αν φορτωθεί μια σελίδα, όπου Αυτό το στυλ ήταν ενσωματωμένο με κάποιο τρόπο, το χρώμα φόντου της σελίδας μας θα είναι μπλε, και όχι η τυπική λευκό. 

Επομένως, πώς θα οικοδομήσουμε φύλλων στυλ; Λοιπόν κατ 'αρχάς, θα πρέπει να προσδιορίσει έναν επιλογέα. Στο τελευταίο παράδειγμα, ότι επιλογέας ήταν το σώμα. Στη συνέχεια έχουμε μια ανοικτή σγουρά στήριγμα, και είμαστε πρόκειται να ξεκινήσει τον καθορισμό του στυλ για την εν λόγω επιλογής. Στο μεταξύ τα άγκιστρα, εμείς απλά έχουν μια λίστα βασικών ζευγών αξίας. Το προηγούμενο ζεύγος αξία ήταν χρώμα μπλε φόντο ερωτηματικό, αλλά θα μπορούσαμε να κάνουμε περισσότερα και περισσότερα από αυτά. Θα μπορούσατε να έχετε πολλαπλές πράγματα εφαρμογής σε αυτή την ετικέτα, τον εν λόγω οργανισμό επιλογέα. Κάθε ένα από αυτά χωρίζονται από ένα ερωτηματικό, και καλούμε κάθε ένα από αυτά μια δήλωση, μια δήλωση CSS. Όταν τελειώσετε με όλα τα στυλ που θέλετε να ισχύουν για τη συγκεκριμένη ετικέτα, έχουμε απλώς ένα κλείσιμο σγουρά Προετοιμαστείτε για τον τερματισμό της στυλ, και τελειώσουμε τον ορισμό του στυλ για το συγκεκριμένο επιλογέα. 

Ποιες είναι μερικές κοινές ιδιότητες CSS; Καλά, ίσως θέλετε να βάλετε ένα περίγραμμα γύρω από κάτι. Έτσι, μπορείτε να πείτε, των συνόρων, ότι θα είναι το κλειδί σας, και, στη συνέχεια, τις αξίες σας θα είναι, τι στυλ, το χρώμα και το πλάτος θέλετε να είναι. Έτσι, το ύφος θα μπορούσε να είναι ένα στερεό γραμμή, διακεκομμένη γραμμή, μία διακεκομμένη γραμμή, μια γραμμή κορυφογραμμή, η οποία θα είναι κυματιστή γραμμή. Ίσως θέλετε να το έχετε να είναι μπλε ή μαύρο ή πράσινο. Ίσως θέλετε να είναι 1 ή 2 ή 10 pixels πλάτος. Μπορείτε να ορίσετε όλα αυτά τα πράγματα. Ίσως θέλετε να καθορίσετε το παρασκήνιο το χρώμα της σελίδας σας με έναν ιδιαίτερο τρόπο. Ήδη είδαμε ότι, η ρύθμιση φόντο του σώματος να είναι μπλε. 

Στη συνέχεια, μπορείτε να χρησιμοποιήσετε μια λέξη κλειδί, έτσι CSS έχει ορισμένα χρώματα που είναι χτισμένη σε αυτό, μπλε, πράσινο, μαύρο, ένα πολύ απλό χρώματα γνωρίζουμε. Αλλά μπορείτε επίσης να ορίσετε οποιαδήποτε hex χρώμα που θέλετε. Θυμηθείτε ότι μπορεί να προσδιοριστεί χρώματα από μια σειρά τριών αριθμών hex από 0 έως 255, RG και b, το κόκκινο, πράσινο και μπλε συνιστώσα. Και έτσι μπορούμε να καθορίσουμε οποιοδήποτε χρώμα που θέλουμε από, αντί να χρησιμοποιήσετε μπλε ή πράσινο ή μαύρο χρώμα, χρησιμοποιώντας λίρα και στη συνέχεια έξι ψηφία του δεκαεξαδικού, και ότι θα μας δώσει το εξαψήφιο χρώμα. Έτσι, αυτό είναι το χρώμα του φόντου. 

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

Έτσι, μπορείτε να αλλάξετε το μέγεθος της γραμματοσειράς σας. Μπορείτε να χρησιμοποιήσετε λέξεις-κλειδιά, όπως επιπλέον, Πολύ μικρή, ή xx μικρές ή μεσαίες, μεγάλο, και ούτω καθεξής. Μπορείτε να χρησιμοποιήσετε σταθερά σημεία, 10 σημείο, 12 σημείο, και ούτω καθεξής. Μπορείτε να χρησιμοποιήσετε τα ποσοστά, 80%, 20%, όπου το 100% είναι η προεπιλεγμένη γραμματοσειρά μέγεθος, το οποίο είναι συνήθως πρόκειται να είναι κάτι σαν 11 ή 12 πόντους. Ή μπορείτε να στηρίξει ακόμη και εκτός της πιο πρόσφατης μέγεθος της γραμματοσειράς. Αν απλά έγραψε κάτι και να ξέρετε αυτό που θέλουμε είναι να είναι μικρότερο, αλλά δεν ξέρετε τι ακριβώς μέγεθος που θέλουν να είναι, καλά, μπορείτε να πείτε απλά, μέγεθος γραμματοσειράς μικρότερο. Και θα βασίσει την απενεργοποίηση του, ακριβώς από πάνω, είναι το μέγεθος της γραμματοσειράς. Και μπορείτε να πάρετε μικρότερο ή μεγαλύτερο. Έτσι, υπάρχει μια πολύ διαφορετική τρόποι για να καθορίσετε το μέγεθος της γραμματοσειράς. 

Μπορείτε επίσης να καθορίσετε τι Οικογένεια γραμματοσειράς που θέλετε. Εάν έχετε μια ιδιαίτερη όνομα, υπάρχει ένας τρόπος στο CSS-- εμείς δεν πρόκειται να μιλήσω γι 'αυτό here-- να ορίσει μια πολύ συγκεκριμένη γραμματοσειρά και το ενσωματώσετε στη σελίδα σας. Μπορείτε επίσης να χρησιμοποιήσετε γενικά ονόματα. Υπάρχουν πολλά web ασφαλείς πηγές που είναι προ-ορίζονται στο CSS. Και αν είστε χρήστης της Microsoft Γραφείο κατά τα τελευταία 20 χρόνια, είστε πιθανώς εξοικειωμένοι με πολλά από αυτά τα web ασφαλείς πηγές ήδη, Times New Roman, Arial, Courier New, Γεωργία, Tahoma, Verdana, και ούτω καθεξής. Αυτοί θεωρούνται όλα web ασφαλείς πηγές. Και πράγματι, μέρος της λόγος που ήρθε να είναι έπρεπε να χρησιμοποιηθεί για να κάνει web-- κάθε σελίδα είχε πρόσβαση σε αυτό το προεπιλεγμένο σύνολο γραμματοσειρών με διάφορες πατούρες, και όλα αυτά γραμματοσειρά πράγματα που δεν θα μπει, αλλά αυτά είναι συνήθως προσβάσιμη σε CSS σας, ακόμη και αν δεν το κάνετε Αλλιώς καθορίζουν τις γραμματοσειρές. Τέλος, μπορείτε να ευθυγραμμίσετε το κείμενό σας, αντί να είναι, εξ ορισμού, να ευθυγραμμιστούν προς τα αριστερά, θα μπορούσατε ευθυγράμμισή του προς τα δεξιά, ή θα μπορούσε να ευθυγραμμιστεί το επίκεντρο, ή δικαιολογείται έτσι ώστε να χτυπήσει δύο περιθωρίων. Έτσι, όλα αυτά είναι επιλογές που μπορείτε να χρησιμοποιήσετε για να αλλάξει ό, τι το κείμενο σας μοιάζει, και πώς εμφανίζεται στην σελίδα σας. 

Επιλογείς σας δεν κάνει πρέπει να είναι μόνο ετικέτες. Είδαμε προηγουμένως μια ετικέτα σώμα επιλογής, και επιλογέα tag δεν μοιάζει ακριβώς όπως αυτό. Μπορείτε όνομα μιας ετικέτας, και στη συνέχεια ορίσετε ένα στυλ για αυτή την ετικέτα. Αλλά μπορείτε επίσης να κάνετε κάτι ονομάζεται επιλογέας ID. Ένας επιλογέας ID φαίνεται αρκετά παρόμοια. Να σημειωθεί όμως, ότι τώρα δεν είμαι με τη χρήση μια ετικέτα HTML, είμαι με τη χρήση, στην περίπτωση αυτή, #unique, ή hash μοναδική. Αν θυμάστε από μας βίντεο σε HTML, μιλήσαμε σχετικά με το πώς οι ετικέτες μπορούν να έχουν χαρακτηριστικά. 

Και ένα χαρακτηριστικό που ισχύει σε σχεδόν όλες τις ετικέτες HTML, αλλά δεν μιλάμε γι 'αυτό, Είναι κάτι που ονομάζεται μια ετικέτα ID. Έτσι, αυτό το συγκεκριμένο CSS θα ισχύουν μόνο για HTML tag που έχει μια πολύ συγκεκριμένη ταυτότητα, ότι έχετε το όνομα. Έτσι, αν έχετε κάπου στον κώδικά σας, κάπου σε αρχείο HTML, μια ετικέτα και καθορίζει ως ένα χαρακτηριστικό της εν λόγω ετικέτας, ID ισούται με το μοναδικό, αυτό Ειδικότερα στυλ Εδώ θα ισχύουν μόνο μεταξύ αυτή η ετικέτα με το αναγνωριστικό του μοναδική. 

Μπορείτε επίσης να κάνετε κάτι ονομάζεται επιλογέας τάξη. Έτσι, εκτός του ότι έχει ID χαρακτηριστικά, μπορείτε επίσης να προσθέστε ένα χαρακτηριστικό τάξη σε ετικέτες HTML. Και όταν χρησιμοποιείτε ένα χαρακτηριστικό κλάσης, μπορεί να εφαρμοστεί σε πολλαπλές ετικέτες. Έτσι, αν έχετε πολλά πράγματα που Τα παρόμοια, ίσως θέλετε να πείτε, μπλα open tag, μπλα, μπλα, μπλα, τάξη ισούται φοιτητές. Και τότε αυτό το συγκεκριμένο στυλ θα εφαρμοστεί σε κάθε ετικέτα των οποίων η κατηγορία είναι φοιτητές. Σε αυτή την περίπτωση, είχαμε οριστεί η χρώμα του φόντου σε κίτρινο, και εμείς θα ορίσετε την αδιαφάνεια, η οποία είναι μια ετικέτα που δεν μιλάμε για, αλλά απλά ασχολείται με πόση διαφάνεια είναι κάτι, σε 70%, σε αυτή την περίπτωση. 

Υπάρχουν δύο επιλογές για την γραφής stylesheets. Μπορείτε να τα γράψω απευθείας στο HTML σας με την τοποθέτηση των φύλλων στυλ μεταξύ ετικέτες στυλ. Και αυτές οι ετικέτες του στυλ, πηγαίνετε στο εσωτερικό της οι ετικέτες επικεφαλής της ιστοσελίδας σας. Η ίσως πιο προτιμώμενος τρόπος για να κάνουμε είναι να γράψετε ένα ξεχωριστό αρχείο .css, και στη συνέχεια να συνδεθεί με σας εγγράφου χρησιμοποιώντας ετικέτες σύνδεσμο. Ετικέτες Link, πάλι, είναι διαφορετικό από υπερσυνδέσμους, αν θυμάστε από το βίντεο μας ένα HTML. Και ετικέτες σύνδεσμος είναι το πώς θα τραβήξτε σε ξεχωριστά αρχεία. Είναι κάτι σαν το αντίστοιχο του η #include για web προγραμματισμό. 

Έτσι, ας ρίξουμε μια ματιά σε table.HTML. Αν θυμάστε από μας HTML βίντεο, μου έδειξε ένα παράδειγμα ενός πολύ απλό πολλαπλασιασμό πίνακα που φαινόταν αρκετά άσχημο, και ίσως υπάρχει ένας τρόπος για να γίνει καλύτερα με CSS, για να δούμε πραγματικά περισσότερο σαν ένα πολλαπλασιασμό τραπέζι, ή κάτι ότι δεν είναι μόνο κολλήσει μαζί χωρίς πραγματική διαίρεση μεταξύ των σειρών και των στηλών. Οπότε ας το κεφάλι πάνω σε CS50 IDE, και ρίξτε μια ματιά πώς CSS μπορεί, είδος, το τσίμπημα αυτό που ξεκίνησε με πριν, και κάτι πολύ καλύτερο να κάνει. 

Έτσι είμαστε σε CS50 IDE τώρα, και αν δεν είναι εξοικειωμένοι, θα τραβήξει σε αυτό πίνακα ότι η HTML σελίδα. Table.HTML βασικά ορίζει μόνο τα περιεχόμενα του multiple-- που έπρεπε να είναι μια τέσσερις από τέσσερις πίνακα πολλαπλασιασμού. Είναι αρκετά απλό. Και εμείς θα σκεφτόταν ότι θα ήταν εξετάσουμε πολύ καλά οργανωμένη. Αλλά στην πραγματικότητα, όταν θα προβολής αυτής της σελίδας, βλέπουμε ότι είναι το είδος άσχημο, σωστά; Σαφώς έχουμε γραμμές και στήλες εδώ. Υπάρχει κάποιο είδος του διαχωρισμού. Αλλά δεν είναι ένα ουσιαστικό διαχωρισμό. Δεν είμαστε πραγματικά να πάρει πάρα πολλές πληροφορίες εδώ. Και δεν υπάρχει κανένας διαχωρισμός μεταξύ οι σειρές και στήλες σε όρους της οριζόντιας ή κάθετης κανόνες. Θα μπορούσαμε ίσως να κάνει αυτό κοιτάξουμε λίγο καλύτερα. Οπότε ας προσπαθήσουμε. Έτσι, Πάω να κλείσει αυτήν την καρτέλα εδώ. Και Πάω να κλείσει table.HTML μου, και έχω μια άλλη εκδοχή εδώ που ονομάζεται table2.HTML. Θα ανοίξει το επάνω. Το σώμα της σελίδας είναι λίγο πολύ το ίδιο, αλλά έχω αλλάξει ένα λίγο στην κορυφή. Και εγώ θα μετακινηθείτε προς τα επάνω εδώ. Σημειώστε ότι αυτή τη φορά, είμαι χρησιμοποιώντας το ενσωματωμένο ετικέτες στυλ. Έχω ανοίξει μια ετικέτα στυλ, και είμαι τώρα ορίζει ένα CSS στυλ ακριβώς μέσα από αυτό. Έχω ένα στυλ που λέει, τραπέζι. Αυτό είναι επιλογέα tag μου. Δεν είμαι χρησιμοποιώντας τελεία ή κατακερματισμού, πράγμα που θα έκανα αν ήμουν ήταν χρησιμοποιώντας ένα αναγνωριστικό ή μια τάξη επιλογέα. Έχω ένα επιλογέα tag here-- πίνακα. Αυτό το στυλ πρόκειται να ισχύουν για κάθε ετικέτα τραπέζι. Προφανώς θέλω να θέσω ένα one εικονοστοιχείων, στερεό μπλε περίγραμμα, μέσα στο τραπέζι μου. Αυτό ακούγεται σαν να ήταν πιθανώς βοηθήσει την κατάσταση, σωστά; Εμείς πάμε για να έχουν τα πράγματα φαίνονται πολύ καλύτερα. Έτσι, αυτό είναι καλό. Στιλιστικά, έχω μόνο ενσωματωμένα στυλ μου εδώ. Είναι σίγουρα ένα αποδεκτός τρόπος για να το κάνουμε. Ας δούμε τι αυτό μοιάζει. Γι 'αυτό και θα επιστρέψω εδώ κάτω, και Θα προεπισκόπηση θα table2.HTML μου. Λοιπόν, αυτό δεν είναι ακριβώς αυτό που ήθελα, αλλά είναι ακριβώς ό, τι ζητήσαμε. Είπαμε ότι αυτό το στυλ είναι πρόκειται να εφαρμόσει στο τραπέζι μας. Το τραπέζι μας έχει τώρα ένα pixel ευρύ, σταθερό μπλε περίγραμμα γύρω από αυτό. Δεν είμαστε πραγματικά να πάρει στα κελιά του πίνακα. Εμείς απλά να πάρει στο τραπέζι. Έτσι CSS εργαστεί. Έχει εφαρμοστεί ένα στυλ στο τραπέζι μας. Αλλά δεν κάνει αρκετά ό, τι θέλαμε να κάνουμε. Πώς θα φτάσουμε να κάνουμε τι θέλουμε να κάνουμε; 

Λοιπόν, ας ρίξουμε μια ματιά σε ένα πιο έκδοση του αυτό table3.HTML. Έτσι, είμαι απλώς πρόκειται να κλείσει αυτές τις καρτέλες. Πάω να επιστρέψω εδώ για να μου αρχείο δέντρο, και να ανοίξει table3.HTML. Και πάλι, πρόκειται να εξετάσουμε πολύ παρόμοιο εδώ στην αρχή. Αλλά ανακοίνωση, αυτή τη φορά, αντί της χρήσης ένα φύλλο στυλ είναι ενσωματωμένη εκεί, Πάω να συνδεθούν σε ένα στυλ χρησιμοποιώντας την ετικέτα σύνδεσμο. Έτσι είμαι προφανώς σε μια σύνδεση στυλ που ονομάζεται tables.CSS, και αυτό και ισούται με στυλ ακριβώς means-- καλά, τι είναι αυτό το αρχείο σε σχέση με ό, τι Είμαι doing-- είναι ένα στυλ που είμαι χρησιμοποιώντας για τη σελίδα μου. Έτσι, αν πραγματικά θέλετε να δείτε τι Κάνω με το CSS εδώ, Πρέπει να πάω ανοικτές ότι table.CSS αρχείων, καθώς και. Έτσι θα πάμε πίσω εδώ και πάλι σε δέντρο αρχείο μας. Υπάρχει table.CSS. Θα το σκάσει ανοίξει. Τώρα βλέπουμε λίγο από το CSS. Προφανώς, έχω ένα ζευγάρι πράγματα συμβαίνουν εδώ. Θα προφανώς θέλει να βάλει πέντε εικονοστοιχείων, στερεό κόκκινο περίγραμμα, γύρω από το τραπέζι μου. Γνωρίζουμε ήδη ότι αυτό συμβαίνει να πάει ακριβώς στην περίμετρο. Είδαμε ότι στην table2.HTML. Με κάθε σειρά, εγώ θέλουν προφανώς να ορίσετε ότι το ύψος της γραμμής είναι 50 pixels ύψος. Έτσι, για κάθε γραμμή, θυμηθείτε αυτό είναι που κάνει η ετικέτα tr, Κάνω το 50 pixels ύψος. 

Τέλος, έχω αυτό το σχόλιο. Και αυτό είναι το πώς μπορούμε να διατυπώσουν τις παρατηρήσεις CSS. Είναι πολύ παρόμοιο με αδράξουν μπλοκ σχόλια σύνταξη αστέρι κάθετο. Όλο το κείμενο που θέλετε. Δεν υπάρχει κάθετος κάθετος αν και σε CSS. Για σύντομες παρατηρήσεις inline, έχουμε Για να χρησιμοποιήσετε αυτή συγκεκριμένη μορφή εδώ. Μοιάζει κάνω μια Πολλά πράγματα σε ετικέτες td μου. Θυμηθείτε ετικέτες td, ή τραπέζι στοιχεία, τα οποία είναι πραγματικά ακριβώς Οι κίονες στο εσωτερικό της σειρές μας, και προφανώς για κάθε κομμάτι των στοιχείων στο τραπέζι μου, θέλω για να ορίσετε το χρώμα φόντου για την είναι το μαύρο, το χρώμα πρέπει να είναι λευκό, χρώμα είναι χρώμα προσκηνίου. Έτσι, αυτό πρόκειται να είναι Το κείμενο της σελίδας μου. Θέλω μεγάλη γραμματοσειρά, 22 μέγεθος γραμματοσειράς, και θέλω να είναι της οικογένειας γραμματοσειρών, Γεωργία. Γι 'αυτό και δεν πρόκειται να έχουν την προεπιλεγμένη γραμματοσειρά. Πάω να καθορίσετε τη Γεωργία, η οποία είναι ένα από αυτά τα web ασφαλείς πηγές ότι έχουμε δει στο παρελθόν. Θέλω κείμενό μου να ευθυγραμμιστούν κεντρικά, στο μέσον του κουτιού, Δεν θέλω να μείνει ευθυγραμμισμένο ή δεξιά στοίχιση. Και θέλω το πλάτος της στήλης μου να είναι 50 pixels πλάτος, καθώς και. Ας ρίξουμε μια ματιά στο τι αυτό μοιάζει, και να δούμε αν αυτό είναι ίσως μια βελτίωση. Έτσι, Πάω να πάει στο table3.HTML, η οποία ανάκληση, περιλαμβάνει table.CSS ως σύνδεσμος, και εμείς θα την προεπισκόπηση. Αυτό είναι πολύ καλύτερα, έτσι δεν είναι; Αυτό είναι πραγματικά αρχίζει να φαίνεται πολύ περισσότερο σαν ένα πίνακα πολλαπλασιασμού. Έχω αυτό το κόκκινο περίγραμμα γύρω από το τραπέζι μου, αλλά τώρα Θα ήθελα επίσης να διευκρινιστεί ότι κάθε γραμμή είναι 50 pixels πλάτος, ή είναι 50 εικονοστοιχεία tall-- δικαιολογία me-- κάθε στήλη είναι 50 pixels πλάτος. Τα δεδομένα σε κάθε στήλη, και μόνο τα δεδομένα, έχει ένα μαύρο φόντο. Έτσι, γι 'αυτές που λευκές γραμμές υπάρχουν. Επειδή ο χώρος μεταξύ όλων αυτών των κυττάρων, δεν είναι μια συνόρων στην από μόνη της, είναι ακριβώς Είμαι μόνο τη συμπλήρωση της κύτταρα, τα οποία στην πραγματικότητα καθιστά τα σύνορα του πίνακα, ο οποίος προφανώς υπήρχαν σε όλο το μήκος, το ήταν απλά λεπτές λευκές γραμμές. Τώρα είναι ορατό. Τώρα έχει πεταχτεί στην οθόνη. Και έτσι αυτό είναι ένα πολύ απλό στυλ που έχω χρησιμοποιήσει, και τώρα το τραπέζι μου μοιάζει πολύ περισσότερο σαν ένα τραπέζι τέσσερις από τέσσερις πολλαπλασιασμό, αντί για ένα μόνο μπερδεμένες χάος, όπου όλα είναι ξεκάθαρα γραμμές και στήλες, αλλά όχι εξαιρετικά καλά οργανωμένη. Είμαστε πραγματικά ακριβώς το ξύσιμο της επιφάνειας από ό, τι μπορείτε να κάνετε με CSS εδώ. Ευτυχώς, η τεκμηρίωση CSS είναι αρκετά απλή. Θα χρησιμοποιήσετε πολλές από της Χαρακτηριστικά, αρκετά συχνά. Οι αυτοί μιλήσαμε για νωρίτερα σε αυτό το βίντεο. Υπάρχουν πολλά που μπορείτε πιθανότατα δεν θα χρησιμοποιήσει όλα. Και αυτό είναι εντάξει, πάρα πολύ. Αλλά ακριβώς γνωρίζουν, ότι υπάρχει μια Πολλοί τεκμηρίωσης εκεί έξω. Έτσι, ακόμη και αν δεν καλύπτει τα πάντα, είστε σίγουρα δεν άφησαν τη δική σας. Αλλά CSS είναι πραγματικά διασκεδαστικό να πειραματιστείτε με. Και θα ήθελα να σας ενθαρρύνω για να παίξει γύρω με τις ιστοσελίδες σας, και δείτε πώς μπορείτε να τα κάνετε εμφάνιση και την αίσθηση για τη βελτίωση της χρήσης εμπειρία της επίσκεψης σας σελίδα. Είμαι ο Νταγκ Lloyd. Αυτό είναι CS50.