Στενογραφία ομάδες δήλωση

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

Ας ξεκινήσουμε με ένα παραδοσιακό σήμα μπορεί να μοιάζει κάπως έτσι:

1. html,body{
2. background-color:#fff;
3. background-image: url(bild.gif);
4. background-attachment: repeat;
5. font-family:arial,tahoma,Verdana, Helvetica, sans-serif;
6. font-size:11px;
7. font-color:#000;
8. font-weight: bold;
9. font-variant: small-caps;
10. ine-height: 15px;
11. border-left:1px;
12. border-right:1px;
13. border-bottom:1px;
14. border-top:1px;
15. border-color:#000;
16. border-style:solid;
17. padding-bottom:10px;
18. padding-top;10px;
19. margin-left:5px;
20. margin-right:10px;
21. margin-top:5px;
22. margin-bottom:10px;
23. }

Λίγο πολύ code - δικαίωμα; Και σίγουρα πολύ υπερβολικοί κώδικα.

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

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

Δήλωση Ομάδας

Η πρώτη ετικέτα που έχουμε ότι δεν πρέπει να αλλάξει είναι το εξής:

1. html,body{

Το επόμενο βήμα είναι να διαμορφώσετε το φόντο και μια πιθανή φόντο. Όταν το κάνουμε εδώ:

1. background:#fff url(bild.gif) repeat fixed;

Όπως μπορείτε να δείτε τώρα έχουμε "έρχονται" μαζί τους κωδικούς σε μία. Δεν υπάρχει καμία ανάγκη για την εκτύπωση κάθε δήλωση της αξίας για την ίδια, αλλά είναι απολύτως αποδεκτό να το πράξει με την ίδια βαθμολογία. Αυτό που πρέπει να ληφθεί υπόψη είναι ότι, προκειμένου να πάρουμε το καλύτερο ο κώδικας έχει να αφήσει ένα κενό χώρο ανάμεσα από τα ερωτηματικά (';') Θα αυτό, επίσης, να είναι ότι για κάποιο λόγο θέλετε να διαμορφώσετε σας ταπετσαρία, μπορείτε να περιλαμβάνει τα εξής βήματα:

1. background:#fff url(bild.gif) repeat-x;
2. background:#fff url(bild.gif) repeat-y;
3. background:#fff url(bild.gif) no-repeat left top;
4. background:#fff url(bild.gif) no-repeat;

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

1. font: bold 11px/15px arial,tahoma,Verdana, Helvetica, sans-serif #000; letter-spacing: 2px; font-variant: small-caps;

Εδώ είναι όλοι οι ορισμοί αξία συγκεντρώνονται σε ένα και το ίδιο σήμα - γραμματοσειρά. Ευκολότερη, έτσι;

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

Ως ορισμός τιμής, έχουμε τα περιθώρια μας. Αυτούς, πρέπει να ελέγχετε τον τρόπο ένα μπλοκ πρέπει να συνδέονται με το άλλο μπλοκ. Ας ξαναγράψουμε τα περιθώρια, ώστε να ακολουθούν την ίδια απλή κωδικοποίηση του δεύτερου. Είστε σίγουροι ότι θα δείτε ότι τα περιθώρια κέρδους μας, θα ακολουθήσει επίσης την ίδια αρχή ως παραγέμισμα. Το κάνει λόγω του περιθωρίου μπορεί να περιέχει ένα ολόκληρο αντικείμενο - μπλοκαριστεί.

Ας αρχίσουμε να δούμε πώς αυτό το φαινόμενο μπορεί να είναι.

1. margin:5px 10px 10px 5px;

Εδώ έχουμε μόνο ανέφερε την εμφάνιση ενός περιθώριο 10 pixels δεξιά και κάτω, και από αριστερά 5 pixels και πάνω. Αλλά ποιες από αυτές είναι όταν η δεξιά και αριστερά και ούτω καθεξής;

Η πρώτη τιμή δηλώνει η τιμή είναι πάντα κορυφή - εδώ που να 5px. Η δεύτερη τιμή είναι σωστή - και εδώ που να 10px. Η τρίτη τιμή είναι κάτω - εδώ που να 10px, και τέλος έχουμε το τέταρτο αξία αριστερά σήμανση - που σε 5 pixels.

Με άλλα λόγια, αυτό το απλό κώδικα που:

1. margin:5px(top) 10px(right) 10px(bottom) 5px(left);

Το επόμενο βήμα στη δήλωση της Ομάδας μας έχει γεμίσει. Αν εξετάσουμε τον κώδικα στην κορυφή θέλουμε απλώς να το διαμορφώσετε στο πάνω και κάτω. Δεν υπάρχει καμία διαφορά με το πώς θα διαμορφωθεί στα σύνορα μας. Είναι η ίδια αρχή εδώ.

1. padding: 10px 0 10px 0;

Τι απομένει από τον αρχικό κώδικα είναι εξαιρετικά επαχθής, και συνεπώς το εξής:

1. html,body{
2. background:#fff url(bild.gif) left top repeat;
3. font: 11px arial,tahoma,Verdana, Helvetica, sans-serif;
4. color:#000;
5. line-height: 15px;
6. letter-spacing: 2px;
7. font-weight: bold;
8. font-variant: small-caps;
9. padding: 10px 0 10px 0;
10. margin: 5px 10px 10px 5px;
11. }

Τι σκέφτεστε;

Σύντομη δήλωση χέρι

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

1. body{font: bold verdana 11/150 small-caps;}

Αυτό το απλό κώδικα μας λέει ότι θέλουμε να γραμματοσειρά Verdana, η γραμματοσειρά θα πρέπει να είναι 11 pixel και ύψος γραμμής έχει οριστεί σε 15 pixels (σημειώστε το κάθετο μεταξύ των τιμών), επιθυμούμε επίσης να είναι τολμηροί και μικρή κεφαλαιοποίησης εμφάνιση.

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

Σύντομη δήλωση χέρι είναι, ως εκ τούτου, οι κωδικοί css μπορείτε να ελαχιστοποιήσετε τον ίδιο ορισμό. Σε όλο αυτό το παράδειγμα, το μόνο γράμμα-διάστημα έχω προσθέσει στην ετικέτα του τη δική τους - η δεύτερη έχουμε γράψει μαζί με λίγα λόγια ομάδες φροντίδα δήλωση. Έτσι, πολύ λιγότερο τους κωδικούς για να παρακολουθείτε και ευχάριστο να γράψω!