Δημιουργήστε το φύλλο στυλ CSS
Με τον ίδιο τρόπο δημιουργήσαμε ένα ξεχωριστό αρχείο κειμένου για το HTML, θα δημιουργήσετε ένα αρχείο κειμένου για το CSS. Εάν χρειάζεστε γραφικά για αυτήν τη διαδικασία, ανατρέξτε στο πρώτο σεμινάριο. Ακολουθούν τα βήματα για τη δημιουργία του φύλλου στυλ CSS στο Σημειωματάριο:
- Επιλέγω Αρχείο> Νέο στο Σημειωματάριο για να πάρετε ένα κενό παράθυρο
- Αποθηκεύστε το αρχείο ως CSS κάνοντας κλικ Αρχείο
- Μεταβείτε στο φάκελο my_website στον σκληρό σας δίσκο
- Αλλαξε το "Αποθήκευση ως τύπου:" προς την "Ολα τα αρχεία"
- Ονομάστε το αρχείο σας "styles.css"(αφήστε τα εισαγωγικά) και κάντε κλικ Σώσει
Συνδέστε το φύλλο στυλ CSS στο HTML σας
Μόλις έχετε ένα φύλλο στυλ για τον ιστότοπό σας, θα πρέπει να τον συσχετίσετε με την ίδια την ιστοσελίδα. Για να το κάνετε αυτό, χρησιμοποιείτε την ετικέτα συνδέσμου. Τοποθετήστε την ακόλουθη ετικέτα συνδέσμου οπουδήποτε μέσα στο.
Διορθώστε τα περιθώρια σελίδας
Όταν γράφεις XHTML για διαφορετικά προγράμματα περιήγησης, ένα πράγμα που θα μάθετε είναι ότι όλοι φαίνεται να έχουν διαφορετικά περιθώρια και κανόνες για τον τρόπο εμφάνισης των πραγμάτων. Ο καλύτερος τρόπος για να βεβαιωθείτε ότι ο ιστότοπός σας μοιάζει ο ίδιος στα περισσότερα προγράμματα περιήγησης είναι να μην επιτρέψετε σε προεπιλεγμένα πράγματα όπως περιθώρια στην επιλογή του προγράμματος περιήγησης.
Προτιμούμε να ξεκινήσουμε σελίδες στην επάνω αριστερή γωνία, χωρίς επιπλέον παραγέμισμα ή περιθώριο γύρω από το κείμενο. Ακόμα κι αν πρόκειται να συμπληρώσουμε τα περιεχόμενα, θέτουμε τα περιθώρια στο μηδέν έτσι ώστε να ξεκινήσουμε με την ίδια κενή πλάκα. Για να το κάνετε αυτό, προσθέστε τα ακόλουθα στο έγγραφο styles.css σας:
html, σώμα {
περιθώριο: 0px;
επένδυση: 0px;
περίγραμμα: 0px;
αριστερά: 0px;
κορυφή: 0px;
}
Αλλαγή της γραμματοσειράς στη σελίδα
Η γραμματοσειρά είναι συχνά το πρώτο πράγμα που θέλετε να αλλάξετε σε μια ιστοσελίδα. Η προεπιλεγμένη γραμματοσειρά σε μια ιστοσελίδα μπορεί να είναι άσχημο και εξαρτάται από το ίδιο το πρόγραμμα περιήγησης ιστού, οπότε αν δεν ορίσετε τη γραμματοσειρά, πραγματικά δεν ξέρετε πώς θα μοιάζει η σελίδα σας.
Συνήθως, θα αλλάζατε τη γραμματοσειρά σε παραγράφους ή μερικές φορές σε ολόκληρο το ίδιο το έγγραφο. Για αυτόν τον ιστότοπο, θα ορίσουμε τη γραμματοσειρά σε επίπεδο κεφαλίδας και παραγράφου. Προσθέστε τα ακόλουθα στο έγγραφό σας στυλ.css:
π, λι {
γραμματοσειρά: 1em Arial, Helvetica, sans-serif;
}
ω1 {
γραμματοσειρά: 2em Arial, Helvetica, sans-serif;
}
ω2 {
γραμματοσειρά: 1.5em Arial, Helvetica, sans-serif;
}
ω3 {
γραμματοσειρά: 1.25em Arial, Helvetica, sans-serif;
}
Ξεκινήσαμε με το 1em ως βασικό μέγεθος για παραγράφους και στοιχεία λίστας και στη συνέχεια το χρησιμοποιήσαμε για να ορίσουμε το μέγεθος για τους τίτλους μου. Δεν περιμένουμε να χρησιμοποιήσουμε μια επικεφαλίδα βαθύτερη από το h4, αλλά αν σκοπεύετε να θέλετε να το στυλ επίσης.
Κάνοντας τους συνδέσμους σας πιο ενδιαφέρουσες
Τα προεπιλεγμένα χρώματα για συνδέσμους είναι μπλε και μοβ για συνδέσμους που δεν έχουν επισκεφθεί και επισκεφθεί αντίστοιχα. Αν και αυτό είναι τυπικό, ενδέχεται να μην ταιριάζει με το συνδυασμό χρωμάτων των σελίδων σας, οπότε ας το αλλάξουμε. Στο αρχείο Sty.css, προσθέστε τα εξής:
ένας σύνδεσμος {
font-family: Arial, Helvetica, sans-serif;
χρώμα: # FF9900;
κείμενο-διακόσμηση: υπογράμμιση?
}
α: επισκέφτηκε {
χρώμα: # FFCC66;
}
α: αιωρηθείτε {
φόντο: #FFFFCC;
γραμματοσειρά: έντονη;
}
Ρυθμίζουμε τρία στυλ συνδέσμου, τον σύνδεσμο a: ως προεπιλογή, ένα: επισκέφθηκε το κατά την επίσκεψή του, αλλάζουμε το χρώμα και το: Με το: hover έχουμε τον σύνδεσμο να πάρει ένα χρώμα φόντου και να τολμήσουμε να τονίσουμε ότι είναι ένας σύνδεσμος για κλικ
Στυλ της ενότητας πλοήγησης
Δεδομένου ότι βάζουμε την ενότητα πλοήγησης (id = "nav") πρώτα στο HTML, ας το σχεδιάσουμε πρώτα. Πρέπει να υποδείξουμε πόσο ευρύ πρέπει να είναι και να τοποθετήσουμε ένα ευρύτερο περιθώριο στη δεξιά πλευρά, έτσι ώστε το κύριο κείμενο να μην ανατραπεί. επίσης, βάζουμε ένα περίγραμμα γύρω του.
Προσθέστε το ακόλουθο CSS στο έγγραφό σας στυλ.css:
# ΝΑΒ {
πλάτος: 225 εικονοστοιχεία;
margin-right: 15 εικονοστοιχεία;
περίγραμμα: μεσαίο στερεό # 000000;
}
# nav λι {
στυλ λίστας: κανένα;
}
.footer {
μέγεθος γραμματοσειράς: .75em;
σαφές: και τα δύο?
πλάτος: 100%;
text-align: center;
}
Η ιδιότητα στυλ λίστας ρυθμίζει τη λίστα μέσα στην ενότητα πλοήγησης για να μην έχει κουκκίδες ή αριθμούς και το .footer μορφοποιεί την ενότητα πνευματικών δικαιωμάτων ώστε να είναι μικρότερη και κεντραρισμένη μέσα στην ενότητα.
Τοποθέτηση της κύριας ενότητας
Τοποθετώντας την κύρια ενότητα σας με απόλυτη τοποθέτηση μπορείτε να είστε σίγουροι ότι θα παραμείνει ακριβώς εκεί που θέλετε να παραμείνει στην ιστοσελίδα σας. Φτιάξαμε πλάτος 800 εικονοστοιχεία μεγαλύτερες οθόνες, αλλά εάν έχετε μικρότερη οθόνη, ίσως θελήσετε να το κάνετε πιο στενό.
Τοποθετήστε τα ακόλουθα στο έγγραφό σας στυλ.css:
# κύριο {
πλάτος: 800px;
κορυφή: 0px;
θέση: απόλυτη;
αριστερά: 250 εικονοστοιχεία;
}
Προσδιορισμός των παραγράφων σας
Δεδομένου ότι έχω ήδη ρυθμίσει τη γραμματοσειρά παραγράφου παραπάνω, ήθελα να δώσω σε κάθε παράγραφο λίγο επιπλέον "λάκτισμα" για να το κάνει να ξεχωρίζει καλύτερα. Το έκανα βάζοντας ένα περίγραμμα στην κορυφή που έδινε έμφαση στην παράγραφο περισσότερο από την εικόνα μόνο.
Τοποθετήστε τα ακόλουθα στο έγγραφό σας στυλ.css:
.η πάνω σειρά {
περίγραμμα-κορυφή: παχύ στερεό # FFCC00;
}
Αποφασίσαμε να το κάνουμε ως τάξη που ονομάζεται "topline" και όχι απλώς να ορίσουμε όλες τις παραγράφους με αυτόν τον τρόπο. Με αυτόν τον τρόπο, εάν αποφασίσουμε ότι θέλουμε να έχουμε μια παράγραφο χωρίς κορυφαία κίτρινη γραμμή, μπορούμε απλώς να αφήσουμε το class = "topline" στην ετικέτα παραγράφου και δεν θα έχει το ανώτερο περίγραμμα.
Στυλ για τις εικόνες
Οι εικόνες έχουν συνήθως περίγραμμα γύρω τους, αυτό δεν είναι πάντα ορατό εκτός και αν η εικόνα είναι σύνδεσμος, αλλά θέλουμε να έχουμε μια τάξη εντός του Φύλλο στυλ CSS που απενεργοποιεί αυτόματα το περίγραμμα. Για αυτό το φύλλο στυλ, δημιουργήσαμε την τάξη "noborder" και οι περισσότερες από τις εικόνες στο έγγραφο είναι μέρος αυτής της τάξης.
Το άλλο ειδικό μέρος αυτών των εικόνων είναι η θέση τους στη σελίδα. Θέλαμε να είναι μέρος της παραγράφου στην οποία βρίσκονταν χωρίς να χρησιμοποιήσουν πίνακες για να τους ευθυγραμμίσουν. Ο απλούστερος τρόπος για να γίνει αυτό είναι να χρησιμοποιήσετε την ιδιότητα float CSS.
Τοποθετήστε τα ακόλουθα στο έγγραφό σας στυλ.css:
# κύρια img {
float: αριστερά;
margin-right: 5px;
margin-bottom: 15px;
}
.χωρίς σύνορα {
περίγραμμα: 0px κανένας;
}
Όπως μπορείτε να δείτε, υπάρχουν επίσης ιδιότητες περιθωρίου στις εικόνες, για να βεβαιωθείτε ότι δεν έχουν καταστραφεί στο κινούμενο κείμενο που βρίσκεται δίπλα τους στις παραγράφους.
Τώρα κοιτάξτε την ολοκληρωμένη σελίδα σας
Μόλις αποθηκεύσετε το CSS, μπορείτε να φορτώσετε ξανά τη σελίδα pets.htm στο πρόγραμμα περιήγησης στο Web. Η σελίδα σας θα πρέπει να μοιάζει με αυτήν που φαίνεται σε αυτήν την εικόνα, με ευθυγραμμισμένες εικόνες και η πλοήγηση τοποθετείται σωστά στην αριστερή πλευρά της σελίδας.
Ακολουθήστε τα ίδια βήματα για όλες τις εσωτερικές σελίδες σας για αυτόν τον ιστότοπο. Θέλετε να έχετε μία σελίδα για κάθε σελίδα στην πλοήγησή σας.