Το Cascading Style Sheet (CSS) είναι ένα σύστημα για κωδικοποίηση ιστότοπων που επιτρέπει στους σχεδιαστές να χειρίζονται πολλές δυνατότητες ταυτόχρονα, αναθέτοντας ορισμένα στοιχεία σε ομάδες. Για παράδειγμα, χρησιμοποιώντας έναν κώδικα για το φόντο του ιστότοπου, οι σχεδιαστές μπορούν να αλλάξουν το χρώμα ή την εικόνα φόντου σε όλες τις σελίδες του ιστότοπου με μία αλλαγή στο αρχείο CSS. Δείτε πώς μπορείτε να δημιουργήσετε CSS για έναν βασικό ιστότοπο.
Βήματα
Μέρος 1 από 4: Γράφοντας ενσωματωμένο CSS
Βήμα 1. Βεβαιωθείτε ότι έχετε μια βασική κατανόηση των ετικετών HTML
Θα πρέπει να γνωρίζετε πώς λειτουργούν οι ετικέτες και
src
και
href
γνωρίσματα.
Βήμα 2. Μάθετε μερικές από τις βασικές ιδιότητες CSS
Θα διαπιστώσετε ότι υπάρχουν πάρα πολλές ιδιότητες. Ωστόσο, δεν είναι απαραίτητο να τα μάθουμε όλα.
-
Μερικές καλές βασικές ιδιότητες CSS που πρέπει να γνωρίζετε είναι
χρώμα
και
γραμματοσειρά-οικογένεια
- .
Βήμα 3. Μάθετε σχετικά με τις τιμές για κάθε αντίστοιχη ιδιότητα
Όλες οι ιδιότητες χρειάζονται μια τιμή. Για το
χρώμα
ιδιότητα, για παράδειγμα, μπορείτε να βάλετε το
το κόκκινο
αξία.
Βήμα 4. Μάθετε για το
στυλ
Χαρακτηριστικό HTML.
Χρησιμοποιείται σε ένα στοιχείο όπως
href
ή
src
Το Για να το χρησιμοποιήσετε, μέσα στα εισαγωγικά μετά το πρόσημο ίσου, τοποθετήστε το χαρακτηριστικό CSS, μια άνω τελεία και, στη συνέχεια, την τιμή της ιδιότητας. Αυτό είναι γνωστό ως κανόνας CSS.
Βήμα 5. Κατανοήστε ότι το ενσωματωμένο CSS δεν χρησιμοποιείται συνήθως για ιστότοπους από επαγγελματίες προγραμματιστές ιστού
Το ενσωματωμένο CSS μπορεί να προσθέσει περιττή ακαταστασία σε ένα έγγραφο HTML. Ωστόσο, είναι ένας πολύ καλός τρόπος για να γνωρίσετε πώς λειτουργεί το CSS.
Μέρος 2 από 4: Γράψιμο βασικού CSS
Βήμα 1. Εκκινήστε το πρόγραμμα που επιθυμείτε να χρησιμοποιήσετε
Θα πρέπει να σας επιτρέπει να δημιουργείτε αρχεία HTML και CSS.
Εάν δεν έχετε εγκαταστήσει κάποιο ειδικό πρόγραμμα, μπορείτε να χρησιμοποιήσετε το Σημειωματάριο ή άλλο πρόγραμμα επεξεργασίας κειμένου. Απλώς αποθηκεύστε το αρχείο σας τόσο ως αρχείο κειμένου όσο και ως αρχείο CSS
Βήμα 2. Ανοίξτε το αρχείο HTML για τον ιστότοπό σας
Θα πρέπει επίσης να το ανοίξετε με έναν επεξεργαστή HTML, εάν έχετε εγκαταστήσει έναν.
Οι επεξεργαστές HTML σάς επιτρέπουν να επεξεργάζεστε HTML και CSS ταυτόχρονα
Βήμα 3. Δημιουργήστε μια ετικέτα στην κεφαλή HTML σας
Αυτό θα σας επιτρέψει να γράψετε CSS χωρίς να χρειάζεται ξεχωριστό αρχείο.
Βήμα 4. Επιλέξτε ένα στοιχείο στο οποίο θέλετε να προσθέσετε στυλ και πληκτρολογήστε το όνομα του στοιχείου που ακολουθείται από ένα σύνολο σγουρών στηριγμάτων ({})
Για να κάνετε τον κωδικό σας πιο ευανάγνωστο, βάζετε πάντα το δεύτερο σγουρό στήριγμα στη δική του γραμμή.
Βήμα 5. Μεταξύ των στηριγμάτων, πληκτρολογήστε τους κανόνες CSS όπως θα χρησιμοποιούσατε
στυλ
Χαρακτηριστικό.
Κάθε γραμμή πρέπει να τελειώνει με ερωτηματικό (;). Για να κάνετε τον κωδικό σας ευανάγνωστο, κάθε κανόνας θα πρέπει να ξεκινά από τη δική του γραμμή και κάθε γραμμή θα πρέπει να εσοχή.
Είναι πολύ σημαντικό να σημειωθεί ότι αυτό το στυλ θα επηρεάσει όλα τα στοιχεία του επιλεγμένου τύπου στη σελίδα. Πιο συγκεκριμένο στυλ θα καλυφθεί στην επόμενη ενότητα
Μέρος 3 από 4: Πιο προηγμένο CSS
Βήμα 1. Δημιουργήστε ένα αρχείο CSS, όχι ένα αρχείο HTML και αποθηκεύστε το χρησιμοποιώντας το
.css
επέκταση.
Ανοίξτε επίσης το αρχείο HTML.
Βήμα 2. Δημιουργήστε μια ετικέτα στην κεφαλή HTML σας
Αυτό θα σας επιτρέψει να συνδέσετε ένα ξεχωριστό αρχείο CSS με το έγγραφό σας HTML. Η ετικέτα συνδέσμου χρειάζεται τρία χαρακτηριστικά:
σχετ
τύπος
και
href
-
σχετ
σημαίνει "σχέση" και λέει στο πρόγραμμα περιήγησης ποια είναι η σχέση με το έγγραφο HTML. Εδώ θα πρέπει να έχει μια τιμή
"φύλλο στυλ"
- .
-
τύπος
λέει με ποιον τύπο μέσων συνδέεται. Εδώ θα πρέπει να έχει μια τιμή
"text/css"
-
href
- εδώ χρησιμοποιείται παρόμοια με το πώς χρησιμοποιείται σε ένα στοιχείο, αλλά εδώ πρέπει να συνδεθεί με ένα αρχείο CSS. Εάν το αρχείο CSS βρίσκεται στον ίδιο φάκελο με το αρχείο HTML, μόνο το όνομα του αρχείου πρέπει να γραφτεί μέσα στα εισαγωγικά.
Βήμα 3. Επιλέξτε στοιχεία διαφορετικών τύπων στα οποία θέλετε να προσθέσετε το ίδιο στυλ
Πρόσθεσε ένα
τάξη
χαρακτηριστικό σε αυτά τα στοιχεία και ορίστε τα ίσα με ένα όνομα κλάσης της επιλογής σας. Αυτό θα δώσει στα στοιχεία σας το ίδιο στυλ.
Βήμα 4. Αναθέστε τι στυλ θα λάβει μια τάξη
Πληκτρολογήστε το όνομα της τάξης στο αρχείο CSS με μια περίοδο (.) Που προηγείται (δηλ.
.τάξη
).
Βήμα 5. Επιλέξτε μεμονωμένα στοιχεία στα οποία θέλετε να προσθέσετε ειδικό στυλ και προσθέστε ένα
ταυτότητα
Χαρακτηριστικό.
Τα αναγνωριστικά δημιουργούνται στο CSS χρησιμοποιώντας ένα σύμβολο λίρας (#) και όχι μια περίοδο.
Τα αναγνωριστικά είναι πιο συγκεκριμένα από τις κλάσεις, οπότε ένα αναγνωριστικό θα παρακάμψει κάθε στυλ κλάσης εάν έχει ένα χαρακτηριστικό με διαφορετική τιμή από την κλάση
Μέρος 4 από 4: Μάθετε περισσότερα
Βήμα 1. Επισκεφθείτε τα σχολεία του w3
Είναι ένας επίσημος ιστότοπος που στοχεύει στη διδασκαλία δεξιοτήτων ανάπτυξης ιστοσελίδων. Το w3 έχει πολλές αναφορές για HTML και CSS, καθώς και άλλες γλώσσες ιστού.
Βήμα 2. Βρείτε άλλους ιστότοπους που στοχεύουν ειδικά στην εκμάθηση και τη διδασκαλία HTML και CSS
Ιστότοποι όπως το CSS tricks.com στοχεύουν ειδικά στη διδασκαλία δεξιοτήτων CSS και σχεδιασμού ιστοσελίδων. Η εύρεση αξιόπιστων πηγών θα σας βοηθήσει στο εκπαιδευτικό σας ταξίδι.
Βήμα 3. Επικοινωνήστε με σχεδιαστές ιστοσελίδων και προγραμματιστές
Η εμπειρία και η τεχνογνωσία τους μπορούν να σας διδάξουν πολύτιμες γνώσεις και δεξιότητες.
Βήμα 4. Δείτε τον πηγαίο κώδικα των ιστότοπων που συναντάτε
Η προβολή του CSS των καλά ανεπτυγμένων ιστότοπων μπορεί να σας δείξει τρόπους σχεδιασμού τμημάτων ιστότοπων. Η αντιγραφή του ως πρακτική και το μπέρδεμα με τον κώδικα μπορεί να σας βοηθήσει να μάθετε πώς να χρησιμοποιείτε διαφορετικά χαρακτηριστικά CSS.
