Δημιουργήστε το φύλλο στυλ CSS
Με τον ίδιο τρόπο που δημιουργήσαμε ένα ξεχωριστό αρχείο κειμένου για το HTML, θα δημιουργήσετε ένα αρχείο κειμένου για το CSS. Αν χρειάζεστε οπτικά στοιχεία για αυτή τη διαδικασία, ανατρέξτε στο πρώτο σεμινάριο. Ακολουθούν τα βήματα για τη δημιουργία του φύλλου στυλ CSS στο Notepad:
- Επιλέξτε Αρχείο> Νέο στο Σημειωματάριο για να αποκτήσετε ένα κενό παράθυρο
- Αποθηκεύστε το αρχείο ως CSS κάνοντας κλικ στο File <Save As …
- Μεταβείτε στο φάκελο my_website στο σκληρό σας δίσκο
- Αλλάξτε την επιλογή "Αποθήκευση ως τύπος:" σε "Όλα τα αρχεία"
- Ονομάστε το αρχείο "styles.css" (αφήστε τα αποσπάσματα) και κάντε κλικ στην επιλογή Αποθήκευση
Συνδέστε το φύλλο στυλ CSS με το HTML
Μόλις έχετε ένα φύλλο στυλ για τον ιστότοπό σας, θα πρέπει να το συσχετίσετε με την ίδια την ιστοσελίδα. Για να το κάνετε αυτό, χρησιμοποιείτε την ετικέτα σύνδεσης. Τοποθετήστε την ακόλουθη ετικέτα συνδέσμου οπουδήποτε μέσα στο
ετικέτες του εγγράφου pets.htm:
03 από 10 Όταν γράφετε το XHTML για διαφορετικά προγράμματα περιήγησης, ένα πράγμα που θα μάθετε είναι ότι όλοι φαίνεται να έχουν διαφορετικά περιθώρια και κανόνες για το πώς εμφανίζουν τα πράγματα. Ο καλύτερος τρόπος για να βεβαιωθείτε ότι ο ιστότοπός σας έχει την ίδια εμφάνιση στα περισσότερα προγράμματα περιήγησης είναι να μην επιτρέπετε τα περιθώρια όπως τα περιθώρια να είναι προεπιλεγμένα στην επιλογή του προγράμματος περιήγησης. Προτιμώ να ξεκινήσω τις σελίδες μου στην επάνω αριστερή γωνία, χωρίς επιπλέον παρεμβολή ή περιθώριο γύρω από το κείμενο. Ακόμη και αν πρόκειται να επικαλύψω τα περιεχόμενα, έχω ρυθμίσει τα περιθώρια στο μηδέν, ώστε να αρχίζω με την ίδια κενή πλάκα. Για να το κάνετε αυτό, προσθέστε τα ακόλουθα στο έγγραφο styles.css: Η γραμματοσειρά είναι συχνά το πρώτο πράγμα που θα θέλετε να αλλάξετε σε μια ιστοσελίδα. Η προεπιλεγμένη γραμματοσειρά σε μια ιστοσελίδα μπορεί να είναι άσχημη και είναι στην πραγματικότητα επάνω στον ίδιο τον περιηγητή ιστού, οπότε αν δεν ορίσετε τη γραμματοσειρά, δεν θα ξέρετε τι θα μοιάζει με τη σελίδα σας. Συνήθως, θα αλλάζετε τη γραμματοσειρά σε παραγράφους ή μερικές φορές σε ολόκληρο το έγγραφο. Για αυτόν τον ιστότοπο θα καθορίσουμε τη γραμματοσειρά στο επίπεδο κεφαλίδας και παραγράφων. Προσθέστε τα ακόλουθα στο έγγραφο styles.css: Ξεκίνησα με 1em ως το βασικό μου μέγεθος για παραγράφους και στοιχεία λίστας και έπειτα το χρησιμοποίησα για να ορίσω το μέγεθος των τίτλων μου. Δεν περιμένω να χρησιμοποιήσω έναν τίτλο βαθύτερα από το h4, αλλά εάν σκοπεύετε να το θέλετε να το στυλ. Τα προεπιλεγμένα χρώματα για τους συνδέσμους είναι μπλε και μοβ για τους συνδέσμους που δεν επισκέπτονται και επισκέπτονται αντίστοιχα. Αν και αυτό είναι τυποποιημένο, ενδέχεται να μην ταιριάζει με το χρώμα των σελίδων σας, οπότε ας το αλλάξουμε. Στο αρχείο σας styles.css, προσθέστε τα εξής: Δημιούργησα τρία στυλ συνδέσμων, τον σύνδεσμο a: σύνδεσμος ως προεπιλογή, ένα: επισκέφτηκα όταν επισκέφτηκα, αλλάξω το χρώμα και ένα: αιώρηση. Με μια: hover έχω το σύνδεσμο πάρει ένα χρώμα φόντου και πηγαίνετε τολμηρό για να τονίσω ότι είναι ένας σύνδεσμος για να κάνετε κλικ. Δεδομένου ότι βάζουμε πρώτα την ενότητα πλοήγησης (id = "nav") στο HTML, ας το στυλ πρώτα. Πρέπει να υποδείξουμε πόσο ευρύ θα έπρεπε να είναι και να θέσουμε ένα ευρύτερο περιθώριο στη δεξιά πλευρά, έτσι ώστε το κύριο κείμενο να μην χτυπηθεί ενάντια σε αυτό. Έβαλα επίσης ένα περίγραμμα γύρω από αυτό. Προσθέστε το ακόλουθο CSS στο έγγραφό σας στο style.css: Η ιδιότητα λίστας ρυθμίζει τη λίστα μέσα στην ενότητα πλοήγησης ώστε να μην έχει κουκκίδες ή αριθμούς και το .footer στυλ το τμήμα πνευματικών δικαιωμάτων να είναι μικρότερο και κεντροθετημένο μέσα στην ενότητα. Τοποθετώντας το κύριο τμήμα σας με απόλυτη τοποθέτηση μπορείτε να είστε βέβαιοι ότι θα μείνει ακριβώς εκεί που θέλετε να παραμείνει στην ιστοσελίδα σας. Έκανα το πλάτος μου 800px για να φιλοξενήσω μεγαλύτερες οθόνες, αλλά αν έχετε μια μικρότερη οθόνη, μπορεί να θέλετε να το κάνετε πιο στενό. Τοποθετήστε τα ακόλουθα στο έγγραφο styles.css: Εφόσον έχω ήδη ρυθμίσει τη γραμματοσειρά παραγράφου παραπάνω, θα ήθελα να δώσω σε κάθε παράγραφο λίγο επιπλέον "λάκτισμα" για να το ξεχωρίσω καλύτερα. Το έκανα αυτό θέτοντας ένα περίγραμμα στην κορυφή που υπογράμμισε την παράγραφο περισσότερο από την εικόνα μόνο. Τοποθετήστε τα ακόλουθα στο έγγραφο styles.css: Αποφάσισα να το κάνω ως κατηγορία που ονομάζεται "topline" και όχι απλώς να ορίσω όλες τις παραγράφους με αυτό τον τρόπο. Με αυτόν τον τρόπο, εάν αποφασίσω ότι θέλω να έχω μια παράγραφο χωρίς κορυφαία κίτρινη γραμμή, μπορώ απλά να αφήσω την κατηγορία = "topline" στην ετικέτα παραγράφου και δεν θα έχει τα ανώτατα όρια. Οι εικόνες έχουν συνήθως ένα περιθώριο γύρω τους, αυτό δεν είναι πάντα ορατό, εκτός αν η εικόνα είναι ένας σύνδεσμος, αλλά μου αρέσει να έχω μια τάξη μέσα στο φύλλο στυλ CSS που απενεργοποιεί αυτόματα τα σύνορα.Για αυτό το φύλλο στυλ, δημιούργησα την κλάση "noborder" και οι περισσότερες από τις εικόνες του εγγράφου είναι μέρος αυτής της κλάσης. Το άλλο ειδικό μέρος αυτών των εικόνων είναι η θέση τους στη σελίδα. Ήθελα να είναι μέρος της παραγράφου στην οποία βρισκόταν, χωρίς να χρησιμοποιούν τραπέζια για να τα ευθυγραμμίσουν. Ο πιο απλός τρόπος για να το κάνετε αυτό είναι να χρησιμοποιήσετε την ιδιότητα CSS float. Τοποθετήστε τα ακόλουθα στο έγγραφο styles.css: Όπως μπορείτε να δείτε, υπάρχουν επίσης περιθωριακές ιδιότητες που έχουν οριστεί στις εικόνες, για να βεβαιωθείτε ότι δεν έχουν καταστραφεί ενάντια στο επιπλέει κείμενο που βρίσκεται δίπλα τους στις παραγράφους. Αφού αποθηκεύσετε το CSS, μπορείτε να φορτώσετε ξανά τη σελίδα pets.htm στο πρόγραμμα περιήγησης στο Web. Η σελίδα σας θα πρέπει να μοιάζει με αυτή που φαίνεται σε αυτήν την εικόνα, με τις εικόνες ευθυγραμμισμένες και την πλοήγηση τοποθετημένη σωστά στην αριστερή πλευρά της σελίδας. Ακολουθήστε τα ίδια βήματα για όλες τις εσωτερικές σελίδες σας για αυτόν τον ιστότοπο. Θέλετε να έχετε μία σελίδα για κάθε σελίδα στην πλοήγησή σας. Διορθώστε τα περιθώρια σελίδας
Αλλαγή της γραμματοσειράς στη σελίδα
Κάνοντας τους συνδέσμους σας πιο ενδιαφέροντα
Σχεδίαση του τμήματος πλοήγησης
Τοποθέτηση του κύριου τμήματος
Σχεδίαση των παραγράφων σας
Σχεδίαση των εικόνων
Τώρα δείτε την ολοκληρωμένη σελίδα σας