Ενσωματώστε το CSS σε HTML 5 - έτσι γίνεται
Μπορείτε να ενσωματώσετε εύκολα το CSS σε HTML 5. Επειδή αν θέλετε να κάνετε τα έγγραφα HTML και XML πιο γραφικά ελκυστικά, το Cascading Style Sheets (CSS) είναι μια καλή επιλογή. Η γλώσσα μορφοποίησης προσφέρει πολλές επιλογές για την οπτική ενίσχυση των ιστοσελίδων σας. Υπάρχουν βασικά τρεις διαφορετικοί τρόποι ενσωμάτωσης του CSS σε HTML 5. Θα σας δείξουμε αυτό σε αυτή την πρακτική συμβουλή.
CSS σε HTML 5: Επιλογή 1 - Εξαγωγή αρχείου CSS
Η πρώτη επιλογή είναι να μετακινήσετε το CSS σε ξεχωριστό αρχείο. Αυτό προσφέρει πολλά πλεονεκτήματα: Τα φύλλα στυλ δεν επηρεάζουν μόνο μία σελίδα, αλλά χρησιμοποιούνται αυτόματα σε κάθε σελίδα HTML5. Το κύριο πλεονέκτημα είναι η κεντρική διοίκηση. Μπορείτε να εφαρμόσετε γρήγορα αλλαγές σε όλες τις σελίδες. Πώς να ενσωματώσετε ένα αρχείο CSS σε HTML 5:
- Δημιουργήστε ένα νέο αρχείο CSS.
- Στην περιοχή της κεφαλής, ανατρέξτε στο αρχείο CSS. Σε αυτή την περίπτωση το αρχείο ονομάστηκε style.css - αλλά η ονομασία είναι φυσικά ατομική:
- Θα πρέπει να αποθηκεύσετε το αρχείο style.css στον κύριο κατάλογο του διακομιστή ιστού.
- Έχετε ενσωματώσει με επιτυχία το αρχείο CSS σε HTML 5.
CSS στην αρχή του αρχείου HTML 5
Αν δεν θέλετε να δημιουργήσετε ένα αρχείο CSS με εξωτερική ανάθεση, μπορείτε επίσης να ορίσετε τις ιδιότητες CSS στην κεφαλίδα του έγγραφου HTML 5. Αυτά επηρεάζουν μόνο αυτό το αρχείο HTML 5, όχι για όλες τις σελίδες HTML 5.
- Ανοίξτε το έγγραφο HTML 5
- Εισαγάγετε την ακόλουθη εντολή στην περιοχή της κεφαλής:
- Τώρα ορίστε τις επιθυμητές ιδιότητες: Αυτό μπορεί να είναι, για παράδειγμα, το μέγεθος των επικεφαλίδων, το χρώμα του κειμένου κτλ. Χρησιμοποιήστε τις γνωστές εντολές CSS γι 'αυτό.
- Κλείστε την εντολή μετά την εισαγωγή των ιδιοτήτων με.
- Οι καθορισμένες ιδιότητες υιοθετούνται για αυτό το έγγραφο HTML 5.
CSS inline style: χρησιμοποιήστε τις εντολές απευθείας
Ο τελευταίος τρόπος για να ενσωματώσετε το CSS σε HTML 5 είναι το inline style. Αυτό σημαίνει ότι εισάγετε τις εντολές σας απευθείας στον πηγαίο κώδικα.
- Πηγαίνετε στο σημείο όπου θέλετε να αλλάξετε την οθόνη γραφικών.
- Εισαγάγετε απευθείας τις εντολές CSS. Για παράδειγμα, αυτό μπορεί να μοιάζει με αυτό:
Μια μπλε υποδιαίρεση
- Η ιδιότητα χρησιμοποιείται μόνο για αυτήν την εντολή.