Τα καλύτερα σεμινάρια CSS και CSS3

Φύλλα Cascading Style (CSS)

Το CSS είναι ένα αρκτικόλεξο για Cascading Style Sheets. Εφευρέθηκε για πρώτη φορά το 1996 και αποτελεί πλέον τυπικό χαρακτηριστικό όλων των μεγάλων προγραμμάτων περιήγησης στο Web.

Το CSS επιτρέπει στους προγραμματιστές να ελέγχουν τον τρόπο εμφάνισης των ιστοσελίδων «στιλ» τη δομή HTML αυτής της σελίδας.

Οι προδιαγραφές CSS διατηρούνται από το World Wide Web Consortium (W3C).

Μπορείτε να δημιουργήσετε μερικά καταπληκτικά πράγματα μόνο στο CSS, όπως αυτό το παιχνίδι καθαρού CSS Minesweeper (το οποίο δεν χρησιμοποιεί JavaScript).

Ένα καλό ξεκίνημα είναι το πρόγραμμα σπουδών του FreeCodeCamp Εισαγωγή στο Basic CSS.

Μια άλλη πρόταση για αρχάριους είναι το W3C Ξεκινώντας με HTML + CSS που διδάσκει πώς να δημιουργεί ένα φύλλο στυλ.

Ο ιστότοπος CSS Zen Garden είναι ένα εξαιρετικό παράδειγμα για το πώς μπορεί να διαμορφωθεί το ίδιο html ώστε να φαίνεται εντελώς μοναδικό.

Για μια επίδειξη της δύναμης του CSS, ανατρέξτε στο Species In Pieces.

Σεμινάρια για έναρξη με CSS και CSS3

Το καλύτερο μέρος για να ξεκινήσετε να μαθαίνετε CSS είναι με το 2ωρο εισαγωγικό σεμινάριο του FreeCodeCamp.

Στη συνέχεια, εάν αισθάνεστε πιο τολμηροί, έχουμε ένα ολόκληρο μάθημα 12 ωρών που καλύπτει λεπτομερώς HTML, HTML5 και CSS.

Flexbox

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

Υπάρχουν 3 απλά βήματα για τη χρήση του Flexbox:

  1. Μετατρέψτε το γονικό κοντέινερ σε κάδο flex χρησιμοποιώντας display: flex;
  2. Ρυθμίστε τη διάταξη των διαφορετικών δοχείων χρησιμοποιώντας flex-direction
  3. Ρυθμίστε την διάταξη των στοιχείων μέσα σε ένα δοχείο χρησιμοποιώντας ιδιότητες όπως justify-content, align-items, και ούτω καθεξής

Το Flexbox σάς επιτρέπει να σχεδιάζετε, να ευθυγραμμίζετε και να προσαρμόζετε το κενό μεταξύ διαφορετικών στοιχείων σελίδας, ακόμα και αν δεν γνωρίζετε το ακριβές τους μέγεθος. Αντ 'αυτού, τα στοιχεία και τα κοντέινερ είναι δυναμικά και θα "κάμψουν" για να καλύψουν καλύτερα τον διαθέσιμο χώρο.

  • main-axis : Ο πρωτεύων άξονας ενός εύκαμπτου δοχείου κατά μήκος του οποίου είναι τοποθετημένα τα ευέλικτα αντικείμενα. Λάβετε υπόψη ότι αυτό μπορεί να είναι οριζόντιο ή κάθετο ανάλογα με τηνflex-directionιδιότητα.
  • κύρια εκκίνηση | κεντρικό άκρο :Τα ευέλικτα αντικείμενα τοποθετούνται σε ένα δοχείο από main-startέως main-end.
  • κύριο μέγεθος : Η κύρια διάσταση ενός εύκαμπτου αντικειμένου, η οποία μπορεί να είναι το πλάτος ή το ύψος του, ενεργεί ως το κύριο μέγεθος του αντικειμένου.
  • εγκάρσιος άξονας : Ο άξονας που είναι κάθετος στον κύριο άξονα. Η διεύθυνση του σταυρού άξονα εξαρτάται από την κατεύθυνση του κύριου άξονα.
  • εκκίνηση | cross-end : Οι ευέλικτες γραμμές και τα αντικείμενα τοποθετούνται σε ένα δοχείο flex ξεκινώντας απόcross-startτοcross-endπλάι.
  • διασταυρούμενο μέγεθος : Η διασταυρούμενη διάσταση του αντικειμένου (πλάτος ή ύψος) ενεργεί ως το σταυρό μέγεθος του αντικειμένου.

