Το ακρωνύμιο CSS σημαίνει "cascading style sheets". Το CSS χρησιμοποιείται για τη διαμόρφωση στυλ ιστότοπων και εφαρμογών που χρησιμοποιούνται σε όλες τις συσκευές. Το φύλλο στυλ χρησιμοποιείται συνήθως παράλληλα με το HTML και μια γλώσσα προγραμματισμού front-end όπως η JavaScript.

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

Σε αυτό το εκπαιδευτικό άρθρο, θα μάθετε όλα τα βασικά του CSS για να ξεκινήσετε τη δημιουργία εφαρμογών σήμερα.

Πότε να χρησιμοποιήσετε τις διαφορετικές μεθόδους εφαρμογής CSS

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

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

Χρήση παραδείγματος ενσωματωμένου CSS

Κύριος τίτλος

Η παραπάνω γραμμή κώδικα θα εμφανίσει το κείμενο "Κύρια επικεφαλίδα" με κόκκινο χρώμα. Αυτός είναι πιθανώς ένας από τους μοναδικούς πρακτικούς λόγους χρήσης του ενσωματωμένου CSS επειδή συνήθως υπάρχει μόνο ένας η1 στοιχείο σε μια δεδομένη ιστοσελίδα.

Αν σκοπεύετε να τα καλύψετε όλα η2 στοιχεία σε μια ιστοσελίδα με το κίτρινο χρώμα. Θα πρέπει να χρησιμοποιήσετε το CSS στυλ λέξη -κλειδί, μαζί με το χρώμα ιδιότητα και την τιμή της (κίτρινη) σε κάθε στοιχείο. Ωστόσο, ένας πιο αποτελεσματικός τρόπος επίτευξης αυτού του έργου είναι η χρήση εσωτερικού CSS.

Χρήση εσωτερικού παραδείγματος CSS

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

Γιατί λοιπόν η εξωτερική μέθοδος εφαρμογής CSS εξακολουθεί να είναι η πιο προτεινόμενη προσέγγιση; Διαχωρισμός ανησυχιών. Με το εξωτερικό CSS, ο κώδικας CSS διαχωρίζεται εντελώς από τον κώδικα HTML, ο οποίος εξασφαλίζει την επεκτασιμότητα για μεγάλα έργα και καθιστά τη διαδικασία δοκιμής πιο αποτελεσματική.

Χρήση παραδείγματος εξωτερικού CSS

Εισαγωγή της γραμμής κώδικα παραπάνω στο Η ετικέτα του αρχείου HTML θα διευκολύνει το στυλ της ιστοσελίδας σας χρησιμοποιώντας την εξωτερική μέθοδο CSS. Η μόνη πτυχή του παραπάνω κώδικα που θα αλλάξει είναι η τιμή που έχει εκχωρηθεί στο href ιδιότητα, η οποία πρέπει πάντα να είναι το όνομα του αρχείου CSS (συμπεριλαμβανομένης της επέκτασης .css).

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

η2 {
χρώμα: κίτρινο?
}

Εξερεύνηση βασικής δομής CSS

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

Ο Επιλογέας

Σε μια δήλωση CSS, ένας επιλογέας μπορεί να είναι είτε ταυτότητα, ένα τάξη, ένα στοιχείο, ή σε ορισμένες ειδικές περιπτώσεις, ένας ψευδο-επιλογέας. Στη δομή CSS πάνω από το ένα το στοιχείο χρησιμοποιείται ως επιλογέας, πράγμα που σημαίνει ότι όλοι οι σύνδεσμοι σε μια ιστοσελίδα θα είναι επικαλυμμένοι με κόκκινο χρώμα. Ουσιαστικά, ο σκοπός του επιλογέα είναι να προσδιορίσει τα στοιχεία που πρέπει να στυλ.

Έναρξη και Λήξη Δήλωσης

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

Η ιδιοκτησία

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

Ο Διαχωριστής Ιδιοκτησίας/Τιμής

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

Η αξία

Η τιμή ιδιότητας CSS αντιπροσωπεύει το ακριβές στυλ που θέλετε να εφαρμόσετε σε μια δεδομένη ιδιότητα. Οι τιμές που είναι διαθέσιμες για χρήση εξαρτώνται από τον τύπο της ιδιότητας. Για παράδειγμα, η ιδιότητα που χρησιμοποιείται στην παραπάνω δομή είναι χρώμα, πράγμα που σημαίνει ότι υπάρχει μόνο ένας τύπος τιμής που μπορεί να εφαρμοστεί σε αυτήν την ιδιότητα, ένα όνομα χρώματος. ΕΝΑ χρώμα η τιμή μπορεί να παρουσιαστεί σε μία από τις τέσσερις μορφές: τιμή λέξης (όπως στο παραπάνω παράδειγμα), δεκαεξαδική τιμή, τιμή HSL (απόχρωση, κορεσμός, ελαφρότητα) ή τιμή RGB (κόκκινη, πράσινη, μπλε).

Ο Διαχωριστής της Διακήρυξης

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

Τι είναι τα αναγνωριστικά και οι τάξεις;

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

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

