Δημιουργήστε το φύλλο στυλ CSS
Με τον ίδιο τρόπο που δημιουργήσαμε ένα ξεχωριστό αρχείο κειμένου για το HTML, θα δημιουργήσετε ένα αρχείο κειμένου για το CSS. Εάν χρειάζεστε γραφικά για αυτήν τη διαδικασία, ανατρέξτε στο πρώτο σεμινάριο. Ακολουθούν τα βήματα για τη δημιουργία του φύλλου στυλ CSS στο Σημειωματάριο:
- Επιλέγω Αρχείο> Νέο στο Σημειωματάριο για να πάρετε ένα κενό παράθυρο
- Αποθηκεύστε το αρχείο ως CSS κάνοντας κλικ Αρχείο <Αποθήκευση ως ...
- Μεταβείτε στο φάκελο my_website στον σκληρό σας δίσκο
- Αλλαξε το «Αποθήκευση ως τύπου:» προς την «Ολα τα αρχεία«
- Ονομάστε το αρχείο σας «styles.css«(αφήστε τα εισαγωγικά) και κάντε κλικ Σώσει
Συνδέστε το φύλλο στυλ CSS στο HTML σας
type = «code»>
Διορθώστε τα περιθώρια σελίδας
Όταν γράφετε XHTML για διαφορετικά προγράμματα περιήγησης, ένα πράγμα που θα μάθετε είναι ότι όλοι φαίνεται να έχουν διαφορετικά περιθώρια και κανόνες για τον τρόπο εμφάνισης των πραγμάτων. Ο καλύτερος τρόπος για να βεβαιωθείτε ότι ο ιστότοπός σας μοιάζει ο ίδιος στα περισσότερα προγράμματα περιήγησης είναι να μην επιτρέψετε σε προεπιλογή πράγματα όπως τα περιθώρια στην επιλογή του προγράμματος περιήγησης. Προτιμούμε να ξεκινήσουμε σελίδες στην επάνω αριστερή γωνία, χωρίς επιπλέον παραγέμισμα ή περιθώριο γύρω από το κείμενο. Ακόμα κι αν πρόκειται να συμπληρώσουμε τα περιεχόμενα, θέτουμε τα περιθώρια στο μηδέν έτσι ώστε να ξεκινάμε με την ίδια κενή πλάκα. Για να το κάνετε αυτό, προσθέστε τα ακόλουθα στο έγγραφό σας στυλ.css: html, body {
περιθώριο: 0px;
επένδυση: 0px;
περίγραμμα: 0px;
αριστερά: 0px;
κορυφή: 0px;
}
type = «code»>
Αλλαγή της γραμματοσειράς στη σελίδα
Η γραμματοσειρά είναι συχνά το πρώτο πράγμα που θέλετε να αλλάξετε σε μια ιστοσελίδα. Η προεπιλεγμένη γραμματοσειρά σε μια ιστοσελίδα μπορεί να είναι άσχημη και εξαρτάται από το ίδιο το πρόγραμμα περιήγησης ιστού, οπότε αν δεν ορίσετε τη γραμματοσειρά, πραγματικά δεν ξέρετε πώς θα μοιάζει η σελίδα σας. Συνήθως, θα αλλάζατε τη γραμματοσειρά σε παραγράφους ή μερικές φορές σε ολόκληρο το ίδιο το έγγραφο. Για αυτόν τον ιστότοπο, θα ορίσουμε τη γραμματοσειρά σε επίπεδο κεφαλίδας και παραγράφου. Προσθέστε τα ακόλουθα στο έγγραφο styles.css: p, li {
γραμματοσειρά: 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;
}
type = «code»> Ξεκινήσαμε με το 1em ως βασικό μέγεθος για παραγράφους και στοιχεία λίστας και στη συνέχεια το χρησιμοποιήσαμε για να ορίσουμε το μέγεθος για τους τίτλους μου. Δεν περιμένουμε να χρησιμοποιήσουμε μια επικεφαλίδα βαθύτερη από το h4, αλλά αν σκοπεύετε να θέλετε να το στυλ επίσης.
Κάνοντας τους συνδέσμους σας πιο ενδιαφέρουσες
Τα προεπιλεγμένα χρώματα για συνδέσμους είναι μπλε και μοβ για συνδέσμους που δεν έχουν επισκεφθεί και επισκεφθεί αντίστοιχα. Αν και αυτό είναι τυπικό, ενδέχεται να μην ταιριάζει με το συνδυασμό χρωμάτων των σελίδων σας, οπότε ας το αλλάξουμε. Στο αρχείο styles.css, προσθέστε τα εξής: a: link {
font-family: Arial, Helvetica, sans-serif;
χρώμα: # FF9900;
κείμενο-διακόσμηση: υπογράμμιση?
}
α: επισκέφτηκε {
χρώμα: # FFCC66;
}
α: αιωρηθείτε {
φόντο: #FFFFCC;
γραμματοσειρά: έντονο;
}
type = «code»> Ρυθμίζουμε τρία στυλ συνδέσμου, το a: link ως το προεπιλεγμένο, a: επισκέφθηκε για το όταν έχει επισκεφτεί, αλλάζουμε το χρώμα και a: hover. Με το: hover έχουμε τον σύνδεσμο να πάρει ένα χρώμα φόντου και να τολμήσουμε για να τονίσουμε ότι είναι ένας σύνδεσμος για κλικ
Στυλ της ενότητας πλοήγησης
Δεδομένου ότι βάζουμε την ενότητα πλοήγησης (id = «nav») πρώτα στο HTML, ας το σχεδιάσουμε πρώτα. Πρέπει να υποδείξουμε πόσο ευρύ πρέπει να είναι και να τοποθετήσουμε ένα ευρύτερο περιθώριο στη δεξιά πλευρά, έτσι ώστε το κύριο κείμενο να μην ανατραπεί. επίσης, βάζουμε ένα περίγραμμα γύρω του. Προσθέστε το ακόλουθο CSS στο έγγραφο styles.css σας: #nav {
πλάτος: 225 εικονοστοιχεία;
margin-right: 15 εικονοστοιχεία;
περίγραμμα: μεσαίο στερεό # 000000;
}
# nav λι {
στυλ λίστας: κανένα;
}
.footer {
μέγεθος γραμματοσειράς: .75em;
σαφές: και τα δύο?
πλάτος: 100%;
text-align: center;
}
type = «code»> Η ιδιότητα στυλ λίστας ρυθμίζει τη λίστα μέσα στην ενότητα πλοήγησης για να μην έχει κουκκίδες ή αριθμούς και το .footer μορφοποιεί την ενότητα πνευματικών δικαιωμάτων ώστε να είναι μικρότερη και κεντραρισμένη μέσα στην ενότητα.
Τοποθέτηση της κύριας ενότητας
Τοποθετώντας την κύρια ενότητα σας με απόλυτη τοποθέτηση μπορείτε να είστε σίγουροι ότι θα παραμείνει ακριβώς εκεί που θέλετε να παραμείνει στην ιστοσελίδα σας. Το κάναμε πλάτος 800 εικονοστοιχεία για να φιλοξενήσουμε μεγαλύτερες οθόνες, αλλά αν έχετε μικρότερη οθόνη, ίσως θελήσετε να το κάνετε πιο στενό. Τοποθετήστε τα ακόλουθα στο έγγραφό σας στυλ.css: #main {
πλάτος: 800px;
κορυφή: 0px;
θέση: απόλυτη;
αριστερά: 250 εικονοστοιχεία;
}
type = «code»>
Προσδιορισμός των παραγράφων σας
Δεδομένου ότι έχω ήδη ρυθμίσει τη γραμματοσειρά παραγράφου παραπάνω, ήθελα να δώσω σε κάθε παράγραφο λίγο επιπλέον «λάκτισμα» για να το ξεχωρίσει καλύτερα. Το έκανα βάζοντας ένα περίγραμμα στην κορυφή που έδινε έμφαση στην παράγραφο περισσότερο από την εικόνα μόνο. Τοποθετήστε τα ακόλουθα στο έγγραφό σας στυλ.css: .topline {
border-top: παχύ στερεό # FFCC00;
}
type = «code»> Αποφασίσαμε να το κάνουμε ως τάξη που ονομάζεται «topline» και όχι απλώς να ορίσουμε όλες τις παραγράφους με αυτόν τον τρόπο. Με αυτόν τον τρόπο, εάν αποφασίσουμε ότι θέλουμε να έχουμε μια παράγραφο χωρίς κορυφαία κίτρινη γραμμή, μπορούμε απλά να αφήσουμε το class = «topline» στην ετικέτα παραγράφου και δεν θα έχει το ανώτερο περίγραμμα.
Στυλ για τις εικόνες
Οι εικόνες έχουν συνήθως περίγραμμα γύρω τους, αυτό δεν είναι πάντα ορατό εκτός εάν η εικόνα είναι σύνδεσμος, αλλά θέλουμε να έχουμε μια τάξη στο φύλλο στυλ CSS που απενεργοποιεί αυτόματα το περίγραμμα. Για αυτό το φύλλο στυλ, δημιουργήσαμε την τάξη «noborder» και οι περισσότερες από τις εικόνες στο έγγραφο είναι μέρος αυτής της τάξης. Το άλλο ειδικό μέρος αυτών των εικόνων είναι η θέση τους στη σελίδα. Θέλαμε να είναι μέρος της παραγράφου στην οποία βρίσκονταν χωρίς να χρησιμοποιήσουν πίνακες για να τους ευθυγραμμίσουν. Ο απλούστερος τρόπος για να γίνει αυτό είναι να χρησιμοποιήσετε την ιδιότητα float CSS. Τοποθετήστε τα ακόλουθα στο έγγραφό σας στυλ.css: #main img {
float: αριστερά;
margin-right: 5px;
margin-bottom: 15px;
}
.χωρίς σύνορα {
περίγραμμα: 0px κανένας;
}
type = «code»> Όπως μπορείτε να δείτε, υπάρχουν επίσης ιδιότητες περιθωρίου στις εικόνες, για να βεβαιωθείτε ότι δεν συνθλίβονται στο κινούμενο κείμενο που βρίσκεται δίπλα τους στις παραγράφους.
Τώρα κοιτάξτε την ολοκληρωμένη σελίδα σας
Μόλις αποθηκεύσετε το CSS, μπορείτε να φορτώσετε ξανά τη σελίδα pets.htm στο πρόγραμμα περιήγησης στο Web. Η σελίδα σας θα πρέπει να μοιάζει με αυτήν που φαίνεται σε αυτήν την εικόνα, με ευθυγραμμισμένες εικόνες και η πλοήγηση τοποθετείται σωστά στην αριστερή πλευρά της σελίδας. Ακολουθήστε τα ίδια βήματα για όλες τις εσωτερικές σελίδες σας για αυτόν τον ιστότοπο. Θέλετε να έχετε μία σελίδα για κάθε σελίδα στην πλοήγησή σας.
Αναφέρετε αυτό το άρθρο
Μορφή mla apa chicago Η αναφορά σας
Kyrnin, Jennifer. «Στυλ δημιουργίας ιστοσελίδας με σημειωματάριο με CSS.» ThoughtCo, Μάιος. 14, 2021, thinkco.com/css-and-notepad-created-web-page-3466582.
Kyrnin, Jennifer. (2021, 14 Μαΐου). Στυλ μιας ιστοσελίδας που δημιουργήθηκε με σημειωματάριο με CSS. Ανακτήθηκε από το https://www.thoughtco.com/css-and-notepad-created-web-page-3466582
Kyrnin, Jennifer. «Στυλ δημιουργίας ιστοσελίδας με σημειωματάριο με CSS.» ThoughtCo. https://www.thoughtco.com/css-and-notepad-created-web-page-3466582 (πρόσβαση στις 15 Μαΐου 2021).
αντιγραφή παραπομπής