[Παίζει μουσική] ALLISON BUCHHOLTZ-ΑΕ: Έτσι Είμαστε ουσιαστικά ακριβώς πρόκειται για να σας δώσει ένα υποβαθμισμένο του CSS, γιατί ξέρουμε ότι δεν καλύπτεται σε όλα τα τμήματα. Και θέλουμε πραγματικά να βεβαιωθείτε ότι έχετε παιδιά έχουν αυτό το εργαλείο στη διάθεσή σας, επειδή έχει την ικανότητα να κάνει ιστοσελίδες σας φαίνονται πολύ πιο όμορφη. 

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

ΤΟΜΑΣ Reimers: Ναι. Allison είπε αρκετά καλά. Έτσι υποθέτω ότι το πρώτο πράγμα που θα πρέπει να αρχίσει με είναι ό, τι είναι CSS; Έτσι, CSS είναι φοβερό. CSS-- 

ALLISON BUCHHOLTZ-ΑΕ: Αυτό είναι το όνομα του σεμιναρίου μας. 

ΤΟΜΑΣ Reimers: Ναι. Είναι πολύ σημαντικό ότι καταλαβαίνετε ότι μέχρι τότε. Εάν μόνο να πάρει ένα πράγμα, αυτό είναι ότι αν CSS φοβερό. Δύο είναι CSS σημαίνει για Cascading Style Sheets. Έτσι, στον πυρήνα του, CSS είναι ένα φύλλο στυλ, που σημαίνει σας επιτρέπει να το στυλ μιας ιστοσελίδας. Και τότε τι σημαίνει αυτό, αυτό είναι ένα τρόπος για να προσθέσετε το στυλ για να σας ιστοσελίδες. Έτσι, από το στυλ, εννοούμε τα πάντα ότι δεν είναι structural-- έτσι τα πράγματα όπως τα χρώματα, φόντο εικόνες, τα σύνορα, όπως, βάτες, περιθώρια. Θα μιλήσουμε για το τι όλα αυτά μέσα σε ένα κομμάτι. 

Έτσι έχουμε μόλις προχωρήσει και άνοιξε και οι δύο από αυτούς σε gedit. Έτσι, αυτό είναι index.html. Και αυτό είναι main.css. Έτσι main.css δεν έχει τίποτα. ALLISON BUCHHOLTZ-ΑΕ: Όχι στυλ μέχρι στιγμής. ΤΟΜΑΣ Reimers: Καμία. Και όπως θα δείτε, είναι ένα πραγματικά άσχημο τοποθεσίας. ALLISON BUCHHOLTZ-ΑΕ: Είναι απλά. ΤΟΜΑΣ Reimers: Ναι. Ναι, δεν είναι άσχημο, είναι ακριβώς μινιμαλιστική. Και τότε εδώ έχουμε index.html. Και έτσι για μια γρήγορη ανακεφαλαίωση της HTML, Allison, Θέλετε να μιλάμε μόνο για την σελίδα; 

ALLISON BUCHHOLTZ-ΑΕ: Ναι. Έτσι, προφανώς, έχουμε HTML μας ετικέτα, η οποία απλώς τα ονόματα των αρχείων HTML. Έχουμε κεφαλίδα μας εδώ, με CSS Τέλεια, which-- αν πας πίσω. Πού είναι αυτό; 

ΤΟΜΑΣ Reimers: Αχ. Ναι, μπορείτε να δείτε. ALLISON BUCHHOLTZ-ΑΕ: Και παρατηρήσετε την κεφαλίδα Είναι αυτή η κεφαλίδα καρτέλα δεξιά μέχρι εδώ. Και τότε "Γεια σου, κόσμε!" είναι το κείμενο που έχουμε μόνο εμφάνιση στο web σελίδα, η οποία is-- πάει πίσω. Πίσω. Ποια είναι ακριβώς στο σώμα μας here-- το απλό κείμενο. Επίσης, ένα πράγμα που πρέπει να παρατηρήσετε, αν δει κανείς εδώ, Tomas ενεργοποιημένο μέχρι αυτά δύο από το κλείστρο μας. Έτσι, εφ 'όσον έχετε όλα τρία από αυτά, είστε μια χαρά. Μπορούν να είναι σε οποιαδήποτε σειρά που θέλετε. Τι είναι πιο σημαντικό είναι ακριβώς αυτό έχετε κάθε ένα από αυτά τα τρία πράγματα. 

ΤΟΜΑΣ Reimers: Cool. Προσθέστε ένα τύπο doc; ALLISON BUCHHOLTZ-ΑΕ: Ναι. ΤΟΜΑΣ Reimers: Ναι. Cool. ALLISON BUCHHOLTZ-ΑΕ: Προφανώς, μικρόφωνα μου δεν μου αρέσει. ΤΟΜΑΣ Reimers: Αχ, να μας δώσει ένα δευτερόλεπτο μόνο ενώ Allison διακόπτες έξω μικρόφωνο της. Οπότε ναι. Γι 'αυτό και έχουν την κύρια σελίδα μας. Είναι το είδος του unstyled. Δεν έχουμε πολύ. Εμείς απλά πρέπει βασικά κείμενο. Έχουμε το φύλλο στυλ. Έχουμε τον τίτλο. Έτσι απλά γυμνά-χωρίς κόκαλα συστατικά κάνει μια ιστοσελίδα. 

Έτσι, από εκεί, ας μιλήσουμε για το τι είναι CSS και τι μοιάζει και όλα αυτά. Έτσι, για that-- ALLISON BUCHHOLTZ-ΑΕ: Επιστροφή στις διαφάνειες. ΤΟΜΑΣ Reimers: Επιστροφή στις διαφάνειες. Και Allison μπορεί να αναλάβει. 

ALLISON BUCHHOLTZ-ΑΕ: Woo. ΟΚ. Έτσι στο αρχείο CSS σας, θα πάμε για να έχουν πολλά από αυτά τα πράγματα που ονομάζεται επιλογείς. Αυτό θα είναι μόνο η βάση το αρχείο CSS σας. Είναι ακριβώς πρόκειται να είναι πάρα πολλά από αυτά. Έτσι επιλογέα. Αυτή είναι μόνο η γενική ανατομία. Εμείς πάμε για να περάσει παραδείγματα, γιατί αν εσείς ποτέ παρακολούθησαν το τμήμα μου, αισθάνομαι όπως τα πράγματα στο αφηρημένο δεν κάνουν πραγματικά νόημα. Βοηθά πάντα να δείτε τα παραδείγματα. 

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

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

Γι 'αυτό πρόκειται να κάνει η φόντο γαλάζιο. Και τότε κάτι μέσα στο σώμα είναι πρόκειται να έχει ένα βάρος γραμματοσειράς τολμηρή. Γι 'αυτό ακριβώς πρόκειται να τολμηρή όλο το κείμενό μας. Και αυτό είναι μόνο ένα επιλογέα. Αλλά θα μπορούσατε να έχετε πάρα πολλά από αυτά. Και όπως θα πάμε να δείξουμε αργότερα, λίγο περισσότερο στο πώς ότι τα έργα και περισσότερα παραδείγματα εκεί. Οτιδήποτε θέλετε να προσθέσετε; 

ΤΟΜΑΣ Reimers: Όχι. Allison πήρε. Εμείς απλά θα κόψουν ένα παράδειγμα εδώ για παράδειγμα το site μας. Ας λάβει πράγματι αυτό. Είναι τέλεια. Έτσι, είμαι απλώς πρόκειται να αντιγράψετε και να επικολλήσετε ότι το δικαίωμα σε αρχείο main.css μας. Και Πάω να το αποθηκεύσετε. Και τότε θα το τρέξει. Έτσι πλευρά σημείωση, ένα από τα πιο απογοητευτικό πράγματα είναι αν δεν αποθηκεύσετε ένα αρχείο, και τότε, όπως, επαναλάβετε τη φόρτωση της σελίδας, και παρόμοια, γιατί δεν είναι η αλλαγή συμβαίνει; Συμβαίνει. Έτσι, εδώ είδαμε ότι κάναμε μας ιστοχώρο ένα γαλάζιο φόντο και κάποια έντονη γραφή. 

Θα ήθελα επίσης να αναφέρω, αν παιδιά έχετε ερωτήσεις σχετικά με τίποτα κάνουμε, παρακαλώ αισθάνονται ελεύθερος να μας σταματήσει και να ζητήσει μας. Είμαστε απόλυτα πρόθυμοι να παρατάσσουν ερωτήσεις. 

ALLISON BUCHHOLTZ-ΑΕ: Προφανώς, με CSS, ό, τι βασίζεται η ίδια. Έτσι, αν ένα πράγμα δεν κάνει νόημα τώρα, εμείς Δεν το θέλουμε αυτό να σας κολλάει αργότερα. 

ΤΟΜΑΣ Reimers: Ας είδος του διαμελίζω αυτό. Έτσι θέλετε να ξεκινήσετε με τον επιλογέα εδώ; 

ALLISON BUCHHOLTZ-ΑΕ: Ναι. Όπως είπα και νωρίτερα, το σώμα είναι απλά επιλογέας μας εδώ. Έτσι, αν πάμε πίσω πάνω σε index-- αχ μας. 

ΤΟΜΑΣ Reimers: Ποια εγώ μόλις έκλεισε. Δώσε μου ένα δευτερόλεπτο. Έτσι αρχείο, ανοίξτε, index.html. ALLISON BUCHHOLTZ-ΑΕ: Cool. Έτσι, αν παρατηρήσετε εδώ, εμείς έχουν αυτές τις ετικέτες σώμα, έτσι δεν είναι; Έτσι, ο επιλογέας ακριβώς αντιστοιχεί σε οι ετικέτες που μιλάμε. Έτσι, το σώμα εδώ. Έτσι, αυτό που λέμε είναι everything-- μπορούμε να πάμε πίσω; Μακάρι να μπορούσα μόνο σαν να αγγίξετε την οθόνη. Θα ήθελα να είναι τόσο πολύ πιο δροσερές. 

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

Έτσι, αν ήταν να πάει να index.html and-- πραγματικότητα, μπορούμε να έχουμε κάτι έξω από το σώμα; Αν είχαμε, όπως, ένα υποσέλιδο ή κάτι, δεν θα ισχύουν για αυτό. Αλλά τίποτα μέσα Αυτές οι ετικέτες σώμα πρόκειται να επηρεαστούν από αυτό το σώμα επιλογέα που έχουμε κάνει. Έτσι, εάν θέλετε να πληκτρολογήσετε κάτι άλλο there-- 

ΤΟΜΑΣ Reimers: Ας το πετύχετε αυτό. Έτσι, αν είχαμε μια div-- έτσι ώστε να είναι ακριβώς μια άλλη ετικέτα που μπορείτε να έχετε. Πάω να το κλείσετε. Ή ας το κάνουν ένα σημείο. Έτσι, p σημαίνει παράγραφο. Και μέσα σε αυτό το σημείο. Και τότε λέω, "Αυτό είναι το κείμενο." Cool. Και τότε έκανα αυτός ο κανόνας ισχύει για ένα σημείο αντί του σώματος. Θα δούμε πώς θα ισχύει μόνο για η νεοσυσταθείσα παράγραφο, δεξιά, Δεν το όλο θέμα. Μήπως αυτό έχει νόημα; 

ALLISON BUCHHOLTZ-ΑΕ: Έτσι, αυτό είναι όλο το σώμα, αλλά τώρα επιλογέα μας μόνο αντιστοιχεί στην παράγραφο. Γι 'αυτό ακριβώς έχουν έντονη και μπλε για τη συγκεκριμένη παράγραφο, επειδή αυτό είναι το μόνο πράγμα που περικλείεται μέσα στην ετικέτα σ. 