Διάταξη πλέγματος

Το CSS Grid Layout, απλά γνωστό ως Grid, είναι ένα σχήμα διάταξης που είναι το νεότερο και το πιο ισχυρό στο CSS. Υποστηρίζεται από όλα τα μεγάλα προγράμματα περιήγησης και παρέχει έναν τρόπο τοποθέτησης στοιχείων στη σελίδα και μετακίνησής τους.

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

Γιατί το πλέγμα;

  • Μπορείτε εύκολα να έχετε ένα πλέγμα 12 στηλών με μία γραμμή CSS. grid-template-columns: repeat(12, 1fr)
  • Το πλέγμα σάς επιτρέπει να μετακινείτε τα πράγματα προς οποιαδήποτε κατεύθυνση. Σε αντίθεση με το Flex, όπου μπορείτε να μετακινήσετε στοιχεία είτε οριζόντια ( flex-direction: row) είτε κάθετα ( flex-direction: column) - και όχι και τα δύο ταυτόχρονα - Το πλέγμα σάς επιτρέπει να μετακινείτε οποιοδήποτε στοιχείο πλέγματος σε οποιαδήποτε προκαθορισμένη περιοχή πλέγματος στη σελίδα. Τα αντικείμενα που μετακινείτε δεν χρειάζεται να είναι δίπλα.
  • Με το CSS Grid, μπορείτε να αλλάξετε τη σειρά των στοιχείων HTML χρησιμοποιώντας μόνο CSS . Μετακινήστε κάτι από πάνω προς τα δεξιά, μετακινήστε στοιχεία που βρίσκονταν στο υποσέλιδο στην πλευρική γραμμή κλπ. Αντί να μετακινήσετε το από προς το στο HTML, μπορείτε απλώς να αλλάξετε την τοποθέτησή του grid-areaστο φύλλο στυλ CSS.

Πλέγμα εναντίον Flex

  • Το Flex είναι μονοδιάστατο - οριζόντιο ή κατακόρυφο, ενώ το πλέγμα είναι δισδιάστατο, που σημαίνει ότι μπορείτε να μετακινήσετε στοιχεία τόσο σε οριζόντια όσο και σε κάθετα επίπεδα
  • Στο πλέγμα, εφαρμόζουμε στυλ διάταξης στο γονικό κοντέινερ και όχι στα στοιχεία. Flex, από την άλλη πλευρά, στοχεύει το flex στοιχείο σε σύνολο ιδιότητες, όπως flex-basis, flex-growκαιflex-shrink
  • Τα πλέγματα και Flex δεν είναι αμοιβαία αποκλειστικά. Μπορείτε να χρησιμοποιήσετε και τα δύο στο ίδιο έργο.

Έλεγχος συμβατότητας προγράμματος περιήγησης με @supports

Στην ιδανική περίπτωση, όταν δημιουργείτε έναν ιστότοπο, θα το σχεδιάζατε με το Grid και θα χρησιμοποιούσατε το Flex ως εναλλακτικό. Μπορείτε να μάθετε εάν το πρόγραμμα περιήγησής σας υποστηρίζει πλέγμα με τον @supportκανόνα CSS (γνωστό και ως ερώτημα λειτουργίας). Ακολουθεί ένα παράδειγμα:

.container { display: grid; /* display grid by default */ } @supports not (display: grid) { /* if grid is not supported by the browser */ .container { display: flex; /* display flex instead of grid */ } }

Ξεκινώντας

Για να κάνετε οποιοδήποτε στοιχείο ένα πλέγμα, πρέπει να αντιστοιχίσετε την displayιδιότητά του grid, όπως:

.conatiner { display: grid; }

Και αυτό είναι. Μόλις φτιάξατε .containerένα πλέγμα. Κάθε στοιχείο μέσα .containerγίνεται αυτόματα ένα στοιχείο πλέγματος.

Καθορισμός προτύπων

Σειρές και στήλες

grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 300px;

Περιοχές

grid-template-areas: "a a a a" "b c d e" "b c d e" "f f f f";

ή

grid-template-areas: "header header header header" "nav main main sidebar";

Περιοχές πλέγματος

Ακολουθεί ένα δείγμα κώδικα σχετικά με τον τρόπο καθορισμού και εκχώρησης περιοχών πλέγματος:

.site { display: grid; grid-template-areas: /* applied to grid container */ "head head" /* you're assigning cells to areas by giving the cells an area name */ "nav main" /* how many values kind of depends on how many cells you have in the grid */ "nav foot"; } .site > header { grid-area: head; } .site > nav { grid-area: nav; } .site > main { grid-area: main; } .site > footer { grid-area: foot; }

Η frμονάδα

Το Grid εισάγει μια νέα frμονάδα, που σημαίνει κλάσμα . Το καλό με τη χρήση της frμονάδας είναι ότι φροντίζει τους υπολογισμούς για εσάς. Η χρήση frαποφεύγει προβλήματα περιθωρίου και γεμίσματος. Με %και emκ.λπ. γίνεται μια εξίσωση μαθηματικών κατά τον υπολογισμό grid-gap. Εάν χρησιμοποιήσατε τη frμονάδα, θα υπολογίσει αυτόματα τόσο τα μεγέθη των στηλών όσο και των υδρορροών και θα προσαρμόσει ανάλογα το μέγεθος των στηλών. Επιπλέον, δεν θα υπάρχουν κενά αιμορραγίας στο τέλος.

Παραδείγματα

Αλλαγή της σειράς των στοιχείων με βάση το μέγεθος της οθόνης

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

Η απλή λύση είναι να αλλάξετε το grid-template-areasβασισμένο στο μέγεθος της οθόνης. Μπορείτε επίσης να αλλάξετε τον αριθμό στηλών και σειρών με βάση το μέγεθος της οθόνης . Αυτή είναι μια πολύ πιο καθαρή και απλούστερη εναλλακτική λύση στο σύστημα πλέγματος Bootstrap ( col-xs-8 col-sm-6 col-md-4 col-lg-3).

.site { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "title title" "main header" "main sidebar" } @media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */ .site { grid-template-columns: 2fr 1fr 1fr; grid-template-areas: "title title title" "main header header" "main sidebar footer" } }

Περισσότερες πληροφορίες:

  • CSS Grid Palyground από τον Mozilla: Υπέροχο σημείο εκκίνησης εάν είστε νέοι στο CSS Grids. Διαθέτει γραφικά για να σας βοηθήσει να κατανοήσετε εύκολα την ορολογία
  • YouTube: Morten Rand-Hendriksen: Το CSS Grid αλλάζει τα πάντα (Σχετικά με τις διατάξεις Web): Αυτή η παρουσίαση θα σας πείσει σε λιγότερο από μία ώρα γιατί τα CSS Grids είναι δροσερά και γιατί / πώς πρέπει να τα χρησιμοποιήσετε.
  • Βίντεο: Μάθετε το Grid Layout Video Series από τη Rachel Andrew: Η Rachel Andrew είναι ειδική στο θέμα. Οι τίτλοι των βίντεο μπορεί να φαίνονται περίεργοι και συντριπτικοί, αλλά το περιεχόμενο είναι σύντομο και στο σημείο
  • Βιβλίο: Ετοιμαστείτε για CSS Grid Layout από τη Rachel Andrew

Επιλογείς

Οι επιλογείς είναι κανόνες CSS για τη στόχευση στοιχείων HTML για την εφαρμογή στυλ. Τα ονόματα ετικετών, τα ονόματα τάξεων, τα αναγνωριστικά και τα χαρακτηριστικά είναι μερικά από τα άγκιστρα που χρησιμοποιούνται ως επιλογείς.

Σύνταξη επιλογής

Οι επιλογείς τοποθετημένοι σε μια συγκεκριμένη ακολουθία δημιουργούν έναν κανόνα για να στοχεύουν στοιχεία. Ενα παράδειγμα:

/* selects anchor tags */ a { color: orange; } /* selects elements with hero class */ .hero { text-align: center; }

Τύπος επιλογών

  • Το TypeDescription είναι επιλογείς τύπου και τα ονόματα ετικετών χρησιμοποιούνται για την επιλογή στοιχείων όπως h1ή a.
  • Οι καθολικοί επιλογείς ισχύουν για όλα τα στοιχεία.
  • div * ταιριάζει με όλα τα στοιχεία εντός των στοιχείων div.
  • Οι Επιλογείς χαρακτηριστικών είναι Επιλεκτές που στοχεύουν στοιχεία με βάση τα χαρακτηριστικά τους [και προαιρετικά, τις τιμές τους].
  • h1[title]επιλέγει h1στοιχεία με titleχαρακτηριστικό.
  • Οι Επιλογείς τάξης είναι Επιλογείς που στοχεύουν στοιχεία χρησιμοποιώντας τα ονόματά τους.
  • ID Selectors are Selectors that use ID to target elements. #logo selects the element with logo as ID.
  • Pseudo-class Selectors are Special selectors that target elements based on their state. a:hover selector applies style when pointer hovers over links.

Selector Combinators

Combinator: Purpose white spaceDescendant combinator. .nav li selects all li children within the class .nav, including nested li elements.>Child combinator. .menu > li selects all li that are direct children of elements with .menu class.+Adjacent sibling combinator. .logo + h1 targets h1 that is an immediate sibling to .logo class.~General sibling combinator. header ~ div targets div elements that are siblings to header elements.

This section details all of these electors.

More Information:

You can learn more about selectors on these resources:

  • Official CSS3 Selectors specification
  • Selectors page on Mozilla Developer Network
  • CSS Selectors Cheat Sheet on FreeCodeCamp Guides

Selectors in CSS (cascading style sheets) are determined based on specificity. With this we are able to be more specific on our style rules and override other rules that may be targeting the same element but are not as specific.

The way this specificity hierarchy works is based on weight. This means that an element Selector has a weight of 1 (one), a class selector has a weight of 10 (ten) and a id selector has a weight of 100 (one hundred). We are able to combine different selectors together be more specific on the element we want to change.

As an example:

 p { color: blue; } p .red { color: red; }

Our type selector p will select all p elements in our html document, but it only has a weight of one. In contrast, the class selector has a weight of 11, because we are combining a type selector with a class selector (this selector is matching all p elements with a class of red).

Note:

  • Directly targeted rules will always have precedence over rules which inherit elements from their ancestor.
  • Specificity is only applied when multiple declarations are targeting the same element, and only then this rule is applied.
  • Specificity is usually why some of the style rules do not apply to elements when you would expect them to.

CSS Display

The display property specifies the type of box used for an HTML element. It has 20 possible keyword values. The commonly used ones are:

 .none {display: none} .block {display: block} .inline-block {display: inline-block} .inline {display: inline} .flex {display: flex} .inline-flex {display: inline-flex} .inline-table {display: inline-table} .table {display: table} .inherit {display: inherit} .initial {display: initial}

Η display:noneιδιοκτησία μπορεί συχνά να είναι χρήσιμη κατά την απόκριση ενός ιστότοπου. Για παράδειγμα, μπορεί να θέλετε να αποκρύψετε ένα στοιχείο σε μια σελίδα καθώς το μέγεθος της οθόνης συρρικνώνεται για να αντισταθμιστεί η έλλειψη χώρου. display: noneόχι μόνο θα κρύψει το στοιχείο, αλλά όλα τα άλλα στοιχεία στη σελίδα θα συμπεριφέρονται σαν να μην υπάρχει αυτό το στοιχείο.

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

Αυτές οι τιμές λέξεων-κλειδιών ομαδοποιούνται σε έξι κατηγορίες: