[Powered by Google Translate] [CSS] [Joseph Ong - Πανεπιστήμιο του Χάρβαρντ] [Αυτό είναι CS50. - CS50.TV] 

Σήμερα θα μιλήσουμε για το CSS ή επικαλυπτόμενα φύλλα στυλ. 

Έτσι, τι ακριβώς είναι το CSS; Λοιπόν, ας σπάσει τον όρο CSS καθορίζονται σε 2 μέρη: Τα επικαλυπτόμενα και Style Sheets. Cascading είναι λίγο πιο περίπλοκη, και αυτό είναι κάτι που θα καλύψουμε σε ένα άλλο βίντεο. Αλλά για ορεκτικά, τα φύλλα στυλ πολύ παραπέμπει σε αυτό που κάνει CSS. Προσθέτει στυλ στην HTML μιας ιστοσελίδας, αλλάζουν τον τρόπο η ιστοσελίδα φαίνεται αισθητικά. Αυτό σημαίνει τα πάντα από τη γραμματοσειρά του κειμένου ως προς τη θέση του περιεχομένου στη σελίδα σε άλλα δροσερά πράγματα, όπως κάνει τις γωνίες στρογγυλεμένες ένα κουτί ή την προσθήκη σκιές στο κείμενο. Μπορείτε να κάνετε ακόμα και τρελά πράγματα, όπως κάνουν τα πράγματα ζωντανεύουν στην οθόνη. 

Επομένως, πώς θα χρησιμοποιήσετε CSS με την HTML; Πάρτε αυτή την κακή εμφάνιση ιστοσελίδα που μόλις έγραψα. Αν Rob ήταν να εξετάσουμε αυτό το site τώρα, θα έπρεπε πιθανώς να πω κάτι τέτοιο, "Wow! Εισαγωγή μου φαίνεται τρομερή. Joseph, είστε ένα φοβερό σχεδιαστή." "Χρησιμοποιώντας την προεπιλεγμένη γραμματοσειρά Times; Helvetica είναι τόσο πολύ καλύτερα." 

Λοιπόν, τι θα μπορούσε να είναι ο απλούστερος τρόπος για να εφαρμόσετε το στυλ Rob θέλει; Οι πιο προφανής τρόπος για πολλά άνθρωποι έγραψαν αρχικά CSS ήταν να τεθεί αυτό που αποκαλούμε δηλώσεις στυλ ακριβώς στο ίδιο το στοιχείο χρησιμοποιώντας το HTML χαρακτηριστικό στυλ. Μια δήλωση στυλ συνίσταται απλώς CSS ιδιοκτησία του στοιχείου HTML που θέλουμε να αλλάξουμε ακολουθείται από μια άνω και κάτω τελεία ακολουθούμενη από τη νέα αξία του ακινήτου και το ερωτηματικό στο τέλος. Για παράδειγμα, ας πούμε Rob θέλει ένα μαύρο πλαίσιο γύρω από την εισαγωγή του. Βάζουμε πρώτα το χαρακτηριστικό στυλ div Rob εδώ στη συνέχεια, μέσα σε διπλά εισαγωγικά θέσει δήλωση CSS: "Border: 1px στερεό μαύρο?" Το 1 pixel αναφέρεται στο πλάτος των συνόρων, το στερεό αναφέρεται στο στυλ των συνόρων, και το χρώμα στο τέλος καθορίζει τι χρώμα για τα σύνορα είναι. 

Αν θέλουμε πολλά στυλ σε ένα στοιχείο, γράψτε τις δηλώσεις αυτές με τη σειρά. Για παράδειγμα, εάν Rob θέλει το κείμενο κεφαλιά του σε Helvetica με μπλε φόντο και περισσότερο χώρο γύρω από το κείμενο, μπορούμε να το κάνουμε αυτό: style = "font-family: Helvetica? υπόβαθρο-χρώμα: μπλε? padding: 5px?" Το τελευταίο ερωτηματικό είναι πραγματικά προαιρετική, αλλά οι άνθρωποι κρατήσει συνήθως για λόγους συνέπειας. 

Θα σώσει εξηγεί μερικές από τις πιο δροσερές και πιο σύνθετες ιδιότητες CSS για ένα άλλο βίντεο. Αν έχετε κάτι στο μυαλό, Googling ακριβώς το αποτέλεσμα που θέλετε ακολουθείται από CSS πιθανότατα θα σας δώσει πολύ καλά αποτελέσματα. Το δροσερό πράγμα είναι ότι το CSS είναι αρκετά ευρεία, οπότε οι πιθανότητες είναι, εάν υπάρχει κάτι που θέλετε να κάνετε - μέσα στο λόγο - CSS μπορεί να το κάνει κατά πάσα πιθανότητα. Καλούμε αυτό το είδος του styling inline styling. Το ύφος στοιχείο είναι, επίσης, σύμφωνα με την ετικέτα έναρξης. 

Για τους λαούς που πραγματικά ήθελε να είναι οργανωμένη, μπορείτε να αρχίσετε να πάρει λίγο peeved το πόσο βρώμικο αυτό όλα τα βλέμματα. Φανταστείτε εάν είχατε να το κάνετε αυτό για κάθε στοιχείο στη σελίδα, καθώς τώρα σας HTML και CSS είναι όλα αναμειγμένα και γεμάτα. Gross, έτσι δεν είναι; Για να διορθώσετε αυτό, οι άνθρωποι τελικά ξεκίνησαν να κυνηγούν για τον διαχωρισμό HTML markup τους από το CSS styling τους, χρησιμοποιώντας κάτι που ονομάζεται CSS επιλογείς. Τα CSS επιλογείς χρησιμοποιούνται για να επιλέξετε τα στοιχεία στα οποία δηλώσεων εφαρμόζονται. Ένας επιλογέας σε συνδυασμό με έναν κατάλογο των CSS δηλώσεις είναι συχνά αναφέρεται ως κανόνα CSS. Οι κανόνες αυτοί θα τεθούν μεταξύ ανοίγουν και κλείνουν HTML tags στυλ, συχνά στο κεφάλι του εγγράφου. 

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

Τώρα, τι γίνεται αν θέλαμε να επιλέξετε το εσωτερικό h1 του intro του Rob; Μπορείτε να σκεφτείτε, "Ας βάλουμε ένα αναγνωριστικό σε αυτό και στη συνέχεια να προχωρήσουμε νωρίτερα στυλ μας." Αυτό λειτουργεί, αλλά CSS έχει άλλους τρόπους επιτρέποντάς σας να επιλέξετε τα στοιχεία χρησιμοποιώντας αυτό που λέμε combinators να αναμειχθεί απλές επιλογείς. Για παράδειγμα, ένας χαρακτήρας κενό μπορεί να χρησιμοποιηθεί ως ένα combinator για να καθορίσετε όλες τις περιπτώσεις 1 επιλογέα που ζουν μέσα της άλλης επιλογής. Αυτό ακούγεται πολύ πιο περίπλοκη από ό, τι είναι στην πραγματικότητα. Εδώ είναι ένα παράδειγμα. Θα πληκτρολογήσετε # ληστεύουν, να προσθέσετε ένα κενό, και ακολουθούν με ένα h1, ένα άλλο απλό επιλογέα ονομάζεται επιλογέα tag, που επιλέγει τα είδη των στοιχείων όπως divs ή παραγράφους. Ο χώρος που συνδυάζει 2 απλές επιλογές μας, παρ 'όλες τις δηλώσεις CSS και τα άγκιστρα στις ετικέτες h1 που ζουν στο εσωτερικό του στοιχείου με id = "ληστεύουν". Ακριβώς για να σας πείσει ότι λειτουργεί, θα αλλάξω το χρώμα της γραμματοσειράς σε λευκό, ανανέωσης, και, κοίτα, κεφαλίδα του Rob τώρα είναι άσπρο. 

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

Για να συμπεριλάβετε αυτό το νέο αρχείο ως CSS σε αυτό το έγγραφο θα χρησιμοποιήσει μόνο tag link της HTML. Εδώ θα σου πω ότι είμαι σύνδεση σε ένα εξωτερικό φύλλο στυλ, το χαρακτηριστικό rel, και προσδιορίζει τη διαδρομή προς το αρχείο με το χαρακτηριστικό href μου. Τώρα HTML markup μου και CSS οργανώνονται όμορφα σε εντελώς ξεχωριστά αρχεία, η οποία είναι σχεδόν πάντα ο τρόπος που οι σχεδιαστές προτιμούν να εργάζονται με HTML και CSS. 

Σε περίπτωση που αναρωτιέστε, οι απλές επιλογείς περιλαμβάνουν επιλογείς ID και επιλογείς tag όπως αυτές που μόλις είδαμε καθώς και επιλογείς τάξη για την επιλογή των στοιχείων με μια ορισμένη τάξη, επιλογείς χαρακτηριστικό για την επιλογή στοιχείων από άλλα χαρακτηριστικά, όπως type = "radio" για τις εισροές κουμπί, και pseudoselectors όπως αιωρείται και να επικεντρωθεί για τον καθορισμό styling, όταν αλληλεπιδράσεις αρέσει ποντίκια πάνω από ένα στοιχείο συμβεί. 

Τα κοινά combinators περιλαμβάνουν κενά για όλα τα παιδιά και τα κόμματα να διακρίνει επιλογείς. Άλλοι μπορεί να αντιμετωπίσετε περιλαμβάνουν το βέλος για άμεση παιδιά μόνο, η περισπωμένη για όλα τα αδέλφια που συμβαίνουν μετά το στοιχείο, και το σύμβολο συν για τον αδελφό 1 που έρχεται αμέσως μετά το στοιχείο. 

Με το συνδυασμό αυτών επιλογείς και combinators, μπορείτε να διευρύνει το φάσμα των στυλ που μπορείτε να επιτύχετε σε μια συγκεκριμένη ιστοσελίδα και να γράφουν CSS πιο αποτελεσματικά. Με μόλις δύο γραμμές του CSS με βλέπετε εδώ δακτυλογράφηση, Μπορώ να κάνω γρήγορα κάτι σαν αυτό μοιάζει με κάτι σαν αυτό. 

Είμαι ο Ιωσήφ, και αυτό είναι CS50. 

[CS50.TV] 

Uh, όπου μπορώ να ξεκινήσω; Επιτρέψτε μου να το κάνουμε αυτό χωρίς - [γελάει] Εντάξει. Προσθέστε ένα - Επιτρέψτε μου να αλλάξει τη διατύπωση αυτή. Ooh. Λυπάμαι.