ΤΟΜΑΣ Reimers: Μήπως αυτό έχει νόημα είδος του πώς τα πράγματα περικλείουν άλλα πράγματα; ALLISON BUCHHOLTZ-ΑΕ: Επίσης, μόλις να πει, όπως, ένας από τους καλύτερους τρόπους για να πάρει πραγματικά άνετα με CSS έχει να κάνει ακριβώς τα πράγματα όπως αυτό, απλά να το δοκιμάσετε. Είναι πολύ απλό να πληκτρολογήσετε κάτι έξω, χτύπησε Ανανέωση, και να δούμε τι θα συμβεί. Και όπως συμβαίνει με τα περισσότερα CS, πειραματισμός μπορεί συχνά να οδηγήσει σε ένα πολύ καλύτερο διαισθητική κατανόηση. Ακόμα περισσότερο από ό, τι μας μόνο, όπως, μιλώντας σε σας. 

ΤΟΜΑΣ Reimers: Απολύτως 100% συμφωνούν σε αυτό το σημείο. Έτσι, αν πάμε πίσω σε αυτό, ας ξεκινήσουμε τεμαχίζοντας ακριβώς τι κάνουν αυτά τα δύο. Έτσι έχουμε δύο κανόνες για το θέμα αυτό. Έτσι, η πρώτη είναι το χρώμα του φόντου. Και βλέπετε ότι έχουμε αυτό που ίσο με την τιμή, γαλάζιο. 

Έτσι, σε CSS, CSS είναι είδος πολύ χαλαρό για το πώς έχετε τη δυνατότητα να ορίσετε το χρώμα. Έτσι μπορείτε να ορίσετε με βάση το όνομα. Μπορείτε επίσης να κάνετε κάτι σαν «κόκκινο». Και τότε, αν πάμε πίσω σε αυτό, θα δείτε ότι το φόντο είναι κόκκινο. Μπορείτε επίσης να πάρετε really-- νομίζω ότι εσύ μπορεί να πάρει αρκετά δημιουργικοί με αυτό, Δεν μπορείς; 

ALLISON BUCHHOLTZ-ΑΕ: Ι πιστεύετε ότι μπορείτε να χρησιμοποιήσετε το εξάγωνο. Μπορεί να μην σας; 

ΤΟΜΑΣ Reimers: Ναι. Έτσι, μπορείτε να χρησιμοποιήσετε το εξάγωνο. Αλλά σκέφτομαι όνομα-σοφός. Δεν είναι εκεί; ALLISON BUCHHOLTZ-ΑΕ: Μπορείτε να κάνετε κάμποσους. Λίγο πολύ όπως και τα περισσότερα χρώματα που σας μπορεί name-- όπως, νομίζω ότι ο σολομός είναι ένα. 

ΤΟΜΑΣ Reimers: Θα προσπαθήσουμε σολομού. ALLISON BUCHHOLTZ-ΑΕ: Ι νομίζω chartreuse είναι εκεί. ΤΟΜΑΣ Reimers: Ναι. Βλέπεις; Έτσι, μπορείτε να πάρετε αρκετά δημιουργικοί. 

ALLISON BUCHHOLTZ-ΑΕ: Μπορείτε θα μπορούσε να πάρει αρκετά δημιουργικοί. Όπως, αν μπορείτε να σκεφτείτε το όνομα του χρώματος, είναι πιθανώς εκεί. Αν θέλετε πραγματικά ωραία λεπτομέρεια, μπορείτε να πάτε εξάγωνο. 

ΤΟΜΑΣ Reimers: Ναι. Έτσι, δεκαεξαδικό. Αν εσείς θυμάστε αυτό πίσω από την παλιά PSET σας, Εικόνα Ανάκτηση, σας παιδιά είχαν να αντιμετωπίσουν με αυτές τις αξίες εξάγωνο. Και το είδος της για να ανακεφαλαιώσουμε τι είναι αυτό, εξάγωνο έχει τρεις τιμές που αποθηκεύονται σε αυτό. Έτσι είναι σε ομάδες των δύο προσαυξήσεις. Τα δύο πρώτα αντιπροσωπεύουν το κόκκινο αξία. Το δεύτερο αντιπροσωπεύει το πράσινο αξία. Και το τελευταίο είναι μπλε; 

Έτσι FF συμβαίνει να αντιπροσωπεύουν μια δεκαεξαδική 255. Έτσι, έχετε 255 κόκκινο, 255 πράσινο, και το 0 για το μπλε. Και οι τιμές κυμαίνονται μεταξύ 0 και 255. 

ΚΟΙΝΟ: Δεξιά. Έτσι, κατ 'ουσίαν, θα μπορούσε να ψάξει το διαδίκτυο για κάθε χρώμα που θέλουμε, και να προσδιορίσει το πράγματι γνωστό σύνθετο χρώμα του φάσματος, και τότε θα μπορούσαμε να το θέσω σε; ALLISON BUCHHOLTZ-ΑΕ: Ακριβώς. Έτσι, έχετε λίγο πολύ πλήρη έλεγχο πάνω από τα χρώματα που θέλετε μέσα σε CSS. Θα πάμε να μιλήσουμε για εικόνες φόντου αργότερα; Ή μήπως θέλουμε να το κάνουμε αυτό; 

ΤΟΜΑΣ Reimers: Ναι. Απολύτως. Έτσι, η πρώτη, ακριβώς για να δείξει ότι κόκκινο και το πράσινο είναι το κίτρινο. Και αν χρειάζεστε κάποια βοήθεια για την εύρεση αυτό, να το Google κάτι όπως "επιλογής χρώματος." ALLISON BUCHHOLTZ-ΑΕ: Ω, είναι τόσο καλό. Αγαπώ επιλογέα χρωμάτων. 

ΤΟΜΑΣ Reimers: colorpicker.com είναι ένα καλό παράδειγμα. Και εδώ, θα δείτε ότι έχετε ένα πλήρες Photoshop-όπως επιλογέα χρώματος. 

ALLISON BUCHHOLTZ-ΑΕ: MM-HM. Επίσης, τα δροσερά πράγματα που είναι μπορεί να δημιουργήσει συνδυασμούς χρωμάτων έτσι ώστε να μην χρειάζεται, όπως, συγκρουσιακά χρώματα. ΤΟΜΑΣ Reimers: Και στη συνέχεια, εδώ είναι το εξάγωνο αξία μέχρι εδώ. Έτσι, μπορείτε πάντα να βρείτε online βασικά θέσεις για να πάρουν την δεκαεξαδική τιμή από. Δεν είναι το είδος του εν λόγω ακριβώς, όπως, εμείς δείτε τα χρώματα του κόσμου σε αριθμούς. Είναι περισσότερο ότι πάμε σε απευθείας σύνδεση και να βρει τι χρώμα θέλουμε, και στη συνέχεια να λάβει τον αριθμό προς τα κάτω. Επειδή είναι ακριβώς ένα πολύ εύκολο τρόπος για αναφορά πράγματα στο CS. 

ALLISON BUCHHOLTZ-ΑΕ: Και έπειτα υπάρχει also-- Ξεχάσω το ακριβές όνομα της τοποθεσίας. Αλλά υπάρχει σίγουρα, εγώ νομίζω, κάτι από την Adobe που δημιουργεί συνδυασμούς χρωμάτων για σας, το οποίο είναι πραγματικά δροσερό, επειδή σας definitely-- είναι μερικές φορές δύσκολο να καταλάβω, Ω, αν θέλετε να χρησιμοποιήσετε αυτό το χρώμα, τι θα μπορούσε να είναι άλλη χρήσιμη να χρησιμοποιήσει αλλού στο site μου να, όπως, το κάνουν όμορφο και συνεκτική. 

ΤΟΜΑΣ Reimers: Allison μιλάει για μία από την Adobe που ονομάζεται Kuler, νομίζω. Είναι K-U-Ε-Ε-Κ. ALLISON BUCHHOLTZ-ΑΕ: Νομίζω πως ναι. Είμαι σίγουρος ότι είναι το ένα. 

ΤΟΜΑΣ Reimers: Το αγαπημένο μου έχει ανέκαθεν Συνδυασμός χρωμάτων Designer. 

ALLISON BUCHHOLTZ-ΑΕ: Ooh. 

ΤΟΜΑΣ Reimers: Ποια είναι now-- 

ALLISON BUCHHOLTZ-ΑΕ: Αχ, αυτό είναι όμορφο. 

ΤΟΜΑΣ Reimers: Και σας μπορεί ουσιαστικά να πω, όπως, Θέλω τρία χρώματα το ένα δίπλα στο άλλο. Και τότε ας κάνουμε κάτι καλό. Και τότε μπορείτε να πάρετε ένα παράδειγμα του τι μπορεί να μοιάζει. Και τότε, αν περνάτε πάνω από οποιοδήποτε από τους, σας δίνει την δεκαεξαδική τιμή. 

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

Πίσω στην πραγματική CSS. ALLISON BUCHHOLTZ-ΑΕ: Αλλά προφανώς, εμείς γνωρίζουν αυτές οι αναφορές μπορεί να είναι χρήσιμο. ΤΟΜΑΣ Reimers: Όχι, σίγουρα μπορεί να είναι χρήσιμη. Έτσι, το δεύτερο κανόνα, Allison; 

ALLISON BUCHHOLTZ-ΑΕ: Ναι. Ο δεύτερος κανόνας είναι απλά που αντιστοιχούν σε γραμματοσειρά μας. Έτσι γραμματοσειράς βάρος είναι ακριβώς το είδος of-- έτσι το βάρος θα είναι, αν θέλετε απλά, όπως, κανονική ή, όπως, λεπτότερο γραμματοσειρές, ή στην περίπτωση αυτή, όπως, τολμηρή. Ξεχάσω. Ποιο είναι το αν ήθελε it-- υπάρχει μια λεπτότερη από ό, τι ακριβώς, όπως, η κανονική; ΤΟΜΑΣ Reimers: Εγώ δεν κάνω πραγματικότητα ξέρω αν υπάρχει μια λεπτότερη. ALLISON BUCHHOLTZ-ΑΕ: ξεχάσω. Έτσι γραμματοσειράς βάρος που συνήθως απλά χρησιμοποιήστε για την τολμηρή. Αν θέλετε να πάρετε πραγματικά σε αυτό, θα πάμε να σας δείξω. W3Schools διαθέτει όλες τις διαφορετικές πράγματα που μπορείτε να κάνετε για τις γραμματοσειρές. Αλλά βασικά, αν θέλετε πάντα να αλλάξει τίποτα για γραμματοσειρά, ότι πάντα θα είναι, όπως, font-κάτι. Έτσι, θα είναι σαν, font-family αν είστε προσπαθούν να αλλάξουν τον πραγματικό τύπο. Θα είναι font-style, αν θέλουν να το κάνουν σαν καλλιγραφικά, ή πλάγια, ή οτιδήποτε. Ή ακόμα και το χρώμα της γραμματοσειράς, αν θέλαμε να το αλλάξουμε αυτό. 

ΤΟΜΑΣ Reimers: Yup. Έτσι, μπορείτε να το αλλάξει αυτό. Και το είδος ακριβώς να ανακεφαλαιώσουμε τώρα, ώστε να μπορείτε να να δούμε ότι έχουμε τον επιλογέα μέχρι εδώ. Έχουμε αυτά τα άγκιστρα. Και στη συνέχεια, έχουμε κανόνες οριοθετείται με ερωτηματικά. Μήπως αυτό έχει νόημα; Ναι; Cool. Έτσι, αν αυτό είναι good-- 

ALLISON BUCHHOLTZ-ΑΕ: Επιστροφή. ΤΟΜΑΣ Reimers: Ας μιλήσουμε συγκεκριμένα για το τι είδους επιλογείς που έχουμε. «Αιτία τώρα έχουμε το είδος ακριβώς φαίνεται ετικέτες. Αλλά εσείς θα μπορούσε να δει το εύλογο. Ας πούμε ότι έχετε δύο παραγράφους σε μια σελίδα και σας θέλουν να είναι σε θέση να στυλ ένα, αλλά όχι το άλλο, που δεν θέλουν απλά να περιορίσει τον εαυτό σας να χρειαστεί να χρησιμοποιήσετε διαφορετικές πραγματικές HTML ετικέτες για να τους δώσει διαφορετικά στυλ. 

Έτσι, έχουμε τρεις βασικές τύπους επιλογείς. ALLISON BUCHHOLTZ-ΑΕ: Ναι. Έτσι έχουμε ετικέτα, η οποία είναι ό, τι έχουμε μιλήσει για το δικαίωμα τώρα. Έτσι, αυτό είναι το είδος του σαν σώμα ή ρ σας. Και τότε έχουμε τάξη, η οποία είναι όταν το ορίζουμε στην CSS αρχείο μας, είναι πάντα πρόκειται να dot, ανεξαρτήτως θέλετε το όνομα της κλάσης σας να είναι. Και αυτό μπορεί να ισχύει για πολλαπλές πράγματα. 

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

Το άλλο που έχουμε είναι το ID, το οποίο συμβολίζουμε με ένα hash, ή λίρα, ή hashtag. ΤΟΜΑΣ Reimers: δίεσης. ALLISON BUCHHOLTZ-ΑΕ: δίεσης. Που λειτουργεί, πάρα πολύ. Και αυτό θα πρέπει να είναι πραγματικά μοναδική. Θα πρέπει να εφαρμόζεται μόνο σε ένα πράγμα στη σελίδα σας. Έτσι, αν αυτό είναι μια συγκεκριμένη παράγραφο, ή κάποιο στοιχείο σε μια λίστα, ή οτιδήποτε άλλο, αυτό πρέπει να είναι μοναδικό. Και με τον ίδιο τρόπο που εμείς λένε, όπως, class = "Class1 Class2," Αυτό μπορεί να είναι μόνο id του ό, τι έχουμε. ΤΟΜΑΣ Reimers: Ναι. Ας μιλήσουμε σίγουρα σχετικά με παραδείγματα εδώ. Και είμαι απλώς πρόκειται να βουτήξει κατ 'ευθείαν πίσω στον κώδικα. Ας ρίξουμε μια ματιά σε HTML μας. Και έτσι έχουμε το δικαίωμα να έχει τώρα μία παράγραφο. Αυτό είναι το κείμενο. Είμαι ακριβώς πρόκειται να τροποποιήσει αυτό. "Αυτό είναι το κείμενο 1." Και μετά θα πάμε να έχουν μια «Αυτό είναι το κείμενο 2." 

ALLISON BUCHHOLTZ-ΑΕ: δεύτερη. ΤΟΜΑΣ Reimers: Yup. Έτσι, έχουμε τώρα "Αυτό είναι το κείμενο 2," σωστά; Και θα πάμε να δούμε, εάν το reload η σελίδα, τι θα πάμε να βρούμε Είναι είμαστε Θα find-- ALLISON BUCHHOLTZ-ΑΕ: Ooh. ΤΟΜΑΣ Reimers: Ναι. Εμείς πάμε να βρούμε ένα "Αυτό είναι κειμένου 1, »και« Αυτό είναι το κείμενο 2. " 

ALLISON BUCHHOLTZ-ΑΕ: Και έξω υπέροχο κίτρινο χρώμα. 

ΤΟΜΑΣ Reimers: Και θα δείτε ότι επιλογέα μας αυτή τη στιγμή, η οποία ισχύει για p του, ή παραγράφους, επηρεάζει και τα δύο, γιατί και οι δύο από αυτούς πληρούν τις προϋπόθεση ότι είναι και οι δύο μια ετικέτα σελ. Αυτό κάνει συνολική αίσθηση. Το ερώτημα λοιπόν είναι, καλά, τι αν θέλαμε να πάρει μόνο ένα; Έτσι ακριβώς όπως Allison έλεγε, έχουμε άλλους δύο τρόπους για να το κάνουμε αυτό. Πάω να ξεκινήσω με id. 

ALLISON BUCHHOLTZ-ΑΕ: Ας ξεκινήσουμε με id. 

ΤΟΜΑΣ Reimers: Και τα δύο από αυτά είναι χαρακτηριστικά. Έτσι, υπάρχουν χαρακτηριστικά σε μορφή HTML. Και τι είναι είναι κάτι που θέλετε να προσθέσετε μέσα στην ετικέτα η οποία είναι χωριστά από το όνομα ετικέτας. Έτσι, μπορείτε να έχετε πολλαπλές ιδιότητες. Ναι; 

ALLISON BUCHHOLTZ-ΑΕ: ήμουν απλώς πρόκειται να πω, από το παράδειγμα σας από PSET 7, αν κάποιος από εσάς να προσπαθήσετε να ευθυγραμμιστεί τα πράγματα στο κέντρο, μπορεί να έχετε χρησιμοποιήσει "Κείμενο align = center." Και να το παρατηρήσει πιθανώς θα έπρεπε να επικεντρώνεται το κείμενό σας ή μπάρα πλοήγησης σας. Έτσι, αυτό είναι απλά ένα χαρακτηριστικό ότι μπορεί να είστε εξοικειωμένοι με. ΤΟΜΑΣ Reimers: Υπάρχει μια δέσμη του χαρακτηριστικά που θα δείτε. Ναι. Όπως καλή αναφορά για PSET 7. Έχουμε ταυτότητα. Μπορείτε επίσης να έχετε τάξη, τα πράγματα όπως αυτό. Μια ενιαία ετικέτα μπορεί να έχει πολλές ιδιότητες. Έτσι, ξεκινώντας με id, ας προσποιηθούμε ότι θέλουν να έχουν ένα αναγνωριστικό of-- δεν ξέρω. Θα ονομάσουμε ειδική, διότι αυτό, είμαστε πρόκειται να κάνει τολμηρές, και υπογραμμίζουν, και οτιδήποτε άλλο. ALLISON BUCHHOLTZ-ΑΕ: Είναι Θα είναι σούπερ ειδική. ΤΟΜΑΣ Reimers: Έτσι, αυτό μία, έχουμε id ιδιαίτερο. Έτσι, ο τρόπος για να επιλέξετε αυτό, τότε, είναι σε main.css, αντί να έχουν μια ετικέτα p, κάνετε #special, εντάξει; Και αυτό επιλέγει το πράγμα με ιδιαίτερη ταυτότητα. Μήπως αυτό έχει νόημα για όλους; Κοινό: Ναι. ΤΟΜΑΣ Reimers: Cool. Έτσι τώρα, αν πάμε πίσω, θα see-- κραυγών. Ναι. Θα δούμε ότι μόνο επιλέγει εκείνου με id ειδικό. Ναι; Ήχοι δροσερό. Ναι. 

ΚΟΙΝΟ: Μπορεί κάτι να έχει ένα αποδίδουν την τάξη και το ένα id? 

ΤΟΜΑΣ Reimers: Ναι. ΚΟΙΝΟ: Εντάξει. Και τότε τι θα συμβεί αν στη συνέχεια να δώσει αυτό ορισμένοι κανόνες του CSS ότι η σύγκρουση; ΤΟΜΑΣ Reimers: Απολύτως. Είμαστε σίγουρα πρόκειται να μιλήσουμε γι 'αυτό. Έτσι ακριβώς ό, τι ήταν να πάρει σε, μπορείτε επίσης να έχουν τάξεις. Έτσι, ας προσποιηθούμε είχα τρεις παραγράφους και εγώ ήθελε να στυλ Το πρώτο δύο, αλλά όχι το τρίτο. Λοιπόν, η πρώτη σας ιδέα μπορεί να είναι, καλά, εγώ θα μπορούσε να δώσει μόνο η δεύτερη ένα αναγνωριστικό. Αλλά δεν μπορείτε, γιατί ένα αναγνωριστικό, ακριβώς όπως Allison έλεγε, πρέπει να είναι μοναδικός. 

Έτσι, αντί ενός αναγνωριστικού, τι μπορεί να χρησιμοποιήσει είναι ότι μπορείτε να χρησιμοποιήσετε μια τάξη. Και μια class-- τι επιτρέπει μπορείτε να κάνετε είναι βασικά λένε, Αυτό ανήκει ως μέρος μιας ομάδας. Σε αυτή την περίπτωση, η ομάδα μας καλείται Ειδικές. Και τι θα πάμε να κάνουμε στη συνέχεια είναι θα πάμε να say-- παρά λίβρα, θα πάμε να χρησιμοποιήσετε τελεία. Εντάξει; Και παρατηρήσετε ότι η λίρα και τελεία υπάρχουν μόνο μέσα στο αρχείο CSS, όχι μέσα στο HTML. ALLISON BUCHHOLTZ-ΑΕ: Ναι. Σημαντική διάκριση. 

ΤΟΜΑΣ Reimers: Έχω είχε τόσο πολύ αγώνα, επειδή έβαλα το χασίς στην HTML και τότε απλά ένιωσα ηλίθια για μεγάλο χρονικό διάστημα. Δείτε πώς επιλέγει τα δύο εκείνοι με την εν λόγω τάξη; Cool. 

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

ALLISON BUCHHOLTZ-ΑΕ: μπορεί να μην συνέστησε την ιστοσελίδα σας. Αλλά για τους σκοπούς μας, αυτό θα κάνουμε. 

ΤΟΜΑΣ Reimers: Δεν είναι ένα καλό συνδυασμό χρωμάτων. ALLISON BUCHHOLTZ-ΑΕ: Λοιπόν, κίτρινο και το μπλε είναι τα χρώματα γυμνασίου μου. Δεν ξέρω, όμως. ΤΟΜΑΣ Reimers: Allison είναι υψηλό σχολείο είχε μια μεγάλη χρωμάτων. [Γέλια] Και τότε τι μπορούμε να ονομάσουμε αυτό είναι Ας το ονομάσουμε this-- έτσι έχουμε Ειδικές και έχουμε Αρκετά. Προτείνω, για αυτό, μπορείτε να χρησιμοποιήσετε πολύ πιο περιγραφικά ονόματα. ALLISON BUCHHOLTZ-ΑΕ: Ναι, θα ήθελα καλέστε αυτό, όπως, κίτρινο ή μπλε. 

ΤΟΜΑΣ Reimers: Δεν είμαστε πραγματικά κάνει ένα πραγματικό δικτυακό τόπο, και γι 'αυτό δεν το κάνουμε αυτό. Αλλά αν πραγματικά είχε μια πραγματική ιστοσελίδα, θα μπορούσαν να έχουν, όπως, επικεφαλίδα του άρθρου, το περιεχόμενο του άρθρου, πρώτη λέξη, τα πράγματα όπως αυτό, το οποίο επιτρέπει μπορείτε να είναι πολύ πιο περιγραφικό. Αυτά είναι πραγματικά ακριβώς όπως μεταβλητές. Θα πρέπει να ονομάζονται κατά τέτοιο τρόπο ώστε μπορείτε, like-- ναι, ως τέτοια. Τέλεια. 

Έτσι, το χρώμα του φόντου. Και μετά θα πάμε να say-- έτσι η τρόπος για να αλλάξετε το χρώμα είναι απλώς "χρώμα". Και θα πάμε να το μπλε. Αυτό είναι δροσερό. Έτσι τώρα έχουμε το δύο πρώτες ειδικές. Επόμενο ένας πρόκειται να έχουν "class = αρκετά." ALLISON BUCHHOLTZ-ΑΕ: Και τότε θα θέλουν να προσθέσουν «αρκετά» στη μεσαία. ΤΟΜΑΣ Reimers: Yup. Και στη συνέχεια στο μεσαίο, για να προσθέσετε το "αρκετά", τι συμβαίνει Είναι απλά έχουν ένα χώρο. Έτσι, το χαρακτηριστικό της κατηγορίας είναι ένας χώρος λίστα διαχωρισμένη όλων των κατηγοριών ότι ισχύουν για αυτήν την ετικέτα. Εντάξει; Δεν είναι σαν αυτό ανήκει κάποια ειδική κατηγορία που ονομάζεται "Ειδική, το διάστημα, αρκετά." Ανήκει σε δύο classes-- ειδική και όμορφη. Ναι; Cool. 

Και τότε, αν κοιτάξουμε σε ό, τι συμβαίνει, είμαστε Θα δείτε ότι η πρώτη έχει κανείς κίτρινο φόντο, μαύρο κείμενο. Δεύτερη ένα-- 

ALLISON BUCHHOLTZ-ΑΕ: --has τολμηρή κίτρινο φόντο με μπλε κείμενο. Και το τελευταίο μας έχει μόνο η μπλε κείμενο που του έχουν ανατεθεί. 

ΤΟΜΑΣ Reimers: Cool; Πώς επιλογείς δουλειά; Awesome. 

ALLISON BUCHHOLTZ-ΑΕ: Θέλουμε να μιλάμε για τη σύγκρουση τώρα τότε; 

ΤΟΜΑΣ Reimers: Οπότε ναι. Απολύτως. Λοιπόν, τι θα συμβεί αν έχουν μια σύγκρουση, σωστά; Ας προσποιηθούμε το πρώτο ιδρύει κάτι like-- ALLISON BUCHHOLTZ-ΑΕ: Ίσως αυτό αλλάζει το φόντο; ΤΟΜΑΣ Reimers: Ναι. Έτσι θα πάμε να κάνουμε "αρκετά" αλλάξετε το φόντο για το σολομό. ALLISON BUCHHOLTZ-ΑΕ: Είσαι απλά με όλα τα υπέροχα χρώματα σήμερα, Tomas. ΤΟΜΑΣ Reimers: Ναι. Επειδή έμαθα ότι μπορώ χρησιμοποιήσετε σολομό ως πραγματικό χρώμα. Γι 'αυτό και πρόκειται μόνο να το κάνουμε αυτό. Πιστεύω, επίσης, Sunset είναι ένα πραγματικό χρώμα. ΚΟΙΝΟ: Sunset είναι ένα πραγματικό χρώμα; ALLISON BUCHHOLTZ-ΑΕ: Ας το προσπαθήσουμε. ΤΟΜΑΣ Reimers: Μετά από αυτό το demo μόνο και μόνο επειδή σε περίπτωση που βρωμίζει επάνω, Δεν θέλω να τον εντοπισμό σφαλμάτων. Γνωρίζουμε, λοιπόν, ο σολομός είναι ένα πραγματικό χρώμα. Έτσι, τυχόν εικασίες σχετικά με τι πρόκειται να συμβεί; 

ALLISON BUCHHOLTZ-ΑΕ: Οποιαδήποτε ιδέα; 

ΚΟΙΝΟ: [δεν ακούγεται]. 

ΤΟΜΑΣ Reimers: Ναι. Έτσι έχεις αυτό ακριβώς δεξιά. Βασικά, παίρνει το τελευταίος κανόνας που δόθηκε. 

ALLISON BUCHHOLTZ-ΑΕ: Έτσι, αυτό είναι όπου διαδοχικές τεθεί σε ισχύ. 

ΤΟΜΑΣ Reimers: Έτσι θυμηθείτε πώς είχε ότι επικαλυπτόμενα φύλλα στυλ; Έτσι, με αυτό, έχουμε το είδος της μέσης ότι έχουμε μια δέσμη των κανόνων οι οποίες ισχύουν για ένα πάνω στο άλλο, και μπορούν επίσης να αντικαθιστούν το ένα το άλλο. 

ALLISON BUCHHOLTZ-ΑΕ: Έτσι Ό, τι και στο κάτω μέρος θα αντικαταστήσει ό, τι είναι στην κορυφή. Θα μπορούσατε να έχετε κανόνες που εντελώς αναιρεί κάτι εκ των προτέρων. Αυτός είναι και ο λόγος για τον οποίο θέλετε να προσεκτικοί όταν είστε styling, έτσι δεν είστε δημιουργία κανόνων, ότι είστε μόνο εντελώς επιτακτικό. 

ΤΟΜΑΣ Reimers: Ή ίσως θέλετε να αντικαταστήσετε κανόνες. 

ALLISON BUCHHOLTZ-ΑΕ: Ή ίσως κάνετε. Ναι. 

ΤΟΜΑΣ Reimers: Προσποιηθείτε ότι έχετε ένα κατηγορία που ισχύει για τα περισσότερα πράγματα, αλλά ας πούμε ότι θέλετε να αλλάξετε το χρώμα του φόντου σε κόκκινο και την γραμματοσειρά βάρος σε τολμηρές για περισσότερα πράγματα, αλλά για ένα, θέλετε μόνο το χρώμα του φόντου να είναι κόκκινο, αλλά θέλετε όλα τα άλλα ιδιότητες, θα μπορούσατε να κάνετε κάτι όπως "font-weight = κανονική," η οποία στη συνέχεια θα ανατρέψει αυτή την τολμηρή αλλαγή. Ναι; Και πάλι, ο καλύτερος τρόπος, νομίζω Allison είπε ότι, είναι ακριβώς πρακτική. 

ALLISON BUCHHOLTZ-ΑΕ: πειραματισμό. 

ΤΟΜΑΣ Reimers: Πρακτική, πρακτική, πρακτική, και το πείραμα. Ξέρω πολλούς ανθρώπους που σκέφτονται CSS είναι απλώς ένα πολύ εικασία-και-έλεγχος Στο τέλος της ημέρας, όπου αν θέλετε να κάνετε something-- όπως, έχετε μια γενική ιδέα, αλλά μπορείτε ακόμα ίσως χρειαστεί να το δοκιμάσετε για να βεβαιωθείτε ότι Ξέρετε τι μοιάζει. 

ΚΟΙΝΟ: Όταν κάνεις αίτηση τάξεις, περισσότερα από ένα στην ίδια παράγραφο ή τμήμα, που κάνει θέμα ποια σειρά μπορείτε το είδος τους σε εισαγωγικά; 

ΤΟΜΑΣ Reimers: Όχι, καθόλου. 

ALLISON BUCHHOLTZ-ΑΕ: Αυτό που έχει σημασία είναι η σειρά στο φύλλο στυλ CSS σας. ΚΟΙΝΟ: Μπορείς να επαναλάβεις την ερώτηση; ΤΟΜΑΣ Reimers: Αχ. ALLISON BUCHHOLTZ-ΑΕ: Εντός τάξη, όταν δίνετε μαθήματα σε κάτι στο HTML, κάνει έχει σημασία με ποια σειρά θα είσαι μέσα; Δεν έχει σημασία η σειρά. Αυτό που έχει σημασία είναι η σειρά του επιλογείς τάξη εντός CSS σας, στο φύλλο στυλ σας. 

ΤΟΜΑΣ Reimers: καλό ήχο; 

ALLISON BUCHHOLTZ-ΑΕ: Υπέροχο. 

ΤΟΜΑΣ Reimers: Και στη συνέχεια, θα πάμε να συνεχίσουμε to-- ALLISON BUCHHOLTZ-ΑΕ: Τι έχουμε το επόμενο βήμα; Ξεχάσω. Ω, έχουμε μόνο παραδείγματα. Αλλά έχουμε το είδος της κάνει εκείνοι. Έχουμε κάνει παραδείγματα σχετικά με τη μύγα. 

ΤΟΜΑΣ Reimers: Παίρνουμε να συνδυάζουν σύντομα τους επιλογείς. 

ALLISON BUCHHOLTZ-ΑΕ: Ω, έχουμε την ευκαιρία να συνδυάσουν επιλογείς. ΤΟΜΑΣ Reimers: Έτσι μερικοί παραδείγματα είναι ότι έχουμε # Dog-- λίρα, ή hashtag, ή δίεσης, ή ο, τιδήποτε θέλετε να καλέσετε that-- απότομη. 

ALLISON BUCHHOLTZ-ΑΕ: Sharp σκυλί. 

ΤΟΜΑΣ Reimers: Τότε έχετε .pets. Κάτι έχει ένα αναγνωριστικό του σκύλου, υπάρχει μόνο ένας σκύλος στην σελίδα. Κάτι έχει ένα αναγνωριστικό του γάτα, υπάρχει μόνο μία γάτα. Μπορεί να υπάρχουν πολλά κατοικίδια ζώα στη σελίδα. Αυτός είναι ο λόγος που δώσαμε ότι οι τάξεις. Έχετε ένα παράδειγμα του σ. Και τότε, έτσι ένα από τα τελευταίο παράδειγμα, το οποίο είναι κάτι που δεν έχουμε μιλήσει, είναι τι συμβαίνει όταν τα συνδυάσετε. Έτσι p.pets. 

Έτσι, γι 'αυτό, ας πάμε πίσω στο κώδικα και να εισαγάγει another-- ναι. Έτσι, πίσω εδώ. 

ALLISON BUCHHOLTZ-ΑΕ: Ι αισθάνονται σαν αυτό είναι really-- όπως ακριβώς κοιτάζει μέσα από τα παραδείγματα είναι πραγματικά ο τρόπος για να μάθει αυτό. Έτσι, αυτό είναι αυτό που κάνουμε. 

ΤΟΜΑΣ Reimers: Ας προσποιηθούμε ότι Το μόνο που θέλω να επιλέξετε το κείμενο 2, σωστά; Γι 'αυτό και σίγουρα δεν μπορεί να το κάνουμε αυτό με ένα αναγνωριστικό. Λοιπόν, θα μπορούσαμε να το κάνουμε αυτό με μια id, αλλά δεν έχει ένα αναγνωριστικό. Θα μπορούσα να προσθέσω ένα, αλλά ας προσποιηθούμε ότι δεν ήθελα να προσθέσω μία ή έχει ήδη κάτι άλλο. Δεν μπορώ να το κάνω με αυτό. Η ετικέτα δεν είναι σίγουρα μοναδική, σωστά; Και δεν είναι η τάξη. Αλλά μπορείτε να συνδυάσετε αυτά τα πράγματα. Ας πούμε ότι θέλουμε να κάνουμε κάτι η οποία ισχύει μόνο για τα πράγματα που έχουν την ιδιαίτερη τάξη και τα οποία έχουν την τάξη αρκετά. 

Έτσι τι μπορείτε να κάνετε είναι σε main.css, μπορείτε να πείτε, ας πρώτα να διαγράψετε αυτό. Μπορείτε να συνδυάσετε αυτά. Έτσι, μπορείτε να κάνετε από ειδικά. Δεν υπάρχει χώρος. Απλά .special.pretty. Αυτό σημαίνει ότι είναι κάτι η οποία είναι τόσο ιδιαίτερο και όμορφο. Μήπως αυτό έχει νόημα; Και αν πάμε εδώ, τι θα πάμε να δούμε είναι ο κανόνας αυτός ισχύει μόνο για το δεύτερη, η οποία έχει και τα δύο από αυτά. Και μπορείτε να το κάνετε αυτό για πολλά πράγματα. Μπορείτε να say-- ας προσποιούνται Ήθελα μόνο να κάνουν πράγματα που δεν έχουν την τάξη αρκετά και τα οποία είναι επίσης ένα tag παραγράφου. Έτσι p.pretty. Ας προσποιηθούμε ότι είχα κάτι όμορφο στο σώμα ετικέτα. Εντάξει; Μπορώ να τρέξω αυτό και εγώ μπορεί να δει ότι αυτό είναι μόνο θα ισχύει για τα πράγματα που είναι παραγράφους με την κατηγορία όμορφη. Και μπορείτε να συνδυάσετε αυτά, Βασικά, όσο θέλετε. Έτσι, μπορείτε να τα βάλετε μόνο μαζί. Μήπως αυτό έχει νόημα; ALLISON BUCHHOLTZ-ΑΕ: Έτσι Αυτό το είδος της είναι πιο χρήσιμο όταν, Τόμας έλεγε νωρίτερα, ίσως έχετε μια πολύ περίπλοκη ιστοσελίδα, και έχετε ήδη πολλά των κανόνων αυτών γραπτών, και το μόνο που χρειάζεται να συνδυάζουν δύο από πριν. Όπως και αντί να γράφει ένα ολόκληρο νέα επιλογέα και την αλλαγή εκεί, μπορείτε να συνδυάσετε μόνο τους όπου επικαλύπτει. 

ΤΟΜΑΣ Reimers: Ή μπορείτε μπορεί να βρει μερικές φορές out-- υπάρχει μία τάξη που κάνει το χρώμα γραμματοσειράς, όπως το μπλε, και υπάρχει μια άλλη κατηγορία που κάνει το μπλε φόντο. Και αυτό ακριβώς δεν θα λειτουργήσει. Έτσι να γράψετε μια ειδική περίπτωση, όπου, like-- αλλά αν έχει και τα δύο, αυτό που είσαι πρόκειται να κάνω είναι να σας πάμε να κάνουν ίσως αυτό απόχρωση του μπλε και αυτό αυτή η άλλη απόχρωση του μπλε. Σωστά; 

ALLISON BUCHHOLTZ-ΑΕ: Καλή για αυτά τα είδη των εξαιρέσεων. ΤΟΜΑΣ Reimers: Έτσι για να σκεφτείτε τα προβλήματα ότι μπορεί να προκύψουν όταν τα συνδυάσετε. Cool. Έτσι, πίσω στην παρουσίασή μας. ALLISON BUCHHOLTZ-ΑΕ: Είμαστε σχεδόν εκεί. ΤΟΜΑΣ Reimers: Και έχει σταματήσει τη σύνδεση. ALLISON BUCHHOLTZ-ΑΕ: Ω, όχι. ALLISON BUCHHOLTZ-ΑΕ: CS σε το γραφείο, internet κατεβαίνει. Ω, η ειρωνεία. 

ΤΟΜΑΣ Reimers: Έτσι Ευτυχώς, μπορούμε να παρουσιάζουν χωρίς το διαδίκτυο, υποθέτω, γιατί έχουμε όλες τις διαφάνειες εδώ. Ας μιλήσουμε για το σχέση των ετικετών. ALLISON BUCHHOLTZ-ΑΕ: Δεξιά. Έτσι ακριβώς το είδος της μετάβασης εκτός από αυτά που είπε ο Tomas, Αυτό είναι απλά ένας άλλος τρόπος για να το κάνει. Έτσι έχουμε κάποια μητρική επιλογέα με επιλογέα παιδί. Έτσι, σε αυτό το παράδειγμα εδώ, έχουμε κάποια σώμα με navbar τάξη, κουμπί τάξη. Αχ. 

ΤΟΜΑΣ Reimers: Ω, συγγνώμη. 

ALLISON BUCHHOLTZ-ΑΕ: Και βασικά, τι σημαίνει αυτό είναι να επιλέξετε όλα τα παιδιά, όπως όλα αυτά τα είδη των επιλογείς, μέσα σε αυτό το γονέα επιλογέα. Και αυτοί είναι οι μόνοι είναι ποτέ πρόκειται να εφαρμοστεί. Δεν ξέρω αν σας έχουν έναν καλύτερο τρόπο of-- ΤΟΜΑΣ Reimers: Γι 'αυτό Υποθέτω ότι ο τρόπος για να σκεφτούμε γι 'αυτό είναι να θυμόμαστε πως πριν εμείς είδος του αρέσει να τα βάλει μαζί. Και τότε αυτό σημαίνει ότι ένα στοιχείο που ταιριάζει με όλα αυτά. Αυτό που λέει είναι, θέλουν να ταιριάζει με τα πάντα μέσα some-- θέλω μπορείτε να βρείτε έναν επιλογέα. Και στη συνέχεια, στο πλαίσιο αυτό, θέλω που να ταιριάζει με τα νέα πράγματα. Σωστά; Έτσι, σε CSS, είναι όλα σχετικά με το είδος του να είναι σε θέση να ταιριάζει με αυτά τα στοιχεία. Και μπορείτε να προσπαθήσουμε να ταιριάζει με αντικειμένων σε άλλα αντικείμενα. 

Έτσι, ας κάνουμε πραγματικά ένα παράδειγμα, και πιστεύουμε ότι θα αποσαφηνίσει. Ας προσποιηθούμε ότι έχουν ειδικές, ειδικές αρκετά, οτιδήποτε. Και τότε έχουμε μια σύνδεση, εντάξει; Έτσι θυμηθείτε, ένα είναι ένας σύνδεσμος. Δεν πρόκειται να πάει πουθενά. Και θα πάμε να δώσουμε η σύνδεση τάξη, υποθέτω. Ας το δώσει class-- μου δώσει μια ιδέα. ALLISON BUCHHOLTZ-ΑΕ: Cool. ΤΟΜΑΣ Reimers: Coo-- ας πάει αυτό το όμορφο τάξη. Γιατί όχι; 

ALLISON BUCHHOLTZ-ΑΕ: OK. ΤΟΜΑΣ Reimers: Έτσι τώρα αρκετά πράγματα πρόκειται να κάνει το φόντο μπλε, το χρώμα του φόντου του σολομού. Αυτό έχει νόημα. Και αν κάνουμε this-- 

ALLISON BUCHHOLTZ-ΑΕ: Θέλετε να προσθέσετε κείμενο έτσι ώστε η υπερ-σύνδεση δείχνει πραγματικά επάνω; ΤΟΜΑΣ Reimers: Ότι θα ήταν μια καλή κλήση. ALLISON BUCHHOLTZ-ΑΕ: «το δικαίωμα Αιτία τώρα είμαστε απλά θα πάρει τίποτα. ΤΟΜΑΣ Reimers: Έτσι, αυτό είναι μια σύνδεση. "Αυτή είναι μια σύνδεση." Ω, και αυτό πρόκειται να είναι μια άλλη σύνδεση. Ας δώσουμε την κατηγορία "cool". Έχεις δίκιο. Cool. Έτσι, τώρα θα πάμε για να αρπάξει αυτό. Εμείς πάμε για να ρίξει ένα. Έχουμε ένα στην ειδική ετικέτα, και εμείς επίσης πρόκειται να έχουν μία στην όμορφη ετικέτα. Και τώρα τι θα πάμε να κάνουμε είναι να πάμε να κάνουμε cool-- Τι θέλουμε να κάνουμε; ALLISON BUCHHOLTZ-ΑΕ: Μπορούμε να το κάνει μεγαλύτερο; ΤΟΜΑΣ Reimers: Ας δώσουμε ένα περίγραμμα. ALLISON BUCHHOLTZ-ΑΕ: Θα μπορούσαμε συνόρων. ΤΟΜΑΣ Reimers: Ναι. Έτσι θα πάμε να κάνουμε κάτι όπως, σύνορα is-- και είμαστε πρόκειται να εξηγήσει όλα αυτά σε ένα δευτερόλεπτο. Για now-- 

ALLISON BUCHHOLTZ-ΑΕ: Στο μοντέλο κουτί. ΤΟΜΑΣ Reimers: Αλλά για τώρα, είμαστε ακριβώς πρόκειται να δώσει μια συνόρων. Λοιπόν, τι σημαίνει αυτό είναι ότι είστε πρόκειται να δούμε αυτούς τους συνδέσμους. Και θα πάμε να δούμε ότι έχουν αυτές, όπως, άσχημο μαύρα σύνορα, η οποία είναι δροσερό. 

ALLISON BUCHHOLTZ-ΑΕ: Η ιστοσελίδα μας είναι τόσο όμορφη. 

ΤΟΜΑΣ Reimers: Ναι. Η ιστοσελίδα μας είναι φοβερό. Έτσι, αυτά τα δύο είναι συνδέσεις, και φαίνεται. Τώρα ας προσποιηθούμε μου το μόνο που ήθελε να κάνει αυτό αν δεν ήταν μέσα κάτι η οποία είχε ένα φόντο του σολομού. Έτσι, να θυμάστε ότι αυτό έχει ένα υπόβαθρο σολομού, επειδή είναι της τάξης αρκετά. 

Αλλά θέλουμε να πούμε ότι μόνο δροσίζει που είναι στην κατηγορία ειδικών, όχι στην τάξη όμορφη, θα πρέπει να έχουν αυτά τα σύνορα. Λοιπόν, τι μπορείτε να κάνετε είναι να σας μπορούμε να πούμε, από ειδικά, το διάστημα, .cool. Και τι κάνει, όταν νομίζετε γι 'αυτό, είναι ότι είναι σαν να λέει, Εντάξει, βρείτε μου τα πάντα που ταιριάζει με το ιδιαίτερο. Στη συνέχεια, μέσα σε αυτές τις ετικέτες, να βρουν με όλα αυτά που είναι δροσερό. ALLISON BUCHHOLTZ-ΑΕ: Έτσι, ένας άλλος τρόπος ότι θα ήταν καλό να το σκεφτούμε αυτό, φέρνουν πίσω σε C, είναι όπως ακριβώς και η ιδέα του πεδίου εφαρμογής. Έτσι, όταν έχετε κάποιο επιλογέα, όπως αυτές ότι έχουμε εργαστεί για πριν από αυτό, ολόκληρη την ιστοσελίδα σας, πάντα για την HTML σας εμπίπτει στο πεδίο εφαρμογής σας, σωστά; Αλλά όταν έχουμε αυτές σχέσεις γονέα-παιδιού, Είναι σαν να είστε στένεμα κάτω όπου ψάχνετε σε ένα συγκεκριμένο μέρος, σαν, όπως, ψάχνουμε μέσα μια ειδική λειτουργία, αντί του ολόκληρο το αρχείο μας. ΚΟΙΝΟ: Έτσι με αυτόν στο μυαλό, θα αυτό έχει σημασία αν είχαμε changed-- ALLISON BUCHHOLTZ-ΑΕ: Η παραγγελία; ΚΟΙΝΟ: --Η τάξη σε CSS να .cool, το διάστημα, από ειδικά; ALLISON BUCHHOLTZ-ΑΕ: Ναι, γιατί τότε ότι θα έλεγα, το πεδίο αυτό να οτιδήποτε έχει δροσερό, και στη συνέχεια να εξετάσουμε σε ποιο has-- Θέλω να πω, όπως, στην προκειμένη περίπτωση, Δεν νομίζω ότι θα έχουν αλλάξει. 

ΤΟΜΑΣ Reimers: Αν είχαμε πει τι; Λυπάμαι. 

ALLISON BUCHHOLTZ-ΑΕ: Αν εμείς πεδίο να κρυώσει και στη συνέχεια ψάξουν για πράγματα έξω από ειδικούς, θα ήταν το ίδιο, στην πραγματικότητα. 

ΤΟΜΑΣ Reimers: Γι 'αυτό δεν θα ήταν. 

ALLISON BUCHHOLTZ-ΑΕ: Δεν θα ήταν; OH, OH καλά. Είμαι λάθος. 

ΤΟΜΑΣ Reimers: Έτσι, ο λόγος Είναι different-- κοινή mistake-- είναι ότι αυτή τη στιγμή μόνο ο σύνδεσμος έχει δροσερό, σωστά; Υποθέτω ότι η ερώτησή μου προς εσάς είναι παιδιά, τι σε αυτή τη σελίδα συνοδεύεται από .cool; Υπάρχουν δύο ετικέτες εδώ, σωστά; Ποιο είναι αυτό και αυτό. Και τα δύο ταιριάζουν δροσερό. Τίποτα άλλο δεν το κάνει. Έτσι, αν είπατε, .cool, το διάστημα, από ειδικά, αυτό που πρόκειται να πω είναι, μέσα σε αυτές τις ετικέτες, τι το ιδιαίτερο; ALLISON BUCHHOLTZ-ΑΕ: Χμ. Αυτό είναι ό, τι it-- δεξιά. Επειδή είναι ακριβώς όπως κάτι εδώ. 

ΤΟΜΑΣ Reimers: Γι 'αυτό επιλέγει τίποτα. 

ALLISON BUCHHOLTZ-ΑΕ: ότι, με ειδικά, είμαστε μέσα σε αυτές τις ετικέτες εδώ. 

ΤΟΜΑΣ Reimers: Αυτοί και εκείνοι. ΚΟΙΝΟ: Εντάξει. Έτσι, αυτές οι ετικέτες από το κάθετο προς τα εμπρός; 

ΤΟΜΑΣ Reimers: Ναι. Μήπως αυτό έχει νόημα; Πώς είναι βασικά προσπαθούν να περιορίσετε το πεδίο εφαρμογής. ALLISON BUCHHOLTZ-ΑΕ: Ναι. Νομίζω ότι είναι ίσως η ευκολότερος τρόπος να το σκεφτώ. 

ΤΟΜΑΣ Reimers: Έτσι βρήκαμε αυτό, και βρήκαμε αυτό συνδυάζεται τόσο ιδιαίτερο. Και τότε ζητάμε, μέσα αυτά τα παιδιά, τι είναι cool; Και μέσα σε αυτό το ένα, δροσερό Αυτό και μόνο. Στο πλαίσιο αυτό, τίποτα δεν είναι δροσερό. Έτσι, αυτό είναι το μόνο που απομένει ετικέτα. 

ALLISON BUCHHOLTZ-ΑΕ: Εκτιμώντας τα δροσερά είναι μέσα σε αυτές τις ετικέτες μία εκεί. ΤΟΜΑΣ Reimers: Ακριβώς. Και τι είναι ειδική μέσα αυτά; Τίποτα. Τώρα, αυτό που θα πω είναι αν δεν υπήρχε χώρος, ρωτάτε τι είναι δροσερό και special-- ή ό, τι είναι όμορφο και ιδιαίτερο, έτσι δεν είναι; Εάν λέτε .special.pretty, ότι είναι το ίδιο όπως .pretty.special. 

Διότι τι άρση του χώρου είναι ζητώντας είναι, όταν λέτε από ειδικά, ρωτάτε, εντάξει, ποιες είναι ξεχωριστό; Και μετά από αυτά, τα οποία αυτά είναι επίσης αρκετά, η οποία είναι η ίδια, γραμματικά, ως ζητώντας, τι είναι όμορφο, και, στη συνέχεια, από αυτούς, τι είναι επίσης ξεχωριστό; Σωστά; Είναι η διαφορά του τι είναι μέσα σε αυτό που είναι. ΚΟΙΝΟ: Εντάξει. ΤΟΜΑΣ Reimers: Ναι. Awesome. Έτσι με αυτόν στο μυαλό then-- 

ALLISON BUCHHOLTZ-ΑΕ: Νομίζω ότι η τελευταία μας πράγμα είναι (σε ​​διακοσμητικές βρετανική προφορά) το μοντέλο κουτί. 

ΤΟΜΑΣ Reimers: Η box-- [chuckles] Λατρεύω τον τρόπο με τον Allison λέει ότι. Έτσι, το μοντέλο κουτί πράγμα. 

ALLISON BUCHHOLTZ-ΑΕ: Απλά έχουν ένα κουτί, θα είμαι μοντέλο κουτί σας. ΤΟΜΑΣ Reimers: Ας μιλήσουμε γι 'αυτό. Μέχρι τώρα έχουμε περάσει πολλά του χρόνου να μιλάμε για επιλογείς. Μέχρι τώρα, εσείς είστε κατά πάσα πιθανότητα, όπως, οι πλοίαρχοι των selectors-- ξέρετε, πώς να επιλέξετε ακριβώς το περιεχόμενο που θέλετε να χειριστείτε στην οθόνη σας. 

Έτσι τώρα το ερώτημα είναι, πώς ακριβώς μπορείτε να το χειριστείτε; Έτσι υποθέτω ότι το πιο βασικό τρόπος για να σκεφτούμε ότι Είναι, επίσης, τι ακριβώς είναι ένα στοιχείο σε CSS; Ξοδέψαμε πολύ χρόνο μιλάμε, τι είναι μια ετικέτα, ή ποια είναι η πιο βασική αναπαράσταση μιας ετικέτας; 

Ένας καλός τρόπος για να σκεφτούμε Δηλαδή, τι σχήμα είναι ο σολομός; Τι σχήμα είναι, όπως και η σολομός, έγχρωμο φόντο; 

ΚΟΙΝΟ: Είναι ένα ορθογώνιο. 

ΤΟΜΑΣ Reimers: Είναι ένα ορθογώνιο, σωστά; 

ALLISON BUCHHOLTZ-ΑΕ: Δεν ήταν μια ερώτηση παγίδα. [Γέλια] 

ΤΟΜΑΣ Reimers: Δεν προσπαθώ να σας ξεγελάσουν παιδιά αυτό αργά. Έχουμε λοιπόν αυτό το ορθογώνιο. Και η ετικέτα είναι ένα ρ, σωστά; Έτσι ώστε να μας δίνει καλό πεποίθηση ότι η παράγραφος παριστάνεται ως ένα ορθογώνιο, στο τουλάχιστον στο μυαλό του προγράμματος περιήγησης, το οποίο είναι. 

ALLISON BUCHHOLTZ-ΑΕ: Θέλω να πω, προγράμματα περιήγησης είναι συνήθως ορθογώνια, οπότε είναι λογικό. 

ΤΟΜΑΣ Reimers: Η ιδέα εδώ είναι ότι όλες οι ετικέτες εντός CSS εκπροσωπούνται ως ένα ορθογώνιο. Και κάθε ορθογώνιο έχει τέσσερις μέρη σύμφωνα με CSS, εντάξει; Έχετε το πραγματικό περιεχόμενο. Αυτός είναι όπου το κείμενο βρίσκεται. 

ALLISON BUCHHOLTZ-ΑΕ: Ίσως η εικόνα σας. 

ΤΟΜΑΣ Reimers: Ναι. Έχετε γεμίσει, η οποία είναι μόνο κάποια από λευκό κενό. Στη συνέχεια, έχετε ένα σύνορο. Και τότε έχετε περιθώριο, το οποίο είναι λευκό χώρο έξω από αυτό. Έτσι ώστε δεν έχει κανένα νόημα σε κανέναν, έτσι είμαστε πρόκειται να μιλήσω γι 'αυτό για ένα δευτερόλεπτο. Τόσο εδώ, τι θα πάμε να κάνουμε είναι ότι πρόκειται να δημιουργήσει κάποια divs, εντάξει; Με συγχωρείτε, ενώ I-- 

ALLISON BUCHHOLTZ-ΑΕ: νιώθω θα πρέπει να βάλουμε ένα χαριτωμένο εικόνα. 

ΤΟΜΑΣ Reimers: Πρέπει σίγουρα. 

ALLISON BUCHHOLTZ-ΑΕ: Νιώθω σαν όλους θα μπορούσαν να επωφεληθούν από μια χαριτωμένο εικόνα, είναι όλα. 

ΤΟΜΑΣ Reimers: Μπορούμε να ωφεληθούμε όλοι από a-- 

Κοινό: Ναι, σίγουρα. ΤΟΜΑΣ Reimers: Εντάξει, δροσερό. Γι 'αυτό και πρέπει να τεθεί ένα χαριτωμένο εικόνα κάπου. ALLISON BUCHHOLTZ-ΑΕ: Νιώθω σαν ένα χαριτωμένο λαγουδάκι μπορεί να είναι χρήσιμο τώρα. ΤΟΜΑΣ Reimers: Σίγουρα. ALLISON BUCHHOLTZ-ΑΕ: τέλος της εβδομάδας. Έχετε κάτι adorab-- 

ΤΟΜΑΣ Reimers: Πώς αγώνα ένα γατάκι; 

ALLISON BUCHHOLTZ-ΑΕ: Ένα γατάκι λειτουργεί, πάρα πολύ. 

ΤΟΜΑΣ Reimers: Cool, επειδή υπάρχει ένα site για αυτό. Ονομάζεται PlaceKitten. ALLISON BUCHHOLTZ-ΑΕ: Αυτό είναι μεγάλη. ΤΟΜΑΣ Reimers: Ναι. ALLISON BUCHHOLTZ-ΑΕ: Ακριβώς για, όπως, εικόνων κράτησης θέσης στην ιστοσελίδα σας. ΤΟΜΑΣ Reimers: MM-HM. Υπάρχει επίσης PlacePuppy. Και υπάρχει PlaceBacon. 

ALLISON BUCHHOLTZ-ΑΕ: PlaceBacon; Αλήθεια; 

ΤΟΜΑΣ Reimers: Ω, εμείς δεν κάνουμε έχουν πρόσβαση στο διαδίκτυο εδώ. 

ALLISON BUCHHOLTZ-ΑΕ: [στεναγμοί] Τραγική. ΤΟΜΑΣ Reimers: Σε αντίθετη περίπτωση, Θα ήθελα να σας δείξω παιδιά πώς να βάλετε τις εικόνες στην ιστοσελίδα σας. Εμείς πάμε για να προσπαθήσει να πάρει αυτό εργάζονται πριν πρέπει να πάμε. Αλλά για τώρα, είμαστε απλά πρόκειται να μιλήσω σε χρώματα τότε. Θέλουμε να βάλουμε φωτογραφίες του kittens-- 

ALLISON BUCHHOLTZ-ΑΕ: Κάναμε. 

ΤΟΜΑΣ Reimers: --Ο Διαδικτύου προς τα κάτω, προς το παρόν είναι. Έτσι έχουμε δύο divs, και είμαστε πρόκειται να τους δώσει δύο ταυτότητες. Εμείς πάμε για να το αποκαλούν «Πρώτης» και «δεύτερης». Έτσι id = "πρώτα." Και θα πάμε να τους δώσει δύο χρώματα. Επομένως, πώς θα επιλέξετε κάτι με ένα αναγνωριστικό του «πρώτου»; ALLISON BUCHHOLTZ-ΑΕ: Dot ή κατακερματισμού; ΚΟΙΝΟ: Sharp. ΤΟΜΑΣ Reimers: Sharp, τέλεια. Sharp, χασίς, ανεξάρτητα από we-- 

ALLISON BUCHHOLTZ-ΑΕ: Πολλά πράγματα για να καλέσετε. 

ΤΟΜΑΣ Reimers: OK. Εμείς πάμε για να εγκατασταθούν σε hashtag, και αυτό είναι που θα πάμε για να πάει με. Εντάξει; 

ALLISON BUCHHOLTZ-ΑΕ: Hashtag. 

ΤΟΜΑΣ Reimers: Έτσι hashtag πρώτη. 

ALLISON BUCHHOLTZ-ΑΕ: Έτσι μπορείτε να τιτίβισμα την seminar-- hashtag CSS, hashtag δροσερό. ΤΟΜΑΣ Reimers: Hashtag Τέλεια. ALLISON BUCHHOLTZ-ΑΕ: Hashtag Τέλεια, ναι. ΤΟΜΑΣ Reimers: OK. Έτσι έχουμε «πρώτης» και «δεύτερης». Έτσι, πρώτα, θα πάμε να έχουν ένα χρώμα φόντο κόκκινο. ALLISON BUCHHOLTZ-ΑΕ: Χμ, του παχέος εντέρου. ΤΟΜΑΣ Reimers: Yup. ALLISON BUCHHOLTZ-ΑΕ: Θα είμαι σας spot-πούλι. ΤΟΜΑΣ Reimers: Allison είναι με πήρε. Ιστορικό-χρώμα blue-- 

ΤΟΜΑΣ Reimers: Μωβ! 

ΤΟΜΑΣ Reimers: Μωβ. ALLISON BUCHHOLTZ-ΑΕ: Ναι. Μωβ είναι το αγαπημένο μου χρώμα, και δεν έχουμε ακόμη αξιοποιήσει. 

ΤΟΜΑΣ Reimers: Violet. ALLISON BUCHHOLTZ-ΑΕ: Violet. Αυτό λειτουργεί. 

ΤΟΜΑΣ Reimers: Έτσι είμαστε πρόκειται να έχει δύο divs. Θα πάμε να είναι εντελώς άδειο. Θα πρέπει πιθανώς να έχουν κάποιο κείμενο. Έτσι, "πρώτη" θα είναι "γεια". Και η "δεύτερη" θα say-- 

ALLISON BUCHHOLTZ-ΑΕ: Αντίο. 

ΚΟΙΝΟ: - "κόσμο". Γεια σας, αντίο. ALLISON BUCHHOLTZ-ΑΕ: Είδα τους συναυλία την άλλη εβδομάδα. ΤΟΜΑΣ Reimers: Οι Beatles; ALLISON BUCHHOLTZ-ΑΕ: Για ρεάλ. Δεν είναι τόσο μεγάλη. Δεν μου αρέσει. 

ΤΟΜΑΣ Reimers: Έχουμε "Γεια" και "αντίο». Και πάλι, CSS είναι απλά φοβερό, επειδή αναγνωρίζει τα χρώματα μας. Δεν χρειάζεται να ακόμη ανησυχούν ότι υπάρχουν. Κάνουν. 

ALLISON BUCHHOLTZ-ΑΕ: Αυτοί υπάρχουν. 

ΤΟΜΑΣ Reimers: Έτσι CSS νομίζω ότι έχει 255 λέξεις για να μιλήσουμε για το χρώμα. Εάν μπορείτε να σκεφτείτε ένα χρώμα εκτός εκείνοι 255, όπως, θα είμαι εντυπωσιασμένος. ALLISON BUCHHOLTZ-ΑΕ: Ναι. Νομίζω ότι εσείς μπορεί να έχουν Μόλις έρθει αμέσως μετά. 

ΤΟΜΑΣ Reimers: Μέχρι εδώ, θα δείτε έχουμε δύο κουτιά ακριβώς πάνω από το άλλο, έτσι δεν είναι; Γεια σας και ΑΝΤΙΟ. 

ALLISON BUCHHOLTZ-ΑΕ: Δεν υπάρχει κενό μεταξύ τους. Είναι απλά συντρίβονταν ακριβώς πάνω από το άλλο. 

ΤΟΜΑΣ Reimers: Έτσι, το πρώτο πράγμα Υποθέτω ότι πρέπει να μιλήσουμε για Είναι ας say-- επίσης ναι. Έτσι CSS τους εκπροσωπεί ως είδος των κιβωτίων. Και όπως κουτιά, έχουν περιεχόμενο. Και το περιεχόμενο τώρα είναι είδος Το Hello ή αντίο και αυτό είναι όλο. Εντάξει; 

Έτσι ένα από τα πρώτα πράγματα που μπορούμε να κάνουμε είναι ότι μπορείτε να προσθέσετε padding. Επένδυση λέει πόσο χώρο δεν πρέπει να αφήνει σε κάθε πλευρά. Ας πούμε ότι θέλω να πω 10 εικονοστοιχεία σε κάθε πλευρά. Και εγώ θα τεμαχίσει ότι σε ένα δευτερόλεπτο. ALLISON BUCHHOLTZ-ΑΕ: Όλα αυτά τα πράγματα εδώ πρόκειται να είναι ως επί το πλείστον σε pixels για το υπόλοιπο του σεμιναρίου. Θα πάμε να δούμε ότι έχει λίγο χώρο γύρω από αυτό, σωστά; Έτσι, ό, τι δεν μπορείτε να δείτε εδώ είναι ότι υπάρχει αυτό το αόρατο είδος της padding σε κάθε πλευρά, που λέει, όπως, Εντάξει, έχετε το κουτί των content-- 

ALLISON BUCHHOLTZ-ΑΕ: Θέλετε απλά να σηκώσει το στοιχείο επιθεωρεί; 

ΤΟΜΑΣ Reimers: Ναι, αυτό είναι μια καλή ιδέα. ALLISON BUCHHOLTZ-ΑΕ: Επίσης, βρίσκω ότι το στοιχείο επιθεωρεί είναι ένας καλός τρόπος να καταλάβω αν κάτι πηγαίνει λάθος, συμβαίνει κάτι αναπάντεχο, επιθεώρηση των ετικετών και να δει τι είναι σαν να αντικατασταθούν είναι χρήσιμη. 

ΤΟΜΑΣ Reimers: Γι 'αυτό δεν είμαι σίγουρος αν εσείς μπορείτε να δείτε αυτό το χρώμα. Μπορείς; Θα δείτε αυτό το υλικό παραγεμίσματος για το είδος της ακμής. Και τότε θα δείτε το πραγματικό περιεκτικότητα σε μπλε, σωστά; Έτσι, αυτό είναι το πολύ βασικά στοιχεία του μοντέλου κουτί. Έχετε περιεχόμενο. Στη συνέχεια θα πρέπει να γεμίσει. 

ΚΟΙΝΟ: Γιατί δεν κάνουμε απλά χρησιμοποιήστε το πλαίσιο μέσα the-- 

ALLISON BUCHHOLTZ-ΑΕ: Δεξιά. Επειδή είναι ακριβώς επιλογή το στοιχείο τώρα. 

ΤΟΜΑΣ Reimers: Yup. Άλλα πράγματα. Ας μιλήσουμε γι 'αυτό εντολή επένδυση για ένα δευτερόλεπτο. Έτσι, σε CSS, μετρήσεις πρέπει να έχουν μια μονάδα. Έτσι, πρώτα θα πρέπει το ποσό. Έτσι, σε αυτή την περίπτωση, έχουμε πει 10. Και στη συνέχεια το επόμενο έχουμε πει είναι εικονοστοιχεία, px. Άλλες αυτά που μπορεί να έχετε είναι πράγματα όπως εκατοστά, ίντσες. Μπορείτε να κάνετε πράγματα όπως, τι είναι 10 ίντσες; Και αυτό πρόκειται να είναι γελοίο. 

ALLISON BUCHHOLTZ-ΑΕ: Ω, αγόρι. 

ΚΟΙΝΟ: Πω πω. 

ΤΟΜΑΣ & Allison: Ναι. ΤΟΜΑΣ Reimers: Έτσι, αυτό είναι όλο το υλικό παραγεμίσματος. Πάω να πάει πίσω σε pixel. 

ALLISON BUCHHOLTZ-ΑΕ: Pixels τείνουν να είναι, όπως, το πρότυπο. Αν κοιτάξει κανείς πολλές ιστοσελίδες, ως επί το πλείστον εργάζονται σε pixels. ΤΟΜΑΣ Reimers: Έτσι θα πάμε να δούμε είτε pixels-- τα άλλα αυτά που βλέπετε είναι em, το οποίο είναι ένα em είναι ίσο με το ύψος της γραμματοσειράς που χρησιμοποιείτε αυτήν τη στιγμή. 

ALLISON BUCHHOLTZ-ΑΕ: mm. ΤΟΜΑΣ Reimers: Είναι ένας καλός τρόπος να πω, όπως, θέλω όσο χώρο γραμματοσειρά μου Είναι λήψη. ALLISON BUCHHOLTZ-ΑΕ: Μήπως δεν γνωρίζουν ότι. Μπορείτε να μάθετε κάτι νέο κάθε μέρα. ΤΟΜΑΣ Reimers: Υπάρχουν πολλές μετρήσεις στο CS. Σας προτείνω να τους αναζητήσετε. Για όλες τις περιπτώσεις σας, νομίζω εικονοστοιχεία θα πρέπει να είναι επαρκής. Και είναι επίσης τι θα πάμε να δούμε στην πλειονότητα των παραδειγμάτων γίνεται online. Γι 'αυτό και θα το αφήσει σε εικονοστοιχεία. 

Μπορείτε επίσης, θα say-- έτσι padding σύνολα Όλα τα γεμίσματα. Μπορείτε επίσης να κάνετε κάτι σαν "Padding-top" σε μόλις set-- ALLISON BUCHHOLTZ-ΑΕ: Ίσως θα πάρουμε μας "γεια" πίσω. ΤΟΜΑΣ Reimers: --Για μόλις οριστεί η padding στην κορυφή και τίποτε άλλο. Έτσι, οι τέσσερις εντολές είναι padding-top, padding-bottom, padding-αριστερά, και να γεμίσει δεξιά. 

ALLISON BUCHHOLTZ-ΑΕ: Ακριβώς όπως θα περίμενε κανείς για ένα κουτί. 

ΤΟΜΑΣ Reimers: Ναι. Τίποτα δεν πάρα πολύ τρελό εκεί. Μήπως αυτό έχει νόημα; Έτσι ώστε να είναι παραγέμισμα. Πάω να θέσει όλα τα ένθετα πίσω στο 10. Και στη συνέχεια, Πάω να προχωρήσουμε σε σύνορα. 

Έτσι τι σύνορα είναι συνόρων είναι ένα παράξενο εντολή. Παίρνει το είδος του τρία πράγματα ταυτόχρονα. Έτσι, το πρώτο είναι πόσο μεγάλη σας θέλω να είναι σαν μια μέτρηση. Και πάλι, είμαι μόνο με τη χρήση pixel. Και το τελευταίο πράγμα που πρέπει να προσθέσετε σε μετρήσεις είναι το μόνο πράγμα που δεν χρειάζεται μια μονάδα είναι 0. Είναι πραγματικά λάθος για να δώσει μια μονάδα 0, επειδή το 0 είναι 0 σε όλη ίντσες, pixels, εκατοστά, οτιδήποτε. Είναι όλα απλά σημαίνει 0, σωστά; Έτσι, πρώτα θα δώσει τη μέτρηση. 

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

Κοινό: Ναι. 

ΤΟΜΑΣ Reimers: Cool. Λοιπόν, τι είναι αυτό; Έτσι, πρώτα απ 'όλα, αυτό είναι ένα pixel. Αυτό είναι αυτονόητο αρκετά, έτσι δεν είναι; Όπως, είναι ένα εικονοστοιχείο πάχους. Ή θα είναι ένα pixel, αλλά είμαι μεγέθυνση, έτσι είναι λίγο πιο από αυτό. 

ALLISON BUCHHOLTZ-ΑΕ: Και έχουμε αυτή η γελοία τηλεόραση ανάλυση. 

ΤΟΜΑΣ Reimers: Ναι. Μπορείτε να κάνετε το μεγαλύτερο, μικρότερες, οτιδήποτε. Έτσι, εδώ είναι ένα σύνορο δύο-pixel. Θα δείτε ότι είναι δύο φορές πιο παχιά. Το επόμενο πράγμα που έχετε είναι το χρώμα. Αυτό δεν είναι ενδιαφέρουσα. Είμαι δεν πρόκειται να μιλήσω γι 'αυτό, πραγματικά. 

ALLISON BUCHHOLTZ-ΑΕ: Αλλά το στυλ θα μπορούσε να είναι λίγο ενδιαφέρον. 

ΤΟΜΑΣ Reimers: Ναι. Έτσι, το στυλ, υπάρχουν λίγοι αυτοί ότι βλέπω χρησιμοποιούνται συνήθως. Στερεά, επόμενο Πρώτη κάποιου διακεκομμένη και διακεκομμένη και η τελευταία του. Και εδώ είναι διάσπαρτη. Θα δείτε ότι είναι ένα μάτσο τελείες, σωστά; Ένας καλός τρόπος για να πάρετε το είδος του ένα ωραίο περίγραμμα πρόκειται, παύλες είναι επίσης αρκετά δημοφιλή. 

ALLISON BUCHHOLTZ-ΑΕ: Και τότε φυσικά, είμαι βέβαιος ότι υπάρχουν πολλές άλλες στυλ που μπορείτε να πάρετε. Και έχουμε μια μεγάλη σειρά από συνδέσμους στο τέλος για σας παιδιά να λάβουν γνώση του είδους και εξετάσουμε πιο δροσερό CSS. 

ΤΟΜΑΣ Reimers: Και στη συνέχεια, το τελευταίο πράγμα, είμαστε πρόκειται να μιλήσουμε για το μοντέλα κουτί πραγματικά γρήγορα. Ω, και στη συνέχεια, στα σύνορα, ακριβώς όπως το παραγέμισμα, έχετε επίσης πράγματα όπως σύνορα-αριστερά, στα σύνορα-δεξιά, border-top, σύνορα-κάτω, τα οποία σας επιτρέπουν να πάρετε σε μια συγκεκριμένη σύνορα. Έτσι, εδώ είναι μόνο τα σύνορα αριστερό ορίζεται. Μήπως αυτό έχει νόημα; 

ALLISON BUCHHOLTZ-ΑΕ: Είναι ένα δροσερό τρόπος για να τονίσει τα πράγματα ή να προσθέσετε γραμμές μεταξύ των διαφόρων στοιχείων. ΤΟΜΑΣ Reimers: Απολύτως. Έτσι, αυτό είναι συνόρων μας. Και περιθώριο της τελευταίας κάποιου. Όπως το παραγέμισμα Μαργκίν εκτός του ότι δεν είναι within-- ALLISON BUCHHOLTZ-ΑΕ: Είναι όχι γύρω από το στοιχείο σας αλλά στην πραγματικότητα γύρω από ολόκληρο το κουτί που έχουμε ήδη δει. 

ΤΟΜΑΣ Reimers: Ναι. Allison είπε τέλεια. Δεν είναι, όπως, μέσα σας στοιχείο, είναι γύρω από ολόκληρο το κουτί. Αυτό σημαίνει ότι τα πράγματα όπως φόντο, δεν ισχύουν γι 'αυτό. Και λέει βασικά, όπως, δεν θέλω τίποτα σε αυτό το πολύ χώρο για μένα. Έτσι, όπως έχουμε εδώ ένα περιθώριο 10 pixels. Έτσι, τίποτα μέσα σε 10 εικονοστοιχεία θα πρέπει να είναι δίπλα μου. Αυτό είναι το είδος του του χώρο, αλλά το είδος του όχι. Έτσι, αυτό είναι το πολύ βασικά στοιχεία του μοντέλου κουτί. Μήπως αυτό έχει νόημα; Cool, δροσερό. ALLISON BUCHHOLTZ-ΑΕ: Awesome. Έτσι τώρα σκεφτόμαστε μόνο έχουν δροσερό πόρους μας ότι θα σας μεταφέρουμε παιδιά μέσω πολύ γρήγορα. Και θα actually-- καλά, έχουμε ακόμα στο διαδίκτυο; 

ΤΟΜΑΣ Reimers: Ας δω αν μπορώ να ανοίξω up-- επιτρέψτε μου να δω αν μπορώ μπορεί να πάρει γρήγορα στο διαδίκτυο ενώ Allison μιλά για οτιδήποτε Allison θέλει να μιλήσει για. ALLISON BUCHHOLTZ-ΑΕ: Έτσι basically-- εγώ δεν κάνω ξέρω τι άλλο μπορώ να πω σε αυτό το σημείο. Αλλά αυτά είναι μερικά πολύ καλή παραγωγή. Αυτά είναι αυτοί που Tomas και έχω χρησιμοποιήσει και ότι στην πραγματικότητα που χρησιμοποιούνται για την προετοιμασία για αυτό. W3Schools είναι αυτό που σας παιδιά πρέπει να έχουν δει πριν. Σας το συνιστώ για μια πολλά πράγματα με CSS. Ξέρω ότι το συστήνω σε τμήμα μου όλη την ώρα. 

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

Και έχει αυτά τα μικρά μαθήματα που μπορείτε να να περάσει για να μάθετε περισσότερα για επιλογείς, ή να μάθουν για το χειρισμό σας γραμματοσειρά, ή ένα υπόβαθρο, ή μια εικόνα. Και έχετε αυτά στιγμιαία αποτελέσματα που Δεν χρειάζεται να κάνετε οποιαδήποτε άλλες εργασίες προετοιμασίας για. Γι 'αυτό αγαπώ W3Schools. Είναι καταπληκτικά. Είναι εργασίας; 

ΤΟΜΑΣ Reimers: Ναι. Όχι, δεν είναι. Θέλεις να δοκιμάσετε και κάντε επανεκκίνηση του υπολογιστή μου; Ή θέλουμε to-- 

ALLISON BUCHHOLTZ-ΑΕ: Θέλω να πω, καλά, αυτό θα είναι επίσης σε απευθείας σύνδεση. Όλες οι διαφάνειες θα είναι σε απευθείας σύνδεση. Γι 'αυτό ακριβώς το συνιστώ ανεπιφύλακτα κάνει αυτά. 

Αυτό είναι μεγάλη, όπως ακριβώς σαν ένα σκονάκι. Είναι ακριβώς όλα τα βασικά εντολές που έχετε. Είναι ιδανικό όταν είστε πρώτα ξεκινώντας από την ιστοσελίδα σας. Επειδή ίσως δεν το κάνετε θέλουν να μπει σε όλα η πραγματική κονιδιασμένος λιθίαση σχεδιασμού βαριά πράγματα. Απλά πρέπει να το διαμορφώσετε με έναν τρόπο Αυτό το είδος της νόημα και τη βούληση κάνει προς το παρόν. Και αν θέλετε πραγματικά να μπει σε αυτό, ξέρω αυτό είναι, όπως, ένα από τα Αγαπημένες αναφορές Tomas του. Ήμασταν το χρησιμοποιούν για να προετοιμασία, και αυτό είναι υπέροχο. Είναι υπεύθυνος για την ανάπτυξη από το ίδρυμα Mozilla. 

ΤΟΜΑΣ Reimers: Έτσι είναι το Mozilla οι άνθρωποι που κάνουν τον Firefox. Και αυτό είναι μόνο δική τους προγραμματιστές αναφοράς, η οποία νομίζω ότι είναι φοβερό. Και αυτό έχει μια υπέροχη Λίστα των πόρων. Γι 'αυτό και have-- 

ALLISON BUCHHOLTZ-ΑΕ: Και στη συνέχεια, τελευταία σημείωση είναι όταν προσπαθείτε να το σχεδιασμό την ιστοσελίδα σας, αντλήσουν έμπνευση από τα πράγματα ότι νομίζετε ότι είναι αρκετά. Επιθεώρηση του στοιχείου, επιθεώρηση του πηγαίου κώδικα μπορεί να είναι εξαιρετικά χρήσιμη για την προσπάθεια να καταλάβω πώς να στυλ το δικό σας ιστότοπο. 

Συχνά, νιώθω σαν το καλύτερο Έτσι, εκτός από τον πειραματισμό, Είναι μόνο για να δούμε πράγματα που είναι αρκετά. Θεωρώ ότι είναι πολύ δύσκολο να απλά το είδος του σχεδιασμού πράγματα για τη δική σας, ειδικά στην αρχή. Επομένως, σας παρακαλώ δείτε ιστοσελίδες ότι μπορείτε να απολαύσετε κοιτάζοντας. Υπολογίστε τι κάνει ελκυστικό για εσάς. Και τότε μη διστάσετε να να προσπαθήσουμε και να αναπαράγουν αυτό. 

ΤΟΜΑΣ Reimers: Δεξιά. Ακόμη, όπως ιστοσελίδες όπως αυτό, μπορείτε να δείτε υπάρχει σίγουρα ένα div στην κορυφή. Και τότε έχετε ένα άλλο div μέσα εδώ, το οποίο είναι το CSS Τέλεια. Και τότε έχετε μια δέσμη των συνδέσεων εδώ. Αν πραγματικά ακριβώς επιθεωρούν στοιχεία, μπορείτε να ταξινομήσετε του αρχίσετε να βλέπετε τι κάνουν ιστοσελίδες μοιάζει, και πώς μπορώ να αναδημιουργήσει ότι αν ήθελα να. Μήπως αυτό έχει νόημα; Έτσι έχουμε μόνο τρία λεπτά που απομένουν. Έτσι ερωτήσεις; Οποιαδήποτε από αυτές; Ναι. 

Κοινό: Για το χρώμα ορθογώνιο, πώς θα have-- αν δεν το θέλετε πηγαίνει σε όλη την σελίδα, θα μπορούσε να έχετε κάνει να πάει σε όλη μόνο Η μισή σελίδα ή απλά το κείμενο; 

ΤΟΜΑΣ Reimers: Ναι, απολύτως. Έτσι, επιτρέψτε μου να δούμε πραγματικά. Έχω δύο ιδέες. Έτσι, πρώτα απ 'όλα, μπορούν επίσης να χρησιμοποιήσουν ποσοστά. 

ΚΟΙΝΟ: Αλήθεια; 

ALLISON BUCHHOLTZ-ΑΕ: Οπότε κάτι να κοιτάζω προς τα πάνω είναι σχετική τοποθέτηση. Είναι κάτι που εμείς Δεν έχω χρόνο για να μπει, αλλά αυτό είναι κάτι που σίγουρα προτείνουμε εσείς τον έλεγχο έξω. 

ΤΟΜΑΣ Reimers: Έτσι ποσοστά. Και να δούμε πώς θα το έκανε μόλις το 50% του πλάτους; ALLISON BUCHHOLTZ-ΑΕ: Εάν πραγματικά γνωρίζουν τον αριθμό των pixels, μπορείτε να είστε πιο ακριβείς με αυτόν τον τρόπο. Μπορείτε να βιολί γύρω με αυτό. Αλλά το 50%. Αν επρόκειτο να αλλάξετε το μέγεθος του προγράμματος περιήγησης μας, θα καθιστούσε μικρότερα. 

ΤΟΜΑΣ Reimers: Λοιπόν, αυτό είναι βασικά 50% τώρα, νομίζω. Είναι κατά 50%, και στη συνέχεια το περιθώριο έχει προστεθεί σε αυτό. CSS έχει πολλές ιδιορρυθμίες. Μέχρι τώρα αυτό είναι Το 50% του πλάτους της σελίδας. Αλλά να θυμάστε ότι έχετε 10 εικονοστοιχεία απογειωθεί από κάθε πλευρά. Έτσι, αν ήταν να προχωρήσουμε ότι κατά η αριστερή άκρη του προγράμματος περιήγησης, τότε θα μοιάζουν με 50%. Και πάλι, όπως είπα, CSS μπορεί είναι πολλή εικασία-και-ελέγχου. Όπως, νομίζετε ότι κάτι είναι πρόκειται να συμπεριφέρεται με έναν τρόπο, αλλά συμπεριφέρεται έναν εντελώς διαφορετικό τρόπο. 

ALLISON BUCHHOLTZ-ΑΕ: Και μπορείτε να πάρετε μόνο πιο έξυπνη, και μπορείτε απλά να πάρετε μια καλύτερη διαίσθηση για αυτό, όπως κινείστε κατά μήκος. 

ΤΟΜΑΣ Reimers: Και γίνεται όλο και χειρότερη. Έτσι, είναι πραγματικά μόνο ένας αγώνας. 

ALLISON BUCHHOLTZ-ΑΕ: Αυτό είναι εξαιρετικά ενθαρρυντικά. Θέλουμε να αρέσει CSS. 

ΤΟΜΑΣ Reimers: CSS είναι φοβερό. Να θυμάστε ότι. Άλλες ερωτήσεις; 

ALLISON BUCHHOLTZ-ΑΕ: Το ένα πράγμα. Οτιδήποτε άλλο; Cool. 

ΤΟΜΑΣ Reimers: Awesome. 

ALLISON BUCHHOLTZ-ΑΕ: Λοιπόν, αν παιδιά έχουν απορίες αργότερα, είμαστε πάντα στη διάθεσή σας ως συνήθως. Θα δείτε πιθανόν κάποια από εμάς για την τελική έργων και σίγουρα στο hackathon. 

ΤΟΜΑΣ Reimers: Απολύτως. Και στην εύλογη. 

ALLISON BUCHHOLTZ-ΑΕ: Και στην εύλογη. Ω. 

ΤΟΜΑΣ Reimers: Ανυπομονώ να βλέποντας όλα awesome-- σας 

ALLISON BUCHHOLTZ-ΑΕ: Θα δούμε όλα φοβερό ιστοσελίδες σας ότι θα είναι όμορφο. ΤΟΜΑΣ Reimers: Μπορείτε πάντα να δείτε, όπως, τις ιστοσελίδες που είχαν, όπως, καλή CSS και, στη συνέχεια, όπως και εκείνοι που δεν προσπαθώ να κάνω CSS. ALLISON BUCHHOLTZ-ΑΕ: Επίσης, ένα άλλο πράγμα, ένα ακόμη πράγμα που πρέπει να εξετάσουμε είναι Bootstrapping. Έτσι Bootstrap είναι μεγάλη. 

ΤΟΜΑΣ Reimers: Google ότι αν you-- 

ALLISON BUCHHOLTZ-ΑΕ: το Google. Είναι καταπληκτικά. Θα το αγαπήσετε. Και τώρα που έχετε μια βασική κατανόηση της CSS, αυτό θα κάνει πολύ πιο λογικό. Awesome. Ευχαριστώ, παιδιά. 

ΤΟΜΑΣ Reimers: Σας ευχαριστώ πολύ.