Μόλις ξεκινήσετε την επεξεργασία σε HTML 17 Απλά παραδείγματα κώδικα HTML μπορείτε να μάθετε σε 10 λεπτά 17 απλά παραδείγματα HTML κώδικα μπορείτε να μάθετε σε 10 λεπτά Εάν γνωρίζετε τις ακόλουθες 17 ετικέτες HTML (και τους επιπλέον λίγους που πηγαίνουν μαζί τους), εσείς 'θα είναι σε θέση να δημιουργήσει μια βασική ιστοσελίδα από το μηδέν ή tweak τον κώδικα που δημιουργήθηκε από μια εφαρμογή όπως ... Διαβάστε περισσότερα, πιθανότατα θα σας ενδιαφέρει να προσθέσετε περισσότερη δύναμη στις ιστοσελίδες σας. Το CSS είναι ο καλύτερος τρόπος να το κάνετε αυτό. Το CSS σάς επιτρέπει να εφαρμόζετε αλλαγές σε ολόκληρη τη σελίδα σας χωρίς να χρειάζεται να χρησιμοποιείτε πολλά ενσωματωμένα στυλ HTML 9 λάθη που δεν πρέπει να κάνετε κατά την οικοδόμηση μιας ιστοσελίδας Τα λάθη που δεν πρέπει να κάνετε κατά την οικοδόμηση μιας ιστοσελίδας Αυτά τα ακόλουθα λάθη κωδικοποίησης HTML είναι εύκολο να αλλά εάν τα ξεκλειδώσετε νωρίτερα και όχι αργότερα, η σελίδα σας θα φαίνεται καλύτερα, θα είναι ευκολότερη στη συντήρηση και θα λειτουργεί όπως θέλετε. Διαβάστε περισσότερα .
Θα δούμε πώς μπορείτε να δημιουργήσετε ένα inline style styles έτσι ώστε να μπορείτε να εξασκήσετε τις δεξιότητές σας CSS και στη συνέχεια θα προχωρήσουμε σε 10 απλά παραδείγματα που θα σας δείξουν πώς να κάνετε μερικά βασικά πράγματα. Από εκεί, η φαντασία σας είναι το όριο!
Εάν θέλετε μια ελαφρώς πιο τεχνική εισαγωγή, φροντίστε να ελέγξετε έξω 5 Βήματα μωρών για την εκμάθηση CSS και να γίνετε Kick-Ass CSS Μάγος 5 βήματα μωρών για να μάθουν CSS και να γίνουν Kick-Ass CSS Μάγος 5 βήματα μωρών για να μάθουν CSS και να γίνει ένα CSS TSS Sorcerer CSS είναι η μοναδική πιο σημαντική αλλαγή ιστοσελίδων την τελευταία δεκαετία και άνοιξε το δρόμο για τον διαχωρισμό του στυλ και του περιεχομένου. Με τον σύγχρονο τρόπο, το XHTML ορίζει τη σημασιολογική δομή ... Διαβάστε περισσότερα.
Inline Stylesheet
Κάθε έγγραφο HTML περιέχει μια ετικέτα. Αυτό το τμήμα κεφαλής είναι εκεί που πηγαίνει το inline CSS style sheet σας. Ακολουθεί το εξής παράδειγμα:
All of your CSS declarations.Βάλτε το στο πάνω μέρος του εγγράφου σας, γεμίστε το με το CSS σας και είστε έτοιμοι να πάτε.
1. Εύκολη μορφοποίηση παραγράφων
Το δροσερό πράγμα για το στυλ με το CSS είναι ότι δεν χρειάζεται να ορίζετε ένα στυλ κάθε φορά που δημιουργείτε ένα στοιχείο. Μπορείτε να πείτε απλά ότι "όλες οι παραγράφους πρέπει να έχουν αυτό το ιδιαίτερο στυλ" και είστε καλοί να πάτε. Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να το κάνετε αυτό.
Ας υποθέσουμε ότι θέλετε κάθε παράγραφος (αυτό είναι όλα με ένα
HTML tag Top 11 HTML tags Κάθε ιδιοκτήτης ιστολογίου Blogger & Ιστοσελίδας πρέπει να ξέρει Top 11 HTML tags Κάθε Blogger & Ιδιοκτήτης Ιστοσελίδας πρέπει να ξέρει Το World Wide Web ξέρει πολλές γλώσσες και είναι κωδικοποιημένο σε διάφορες διαφορετικές. Η μία γλώσσα, όμως, που μπορεί να βρεθεί παντού και έχει περάσει από την εφεύρεση των ιστοσελίδων, είναι η ... Διαβάστε περισσότερα) στη σελίδα σας να είναι ελαφρώς μεγαλύτερο από το συνηθισμένο. Και σκούρο γκρι, αντί για μαύρο. Δείτε πώς θα το κάνατε αυτό με το CSS:
p { font-size: 120%; color: dimgray; } Αυτό είναι το μόνο που υπάρχει σε αυτό. Τώρα, κάθε φορά που το πρόγραμμα περιήγησης κάνει a
, το κείμενο θα κληρονομήσει το μέγεθος (120 τοις εκατό του κανονικού) και το χρώμα ("dimgray").
Εάν είστε περίεργοι ως προς τα χρώματα απλού κειμένου που μπορείτε να χρησιμοποιήσετε, δείτε αυτή τη λίστα χρωμάτων CSS από το Mozilla.
2. Αλλαγή της περίπτωσης επιστολής
Εντάξει, τώρα που έχουμε δει πώς να κάνουμε μια αλλαγή σε κάθε παράγραφο, ας δούμε πώς μπορούμε να είμαστε λίγο πιο επιλεκτικοί. Ας δημιουργήσουμε μια ονομασία για παραγράφους που θα πρέπει να είναι σε μικρά ανώτατα όρια. Δείτε πώς θα το κάναμε αυτό:
p.smallcaps { font-variant: small-caps; } Για να δημιουργήσετε μια παράγραφο που είναι εξ ολοκλήρου σε μικρά καπάκια, θα χρησιμοποιήσουμε μια ελαφρώς διαφορετική ετικέτα HTML. Ακολουθεί το εξής παράδειγμα:
Η παράγραφος σας εδώ.
Όπως μπορείτε να δείτε, προσθέτοντας μια τελεία και ένα όνομα κλάσης σε οποιοδήποτε συγκεκριμένο στοιχείο στο CSS καθορίζει έναν υπο-τύπο του στοιχείου που ορίζεται από μια κλάση. Μπορείτε να το κάνετε αυτό με κείμενο, εικόνες, συνδέσμους και σχεδόν οτιδήποτε άλλο.
Εάν θέλετε να αλλάξετε την περίπτωση ενός συνόλου κειμένου σε μια συγκεκριμένη περίπτωση, μπορείτε να χρησιμοποιήσετε αυτές τις γραμμές CSS:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize; Το τελευταίο κεφαλαιοποιεί το πρώτο γράμμα κάθε φράσης.
3. Αλλάξτε τα χρώματα σύνδεσης
Ας προσπαθήσουμε να αλλάξουμε το στυλ κάποιου άλλου από μια πλήρη παράγραφο. Υπάρχουν τέσσερα διαφορετικά χρώματα που μπορεί να αποδοθεί σε έναν σύνδεσμο: το τυπικό του χρώμα, το χρώμα που επισκέφθηκε, το χρώμα του δείκτη του ποντικιού και το ενεργό χρώμα του (που εμφανίζεται ενώ κάνετε κλικ σε αυτό). Δείτε πώς μπορούμε να αλλάξουμε αυτά:
a:link { color: gray; } a:visited { color: green; } a:hover { color: rebeccapurple; } a:active { color: teal; } Σημειώστε ότι κάθε "a" ακολουθείται από ένα τελεία, όχι από μια κουκίδα.
Κάθε μία από αυτές τις δηλώσεις μεταβάλλει το χρώμα ενός συνδέσμου σε ένα συγκεκριμένο πλαίσιο. Δεν χρειάζεται να αλλάξετε την κλάση ενός συνδέσμου για να αλλάξετε χρώμα. Όλα θα καθοριστούν από τον χρήστη και την κατάσταση του συνδέσμου.
4. Αφαιρέστε τις υπογραμμίσεις σύνδεσης
Ενώ το υπογραμμισμένο κείμενο υποδεικνύει σαφώς έναν σύνδεσμο, μερικές φορές μοιάζει καλύτερο με τα υπολείμματα που υπογραμμίζουν. Αυτό επιτυγχάνεται με το χαρακτηριστικό "διακόσμηση κειμένου". Δείτε πώς θα ξεφορτωθούμε τις υπογραμμίσεις σε συνδέσμους:
a { text-decoration: none; } Οτιδήποτε με την ετικέτα σύνδεσης ("a") θα παραμείνει χωρίς υπογράμμιση. Θέλετε να το υπογραμμίσετε όταν ο χρήστης κινείται πάνω του; Απλά προσθέστε αυτό το παρακάτω:
a:hover { text-decoration: underline; } Θα μπορούσατε επίσης να προσθέσετε αυτή τη διακόσμηση κειμένου σε ενεργούς συνδέσμους για να βεβαιωθείτε ότι η υπογράμμιση δεν εξαφανίζεται όταν κάνετε κλικ στο σύνδεσμο.
5. Κάντε ένα κουμπί σύνδεσης
Εάν θέλετε να προσελκύσετε περισσότερη προσοχή στη σύνδεσή σας, χρησιμοποιώντας ένα κουμπί σύνδεσης είναι ένας πολύ καλός τρόπος για να το κάνετε αυτό. Αυτός απαιτεί μερικές ακόμα γραμμές, αλλά θα τις ξεπεράσουμε μεμονωμένα:
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; } Συμπεριλαμβάνοντας και τις τέσσερις καταστάσεις σύνδεσης, διασφαλίζουμε ότι το κουμπί δεν εξαφανίζεται όταν ένας χρήστης αιωρείται ή κάνει κλικ σε αυτό. Μπορείτε επίσης να ορίσετε διαφορετικές παραμέτρους για την επικάλυψη και τους ενεργούς συνδέσμους, όπως την αλλαγή του κουμπιού ή του χρώματος κειμένου, για να προσθέσετε ένα κομμάτι pop.
Το χρώμα φόντου έχει οριστεί με χρώμα φόντου και χρώμα κειμένου με χρώμα. Το Padding ορίζει το μέγεθος του κουτιού - το κείμενο είναι γεμισμένο οριζόντια κατά 10px κάθετα και 25px. Η ευθυγράμμιση με κείμενο εξασφαλίζει ότι το κείμενο εμφανίζεται στο κέντρο του κουμπιού, αντί να απενεργοποιείται προς τη μία πλευρά. Η διακόσμηση κειμένου, όπως είδαμε στο τελευταίο παράδειγμα, αφαιρεί την υπογράμμιση.
"Εμφάνιση: inline-block" είναι λίγο πιο περίπλοκη. Με λίγα λόγια, σας επιτρέπει να ρυθμίσετε το ύψος και το πλάτος του αντικειμένου και εξασφαλίζει ότι ξεκινά μια νέα γραμμή όταν εισάγεται.
6. Δημιουργήστε ένα πλαίσιο κειμένου
Μια απλή παράγραφο δεν είναι πολύ συναρπαστική. Εάν θέλετε να επισημάνετε την πρόσκληση για δράση ή κάποιο άλλο στοιχείο στη σελίδα σας, ίσως θέλετε να ρίξετε ένα περίγραμμα γύρω από αυτό. Δείτε πώς να το κάνετε αυτό με μια συμβολοσειρά κειμένου:
p.important { border-style: solid; border-width: 5px; border-color: purple; } Αυτό είναι πολύ απλό. Δημιουργεί ένα συμπαγές μοβ περίγραμμα, πλάτους 5 pixel, γύρω από κάθε σημαντική κλάση. Για να κληρώσετε μια παράγραφο αυτές τις ιδιότητες, απλά δηλώστε την ως εξής:
Η σημαντική παράγραφο σας εδώ.
Αυτό θα λειτουργήσει ανεξάρτητα από το μέγεθος της παραγράφου σας. μια ενιαία γραμμή θα πάρει ένα όριο το πλάτος της σελίδας, μία γραμμή ψηλά και μια μεγαλύτερη παράγραφο θα περιβάλλεται από ένα μεγαλύτερο περιθώριο.
Υπάρχουν πολλά διαφορετικά στυλ περιγράμματος που μπορείτε να εφαρμόσετε. αντί για "στερεά", δοκιμάστε "διακεκομμένη" ή "διπλή" και το πλάτος μπορεί να είναι "λεπτό", "μέτριο" ή "παχύ". Μπορείτε επίσης να ορίσετε το πάχος κάθε περιγράμματος ξεχωριστά,
border-width: 5px 8px 3px 9px; Αυτό έχει ως αποτέλεσμα ένα ανώτατο όριο των 5 εικονοστοιχείων, το δεξιό περιθώριο 8, το κάτω μέρος 3 και το αριστερό μέγεθος των 9 pixel.
7. Στοιχεία κεντρικού στοιχείου
Για ένα πολύ κοινό καθήκον, αυτό είναι ένα εκπληκτικά αόριστο πράγμα που κάνει με το CSS. Μόλις το κάνατε μερικές φορές όμως, γίνεται πολύ πιο εύκολο. Υπάρχουν μερικοί διαφορετικοί τρόποι να επικεντρωθούν τα πράγματα.
Για ένα στοιχείο μπλοκ (συνήθως μια εικόνα), θα χρησιμοποιήσουμε το χαρακτηριστικό περιθωρίου:
.center { display: block; margin: auto; } Αυτό εξασφαλίζει ότι το στοιχείο εμφανίζεται ως μπλοκ και ότι το περιθώριο σε κάθε πλευρά ρυθμίζεται αυτόματα (γεγονός που τα καθιστά ίσα). Εάν θέλετε να συγκεντρώσετε όλες τις εικόνες σε μια δεδομένη σελίδα, μπορείτε ακόμη να προσθέσετε το "margin: auto" στην ετικέτα img:
img { margin: auto; } Για να μάθετε γιατί λειτουργεί με αυτόν τον τρόπο, ελέγξτε την εξήγηση μοντέλου κουτιού CSS στο W3C. Ακολουθεί μια σύντομη, γραφική έκδοση:
Αλλά τι γίνεται αν θέλουμε να κεντράσουμε το κείμενο; Το CSS έχει μια συγκεκριμένη μέθοδο για να γίνει αυτό:
.centertext { text-align: center; } Αν θέλουμε να χρησιμοποιήσουμε την κλάση "centertext" για να κεντράσουμε το κείμενο σε μια δεδομένη παράγραφο, το μόνο που πρέπει να κάνουμε είναι να προσθέσουμε αυτή την τάξη στο
ετικέτα:
Αυτό το κείμενο θα επικεντρωθεί.
Η ανάμνηση αυτών των διαφορετικών βημάτων, ωστόσο, είναι ένα άλλο θέμα. Ίσως θελήσετε να κάνετε σελιδοδείκτη αυτή τη σελίδα.
8. Προσαρμογή γεμίσματος
Η επένδυση ενός στοιχείου καθορίζει το μέγεθος του χώρου σε κάθε πλευρά. Για παράδειγμα, αν προσθέσετε 25 pixels του padding στο κάτω μέρος μιας εικόνας, το παρακάτω κείμενο θα ωθηθεί 25 εικονοστοιχεία προς τα κάτω. Πολλά στοιχεία μπορούν να έχουν παραπετάσματα, αλλά θα χρησιμοποιήσουμε μια εικόνα για παράδειγμα εδώ.
Ας υποθέσουμε ότι θέλετε κάθε εικόνα να έχει 20 pixels padding στην αριστερή και τη δεξιά πλευρά και 40 εικονοστοιχεία στην κορυφή και στο κάτω μέρος. Υπάρχουν διάφοροι τρόποι να το κάνετε αυτό. Το πιο βασικό:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; } Υπάρχει ένα σύντομο χέρι που μπορούμε να χρησιμοποιήσουμε για να παρουσιάσουμε όλες αυτές τις πληροφορίες:
img { padding: 40px 25px 40px 25px; } Αυτό θέτει το πάνω, το δεξιό, το κάτω και το αριστερό paddings στον σωστό αριθμό. Αλλά μπορούμε να το κάνουμε ακόμα πιο σύντομο:
img { padding: 40px 25px } Όταν χρησιμοποιείτε μόνο δύο τιμές, η πρώτη τιμή έχει οριστεί για το επάνω και το κάτω μέρος, ενώ η δεύτερη θα είναι αριστερά και δεξιά.
9. Επισημάνετε τους πίνακες των πινάκων
Το CSS μπορεί να κάνει πολλά για να κάνει τα τραπέζιά σας να φαίνονται πραγματικά ωραία. Προσθέτοντας χρώματα, ρυθμίζοντας τα σύνορα και κάνοντας το τραπέζι σας απόκριση στις οθόνες κινητής τηλεφωνίας, είναι όλα εύκολα. Θα δούμε μόνο ένα δροσερό αποτέλεσμα εδώ: επισημαίνοντας τις γραμμές των τραπεζιών όταν το ποντίκι πάνω τους.
Εδώ είναι ο κώδικας που θα χρειαστείτε για αυτό:
tr:hover { background-color: #ddd; } Τώρα όποτε το ποντίκι πάνω από ένα κελί πίνακα, η σειρά θα αλλάξει χρώμα. Για να δείτε μερικά από τα άλλα δροσερά πράγματα που μπορείτε να κάνετε, ελέγξτε τη σελίδα του W3C σε πολυτελείς πίνακες CSS.
10. Μετατόπιση εικόνων μεταξύ διαφανούς και αδιαφανή
Το CSS μπορεί να σας βοηθήσει να κάνετε δροσερά πράγματα με τις εικόνες, επίσης. Για παράδειγμα, μπορεί να εμφανίσει εικόνες σε λιγότερο από πλήρη αδιαφάνεια (εμφανίζονται ελαφρώς "εξαντλημένες") και να τις φέρει σε πλήρη αδιαφάνεια όταν ποντίκι πάνω τους. Δείτε πώς θα το κάνουμε αυτό:
img { opacity: 0.5; filter: alpha(opacity=50); } Το χαρακτηριστικό "φίλτρο" κάνει το ίδιο πράγμα με την "αδιαφάνεια", αλλά ο Internet Explorer 8 και νωρίτερα δεν αναγνωρίζουν τη μέτρηση της αδιαφάνειας, οπότε είναι καλή ιδέα να συμπεριληφθεί.
Τώρα που οι εικόνες είναι ελαφρώς διαφανείς, θα τους φέρουμε σε πλήρη αδιαφάνεια σε ένα ποντίκι:
img:hover { opacity: 1.0; filter: alpha(opacity=100); } Γίνετε κύριος του CSS
Με αυτά τα παραδείγματα κώδικα CSS, θα πρέπει να έχετε μια πολύ καλύτερη ιδέα για το πώς λειτουργεί το CSS. Μόλις έχετε περάσει από όλα αυτά, θα παρατηρήσετε μια σειρά από μοτίβα που μπορείτε να εφαρμόσετε σε περαιτέρω κώδικα CSS Μάθετε HTML και CSS με αυτά τα βήμα προς βήμα Tutorials Μάθετε HTML και CSS με αυτά τα Βήμα προς Βήμα Tutorials Περίεργος για HTML, CSS και JavaScript; Αν νομίζετε ότι έχετε ένα πλεονέκτημα για να μάθετε πώς να δημιουργείτε ιστοσελίδες από το μηδέν - εδώ είναι μερικά μεγάλα βήμα-βήμα tutorials που αξίζει να δοκιμάσετε. Διαβάστε περισσότερα . Και αυτό είναι που ξέρετε ότι έχετε αρχίσει να γίνετε κύριος του CSS.
Και αν όλα αυτά ακούγονται υπερβολικά περίπλοκα, θυμηθείτε ότι αρπάγετε μόνο μερικά πρότυπα CSS 11 Ιστοσελίδες CSS Template: Μην ξεκινήσετε από το μηδέν! 11 τοποθεσίες προτύπων CSS: Μην ξεκινήσετε από το μηδέν! Υπάρχουν χιλιάδες ελεύθερα πρότυπα CSS διαθέσιμα στο διαδίκτυο, τα οποία ενσωματώνουν όλες τις σύγχρονες τάσεις και τεχνολογίες σχεδίασης. Μπορείτε να τα χρησιμοποιήσετε στην αρχική τους μορφή ή να τα προσαρμόσετε ώστε να τα καταστήσετε δικά σας. Διαβάστε περισσότερα και τροποποιήστε τα.
Τι κάνεις με το CSS; Ποια παραδείγματα θα θέλατε να δείτε στο μέλλον; Μοιραστείτε τις σκέψεις σας στα παρακάτω σχόλια!