Ωστόσο, αν αυτό η2 στοιχείο έχει ένα ταυτότητα που χρησιμοποιείται ως επιλογέας σε μια δήλωση CSS, ανεξάρτητα από τη θέση της (πριν ή μετά) σε μια δήλωση CSS που έχει η2 στοιχείο ως επιλογέας του, η προτίμηση στυλ στο ταυτότητα η δήλωση θα έχει πάντα προτεραιότητα έναντι του στοιχείου. Εν ολίγοις, ένα ταυτότητα θα παρακάμψει άλλους επιλογείς στυλ.

Είναι σημαντικό να θυμόμαστε ότι σε μια δήλωση CSS, αναγνωριστικά ξεκινούν με μια πινακίδα αριθμού και τα μαθήματα ξεκινούν με τελεία. Η πιο σημαντική διαφορά μεταξύ ενός ταυτότητα και ένα τάξη είναι αυτό ένα ταυτότητα είναι μοναδική, ενώ α τάξη μπορεί να αντιγραφεί. Για παράδειγμα, μια συλλογή παρόμοιων Οι ετικέτες μπορούν να δοθούν το ίδιο τάξη όνομα; Ωστόσο, το ταυτότητα από το καθένα η ετικέτα πρέπει να είναι μοναδική.

Εξερεύνηση των διαφορετικών τύπων επιλογέων

Υπάρχουν τρεις βασικοί τύποι επιλογέων - μονός, πολλαπλός και ένθετος. Μέχρι στιγμής, αυτό το άρθρο έχει καλύψει εκτενώς μεμονωμένους επιλογείς.

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

Παράδειγμα βασικού προτύπου HTML

καλως ΗΡΘΑΤΕ

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Παρεμπιπτόντως odit voluptates
dinigissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Αρχιτέκτονας
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Σχετικά με

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Παρεμπιπτόντως odit voluptates
dinigissimos voluptatibus tenetur.  Repudiandae, animi corporis!  Αρχιτέκτονας
tempora voluptates nulla officia placeat quisquam facere at! Quod dolore doloribus eos!







Τίτλος

Lorem ipsum dolor sit amet consectetur adipisicing elit. Εργασία aspernatur ή dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores; At ad labum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni και iusto id needitatibus harum ratione, ipsum doloremque deleniti ex eligendi
εμπόδιο hic maxime; Eius modi optio ad, nisi tempora sapiente;







Τίτλος

Lorem ipsum dolor sit amet consectetur adipisicing elit. Εργασία aspernatur ή dicta quod quibusdam!
Ea delectus sit, laboriosam eos aperiam asperiores; At ad labum illo inventore quos est dolores
impedit fugit asperiores repellendus harum maxime voluptate sit nulla eaque officiis fuga animi,
perferendis in earum iure dolorum laboriosam enim reiciendis! Eum cum delectus est tenetur corrupti
mollitia, minima, magni και iusto id needitatibus harum ratione, ipsum doloremque deleniti ex eligendi
εμπόδιο hic maxime; Eius modi optio ad, nisi tempora sapiente;

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

Χρήση πολλαπλών επιλογέων Παράδειγμα

#Περίπου,. Περιεχόμενο {
άσπρο χρώμα;
χρώμα φόντου: darkcyan;
}

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

Επιστρέφοντας στο Παράδειγμα του βασικού προτύπου HTML παραπάνω, υπάρχουν δύο ετικέτες που υπάρχουν - η μία στην ενότητα καλωσορίσματος και η άλλη στην ενότητα σχετικά. Εάν ο στόχος σας είναι να στοχεύσετε μόνο ένα από αυτά ετικέτες, ένας ένθετος επιλογέας πρέπει να είναι η μέθοδος που ακολουθείτε.

Χρήση Nested Selectors Παραδείγματα

#Καλώς ορίσατε {101}
χρώμα: κόκκινο?
}

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

Επομένως, μόνο το σπιθαμή τμήμα στο ετικέτα του div με την ευπρόσδεκτη ταυτότητα θα ντυθεί με κόκκινο χρώμα.

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

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

/ * Έτσι γράφετε ένα σχόλιο σε μία γραμμή στο CSS */

/*
Έτσι γράφεις
ένα σχόλιο πολλαπλών γραμμών
στο CSS
*/

Τι έπεται?

Αυτό το άρθρο σας παρέχει τα βασικά στοιχεία του CSS. Τώρα μπορείτε να χρησιμοποιήσετε ένα αναγνωριστικό:

• Οποιαδήποτε από τις τρεις μεθόδους εφαρμογής CSS
• Όλα τα στοιχεία σε μια δήλωση CSS
• Οι τρεις βασικοί τύποι επιλογέων
• Ένα σχόλιο CSS

Ωστόσο, αυτή είναι μόνο η αρχή. Το CSS έχει πολλά πλαίσια που θα σας βοηθήσουν να αναπτύξετε καλύτερη κατανόηση της γλώσσας. Η μόνη πρόκληση είναι να αποφασίσετε ποια είναι η καλύτερη για εσάς.

Tailwind CSS vs. Bootstrap: Ποιο είναι το καλύτερο πλαίσιο;

Όταν επιλέγετε ένα πλαίσιο CSS, είναι σημαντικό να βρείτε αυτό που πληροί τις απαιτήσεις σας.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα