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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[CS50.TV] 

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