Home-theater-designers
Μόλις αρχίσετε να ασχολείστε με την HTML, πιθανότατα θα σας ενδιαφέρει να προσθέσετε περισσότερη οπτική γροθιά στις ιστοσελίδες σας. Το CSS είναι ο καλύτερος τρόπος για να γίνει αυτό. Το CSS σάς επιτρέπει να εφαρμόζετε αλλαγές σε ολόκληρη τη σελίδα σας χωρίς να βασίζεστε στο ενσωματωμένο στυλ.
Ακολουθούν αρκετά απλά παραδείγματα CSS για να σας δείξουμε πώς να κάνετε κάποιες βασικές αλλαγές στυλ στην ιστοσελίδα σας.
1. Βασικός κώδικας CSS για εύκολη μορφοποίηση παραγράφων
Η διαμόρφωση με CSS σημαίνει ότι δεν χρειάζεται να καθορίζετε ένα στυλ κάθε φορά που δημιουργείτε ένα στοιχείο. Μπορείτε απλά να πείτε 'όλες οι παράγραφοι πρέπει να έχουν αυτό το ιδιαίτερο στυλ' και είστε έτοιμοι.
Ας υποθέσουμε ότι θέλετε κάθε παράγραφο (
, μία από τις ετικέτες HTML που πρέπει να γνωρίζει ο καθένας) να είναι ελαφρώς μεγαλύτερη από το συνηθισμένο. Και με σκούρο γκρι κείμενο, αντί για μαύρο.
Σχετίζεται με: Το φύλλο εξαπάτησης HTML
Ο κώδικας CSS για αυτό είναι:
p { font-size: 120%; color: dimgray; }Απλός! Τώρα, κάθε φορά που το πρόγραμμα περιήγησης αποδίδει μια παράγραφο, το κείμενο θα κληρονομήσει το μέγεθος (120 τοις εκατό του κανονικού) και το χρώμα («αμυδρό»).
Εάν είστε περίεργοι για το ποια χρώματα απλού κειμένου μπορείτε να χρησιμοποιήσετε, δείτε αυτό Λίστα χρωμάτων CSS από τη Mozilla.
2. Παράδειγμα CSS για αλλαγή περίπτωσης χαρακτήρων
Θέλετε να δημιουργήσετε έναν χαρακτηρισμό για τις παραγράφους που πρέπει να είναι με μικρά γράμματα; Ένα δείγμα CSS για αυτό θα ήταν:
p.smallcaps { font-variant: small-caps; }Για να δημιουργήσετε μια παράγραφο που είναι εντελώς μικρή, χρησιμοποιήστε μια ελαφρώς διαφορετική ετικέτα HTML. Δείτε πώς φαίνεται:
Your paragraph here.
Η προσθήκη μιας κουκκίδας και ενός ονόματος κλάσης σε ένα στοιχείο καθορίζει έναν υποτύπο αυτού του στοιχείου που ορίζεται από μια κλάση. Μπορείτε να το κάνετε αυτό με κείμενο, εικόνες, συνδέσμους και σχεδόν οτιδήποτε άλλο.
Εάν θέλετε να αλλάξετε ένα σύνολο κειμένου σε μια συγκεκριμένη περίπτωση, χρησιμοποιήστε αυτά τα παραδείγματα κώδικα CSS:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;Το τελευταίο γράφει με κεφαλαίο γράμμα το πρώτο γράμμα κάθε πρότασης.
3. Εύκολο CSS για αλλαγή χρωμάτων συνδέσμων
Οι αλλαγές στυλ δεν περιορίζονται στις παραγράφους. Υπάρχουν τέσσερα διαφορετικά χρώματα που μπορούν να εκχωρηθούν σε έναν σύνδεσμο: το τυπικό χρώμα, το χρώμα επίσκεψης, το χρώμα του δείκτη και το ενεργό χρώμα του (το οποίο εμφανίζει ενώ κάνετε κλικ σε αυτό). Χρησιμοποιήστε αυτό το δείγμα κώδικα CSS:
a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }Με συνδέσμους, κάθε «α» ακολουθείται από άνω και κάτω τελεία και όχι από τελεία.
Κάθε μία από αυτές τις δηλώσεις αλλάζει το χρώμα ενός συνδέσμου σε ένα συγκεκριμένο πλαίσιο. Δεν χρειάζεται να αλλάξετε την κατηγορία ενός συνδέσμου για να αλλάξει χρώμα.
4. Κατάργηση υπογράμμισης συνδέσμου με αυτό το δείγμα CSS
Ενώ το υπογραμμισμένο κείμενο υποδηλώνει σαφώς έναν σύνδεσμο, μερικές φορές φαίνεται πιο ωραίο να απορρίψετε αυτήν την υπογράμμιση. Αυτό επιτυγχάνεται με το χαρακτηριστικό 'διακοσμήσεις κειμένου'. Αυτό το παράδειγμα CSS δείχνει πώς να αφαιρέσετε υπογραμμίσεις στους συνδέσμους:
a { text-decoration: none; }Οτιδήποτε με την ετικέτα συνδέσμου ('a') θα παραμείνει μη υπογραμμισμένο. Θέλετε να το υπογραμμίσετε όταν ο χρήστης τοποθετεί το δείκτη του ποντικιού πάνω του; Απλά προσθέστε:
a:hover { text-decoration: underline; }Μπορείτε επίσης να προσθέσετε αυτήν τη διακόσμηση κειμένου σε ενεργούς συνδέσμους για να διασφαλίσετε ότι η υπογράμμιση δεν θα εξαφανιστεί όταν κάνετε κλικ στον σύνδεσμο.
5. Δημιουργήστε ένα κουμπί σύνδεσης με κώδικα CSS
Θέλετε να προσελκύσετε περισσότερη προσοχή στον σύνδεσμό σας; Ένα κουμπί σύνδεσης είναι ένας πολύ καλός τρόπος για να το κάνετε. Αυτό απαιτεί μερικές ακόμη γραμμές:
a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }Ας εξηγήσουμε αυτό το δείγμα κώδικα CSS.
Η συμπερίληψη και των τεσσάρων καταστάσεων συνδέσμων διασφαλίζει ότι το κουμπί δεν εξαφανίζεται όταν ο χρήστης τοποθετεί τον δείκτη του ποντικιού ή κάνει κλικ σε αυτό. Μπορείτε επίσης να ορίσετε διαφορετικές παραμέτρους για τον δείκτη του ποντικιού και τους ενεργούς συνδέσμους, π.χ. αλλαγή κουμπιού ή χρώματος κειμένου.
Το χρώμα φόντου έχει οριστεί με χρώμα φόντου και χρώμα κειμένου με χρώμα. Το Padding καθορίζει το μέγεθος του πλαισίου --- το κείμενο πληρώνεται κατά 10px κάθετα και 25px οριζόντια.
Η ευθυγράμμιση κειμένου διασφαλίζει ότι το κείμενο εμφανίζεται στο κέντρο του κουμπιού, αντί να απενεργοποιείται στη μία πλευρά. Η διακόσμηση κειμένου, όπως στο τελευταίο παράδειγμα, αφαιρεί την υπογράμμιση.
πρέπει να κατεβάσω 32 ή 64 bit
Ο κώδικας CSS «οθόνη: ενσωματωμένο μπλοκ» είναι λίγο πιο περίπλοκος. Εν ολίγοις, σας επιτρέπει να ορίσετε το ύψος και το πλάτος του αντικειμένου. Εξασφαλίζει επίσης ότι ξεκινά μια νέα γραμμή όταν εισαχθεί.
6. Παράδειγμα κώδικα CSS για τη δημιουργία πλαισίου κειμένου
Μια απλή παράγραφος δεν είναι πολύ συναρπαστική. Εάν θέλετε να επισημάνετε ένα στοιχείο στη σελίδα σας, ίσως θελήσετε να προσθέσετε ένα περίγραμμα. Δείτε πώς μπορείτε να το κάνετε με μια συμβολοσειρά απλού κώδικα CSS:
p.important { border-style: solid; border-width: 5px; border-color: purple; }Αυτό είναι απλό. Δημιουργεί ένα συμπαγές πορφυρό περίγραμμα, πλάτους πέντε pixel, γύρω από οποιαδήποτε σημαντική παράγραφο. Για να κάνετε μια παράγραφο να κληρονομήσει αυτές τις ιδιότητες, απλώς δηλώστε την ως εξής:
Your important paragraph here.
Αυτό θα λειτουργήσει ανεξάρτητα από το πόσο μεγάλη είναι η παράγραφος.
Υπάρχουν πολλά διαφορετικά στυλ περιγράμματος που μπορείτε να εφαρμόσετε. αντί για 'στερεό', δοκιμάστε 'με κουκκίδες' ή 'διπλό'. Εν τω μεταξύ, το πλάτος μπορεί να είναι 'λεπτό', 'μεσαίο' ή 'παχύ'. Ο κώδικας CSS μπορεί ακόμη και να ορίσει το πάχος κάθε περιγράμματος ξεχωριστά, όπως αυτό:
border-width: 5px 8px 3px 9px;Αυτό έχει ως αποτέλεσμα ένα επάνω περίγραμμα πέντε εικονοστοιχείων, ένα δεξιό περίγραμμα οκτώ, ένα κάτω τρία και ένα αριστερό περίγραμμα μεγέθους εννέα εικονοστοιχείων.
7. Στοίχιση στοιχείων στο κέντρο με βασικό κώδικα CSS
Για μια κοινή εργασία, το επίκεντρο στοιχείων με κώδικα CSS είναι εκπληκτικά μη διαισθητικό. Μόλις το κάνετε μερικές φορές όμως, γίνεται πολύ πιο εύκολο. Έχετε δύο διαφορετικούς τρόπους για να εστιάσετε τα πράγματα.
Για ένα στοιχείο μπλοκ (συνήθως μια εικόνα), χρησιμοποιήστε το χαρακτηριστικό περιθώριο:
.center { display: block; margin: auto; }Αυτό διασφαλίζει ότι το στοιχείο εμφανίζεται ως μπλοκ και ότι το περιθώριο σε κάθε πλευρά ρυθμίζεται αυτόματα. Εάν θέλετε να κεντράρετε όλες τις εικόνες σε μια δεδομένη σελίδα, μπορείτε ακόμη να προσθέσετε 'περιθώριο: αυτόματα' στην ετικέτα img:
img { margin: auto; }Για να μάθετε γιατί λειτουργεί με αυτόν τον τρόπο, ελέγξτε το Επεξήγηση μοντέλου κουτιού CSS στο W3C Το
Τι γίνεται όμως αν θέλετε να κεντράρετε το κείμενο με το CSS; Χρησιμοποιήστε αυτό το δείγμα CSS:
.centertext { text-align: center; }Θέλετε να χρησιμοποιήσετε την τάξη 'κεντρικό κείμενο' για να κεντράρετε το κείμενο σε μια παράγραφο; Απλώς προσθέστε αυτήν την κλάση στο
ετικέτα:
This text will be centered.
8. Παραδείγματα CSS για την προσαρμογή της επένδυσης
Η επένδυση ενός στοιχείου καθορίζει πόσο χώρο πρέπει να υπάρχει σε κάθε πλευρά. Για παράδειγμα, αν προσθέσετε 25 εικονοστοιχεία επένδυσης στο κάτω μέρος μιας εικόνας, το ακόλουθο κείμενο θα ωθηθεί 25 εικονοστοιχεία προς τα κάτω. Πολλά στοιχεία μπορούν να έχουν επένδυση, όχι μόνο εικόνες.
Ας υποθέσουμε ότι θέλετε κάθε εικόνα να έχει 20 εικονοστοιχεία επένδυσης στην αριστερή και δεξιά πλευρά και 40 εικονοστοιχεία στο επάνω και κάτω μέρος. Η πιο βασική εκτέλεση κώδικα CSS για αυτό είναι:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }Ωστόσο, υπάρχει μια πιο σύντομη οδηγία CSS, η οποία παρουσιάζει όλες αυτές τις πληροφορίες σε μία μόνο γραμμή:
img { padding: 40px 25px 40px 25px; }Αυτό θέτει τα επάνω, δεξιά, κάτω και αριστερά καλύμματα στο σωστό αριθμό. Χάρη σε δύο μόνο τιμές που χρησιμοποιούνται (40 και 25) μπορείτε να το κάνετε ακόμα πιο σύντομο:
img { padding: 40px 25px }Όταν χρησιμοποιείτε μόνο δύο τιμές, η πρώτη τιμή ορίζεται για το επάνω και το κάτω μέρος, ενώ η δεύτερη θα είναι αριστερά και δεξιά.
9. Επισημάνετε σειρές πίνακα με κωδικοποίηση CSS
Ο κώδικας CSS κάνει τους πίνακες να φαίνονται πολύ ωραιότεροι από τα προεπιλεγμένα πλέγματα. Η προσθήκη χρωμάτων, η προσαρμογή των περιγραμμάτων και η απόκριση του τραπεζιού σας στις οθόνες κινητών είναι όλα εύκολα. Αυτό το απλό παράδειγμα CSS σας δείχνει πώς να επισημαίνετε τις γραμμές πίνακα όταν τοποθετείτε το ποντίκι πάνω τους.
tr:hover { background-color: #ddd; }Τώρα κάθε φορά που κάνετε ποντίκι πάνω από ένα κελί πίνακα, αυτή η σειρά θα αλλάζει χρώμα. Για να δείτε μερικά από τα άλλα υπέροχα πράγματα που μπορείτε να κάνετε, ελέγξτε το Σελίδα W3C σε φανταχτερούς πίνακες CSS Το
10. Παράδειγμα CSS για μετατόπιση εικόνων μεταξύ διαφανούς και αδιαφανούς
Ο κώδικας CSS μπορεί επίσης να σας βοηθήσει να κάνετε δροσερά πράγματα με εικόνες. Ακολουθεί ένα παράδειγμα CSS για την εμφάνιση εικόνων σε λιγότερο από πλήρη αδιαφάνεια, έτσι ώστε να εμφανίζονται ελαφρώς «άσπρες». Όταν τοποθετείτε το ποντίκι πάνω στις εικόνες, οι εικόνες αυτές είναι πλήρως αδιαφανείς:
img { opacity: 0.5; filter: alpha(opacity=50); }Το χαρακτηριστικό 'φίλτρο' κάνει το ίδιο πράγμα με το 'αδιαφάνεια', αλλά ο Internet Explorer 8 και παλαιότερα δεν αναγνωρίζουν τη μέτρηση της αδιαφάνειας. Για παλαιότερα προγράμματα περιήγησης, είναι καλή ιδέα να το συμπεριλάβετε.
Τώρα που οι εικόνες είναι ελαφρώς διαφανείς, μπορείτε να τις κάνετε πλήρως αδιαφανείς με το ποντίκι:
img:hover { opacity: 1.0; filter: alpha(opacity=100); }10 Παραδείγματα CSS με πηγαίο κώδικα
Με αυτά τα παραδείγματα κώδικα CSS, θα πρέπει να έχετε μια πολύ καλύτερη ιδέα για το πώς λειτουργεί το CSS. Πρότυπα CSS μπορεί να βοηθήσει, αλλά η κατανόηση των πρώτων στοιχείων είναι ζωτικής σημασίας.
Αυτά τα 10 εύκολα παραδείγματα κώδικα CSS επανακαταγράφηκαν:
- Εύκολη μορφοποίηση παραγράφων
- Αλλαγή πεζών γραμμάτων
- Αλλαγή χρωμάτων συνδέσμων
- Κατάργηση υπογραμμίσεων συνδέσμου
- Δημιουργήστε ένα κουμπί σύνδεσης
- Δημιουργήστε ένα πλαίσιο κειμένου
- Στοιχεία στοίχισης κέντρου
- Ρυθμίστε την επένδυση
- Επισημάνετε σειρές πίνακα
- Κάντε τις εικόνες αδιαφανείς
Επανεξετάζοντάς τα ξανά, θα παρατηρήσετε πολλά μοτίβα που μπορείτε να εφαρμόσετε σε μελλοντικό κώδικα. Και τότε είναι που ξέρετε ότι έχετε αρχίσει να γίνετε κύριος CSS. Αλλά το να το θυμάσαι μπορεί να είναι δύσκολο. Youσως θελήσετε να προσθέσετε σελιδοδείκτη σε αυτήν τη σελίδα για μελλοντική αναφορά.
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Το βασικό φύλλο εξαπατήσεων ιδιοτήτων CSS3Κυριαρχήστε τη βασική σύνταξη CSS με το φύλλο εξαπάτησης ιδιοτήτων CSS3.
Διαβάστε Επόμενο Σχετικά θέματα- Προγραμματισμός
- Σχεδιασμός Ιστού
- CSS
- Scripting
Αναπληρωτής συντάκτης για την ασφάλεια, το Linux, το DIY, τον προγραμματισμό και την τεχνολογία που εξηγείται και πραγματικά χρήσιμο παραγωγό Podcast, με μεγάλη εμπειρία στην υποστήριξη επιτραπέζιων υπολογιστών και λογισμικού. Συνεργάτης στο περιοδικό Linux Format, ο Christian είναι Raspberry Pi tinkerer, λάτρης του Lego και retro fan των gaming.
Περισσότερα από τον Christian CawleyΕγγραφείτε στο newsletter μας
Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για εγγραφή