Σχέδιο ετικέτας. Μορφοποίηση κειμένου σε html. Το νέο μου σχέδιο CSS
Όπως γνωρίζετε, το κύριο περιεχόμενο των ιστοσελίδων είναι κείμενο. Με σπάνια εξαίρεση τους χώρους ειδικών γκαλερί. Επομένως, δεν αποτελεί έκπληξη το γεγονός ότι η HTML έχει τόσα πολλά διαφορετικά στοιχεία ελέγχου εμφάνισης κειμένου.
Στην πραγματικότητα, για να εμφανίσετε μια συμβολοσειρά κειμένου στο παράθυρο προβολής του προγράμματος περιήγησης, δεν χρειάζεται να χρησιμοποιήσετε ετικέτες: Απλώς πρέπει να γράψετε το ίδιο το κείμενο. Αλλά όταν πρέπει να το χωρίσετε τουλάχιστον σε παραγράφους, εδώ πρέπει να χρησιμοποιήσετε ετικέτες. Το γεγονός είναι ότι διαφορετικά συστήματα υπολογιστών χρησιμοποιούν διαφορετικούς χαρακτήρες για να χωρίσουν το κείμενο σε παραγράφους και τα έγγραφα HTML θα πρέπει πάντα να εμφανίζονται όσο το δυνατόν πιο ομοιόμορφα σε μια μεγάλη ποικιλία πλατφορμών υπολογιστών. Γι' αυτό έπρεπε να εισαγάγουμε ετικέτες για να ορίσουμε παραγράφους.
Στην αρχή κάθε παραγράφου υπάρχει μια ετικέτα , και στο τέλος, η ετικέτα κλεισίματος . Ταυτόχρονα, η ετικέτα έχει φυσικά κάποιες παραμέτρους. Αυτές περιλαμβάνουν τις γενικές παραμέτρους αναγνώρισης που είναι ήδη γνωστές σε εμάς τάξηΚαι ταυτότητα, παράμετρος styling στυλ, που θα δούμε στο δεύτερο κεφάλαιο, και την παράμετρο στοίχισης ευθυγραμμίζω. Θα πρέπει να μιλήσουμε για την τελευταία παράμετρο λίγο πιο αναλυτικά.
Στην HTML, ο όρος "στοίχιση" αναφέρεται τόσο στην οριζόντια όσο και στην κατακόρυφη τοποθέτηση ενός στοιχείου. Αλλά στην περίπτωση των παραγράφων του κειμένου, έχει νόημα να μιλάμε μόνο για οριζόντια ευθυγράμμιση ή, όπως ονομάζεται επίσης, «αιτιολόγηση».
Η αιτιολόγηση σάς επιτρέπει να πιέσετε μια παράγραφο στην αριστερή ή δεξιά άκρη της θύρας προβολής του προγράμματος περιήγησης, να την κεντράρετε ή να απλώσετε λέξεις έτσι ώστε το κείμενο να καλύπτει ομοιόμορφα ολόκληρο το πλάτος του χώρου που του έχει εκχωρηθεί. Για τους σκοπούς αυτούς χρησιμοποιούνται οι τιμές αριστερά, δεξιά, κέντροΚαι δικαιολογώ, αντίστοιχα. Ας εξετάσουμε τη χρήση τους χρησιμοποιώντας το παράδειγμα ενός άλλου εγγράφου HTML.
Λίστα 1.4
Οριζόντια ευθυγράμμιση a63acev
Η παράγραφος πιέζεται στην αριστερή άκρη
Η παράγραφος πιέζεται στην αριστερή άκρη
Κεντρική παράγραφος
Η παράγραφος εκτείνεται σε όλο το πλάτος
Το αποτέλεσμα της προβολής ενός αρχείου με τέτοιο κώδικα χρησιμοποιώντας το πρόγραμμα περιήγησης Internet Explorer φαίνεται στην Εικ. 1.4. Όπως μπορείτε να δείτε, η τελευταία παράγραφος, που σύμφωνα με τον κώδικά μας θα έπρεπε να έχει τεντωθεί σε πλάτος, εμφανίζεται από τον Internet Explorer με τον ίδιο τρόπο όπως η πρώτη. Αυτή η περίπτωση μπορεί να χρησιμεύσει ως σαφές παράδειγμα του πώς τα προγράμματα περιήγησης αντιλαμβάνονται διαφορετικά τον κώδικα HTML. Στην περίπτωσή μας, ο Internet Explorer απλώς αγνόησε την άγνωστη παράμετρο, χρησιμοποιώντας την τυπική επιλογή εμφάνισης.
Ρύζι. 1.4. Παράθυρο προγράμματος περιήγησης που δείχνει το αποτέλεσμα του αρχείου που εμφανίζεται στην Λίστα 1.4
Μερικές φορές, για να διαχωρίσουν περαιτέρω μια παράγραφο από την άλλη, οι δημιουργοί ιστοσελίδων προσπαθούν να χρησιμοποιήσουν κενές παραγράφους, δηλαδή, δεν υπάρχει τίποτα μεταξύ των ετικετών έναρξης και τέλους της παραγράφου. Σύμφωνα με τις προδιαγραφές, τα προγράμματα περιήγησης θα πρέπει απλώς να αγνοούν τέτοιες κατασκευές. Επομένως, για να διαχωρίσετε παραγράφους ή να επιβάλετε μια αλλαγή γραμμής εντός μιας παραγράφου, θα πρέπει να χρησιμοποιήσετε την ετικέτα
. Αυτή είναι μια ετικέτα οδηγιών. Απλώς επισημαίνει το μέρος όπου η οθόνη πρέπει να μετακινηθεί σε άλλη γραμμή. Ένα παράδειγμα του τρόπου με τον οποίο αυτή η ετικέτα μπορεί να χρησιμοποιηθεί για την επίτευξη και των δύο αυτών στόχων εμφανίζεται στο έγγραφο HTML του οποίου ο κώδικας εμφανίζεται στη Λίστα 1.5.
Λίστα 1.5
"http://www.w3.org/TR/html4/strict.dtd">
.
Αναγκαστικά σπασίματα γραμμής
Η παράγραφος που εμείς
Αναγκαστικά σχισμένο
Επόμενη παράγραφος
Παράγραφος μετά από αναγκαστικό διάλειμμα
Και πώς φαίνεται αυτό το αρχείο κατά την προβολή του χρησιμοποιώντας ένα πρόγραμμα περιήγησης φαίνεται στην Εικ. 1.5.
Ρύζι. 1.5. Παράθυρο προγράμματος περιήγησης που δείχνει το αποτέλεσμα του αρχείου που εμφανίζεται στην Λίστα 1.5
Ετικέτα
εκτός από τις γενικές παραμέτρους αναγνώρισης έχει και την παράμετρο Σαφή, το οποίο χρησιμοποιείται για την ακριβέστερη ευθυγράμμιση του κειμένου όταν αναδιπλώνεται γύρω από ένα αντικείμενο, όπως ένα γραφικό που είναι ενσωματωμένο σε μια ιστοσελίδα. Η τιμή αυτής της παραμέτρου μπορεί να είναι μία από τέσσερις προκαθορισμένες λέξεις-κλειδιά: κανένα, αριστερά, δεξιά, όλα.
Η τιμή none είναι η προεπιλεγμένη και υποδεικνύει ότι η επόμενη γραμμή θα ξεκινήσει από εκεί που θα ξεκινούσε κανονικά χωρίς αυτήν την παράμετρο. Εννοια αριστεράυποδεικνύει ότι η επόμενη γραμμή θα ξεκινά στο αριστερό περιθώριο του αντικειμένου που είναι τυλιγμένο σε κείμενο. Εάν πρέπει να χρησιμοποιήσετε το σωστό περιθώριο για αυτούς τους σκοπούς, τότε θα πρέπει να χρησιμοποιήσετε την τιμή σωστά. Και το νόημα όλαλέει στο πρόγραμμα περιήγησης ότι μπορεί να χρησιμοποιήσει τόσο το αριστερό όσο και το δεξί περιθώριο του αντικειμένου, αρκεί το κείμενο να εμφανίζεται όσο πιο συμπαγή γίνεται.
Τώρα ας προχωρήσουμε στην εξέταση του σχεδιασμού γραμματοσειράς του κειμένου. Σε οποιοδήποτε σημείο μιας παραγράφου, μπορούμε να χρησιμοποιήσουμε μια ετικέτα με ένα συγκεκριμένο σύνολο παραμέτρων, οι οποίες θα καθορίσουν την εμφάνιση της γραμματοσειράς που θα χρησιμοποιηθεί για την εμφάνιση του κειμένου που βρίσκεται μετά από αυτήν την ετικέτα. Ο τερματισμός αυτής της ετικέτας πραγματοποιείται χρησιμοποιώντας το ζεύγος κλεισίματός της .
Ετικέτα έχει τις ακόλουθες εγγενείς παραμέτρους: Μέγεθος, χρησιμοποιείται για να υποδείξει το μέγεθος της γραμματοσειράς που θα χρησιμοποιηθεί, χρώμα- για να ορίσετε το χρώμα των χαρακτήρων γραμματοσειράς και πρόσωπο, υποδεικνύοντας ποια γραμματοσειρά θα χρησιμοποιηθεί για την εμφάνιση κειμένου. Ας δούμε αυτές τις παραμέτρους.
Όπως μόλις είπαμε, η παράμετρος μεγέθους χρησιμοποιείται για τον καθορισμό του μεγέθους των χαρακτήρων στη γραμματοσειρά που χρησιμοποιείται. Οι τιμές για αυτήν την παράμετρο είναι αριθμοί από το ένα έως το επτά. Υποδηλώνουν ένα συγκεκριμένο σχετικό μέγεθος χαρακτήρων. Το γεγονός είναι ότι στην HTML δεν μπορείτε να ορίσετε το απόλυτο μέγεθος των χαρακτήρων σε σημεία, όπως συνηθίζουμε να κάνουμε σε κανονικές εφαρμογές γραφείου. Ο χρήστης θα βλέπει μια ιστοσελίδα στον υπολογιστή του και δεν γνωρίζουμε εκ των προτέρων ποιες γραμματοσειρές μπορεί να έχει εγκαταστήσει και ποια μεγέθη είναι διαθέσιμα. Επομένως, μπορούμε μόνο να καθορίσουμε το σχετικό μέγεθος γραμματοσειράς και το ίδιο το πρόγραμμα περιήγησης του χρήστη θα επιλέξει το καταλληλότερο μέγεθος.
Μπορούμε επίσης να καθορίσουμε μια αλλαγή στο μέγεθος της γραμματοσειράς ως τιμή της παραμέτρου μεγέθους. Για παράδειγμα, για να αυξήσετε το μέγεθος της γραμματοσειράς κατά ένα επίπεδο, χρησιμοποιήστε την ακόλουθη κατασκευή:
Και για να μειώσετε το μέγεθος των χαρακτήρων κατά δύο επίπεδα, χρησιμοποιήστε τον ακόλουθο κώδικα:
Ωστόσο, για να χρησιμοποιήσετε τέτοιες δομές είναι απαραίτητο να ξεκινήσετε από ένα ορισμένο βασικό μέγεθος. Για να ορίσετε αυτό το μέγεθος, χρησιμοποιήστε την ετικέτα με την ίδια παράμετρο Μέγεθος. Εάν αυτή η ετικέτα δεν χρησιμοποιείται, τότε το τρίτο επίπεδο θα χρησιμοποιηθεί ως βασικό μέγεθος χαρακτήρων. Ας δώσουμε ένα παράδειγμα χρήσης αυτών των ετικετών.
Λίστα 1.6.
Μέγεθος συμβόλου
Στυλ χαρακτήρων
Το κείμενο είναι έντονη ή πλάγια γραφή
Και ίσως ταυτόχρονα έντονη και πλάγια γραφή
Συμβαίνει τόνισεκαι μη διασταυρωμένο.
ή μονοδιάστημα.
Μπορούμε να αυξήσουμε και να μειώσουμε το μέγεθος των χαρακτήρων.
Όπως μπορείτε να δείτε από το παράδειγμα, μπορούμε να συνδυάσουμε διαφορετικά στυλ μεταξύ τους. Θα πρέπει όμως να είστε προσεκτικοί με τη σειρά με την οποία τοποθετείτε τις ετικέτες. Οι ετικέτες ανοίγματος και κλεισίματος πρέπει και οι δύο να βρίσκονται μέσα σε άλλες ετικέτες που είχαν εφαρμοστεί προηγουμένως. Ένα παράδειγμα αυτού μπορεί να δει κανείς στη δέκατη γραμμή της καταχώρισης. Και πώς φαίνεται αυτό το έγγραφο HTML όταν προβάλλεται χρησιμοποιώντας ένα πρόγραμμα περιήγησης φαίνεται στην Εικ. 1.7.
Εξετάσαμε τους τρόπους με τους οποίους ορίζονται οι διάφορες παράμετροι εμφάνισης κειμένου. Ωστόσο, η HTML παρέχει μερικούς βασικούς τρόπους εμφάνισης κειμένου που δεν χρειάζεται να προσδιορίζονται με μια ολόκληρη δέσμη ετικετών. Έχουν τις δικές τους ετικέτες, ορίζονται δηλαδή ορισμένες κατηγορίες κειμένου που εμφανίζονται με προκαθορισμένο τρόπο. Όλες αυτές οι κατηγορίες χρησιμοποιούνται συχνότερα στην επιστημονική βιομηχανία και στη βιομηχανία υπολογιστών. Ας τις απαριθμήσουμε.
- Ένας όρος επισημαίνεται στο κείμενο χρησιμοποιώντας ένα ζευγάρι ετικετών και .
- Η "βελτιωμένη" επισήμανση, σχεδιασμένη για να προσελκύει περαιτέρω την προσοχή, δημιουργείται χρησιμοποιώντας μια ετικέτα και το διπλό κλείσιμό της.
- Χρησιμοποιώντας και ετικέτες, υποδεικνύεται ότι το κείμενο που βρίσκεται μεταξύ τους είναι μια προσφορά.
- Ο ορισμός ενός συγκεκριμένου όρου επισημαίνεται χρησιμοποιώντας ετικέτες και .
- Ένα ζεύγος ετικετών χρησιμοποιείται για την επισήμανση του πηγαίου κώδικα σε οποιαδήποτε γλώσσα προγραμματισμού.
- Οι πληροφορίες κειμένου που εξάγονται από το πρόγραμμα μορφοποιούνται χρησιμοποιώντας ετικέτες AND.
- Το κείμενο που εισάγεται από τον χρήστη υποδεικνύεται με και ετικέτες. P Οι μεταβλητές στον πηγαίο κώδικα των προγραμμάτων ορίζονται χρησιμοποιώντας ένα ζεύγος ετικετών και .
- Ετικέτες και επισημάνετε συντομογραφίες.
- Και οι καθιερωμένοι συνδυασμοί γραμμάτων που δεν είναι συντομογραφίες, δηλαδή ακρωνύμια, επισημαίνονται με ετικέτες και .
Ωστόσο, δεν αρκεί να γνωρίζετε τα ονόματα των ετικετών, πρέπει επίσης να κατανοήσετε με σαφήνεια πώς ακριβώς μορφοποιούν το κείμενο. Και εδώ δεν μπορείτε να κάνετε χωρίς παράδειγμα.
Ρύζι. 1.7. Παράθυρο προγράμματος περιήγησης που δείχνει το αποτέλεσμα του αρχείου που εμφανίζεται στην Λίστα 1.7
Λίστα 1.8
Τυπικές επιλογές εμφάνισης
Αυτό είναι κανονικό κείμενο
Αυτή είναι μια επιλογή. Και πιο αξιοσημείωτη επισήμανση
Αυτό είναι ένα απόσπασμα και αυτός είναι ένας ορισμός.
Μπορούμε να γράψουμε κώδικα προγράμματος, κείμενο, από τον χρήστη,
κείμενο εξόδου και μη μεταβλητές
Έτσι εμφανίζονται οι συντομογραφίες. Και έτσι - αρκτικόλεξα.
Το αποτέλεσμα της εμφάνισης ενός τέτοιου εγγράφου HTML φαίνεται στο Σχ. 1.8.
Ρύζι. 1.8. Παράθυρο προγράμματος περιήγησης που δείχνει το αποτέλεσμα του αρχείου που εμφανίζεται στην Λίστα 1.8
Πολύ συχνά υπάρχει ανάγκη να τοποθετηθεί κείμενο σε μια ιστοσελίδα που έχει προετοιμαστεί εκ των προτέρων χρησιμοποιώντας κάποιο πρόγραμμα επεξεργασίας κειμένου που έχει ήδη μορφοποιήσει ανεξάρτητα το κείμενο. Σε αυτήν την περίπτωση, η μορφή του κειμένου, οι παύλες και η τοποθέτησή του εξαρτώνται άμεσα από το μήκος της γραμμής σε χαρακτήρες που ορίστηκε σε αυτό το πρόγραμμα επεξεργασίας κειμένου. Εάν το κείμενο τοποθετηθεί σε μια ιστοσελίδα χρησιμοποιώντας συμβατικά μέσα, αυτή η μορφοποίηση φυσικά θα σπάσει. Επομένως, εισήχθη μια προσαρμοσμένη ετικέτα για αυτά τα προδιαμορφωμένα αποσπάσματα. Αυτή η ετικέτα έχει μια παράμετρο πλάτους, η τιμή της οποίας είναι το μήκος της γραμμής σε χαρακτήρες. Φυσικά, συνιστάται να επιβάλετε την ακριβή γραμματοσειρά που χρησιμοποιήθηκε κατά τη μορφοποίηση του κειμένου πριν χρησιμοποιήσετε αυτήν την ετικέτα. Έτσι, για να εισαγάγουμε προδιαμορφωμένο κείμενο, μπορούμε να χρησιμοποιήσουμε το ακόλουθο απόσπασμα κώδικα:
κείμενο.
Σε αυτό το παράδειγμα, καθορίζουμε ότι το κείμενο θα πρέπει να εμφανίζεται με βάση την υπόθεση ότι η γραμμή έχει μήκος εξήντα χαρακτήρες. Ταυτόχρονα, οι κανόνες για «συμπτυγμένους χώρους» δεν ισχύουν επίσης για προδιαμορφωμένο κείμενο. Το γεγονός είναι ότι όταν το πρόγραμμα περιήγησης συναντά πολλά διαδοχικά κενά στο απλό κείμενο μιας ιστοσελίδας, τα συμπτύσσει σε ένα διάστημα. Αλλά το προδιαμορφωμένο κείμενο δεν υφίσταται τέτοιο μετασχηματισμό, που του επιτρέπει να διατηρήσει τη μορφοποίησή του, η οποία στους απλούστερους επεξεργαστές κειμένου πραγματοποιείται χρησιμοποιώντας χαρακτήρες κενού διαστήματος. Στην HTML, παρεμπιπτόντως, ο χαρακτήρας tab θεωρείται επίσης χαρακτήρας διαστήματος.
Θα πρέπει επίσης να σημειωθεί ότι η HTML παρέχει τη δυνατότητα χρήσης ετικετών για την εμφάνιση άνω εισαγωγικών, τα οποία συνήθως χρησιμοποιούνται για την επισήμανση της ευθείας ομιλίας και ορισμένων εισαγωγικών. Οι προσφορές παρέχονται με μια ετικέτα με το δίδυμο που τελειώνει . Και για να πλαισιώσει την ευθεία ομιλία, συνήθως χρησιμοποιούνται ετικέτες και. Ταυτόχρονα, η ετικέτα έχει μια παράμετρο παραπομπής, η τιμή της οποίας είναι η διεύθυνση δικτύου, που ονομάζεται επίσης URL, του πόρου του Διαδικτύου στον οποίο βρισκόταν αρχικά το κείμενο που αναφέρεται. Και μαζί με την ετικέτα, χρησιμοποιείται συνήθως η παράμετρος lang, η τιμή της οποίας είναι ο κωδικός προσδιορισμός της γλώσσας, σύμφωνα με τους κανόνες στίξης της οποίας τοποθετούνται τα περιοριστικά εισαγωγικά. Δεν είναι μυστικό ότι διαφορετικές γλώσσες χρησιμοποιούν διαφορετικά εισαγωγικά.
Πρέπει να αναφερθεί και το πρόβλημα των μεταγραφών. Συνήθως, οι δημιουργοί ιστοσελίδων δεν σκέφτονται καν αυτό το πρόβλημα και τα προγράμματα περιήγησης δεν ασχολούνται με την αναδίπλωση λέξεων. Εάν μια λέξη δεν χωράει σε μια γραμμή, απλώς μετακινείται σε άλλη γραμμή. Αλλά αυτός δεν είναι ο μόνος σωστός τρόπος εμφάνισης κειμένου. Μπορεί κάλλιστα να προκύψει μια κατάσταση όταν πρέπει να εμφανίσετε κείμενο χρησιμοποιώντας συλλαβισμό λέξεων. Η HTML παρέχει δύο τύπους παύλων - σαφείς και λεγόμενους "μαλακούς". Ο ρητός παύλα δημιουργείται χρησιμοποιώντας το σύμβολο en παύλα, το οποίο συνήθως αντικαθίσταται από αριθμητικές αντικαταστάσεις κειμένου "-". . Ακόμα κι αν είναι στη μέση της γραμμής. Ως εκ τούτου, χρησιμοποιούν συχνά «μαλακές» μεταφορές. Δημιουργούνται χρησιμοποιώντας την αντικατάσταση κειμένου "-". Σε αυτήν την περίπτωση, τα σύμβολα μαλακής παύλας δεν είναι ορατά στο κείμενο και μόνο στην περίπτωση που οποιαδήποτε λέξη στην οποία εισήχθησαν αυτά τα σύμβολα δεν ταιριάζει εξ ολοκλήρου στη γραμμή, φέρεται με παύλα, αναλύεται σε συλλαβές, σύμφωνα με το εισαγόμενο " soft» παύλες. Και μόνο ένα από τα σύμβολα μαλακού συλλαβισμού σε αυτή τη λέξη γίνεται ορατό.
Η HTML σάς επιτρέπει επίσης να εμφανίζετε εκθέτες και δείκτες χρησιμοποιώντας τις ετικέτες της. Ένα ζεύγος ετικετών και χρησιμοποιείται για τη δημιουργία ενός εκθέτη και ένας δείκτης πρέπει να περιβάλλεται από ετικέτες και. Ας δούμε ένα παράδειγμα χρήσης αυτών των ετικετών.
Λίστα 1.9
Bepx και συνδρομητές
Το νερό είναι Η20
Λόγος μάζας και ενέργειας - E = mc2
Το πώς ακριβώς το πρόγραμμα περιήγησης εμφανίζει ευρετήρια φαίνεται στην Εικ. 1.9.
Ρύζι. 1.9. Παράθυρο προγράμματος περιήγησης που δείχνει το αποτέλεσμα του αρχείου που εμφανίζεται στην Λίστα 1.9
Ο σχεδιασμός κειμένου περιλαμβάνει επίσης οριζόντιες γραμμές, οι οποίες συχνά διαχωρίζουν σημαντικά μέρη του περιεχομένου κειμένου των ιστοσελίδων. Μια γραμμή εισάγεται στο κείμενο ενός εγγράφου HTML χρησιμοποιώντας την ετικέτα. Η ετικέτα έχει πολλές παραμέτρους που σας επιτρέπουν να ρυθμίσετε με ακρίβεια την εμφάνιση της οριζόντιας γραμμής.
Η παράμετρος align σας επιτρέπει να καθορίσετε την οριζόντια στοίχιση της γραμμής. Η παράμετρος μπορεί να έχει μία από τις τρεις προκαθορισμένες τιμές: αριστερά, δεξιά και κέντρο, οι οποίες ωθούν την οριζόντια γραμμή στο αριστερό ή το δεξί άκρο της θύρας προβολής ή στο κέντρο της, αντίστοιχα. Η προεπιλεγμένη τιμή είναι το κέντρο. Εάν η ετικέτα περιλαμβάνει την παράμετρο noshade, τότε η εμφανιζόμενη οριζόντια γραμμή δεν θα έχει σκιά. Και η τελευταία παράμετρος πλάτους σάς επιτρέπει να ορίσετε το μήκος της οριζόντιας γραμμής. Η προεπιλεγμένη τιμή είναι "100%". Και το ύψος της γραμμής σε pixel ορίζεται χρησιμοποιώντας την παράμετρο μεγέθους. Ας δούμε τη χρήση όλων αυτών των παραμέτρων χρησιμοποιώντας ένα παράδειγμα.
Λίστα 1.10
Αυτή είναι μια κανονική γραμμή που εμφανίζεται από προεπιλογή
Αυτή είναι μια συντομευμένη γραμμή που πιέζεται προς τα αριστερά
Αυτή είναι μια συντομευμένη γραμμή που βρίσκεται στο κέντρο
Αυτή είναι μια συντομευμένη γραμμή που πιέζεται προς τα δεξιά
Αυτή είναι μια παχιά γραμμή χωρίς σκιά
Πώς φαίνεται ένα τέτοιο έγγραφο HTML όταν προβάλλεται χρησιμοποιώντας ένα πρόγραμμα περιήγησης φαίνεται στην Εικ. 1.10.
Και εδώ, ίσως, μπορούμε να ολοκληρώσουμε την εξέταση των δυνατοτήτων μορφοποίησης κειμένου που είναι εγγενείς στην HTML.
Ρύζι. 1.10. Παράθυρο προγράμματος περιήγησης που δείχνει το αποτέλεσμα του αρχείου που εμφανίζεται στη Λίστα 1.10
Για τον οπτικό σχεδιασμό και την επισήμανση κειμένου σε HTML, χρησιμοποιούνται τα ακόλουθα στοιχεία:
ΙΣΧΥΡΟΣΚάνει το κείμενο με έντονη γραφή:
Μεταξύ αυτών των ετικετών το κείμενο θα είναι με έντονη γραφή EM (Έμφαση)Ορίζει το κείμενο μεταξύ των ετικετών ανοίγματος και κλεισίματος σε πλάγια γραφή:
Αυτό το κείμενο θα είναι με πλάγιους χαρακτήρες U (Υπογράμμιση)Εμφανίζει κείμενο τοποθετημένο μεταξύ των ετικετών ανοίγματος και κλεισίματος όπως υπογραμμίζεται:
Αυτό το κείμενο είναι υπογραμμισμένοΥΠΟΕμφανίζει το κείμενο που περικλείεται μεταξύ των ετικετών ανοίγματος και κλεισίματος ως δείκτης από το κύριο κείμενο.
Τύπος προπανίου C 3 H 8Αποτέλεσμα: C 3 H 8
ΓΟΥΛΙΑΧρησιμοποιείται για τη δημιουργία ενός εκθέτη. Για παράδειγμα:
Θα μοιάζει με 2 5 = 32.
ΓΡΑΜΜΑΤΟΣΕΙΡΑΧρησιμοποιείται για την αλλαγή χρώματος, γραμματοσειράς και μεγεθών και κειμένου.
Γνωρίσματα:
SIZE - μπορείτε να το χρησιμοποιήσετε για να αλλάξετε το μέγεθος της γραμματοσειράς. Πιθανές τιμές είναι 1, 2, 3, 4, 5, 6, 7.
COLOR - ορίζει το χρώμα του κειμένου.
FACE - για τον προσδιορισμό της γραμματοσειράς (Times New Roman, Arial, Tahoma)
Για παράδειγμα:
Αυτό το κείμενο δεν είναι μορφοποιημένοΜεγεθυμένη κίτρινη γραμματοσειρά
Κόκκινο κείμενο 3 μεγεθών
Κατά την προβολή σε πρόγραμμα περιήγησης θα δούμε:
SIZE="+2" αυτό σημαίνει ότι η γραμματοσειρά μεγεθύνεται κατά 2 μονάδες σε σύγκριση με την τυπική. Το τυπικό μέγεθος γραμματοσειράς είναι 3.
HRΧρησιμοποιείται για την εισαγωγή μιας οριζόντιας γραμμής στο κείμενο. Ένα χαρακτηριστικό γνώρισμα είναι ότι δεν υπάρχει ετικέτα κλεισίματος.
Γνωρίσματα:
ALIGN – καθορίζει την ευθυγράμμιση της οριζόντιας γραμμής. Το χαρακτηριστικό μπορεί να λάβει τις ακόλουθες τιμές:
αριστερά – στοιχίζει στο αριστερό άκρο του εγγράφου.
δεξιά – ευθυγραμμίζεται προς τα δεξιά.
κέντρο – στοίχιση στο κέντρο του εγγράφου (προεπιλογή).
WIDTH – χρησιμοποιείται για τον προσδιορισμό του μήκους της γραμμής σε pixel ή του ποσοστού του πλάτους της σελίδας.
SIZE – πάχος γραμμής σε pixel.
NOSHADE – με αυτό το χαρακτηριστικό η γραμμή βάφεται ως συμπαγής. Χωρίς αυτό, η γραμμή φαίνεται ογκώδης.
COLOR – ορίστε το χρώμα της γραμμής.
Για παράδειγμα:
Κείμενο πριν από τη γραμμή Κείμενο μετά τη γραμμήΚαι αυτή είναι μια γραμμή πάχους 3 εικονοστοιχείων χωρίς noshade
Και εδώ είναι μια γραμμή με noshade χρώματος κόκκινο
Αποτέλεσμα:
Επόμενη σελίδα -
Όποτε είναι δυνατόν, εξηγήστε τον κωδικό σας όπου χρειάζεται.Χρησιμοποιήστε σχόλια για να εξηγήσετε τον κώδικά σας: τι κάνει, τι κάνει και γιατί χρησιμοποιείται η λύση που επιλέγετε.
(Αυτό το σημείο είναι προαιρετικό γιατί δεν υπάρχει νόημα να περιμένουμε ότι ο κώδικας θα είναι πάντα καλά τεκμηριωμένος. Η χρησιμότητα του σχολιασμού εξαρτάται από την πολυπλοκότητα του έργου και μπορεί να διαφέρει για τον κώδικα HTML και CSS.)
Εργασίες Ελέγξτε τις εργασίες για τη λίστα εργασιών σας χρησιμοποιώντας TODO.Επισημάνετε εργασίες χρησιμοποιώντας τη λέξη-κλειδί TODO. Μην χρησιμοποιείτε άλλες μορφές που χρησιμοποιούνται συνήθως όπως @@ .
Εσωκλείστε τις επαφές (όνομα χρήστη ή λίστα αλληλογραφίας) σε παρένθεση: TODO (επαφή) .
Περιγράψτε την εργασία μετά από άνω και κάτω τελεία, για παράδειγμα: TODO: Εργασία.
Συνιστάται: (# TODO(Ivan Ivanov): Αντιμετωπίστε την ευθυγράμμιση #) Δοκιμή
Συνιστάται:
- αγγούρια
- Ντομάτες
(Συνιστάται η χρήση HTML με τον τύπο περιεχομένου κειμένου/html. Μην χρησιμοποιείτε XHTML, καθώς η εφαρμογή/xhtml+xml έχει κακή υποστήριξη του προγράμματος περιήγησης και περιορίζει τις επιλογές βελτιστοποίησης.)
Εγκυρότητα HTML Χρησιμοποιήστε έγκυρο HTML όποτε είναι δυνατόν.Χρησιμοποιήστε έγκυρο κώδικα HTML εκτός εάν η χρήση δεν σας επιτρέπει να επιτύχετε το μέγεθος αρχείου που απαιτείται για το επιθυμητό επίπεδο απόδοσης.
W3C HTML validator (Αγγλικά) για να ελέγξετε την εγκυρότητα του κώδικα.
Η εγκυρότητα είναι μια σημαντική και μετρήσιμη ποιότητα κώδικα. Η σύνταξη έγκυρου HTML προωθεί την εκμάθηση τεχνικών απαιτήσεων και περιορισμών και διασφαλίζει τη σωστή χρήση του HTML.
Δεν συνιστάται: Ελέγξτε απλώς ελέγξτε
Συνιστάται: Ελέγξτε μόνο μια επιταγή.
Χρησιμοποιήστε στοιχεία (μερικές φορές ονομάζονται εσφαλμένα "ετικέτες") για τους σκοπούς τους: επικεφαλίδες για επικεφαλίδες, p για παραγράφους, a για συνδέσμους κ.λπ.
Αυτό διευκολύνει την ανάγνωση, την επεξεργασία και τη συντήρηση του κώδικα.
Εναλλακτικά μέσα Να συμπεριλαμβάνετε πάντα εναλλακτικό περιεχόμενο πολυμέσων.Προσπαθήστε να παρέχετε εναλλακτικό περιεχόμενο για μέσα, όπως εικόνες, βίντεο ή κινούμενα σχέδια που ορίζονται με χρήση καμβά. Για εικόνες, αυτό είναι ένα εναλλακτικό κείμενο με νόημα (alt) και για βίντεο και ήχο, μεταγραφή του κειμένου και λεζάντα, αν είναι δυνατόν.
Εναλλακτικό περιεχόμενο μπορεί να βοηθήσει άτομα με αναπηρίες. Για παράδειγμα, είναι δύσκολο για ένα άτομο με χαμηλή όραση να καταλάβει τι φαίνεται στην εικόνα, εάν το @alt δεν έχει ρυθμιστεί για αυτό. Άλλα άτομα μπορεί να δυσκολεύονται να κατανοήσουν τι λέγεται σε μια εγγραφή βίντεο ή ήχου.
(Εάν το alt της εικόνας είναι περιττό ή χρησιμοποιείται απλώς για διακοσμητικούς σκοπούς σε μέρη όπου δεν μπορεί να χρησιμοποιηθεί το CSS, χρησιμοποιήστε ένα κενό alt κείμενο alt="" )
Διαχωρισμός αρμοδιοτήτων Ξεχωριστή δομή, σχεδιασμός και συμπεριφορά.Διατηρήστε τη δομή (σήμανση), την εμφάνιση (στυλ) και τη συμπεριφορά (σενάρια) χωριστά και προσπαθήστε να περιορίσετε τις αλληλεπιδράσεις μεταξύ τους στο ελάχιστο.
Βεβαιωθείτε ότι τα έγγραφα και τα πρότυπα περιέχουν μόνο HTML και ότι η HTML χρησιμεύει μόνο για τον καθορισμό της δομής του εγγράφου. Μετακινήστε όλο τον κώδικα που είναι υπεύθυνος για τη σχεδίαση σε αρχεία στυλ και τον κώδικα που είναι υπεύθυνος για τη συμπεριφορά σε σενάρια.
Προσπαθήστε να μειώσετε τις διασταυρώσεις τους στο ελάχιστο, συμπεριλαμβάνοντας έναν ελάχιστο αριθμό αρχείων στυλ και σεναρίων στα πρότυπά σας.
Ο διαχωρισμός της δομής από την παρουσίαση και τη συμπεριφορά διευκολύνει τη διατήρηση του κώδικα. Η αλλαγή προτύπων και εγγράφων HTML διαρκεί πάντα περισσότερο από την αλλαγή αρχείων στυλ ή σεναρίων.
Δεν συνιστάται: Η HTML είναι χάλια HTML είναι χάλια
Έχω διαβάσει για αυτό κάπου πριν, αλλά τώρα όλα είναι ξεκάθαρα: Η HTML είναι εντελώς σκουπίδια!!1Δεν μπορώ να πιστέψω ότι για να αλλάξεις το σχέδιο, πρέπει να κάνεις τα πάντα από την αρχή κάθε φορά.
Συνιστάται: Ο πρώτος μου επανασχεδιασμός μόνο για CSS Το νέο μου σχέδιο CSS
Διάβασα για αυτό στο παρελθόν, αλλά τελικά το έκανα μόνος μου: χρησιμοποιώ την αρχή του διαχωρισμού των ανησυχιών και δεν σπρώχνω το σχέδιο σε HTML
Τι τέλειο!
Μνημονικοί σύνδεσμοι Μην χρησιμοποιείτε μνημονικούς συνδέσμους.Η μόνη εξαίρεση σε αυτόν τον κανόνα είναι οι χαρακτήρες υπηρεσίας HTML (για παράδειγμα< и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).
Προαιρετικές ετικέτες Μη χρησιμοποιείτε προαιρετικές ετικέτες. (όχι απαραίτητο)Για να μειώσετε το μέγεθος του αρχείου και να βελτιώσετε την αναγνωσιμότητα του κώδικα, μπορείτε να παραλείψετε προαιρετικές ετικέτες. Η προδιαγραφή HTML5 έχει μια λίστα προαιρετικών ετικετών.
(Μπορεί να χρειαστεί λίγος χρόνος για να χρησιμοποιηθεί ευρέως αυτή η προσέγγιση επειδή είναι πολύ διαφορετική από αυτή που διδάσκονται συνήθως οι προγραμματιστές ιστού. Από άποψη συνέπειας, κώδικα και απλότητας, είναι καλύτερο να παραλείψετε όλες τις προαιρετικές ετικέτες αντί για ορισμένες).
Δεν συνιστάται: Σπαταλάμε bytes - σπαταλάμε χρήματα.
Προτείνεται: Τα byte είναι χρήματα!
Ετσι ώστε
Χαρακτηριστικό "type" Μην καθορίζετε το χαρακτηριστικό type όταν προσθέτετε στυλ και σενάρια σε ένα έγγραφο.Μην χρησιμοποιείτε το χαρακτηριστικό type όταν συνδέετε στυλ (εκτός εάν χρησιμοποιείτε κάτι διαφορετικό από CSS) και σενάρια (εκτός όταν χρησιμοποιείτε κάτι διαφορετικό από JavaScript).
Ο καθορισμός του χαρακτηριστικού τύπου σε αυτήν την περίπτωση δεν είναι απαραίτητος επειδή η HTML5 χρησιμοποιεί κείμενο/css (Αγγλικά) και κείμενο/javascript (Αγγλικά) από προεπιλογή. Αυτό θα λειτουργήσει ακόμη και σε παλαιότερα προγράμματα περιήγησης.
Δεν προτείνεται:
Συνιστάται:
Δεν προτείνεται:
Συνιστάται:
Ανεξάρτητα από τα στυλ που καθορίζονται για το στοιχείο (το CSS σάς επιτρέπει να αλλάξετε τη συμπεριφορά του στοιχείου χρησιμοποιώντας την ιδιότητα εμφάνισης), τυλίξτε κάθε μπλοκ ή στοιχείο πίνακα σε μια νέα γραμμή.
Επίσης, κάντε εσοχή σε όλα τα στοιχεία που είναι ένθετα μέσα σε ένα στοιχείο μπλοκ ή πίνακα.
(Εάν αντιμετωπίζετε προβλήματα με το κενό διάστημα μεταξύ των στοιχείων της λίστας, μπορείτε να τοποθετήσετε όλα τα στοιχεία li σε μία γραμμή. Συνιστάται η Lint να εκδίδει μια προειδοποίηση αντί για ένα σφάλμα σε αυτήν την περίπτωση.
Συνιστάται:
- Μάσα
- Γκλάσα
- Cheburash
Συνιστάται:
| $ 5.00 | $ 4.50 |
Εκτός από τις περιπτώσεις όπου απαιτείται κωδικός που εξαρτάται από το πρόγραμμα περιήγησης ή σφάλματα επικύρωσης, χρησιμοποιήστε έγκυρο κώδικα CSS.
Χρησιμοποιήστε εργαλεία όπως το W3C CSS Validator για να επικυρώσετε τον κώδικά σας.
Η εγκυρότητα είναι μια σημαντική και μετρήσιμη ποιότητα κώδικα. Η σύνταξη έγκυρου CSS βοηθά στην εξάλειψη του περιττού κώδικα και διασφαλίζει τη σωστή χρήση των φύλλων στυλ...
Αναγνωριστικά και ονόματα κλάσεων Χρησιμοποιήστε μπαλαντέρ ή ονόματα και αναγνωριστικά κλάσεων με νόημα.Αντί να χρησιμοποιείτε κωδικούς ή να περιγράφετε την εμφάνιση ενός στοιχείου, δοκιμάστε να εκφράσετε το νόημα της δημιουργίας του στο όνομα μιας κλάσης ή ενός αναγνωριστικού ή να του δώσετε ένα όνομα προτύπου...
Τα ονόματα μπαλαντέρ είναι απλά ονόματα παραλλαγών για στοιχεία που δεν έχουν ιδιαίτερο σκοπό ή δεν διακρίνονται από τα αδέρφια τους. Συνήθως χρειάζονται ως «Βοηθοί».
Η χρήση ονομάτων λειτουργιών ή προτύπων μειώνει την ανάγκη για περιττές αλλαγές στο έγγραφο ή τα πρότυπα.
Καταργήθηκε: /* Καταργήθηκε: χωρίς νόημα */ #yee-1901 () /* Καταργήθηκε: περιγραφή εμφάνισης */ .button-green() .clear()
Συνιστάται: /* Συνιστάται: ακριβής και στο σημείο */ #gallery () #login () .video () /* Προτείνεται: όνομα προτύπου */ .aux () .alt ()
Προσπαθήστε να διατυπώσετε τι ακριβώς πρέπει να κάνει αυτό το στοιχείο, ενώ θα είστε όσο το δυνατόν πιο σύντομοι.
Αυτή η χρήση κλάσεων και αναγνωριστικών συμβάλλει στο να γίνει ο κώδικας πιο κατανοητός και πιο αποτελεσματικός.
Επιλογείς τύπων Αποφύγετε τη χρήση ονομάτων κλάσεων ή αναγνωριστικών με επιλογείς τύπου στοιχείου (ετικέτα).Εκτός εάν είναι απολύτως απαραίτητο (για παράδειγμα με βοηθητικές κλάσεις), μην χρησιμοποιείτε ονόματα στοιχείων με ονόματα κλάσεων ή αναγνωριστικά.
Συντομεύσεις για ιδιότητες Χρησιμοποιήστε συντομεύσεις για ιδιότητες όποτε είναι δυνατόν.Το CSS προσφέρει πολλές διαφορετικές φόρμες συντομογραφίας (όπως γραμματοσειρά ), οι οποίες συνιστώνται να χρησιμοποιούνται όπου είναι δυνατόν, ακόμη και αν έχει καθοριστεί μόνο μία από τις τιμές.
Η χρήση συντομογραφίας ιδιοτήτων είναι χρήσιμη για μεγαλύτερη αποτελεσματικότητα και καλύτερη κατανόηση του κώδικά σας.
Δεν συνιστάται: /* Δεν συνιστάται */ border-top-style: none; γραμματοσειρά-οικογένεια: palatino, georgia, serif; μέγεθος γραμματοσειράς: 100%; Ύψος γραμμής: 1,6; padding-bottom: 2em; padding-αριστερά: 1em; padding-right: 1em; padding-top: 0;
Συνιστάται: /* Συνιστάται */ border-top: 0; γραμματοσειρά: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
Μην προσδιορίζετε μονάδες για μηδενικές τιμές εκτός εάν υπάρχει λόγος να το κάνετε.
0 σε ολόκληρο το τμήμα ενός κλάσματος Μην βάζετε «0» σε ολόκληρο το μέρος των κλασμάτων.Μην βάζετε 0 στο ακέραιο μέρος σε τιμές μεταξύ -1 και 1.
Αποσπάσματα σε συνδέσμους Μην χρησιμοποιείτε εισαγωγικά σε συνδέσμουςΜην χρησιμοποιείτε εισαγωγικά ("" , "") με το url() .
Ονόματα δεκαεξαδικών χρωμάτων Χρησιμοποιήστε δεκαεξαδικό συμβολισμό τριών χαρακτήρων όποτε είναι δυνατόν.Ο δεκαεξαδικός συμβολισμός τριών χαρακτήρων για τα χρώματα είναι μικρότερος και καταλαμβάνει λιγότερο χώρο.
Προθέματα Επιλογείς προθέματος με προθέματα μοναδικά για την τρέχουσα εφαρμογή. (όχι απαραίτητο)Σε μεγάλα έργα, καθώς και σε κώδικα που θα χρησιμοποιηθεί για άλλα έργα ή σε άλλους ιστότοπους, χρησιμοποιήστε προθέματα (ως χώρους ονομάτων) για αναγνωριστικά και ονόματα κλάσεων. Χρησιμοποιήστε σύντομους, μοναδικούς τίτλους ακολουθούμενους από παύλα.
Η χρήση χώρων ονομάτων βοηθά στην αποφυγή διενέξεων ονομάτων και μπορεί να διευκολύνει τη συντήρηση του ιστότοπου. Για παράδειγμα, κατά την αναζήτηση και την αντικατάσταση.
Διαχωριστικά σε τάξεις και αναγνωριστικά Διαχωρίστε λέξεις σε αναγνωριστικά και ονόματα κλάσεων χρησιμοποιώντας παύλα.Αποφύγετε να χρησιμοποιείτε οτιδήποτε άλλο εκτός από παύλα για να συνδέσετε λέξεις και συντομογραφίες στους επιλογείς για να βελτιώσετε την αναγνωσιμότητα και την ευκολία κατανόησης του κώδικά σας.
Δεν συνιστάται: /* Δεν συνιστάται: οι λέξεις "demo" και "image" δεν διαχωρίζονται */ .demoimage () /* Δεν συνιστάται: χρησιμοποιείται κάτω παύλα αντί για παύλα */ .error_status ()
Συνιστάται: /* Προτεινόμενο */ #video-id().ads-sample()
Μπορεί να είναι δελεαστικό να καταπολεμήσετε τις διαφορές του προγράμματος περιήγησης με φίλτρα CSS, hacks ή άλλες λύσεις. Όλες αυτές οι προσεγγίσεις θα πρέπει να θεωρούνται ως έσχατη λύση μόνο εάν θέλετε μια αποτελεσματική και εύκολα διατηρήσιμη βάση κώδικα. Με απλά λόγια, το να επιτραπεί ο εντοπισμός των εισβολών και του προγράμματος περιήγησης θα βλάψει το έργο μακροπρόθεσμα, καθώς σημαίνει ότι το έργο ακολουθεί τον δρόμο της ελάχιστης αντίστασης. Κάτι που διευκολύνει τη χρήση των hacks και επιτρέπει την ολοένα και συχνότερη χρήση τους, με αποτέλεσμα να χρησιμοποιούνται πολύ συχνά.
Κανόνες μορφοποίησης CSS Παραγγελία διαφημίσεων Ταξινόμηση διαφημίσεων αλφαβητικά.Καθορίστε τις δηλώσεις με αλφαβητική σειρά για να εξασφαλίσετε συνεπή κώδικα που είναι εύκολο να εργαστείτε.
Κατά την ταξινόμηση, αγνοήστε τα προθέματα του προγράμματος περιήγησης. Επιπλέον, εάν χρησιμοποιούνται πολλά προθέματα προγράμματος περιήγησης για μία ιδιότητα, πρέπει επίσης να ταξινομηθούν (για παράδειγμα -moz θα πρέπει να είναι πριν από το --webkit)
Εσοχές σε μπλοκ. Να γίνεται πάντα εσοχή περιεχομένου μπλοκ.Να δημιουργείτε πάντα εσοχή οποιουδήποτε περιεχομένου μπλοκ, όπως κανόνες εντός κανόνων ή δηλώσεων, για να εμφανίζεται η ιεραρχία και να γίνεται πιο κατανοητός ο κώδικας.
Μετά τις δηλώσεις Τοποθετήστε ένα ερωτηματικό μετά από κάθε δήλωση.Χρησιμοποιήστε ένα ερωτηματικό μετά από κάθε δήλωση για συνέπεια κώδικα και για να διευκολύνετε την προσθήκη νέων ιδιοτήτων.
Μετά τα ονόματα ιδιοτήτων Χρησιμοποιήστε κενά μετά τις άνω και κάτω τελείες στις δηλώσεις.Να χρησιμοποιείτε πάντα ένα διάστημα μετά την άνω και κάτω τελεία (αλλά όχι πριν) στις δηλώσεις, για σειρά στον κωδικό.
Διαχωρισμός επιλογέων και δηλώσεων Διαχωρισμός επιλογέων και δηλώσεων με αλλαγή γραμμής.Ξεκινήστε κάθε επιλογέα ή δήλωση σε μια νέα γραμμή.
Κανόνες διαχωρισμού Ξεχωριστοί κανόνες με αλλαγές γραμμής.Να βάζετε πάντα μια διαχωριστική γραμμή μεταξύ των κανόνων.
Κανόνες μετάδοσης CSS Κανόνες ομαδοποίησης Κανόνες ομάδας και υποδεικνύουν ομάδες με ένα σχόλιο. (όχι απαραίτητο)Όποτε είναι δυνατόν, η ομάδα κυβερνά μαζί. Υποδείξτε ομάδες με σχόλια και διαχωρίστε τις με αλλαγές γραμμής.
συμπέρασμα Να είναι συνεπήςΕάν επεξεργάζεστε κώδικα, αφιερώστε λίγα λεπτά για να καταλάβετε πώς είναι γραμμένος. Εάν οι μαθηματικοί τελεστές χωρίζονται με κενά, κάντε το ίδιο. Εάν τα σχόλια περιβάλλονται από παρενθέσεις ή παύλες, κάντε το ίδιο με τα σχόλιά σας.
Η ιδέα αυτού του οδηγού είναι να δημιουργήσει ένα κοινό λεξιλόγιο που επιτρέπει στους προγραμματιστές να επικεντρωθούν σε αυτό που θέλουν να εκφράσουν και όχι στο πώς.
Προσφέρουμε ομοιόμορφους κανόνες σχεδιασμού που σας επιτρέπουν να γράφετε κώδικα με το ίδιο στυλ, αλλά το στυλ κώδικα που χρησιμοποιείται ήδη στο έργο είναι επίσης σημαντικό.
Εάν ο κώδικάς σας είναι πολύ διαφορετικός από τον υπάρχοντα κώδικα, μπορεί να ρίξει τον ρυθμό του αναγνώστη και να δυσκολέψει την ανάγνωση. Προσπαθήστε να το αποφύγετε αυτό.
Σημείωση από τον μεταφραστή Θα ήθελα επίσης να σημειώσω ότι η Google εστιάζει κυρίως σε μεγάλα έργα μεγάλου φόρτου, όπου κάθε byte είναι ακριβό, επομένως αξίζει να λάβετε υπόψη ότι εάν προτείνουν να ξεκινήσετε κάθε επιλογέα σε μια νέα γραμμή ή να χρησιμοποιήσετε κενά αντί για καρτέλες, τότε αυτό σημαίνει κυρίως ότι ο κώδικας θα ελαχιστοποιηθεί και θα συμπιεστεί απαραίτητα πριν από τη χρήση στον ιστότοπο.Ευχαριστώ όλους όσους διάβασαν ως εδώ.
Ετικέτες:
- css
- html
- οδηγοί στυλ
Γεια σας, αγαπητοί αναγνώστες. Σήμερα θέλω να σας πω πώς να φτιάξετε όμορφες ετικέτες (ετικέτες) μόνο χρησιμοποιώντας CSS3.
Οι ετικέτες είναι ένα από τα πιο σημαντικά στάδια στην πλοήγηση στον ιστότοπο. Φαίνεται ποιος χρησιμοποιεί αυτές τις ετικέτες και γιατί χρειάζονται καθόλου; Σου λέω χρειάζονται. Πρόσφατα παρατήρησα ότι αν πάω σε οποιοδήποτε ιστότοπο, αναζητώ αμέσως αυτές τις ετικέτες. Με τη βοήθειά τους είναι πολύ βολικό να πλοηγηθείτε στον ιστότοπο, είναι πιο εύκολο να βρείτε αυτό που ψάχνετε. Με μια λέξη, αυτό είναι το δεύτερο μενού του ιστότοπου, μόνο πιο αναλυτικό.
Αλλά αν είναι επίσης όμορφα, τότε είναι απολύτως υπέροχα και θέλετε απλώς να κάνετε κλικ σε αυτά :-)
Σήμερα λοιπόν θα κάνουμε κάτι παρόμοιο για την ιστοσελίδα μας. Θα προσθέσουμε επίσης ένα μικρό animation για να φαίνεται εντυπωσιακό. Πήραμε το animation. Θέλω να πω ότι θα κάνουμε ετικέτες μόνο χρησιμοποιώντας CSS, πράγμα που σημαίνει ότι δεν υπάρχουν εικόνες και η φόρτωση είναι φυσικά πιο γρήγορη.
Θα ήθελα να προσθέσω ότι υπάρχουν τρία παραδείγματα στον πηγαίο κώδικα. Αλλά στην πράξη θα εξετάσουμε μόνο ένα. Γιατί; Επειδή σε δύο παραδείγματα έχει αλλάξει μόνο το χρώμα, όλα είναι πολύ απλά εκεί και δεν θα πρέπει να υπάρχουν προβλήματα με αυτά. Εντάξει, ας το κάνουμε ήδη.
ι HTMLΠρώτα, πρέπει να ορίσετε μια κλάση για τις ετικέτες. Και πήρα έτοιμο τον κώδικα HTML για τις ετικέτες από το blog μου. Στο τέλος, αυτό είναι αυτό που πήρα:
Καρτέλες Google Photoshop Twitter Εικονίδια Όμορφοι ιστότοποι Παράθυρο για αρχάριους Επισήμανση κώδικα Μηχανές αναζήτησης Χρήσιμοι ιστότοποι Διαφάνεια Λήψη Slider Δημιουργία ιστολογίου
Όπως μπορείτε να δείτε, αναθέσαμε αμέσως μια τάξη στις μελλοντικές μας ετικέτες - tagcloud. Τώρα ας το κάνουμε να φαίνεται όμορφο χρησιμοποιώντας στυλ.
CSS .tagcloud ( float:left; width:300px; margin-top:20px; margin-right:10px; ) .tagcloud a (font-size:13px; color:#999; border-radius: 3px; background: #333 Περιγραφή κάτω: 2px padding: 5px 7px: all 0,01s ease-in: all 0,01s :hover ( color:#fff; background-color:#FF6766; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg);Η ίδια η λίστα έχει πλάτος 300 pixel. Φυσικά, μπορείτε να το κάνετε ευρύτερο ή στενότερο για τον ιστότοπό σας. Καθώς και μέγεθος, εσοχές κ.λπ. όλα μπορούν να προσαρμοστούν.
Το χρώμα μπορεί να αλλάξει χρησιμοποιώντας φόντο: σε αυτήν την περίπτωση το χρώμα είναι #333. Μπορείτε επίσης να προσαρμόσετε το χρώμα του δείκτη στην κλάση .tagcloud a:hover, σε αυτό το παράδειγμα background-color:#FF6766;
Τώρα το πιο ενδιαφέρον - . Οι ομαλές αλλαγές χρώματος και η ομαλή κλίση ρυθμίζονται χρησιμοποιώντας τη μετάβαση:
Moz-transition: όλα τα 0.2s 0.01s ease-in. -o-transition: all 0.2s 0.01s ease-in. -webkit-transition: all 0.2s 0.01s ease-in.
Μπορείτε να αλλάξετε αυτές τις παραμέτρους σε δευτερόλεπτα, πιο γρήγορα ή πιο αργά.
Και η κλίση της ίδιας της ετικέτας ορίζεται χρησιμοποιώντας μετασχηματισμό:
Webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg);
Οι 5 μοίρες είναι 5 μοίρες προς τα δεξιά και οι -5 μοίρες είναι πέντε μοίρες προς τα αριστερά. Φυσικά, μπορείτε να αλλάξετε αυτή την τιμή για να είναι μεγαλύτερη ή μικρότερη.
Θέλω να πω ότι αυτές οι ετικέτες δεν λειτουργούν σε IE. Και δεν μπορεί να γίνει τίποτα γι' αυτό.
ιΈτσι οι ετικέτες μας αποδείχτηκαν απλές και φαινομενικά όμορφες. Αυτό είναι όλο. Φίλοι, αν έχετε απορίες, τις περιμένω στα σχόλια. Τα λέμε σύντομα.
Εισαγωγή
Ο οδηγός προορίζεται να βοηθήσει αρχάριους προγραμματιστές ιστού και bloggers. Τα εργαλεία που προσφέρονται είναι ετικέτες HTML (HyperText Markup Language, η τυπική γλώσσα σήμανσης για έγγραφα στο Διαδίκτυο) και επιλογές μορφοποίησης CSS (Cascading Style Sheets, μια επίσημη γλώσσα για την περιγραφή της εμφάνισης ενός εγγράφου που έχει γραφτεί χρησιμοποιώντας μια γλώσσα σήμανσης). Οι επιλογές μορφοποίησης CSS είναι ενσωματωμένες σε ετικέτες HTML χρησιμοποιώντας το χαρακτηριστικό STYLE.
Εάν αυτή η υπενθύμιση δεν είναι αρκετή για εσάς, συνιστούμε να χρησιμοποιήσετε τα βιβλία αναφοράς HTML και CSS.
* Το σημείωμα βασίζεται σε υλικά από το alex_inside.
Μορφοποίηση γραμματοσειράς
Βασικές ετικέτες για εργασία με κείμενο:
Μια κανονική παράγραφος με μια εσοχή στο κάτω μέρος.
* Μπορείτε να χρησιμοποιήσετε άλλες ετικέτες με ετικέτες, όπως , , και τα λοιπά.
* Μέσα στην ετικέτα
Μπορείτε να χρησιμοποιήσετε χαρακτηριστικά για να αλλάξετε ιδιότητες, όπως στοίχιση, στυλ κ.λπ.
Κείμενο του οποίου οι ιδιότητες μπορούν να αλλάξουν χρησιμοποιώντας ένα στυλ.
Μια περιορισμένη περιοχή όπου μπορείτε να αλλάξετε ιδιότητες (θέση, περιγράμματα, padding, ιδιότητες περιεχομένου κ.λπ.).
* Από προεπιλογή, τα όρια περιοχής δεν είναι ορατά. Μπορεί να υπάρχουν πολλές περιοχές σε μία σελίδα ταυτόχρονα.
Μορφοποίηση κειμένου:
Εντονο Κείμενο
Πλάγια γραφή κειμένου
Υπογραμμισμένο κείμενο
Διαγραφή κειμένου
Μικρή γραμματοσειρά
Μεγάλη γραμματοσειρά
Σημάδι υποσημείωσης πάνω ή ευρετήριο κάτω από το κείμενο
Υπόδειξη κειμένου
Μεγέθη γραμματοσειράς:
Γραμματοσειρά 13 σημείων
γραμματοσειρά 15 σημείων
Μέγεθος γραμματοσειράς 9 pixel
Μέγεθος γραμματοσειράς 12 pixel
Μέγεθος γραμματοσειράς 15 pixel
Μέγεθος γραμματοσειράς 2 (μπορεί να είναι από 1 έως 7)
Μέγεθος γραμματοσειράς 4
Η γραμματοσειρά είναι 1 μέγεθος μεγαλύτερη από το συνηθισμένο
Επικεφαλίδες:
Επικεφαλίδα επιπέδου 1
Επικεφαλίδα επιπέδου 2
Επικεφαλίδα επιπέδου 3
Επικεφαλίδα επιπέδου 4
Επικεφαλίδα επιπέδου 5
Επικεφαλίδα επιπέδου 6
Πιθανές επιλογές μεγέθους γραμματοσειράς (οπτική αξιολόγηση) είναι διαθέσιμες.
Μορφοποίηση κειμένου με χρήση γραμματοσειρών:
Γραμματοσειρά Comic Sans Ms
Γραμματοσειρά Monotype Corsiva
Tahoma, 13 pixel
Πιθανές επιλογές για τύπους γραμματοσειρών (ονόματα και οπτική βαθμολογία) είναι διαθέσιμες.
Διακόσμηση κειμένου με χρήση χρώματος:
Μπλε κείμενο
* Ο αριθμός #0000ff σημαίνει μπλε στην παλέτα RGB.
Κόκκινο κείμενο
* Μπορείτε να χρησιμοποιήσετε τυπικούς λεκτικούς χαρακτηρισμούς για χρώματα: Κόκκινο, Πράσινο, Μπλε κ.λπ.
Μπλε φόντο
* Το χρώμα φόντου μπορεί επίσης να αλλάξει. Σημειώστε ότι το χαρακτηριστικό στυλ χρησιμοποιεί σύνταξη CSS.
Μπλε κείμενο, γκρι φόντο
Μερικά προκαθορισμένα χρώματα:
Μαύρο Λευκό Κόκκινο Πράσινο Μπλε Μωβ πυρότουβλο καφέ πορτοκαλίΚόκκινο MidnightBlue CornflowerBlue
Κυανό κίτρινο ματζέντα Σκούρο Πράσινο Σκούρο Χρυσόχρυσο Ορχιδέα Μπλε Βιολετί Burlywood PeachPuff
Ορισμένα χρώματα στον δεκαεξαδικό κώδικα είναι η ένταση του κόκκινου, του πράσινου και του μπλε (RR GG BB):
#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #00006 #0000000 #AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF
Πιθανές επιλογές για την παλέτα χρωμάτων και τους κωδικούς/ονόματά τους είναι διαθέσιμες.
Σχεδιασμός κειμένου με χρήση σκιάς/επισήμανσης:
Η ιδιότητα text-shadow έχει τέσσερις παραμέτρους: X Y χρώμα πλάτους .
X - οριζόντια μετατόπιση της σκιάς/επισήμανσης στο κείμενο. Μια θετική τιμή είναι μια μετατόπιση προς τα δεξιά, μια αρνητική τιμή είναι μια μετατόπιση προς τα αριστερά.
Y - κατακόρυφη μετατόπιση της σκιάς/επισήμανσης στο κείμενο. Μια θετική τιμή είναι μια μετατόπιση προς τα κάτω, μια αρνητική τιμή είναι μια μετατόπιση προς τα πάνω.
Πλάτος - όσο μεγαλύτερη είναι η τιμή, τόσο μεγαλύτερος είναι ο βαθμός θαμπώματος.
Χρώμα - τα σκούρα χρώματα θα δώσουν μια σκιά, τα ανοιχτά χρώματα θα δώσουν μια "επισήμανση".
Παραδείγματα χρήσης:
Μόνο μια σκιά
Ταχόμα με σκιά
Tahoma με περίγραμμα
Ο Ταχόμα σε κατάθλιψη
Tahoma ογκομετρικό
Tahoma νέον
Tahoma νέον
Tahoma νέον
Tahoma, πολλές αποχρώσεις
Ευθυγράμμιση κειμένου και μορφοποίηση παραγράφων
Στοίχιση κειμένου:
Στοίχιση κειμένου αριστερά
Στοίχιση κειμένου στο κέντρο
Κεντρικό κείμενο
Ευθυγραμμίστε το κείμενο προς τα δεξιά
Στοίχιση κειμένων και στις δύο πλευρές - για κείμενα μεγαλύτερα από μία γραμμή
Επιλογή στοίχισης κειμένων και στις δύο πλευρές χρησιμοποιώντας την επιλογή μορφοποίησης CSS
Μορφοποίηση υποσημειώσεων (σχολίων) με εσοχή παραγράφου:
Κείμενο που παρατίθεται σε ξεχωριστό μπλοκ
που θα έχει μια ελαφριά εσοχή στα αριστερά.
Μορφοποίηση παραγράφων και περιοχών:
Ενσωματωμένο κείμενο τυλιγμένο γύρω από άλλο κείμενο, με δεξιό άκρο, αριστερή στοίχιση, με γκρι περίγραμμα και περιθώριο 8 px από το εξωτερικό του περιγράμματος.
ΠΡΟΣΟΧΗ! Αυτό το μπλοκ εισάγεται στο κείμενο πριν από (!) τη λέξη "Hello!"
Γειά σου! Σε αυτή την παράγραφο, η πρώτη πρόταση θα είναι από την «κόκκινη» γραμμή, δηλ. οδοντωτός. Όπως και στην εκτύπωση βιβλίων. Είναι αλήθεια ότι αυτή είναι μια σπάνια πρακτική στο Διαδίκτυο. Οι παράγραφοι πρέπει να χωρίζονται με κενά κενά.
Το προδιαμορφωμένο κείμενο διατηρεί την εσοχή στα αριστερά και μεταξύ των λέξεων και ορίζει την εσοχή που καθορίζετε με κενά. Προειδοποίηση! Η ετικέτα δεν σπάει αυτόματα τη γραμμή!
με δεξιά ευθυγράμμιση.
Κείμενο στη δεξιά άκρη σε δύο γραμμές,
με αριστερή ευθυγράμμιση.
< br clear="all" >
Γραμμή που τρέχει προς τα αριστερά.
Γραμμή που τρέχει προς τα δεξιά.
Μια γραμμή που τρέχει από άκρη σε άκρη.
Κύλιση προς τα πάνω
κείμενο με χρήσιμο
πληροφορίες.
Κύλιση προς τα κάτω
κείμενο με χρήσιμο
πληροφορίες.
Κάθετη αναδίπλωση μεγάλου κειμένου:
Lorem ipsum dolor sit amet, consectetur adipisicing elite, sed do eiusmod tempor incidentidunt ut labore et dolore magna alicua. Ut enim ad minim veniam, kyus nostrud eksercitatyon ullamko laboris nisi ut aliquip ex ea commodo consecuat. Deuce aute irure dolor in reprehenderit in voluptate velite δοκίμιο killum dolore eu fugiat nullah pariatur. Executeur sint okkaekat cupidatat non proident, sunt in kulpa kuy officia deserunt mollit anim id est laborum.
Κάθετη επαναφορά μεγάλου κειμένου με κώδικα HTML:
Κείμενο χωρίς html, πλάτος 55 χαρακτήρων και ύψος 5 γραμμές.
Μπορείτε ακόμη και να κάνετε κύλιση, cool, σωστά!; Αλλά η html δεν λειτουργεί.
Αλλά είναι καλύτερα να χρησιμοποιήσετε το div από το προηγούμενο παράδειγμα, εάν χρειάζεστε απλώς κύλιση...
Προηγούμενο (διάστιχο) κειμένου:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Επένδυση αντικειμένου
Τα όρια των περιοχών στην τομή γίνονται ορατά (στιγμένα) για να εκτιμηθεί η εσοχή.
Επάνω περιοχή πλήρωσης 10 pixel
Μια περιοχή με αριστερό περιθώριο 20 pixel
Περιοχή δεξιού περιθωρίου 250 px
Μια περιοχή με κάτω περιθώριο 15 pixel
* Ετικέτα κλεισίματοςδεν απαιτείται για χρήση.
Μπορείτε επίσης να επιλέξετε διαφορετικούς τύπους λιστών μέσω του στυλ:
τιμές τύπου λίστας για λίστες:
κύκλος — δείκτης με τη μορφή κύκλου
δίσκος - μαρκαδόρος σε μορφή κουκίδας
τετράγωνο - δείκτης με τη μορφή τετραγώνου
δεκαδικός - Αραβικοί αριθμοί (1, 2, 3, 4,...)
δεκαδικό-προπορευόμενο-μηδέν - Αραβικοί αριθμοί με μηδενικό πρώτο για ψηφία μικρότερα από δέκα (01, 02, 03,...)
πεζό άλφα — πεζά λατινικά γράμματα (a, b, c, d,…)
άνω άλφα - κεφαλαία λατινικά γράμματα (A, B, C, D,...)
πεζά ελληνικά - πεζά ελληνικά γράμματα (α, β, γ, δ,...)
πεζά ρωμαϊκά — πεζοί λατινικοί αριθμοί (i, ii, iii, iv, v,…)
πάνω-ρωμαϊκοί - Ρωμαϊκοί αριθμοί με κεφαλαία (I, II, III, IV, V,...)
κανένα—Απενεργοποιεί τις κουκκίδες για τη λίστα.
εικόνες
- παράδειγμα εισαγωγής εικόνας.
width="200px" > - μέγεθος πλάτους εικόνας.
height="500px" > - το ύψος της εικόνας.
Μια εικόνα με κείμενο που εμφανίζεται όταν τοποθετείτε το δείκτη του ποντικιού πάνω της: title="Αυτό το κείμενο θα εμφανιστεί όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα!" alt="Και αυτή ερήμην της"
>!}
Η εικόνα βρίσκεται στα αριστερά, το κείμενο ρέει γύρω από την εικόνα στα δεξιά και έχει μια οριζόντια εσοχή 6 pixel από αυτήν: style="float: left; margin:0 6px 6px 0" > κείμενο
Γράφουμε κείμενο πάνω από την εικόνα:
Προσπαθήστε να μην κάνετε κατάχρηση αυτής της επιλογής,
γιατί αυτή η μέθοδος συχνά τη δυσκολεύει
αναγνωσιμότητα του κειμένου, ανάλογα με την εικόνα.
Εικόνα στην επιλεγμένη περιοχή, με κύλιση:
Καθορίζουμε το εμφανιζόμενο πλάτος του εξωτερικού κοντέινερ div στο χαρακτηριστικό width σε pixel. Για κάθετη κύλιση, καθορίστε το ύψος . Το πλάτος και το ύψος πρέπει να είναι μικρότερα από την εικόνα.
Επεξήγηση εργαλείου που εμφανίζεται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από έναν σύνδεσμο:
