Ποιο είναι το στυλ CSS; - dummies

Μια από τις πιο συγκεχυμένες πτυχές της συνεργασίας με το CSS (Cascading Style Sheets) είναι ότι μπορείτε να γράψετε στυλ με τόσους πολλούς τρόπους. Παρόμοια με τη συγγραφή της πεζογραφίας, μόνο και μόνο επειδή καταλαβαίνετε τους βασικούς κανόνες γραμματικής και ορθογραφίας δεν σημαίνει ότι έχετε καταφέρει να γράψετε συνοπτική πεζογραφία.

Οι έμπειροι σχεδιαστές του CSS ξοδεύουν πολύ χρόνο για να δημιουργήσουν ένα σύντομο, καθαρό CSS που είναι εύκολο να επεξεργαστείτε και να ενημερώσετε. Όμως, όσοι είναι νέοι στο CSS είναι επιρρεπείς στο να γράφουν περισσότερα στυλ από ό, τι είναι απαραίτητο και να δημιουργούν περιττές στυλ.

Όχι μόνο ο πλεοναστικός κώδικας χρειάζεται περισσότερο χρόνο για να μεταφορτώσετε σε ένα πρόγραμμα περιήγησης ιστού, είναι πολύ πιο δύσκολο να το επεξεργαστείτε ή να το αναθεωρήσετε αργότερα. Και, όσο πιο περιττό είναι ο κωδικός σας, τόσο πιο πιθανό είναι να αντιμετωπίσετε συγκρούσεις στυλ.

Εδώ είναι πέντε συμβουλές για να γράφετε καθαρά, αποτελεσματικά στυλ:

• Μην δημιουργείτε ποτέ δύο στυλ όταν είναι αρκετό. Για παράδειγμα, μπορείτε να δημιουργήσετε ένα στυλ χρησιμοποιώντας τον επιλογέα ετικετών για όλες τις ετικέτες

  που αλλάζουν την οικογένεια γραμματοσειρών των τίτλων σας και στη συνέχεια να δημιουργήσετε ένα δεύτερο στυλ χρησιμοποιώντας έναν επιλογέα κλάσης που μπορείτε να εφαρμόσετε στους τίτλους σας για να αλλάξετε χρώμα.

  Αλλά θα ήταν πιο αποδοτικό να ορίσουμε το χρώμα και την οικογένεια γραμματοσειρών με το ίδιο στυλ. Θυμηθείτε ότι μπορείτε πάντα να επιστρέψετε και να επεξεργαστείτε ένα στυλ για να προσθέσετε έναν άλλο κανόνα εάν θέλετε να αλλάξετε τη μορφοποίηση του στυλ.

• Συντομεύστε δεκαεξαδικούς κωδικούς χρωμάτων. Μπορείτε να ορίσετε χρώματα σε CSS συμπεριλαμβάνοντας ολόκληρο τον δεκαεξαδικό κωδικό χρώματος. Ωστόσο, όταν χρησιμοποιείτε επαναλαμβανόμενους κωδικούς χρώματος, πρέπει να συμπεριλάβετε μόνο τους τρεις πρώτους χαρακτήρες. Για παράδειγμα, το #ffffff είναι το ίδιο με το #fff. και οι δύο θα δημιουργήσουν το λευκό χρώμα.

• Χρησιμοποιήστε εξωτερικά φύλλα στυλ. Μπορείτε να ορίσετε στυλ σε ένα εσωτερικό φύλλο στυλ στο επάνω μέρος κάθε ιστοσελίδας ή μπορείτε να αποθηκεύσετε τα στυλ σας σε ένα εξωτερικό αρχείο με το. css επέκταση και να επισυνάψετε αυτό το φύλλο στυλ σε όλες τις ιστοσελίδες σας. Τα εξωτερικά φύλλα στυλ είναι εγγενώς πιο αποτελεσματικά επειδή σας επιτρέπουν να χρησιμοποιήσετε το ίδιο στυλ σε οποιαδήποτε ή όλες τις σελίδες του ιστότοπού σας.

  Για παράδειγμα, αν ορίσετε ένα στυλ που κάνει όλους τους κύριους τίτλους με έντονα, μπλε και μεγάλα, εξοικονομώντας αυτό το στυλ σε ένα εξωτερικό φύλλο στυλ, μπορείτε να χρησιμοποιήσετε το ίδιο στυλ για κάθε τίτλο. Στη συνέχεια, εάν αποφασίσετε αργότερα ότι θέλετε να αλλάξετε τους τίτλους σας σε πράσινο χρώμα, μπορείτε να αλλάξετε το στυλ σε ένα εξωτερικό φύλλο στυλ και να αλλάξετε όλους τους τίτλους ταυτόχρονα.

  Αν είχατε αποθηκεύσει τα στυλ σε ένα εσωτερικό φύλλο στυλ, θα πρέπει να επεξεργαστείτε το στυλ επικεφαλίδας σε κάθε αρχείο.

• Αναπτύξτε μια σύμβαση ονοματοδοσίας για τα στυλ σας. Παρόλο που μπορείτε να ονομάσετε στυλ που δημιουργήθηκαν με τους επιλογείς κλάσης ή αναγνωριστικά οτιδήποτε θέλετε, είναι καλύτερο να επιλέξετε στυλ που έχουν νόημα εκτός από τη μορφοποίηση.Για παράδειγμα, εάν δημιουργήσετε ένα στυλ που ονομάζεται. redHeadlines και στη συνέχεια να αποφασίσετε ότι θέλετε όλα σας. redHeadlines να είναι μπλε, είτε θα καταλήξετε με ένα μπλε στυλ επικεφαλίδας που ονομάζεται. redHeadlines ή θα πρέπει να μετονομάσετε το στυλ.

  Και η μετονομασία του στυλ περιλαμβάνει την επιστροφή και την εκ νέου εφαρμογή αυτού του στυλ παντού που έχετε έναν κόκκινο τίτλο που θέλετε να μετατραπεί σε μπλε χρώμα, ποιο είδος αρνείται τη δύναμη των στυλ για να κάνετε παγκόσμιες ενημερώσεις. Για να αποφύγετε αυτό το πρόβλημα, δημιουργήστε ονόματα στυλ που αναφέρονται στη θέση ή τη σημασία στοιχείων, όπως π.χ. mainHeadlines ή. sidebarHeadlines.

• * Δοκιμάστε και επικυρώστε τον κωδικό σας. Ακόμη και έμπειροι σχεδιαστές CSS κάνουν λάθη και γι 'αυτό το Dreamweaver περιλαμβάνει τόσα πολλά εξαιρετικά εργαλεία για τη δοκιμή και την επικύρωση του κώδικα στις ιστοσελίδες σας. Βεβαιωθείτε ότι έχετε δοκιμάσει το CSS σας για συνηθισμένα λάθη.

  Ακολουθούν δύο υπηρεσίες ελέγχου online που μπορείτε να χρησιμοποιήσετε για να ελέγξετε για σφάλματα στον CSS κώδικα σας. Απλά εισαγάγετε τη διεύθυνση URL οποιασδήποτε ιστοσελίδας στο Internet στο πεδίο διεύθυνσης σε έναν από αυτούς τους ιστότοπους και κάντε κλικ στο κουμπί Υποβολή για να λάβετε μια αναφορά που εμφανίζει τυχόν σφάλματα στον κωδικό σας:

  • Η W3C CSS Validation Service

  • XHTML-CSS : Να είστε έγκυροι ή να πεθαίνετε