Παράδειγμα CSS στυλ πίνακες παράδειγμα
Η ακριβής θέση των αντικειμένων στη σελίδα σχετικά με το άλλο είναι, ίσως, ένα από τα πιο δύσκολα καθήκοντα για τον webmaster. Γράψτε έναν κωδικό σελίδας HTML έτσι ώστε όλες τις γραφικές εικόνες και τα μπλοκ κειμένου να βρίσκονται στα σημεία τους όχι μόνο σε έναν υπολογιστή Master Web, αλλά και σε όλους τους επισκέπτες του ιστότοπου - πραγματική τέχνη. Το πιο σημαντικό Kell, που εκτίθεται από τον χρήστη στο πρόγραμμα περιήγησής του, μπορεί να μετατρέψει μια υπέροχη δημιουργία σε ένα βρώμικο ταξίδι της ζύμης και των εικόνων.
Τα φύλλα στυλ Cascading (Style Style Cascading), που δηλώθηκαν ως μέσο πλήρους ελέγχου μέσω της σήμανσης HTML, παρουσιάζονται υπό το πρίσμα του προβλήματος που εξετάζεται ως Καλό εργαλείο Για να οργανώσετε την ακριβή θέση των αντικειμένων στη σελίδα. Το CSS σας επιτρέπει να υπερισχύσετε όλες τις ιδιότητες οποιασδήποτε προεπιλεγμένης ετικέτας. Γίνεται πιθανό να ευθυγραμμιστεί το μπλοκ κειμένου σε σχέση με τη σελίδα και άλλα μπλοκ κειμένου.
Η χρήση του CSS ανοίγει νέα συγκεκριμένα χαρακτηριστικά, τα οποία δεν είναι διαθέσιμα με τυποποιημένο HTML. Για παράδειγμα, είναι δυνατόν να καθιερωθούν οι αποστάσεις διασύνδεσης και φορτίου για κείμενο, καθορίζουν με ακρίβεια τη θέση του σχεδίου στο παρασκήνιο χωρίς την ψηφιδωτή έξοδο σε όλο το έγγραφο.
Σε γενικές γραμμές, τα φύλλα στυλ Cascading σας επιτρέπουν να σκεφτείτε το σχεδιασμό της ιστοσελίδας, σχετικά με την αισθητική πλευρά της αντίληψης της πληροφορίας από τον χρήστη και όχι μόνο για το χρηστικό.
Με τη χρήση CSS αναπτύσσεται η ταχύτητα δημιουργίας ΝΕΑ ΣΕΛΙΔΑ. Οι μορφές που ορίζονται μία φορά μπορούν να χρησιμοποιηθούν απεριόριστο αριθμό σε οποιοδήποτε σημείο του εγγράφου. Μια σημαντική λεπτομέρεια είναι η δυνατότητα ρύθμισης στυλ σε ένα ξεχωριστό αρχείο με τη μορφή αποδίδοντας διάφορες ιδιότητες σε ετικέτες και δημιουργία προσαρμοσμένων στυλ. Αντικατάσταση στυλ σε ένα τέτοιο αρχείο θα προκαλέσει μια αυτόματη αλλαγή στο στυλ εμφάνισης όλων των αντικειμένων για τα οποία εφαρμόστηκε το τροποποιημένο στυλ.
Ας κατορθώσουμε τη χρήση του CSS. Υπάρχουν τέσσερις τρόποι εφαρμογής στυλ:
- Αντιμετωπίστε το στυλ στο στοιχείο Markup
- Τοποθέτηση περιγραφών στυλ στην κεφαλίδα εγγράφων χρησιμοποιώντας ετικέτα στυλ
- Τοποθετώντας μια αναφορά σε μια εξωτερική περιγραφή μέσω της ετικέτας συνδέσμου
- Εισαγωγή στυλ στο έγγραφο
Διατίθεται σε στυλ CSS σε αυτό το στοιχείο σήμανσης. Με αυτή τη μέθοδο, η αλλαγή στην αλλαγή θα επηρεάσει μόνο το στοιχείο για το οποίο η ετικέτα αυτή είναι υπεύθυνη και δεν θα αντικατοπτρίζεται σε άλλα στοιχεία, επίσης αποσυρθεί από αυτή την ετικέτα αλλού. Σας επιτρέπει να εφαρμόσετε το επιθυμητό στυλ σε ένα συγκεκριμένο τμήμα του εγγράφου.
Μπορείτε να αντικαταστήσετε το τυπικό στοιχείο σήμανσης ή να δημιουργήσετε τις δικές σας ιδιότητες απεικόνισης χρησιμοποιώντας ένα στυλ ετικέτας ζεύγους στην κεφαλίδα του εγγράφου πριν από την ετικέτα του σώματος. Χρησιμοποιώντας επίσης ετικέτα στυλ δημιουργεί αυθαίρετες τάξεις. Η χρήση τους επιτρέπει σε κάποιον να καθορίσει τις ίδιες ιδιότητες οθόνης για διαφορετικές ετικέτες. Βολικό, για παράδειγμα, ρυθμίστε την ίδια γραμματοσειρά για το κείμενο και τους υπερσυνδέσμους σε αυτό. Εάν δεν προσδιοριστεί το χρώμα και το ύφος της υπογράμμισης, αυτές οι παράμετροι θα παραμείνουν για υπερσυνδέσεις για τα ίδια και θα παραμείνουν αφιερωμένα μεταξύ του συνηθισμένου κειμένου.
Όταν οι ίδιοι μορφές χρησιμοποιούνται σε αρκετές ή όλες τις σελίδες του ιστότοπου, δεν είναι απαραίτητο να τα προσδιοριστούν σε κάθε έγγραφο HTML. Αρκεί να τα αποθηκεύσετε σε ένα ξεχωριστό αρχείο και να το αναφέρετε σε κάθε έγγραφο χρησιμοποιώντας την ετικέτα συνδέσμου στο στοιχείο κεφαλής (πριν από την ετικέτα του σώματος). Το χαρακτηριστικό rel πρέπει να έχει την τιμή του "Stylesheet".
Είναι επίσης δυνατή η εισαγωγή στυλ στυλ. Η διαφορά από την αναφορά στην εξωτερική περιγραφή είναι ότι η εισαγωγή στυλ μπορεί να γίνει μέσα στο στοιχείο στυλ ή μέσα στο εξωτερικό αρχείο με την περιγραφή στυλ που καθορίζεται στην ετικέτα Link. Με αυτόν τον τρόπο, μπορείτε να δημιουργήσετε ένα εξωτερικό αρχείο για ένα εξωτερικό αρχείο. Οι οδηγίες εισαγωγής στυλ τοποθετούνται μπροστά από όλους τους άλλους περιγραφείς στυλ, οι οποίες καθιστούν δυνατή την εύκολη υπερισχύουσα του εισαγόμενου στυλ.
Αλλά οποιαδήποτε τεχνολογία έχει τα μειονεκτήματά του. Υπάρχει τόσο η τεχνολογία CSS. Ακριβώς, τα περισσότερα μειονεκτήματα παρατηρούνται στη χρήση του CSS. Αυτό οφείλεται στην ελλιπή συμβατότητα του CSS με διάφορα προγράμματα περιήγησης ακόμη και Πρόσφατες εκδόσεις και προκύπτουν λόγω αυτής της έλλειψης προπαγανδιστού στην ακρίβεια CSS της οθόνης σελίδας στο Διάφορα προγράμματα περιήγησης. Το στυλ εισαγωγής, για παράδειγμα, υποστηρίζεται μακριά από όλα τα προγράμματα περιήγησης. Για το λόγο αυτό, πολλοί webmasters εξακολουθούν να φοβούνται να εφαρμόσουν όλες τις δυνατότητες CSS χρησιμοποιώντας μόνο μερικά.
Κλείδωμα ένα βαρέλι γραμματοσειράς κατά την εμφάνιση κειμένου στο πρόγραμμα περιήγησης σας επιτρέπει να κερδίσετε εμπιστοσύνη στην ακριβή θέση όλων των στοιχείων σελίδας στον υπολογιστή του χρήστη, αλλά στερεί την ικανότητα του χρήστη του χρήστη να επιλέξει μόνοι σας ένα βολικό μέγεθος γραμματοσειράς. Αυτή η προσέγγιση είναι ουσιαστικά η έλλειψη σεβασμού για τον επισκέπτη του ιστότοπου.
Συχνά σχετικά με το CSS λένε ότι με τη βοήθειά τους είναι εύκολο να αλλάξετε αμέσως το σχεδιασμό ολόκληρου του ιστότοπου. Για να το κάνετε αυτό, αρκεί να παρακάμψετε τα στυλ στο αρχείο στυλ. Αλλά ο πραγματικός σχεδιαστής, οδήγησε στην αλλαγή του σχεδιασμού του ιστότοπου, δεν θα σταματήσει ποτέ μόνο για την αλλαγή της εμφάνισης γραμματοσειρών.
Cascading φύλλα στυλ - υποσχόμενη τεχνολογία. Αλλά πολλοί webmasters εξακολουθούν να περιορίζονται στη χρήση του CSS για να αλλάξουν το χρώμα της υπερσύνδεσης όταν ο δείκτης του ποντικιού είναι συνδεδεμένος σε αυτό.
Καλό κακό
CSS Style Table, αν λάβετε τον ίδιο τον ορισμό, αυτή είναι μια γλώσσα περιγραφής ΕΞΩΤΕΡΙΚΗ ΟΨΗ Εγγραφο. Δηλαδή, η HTML είναι υπεύθυνη για τη δομή της σελίδας και για όλο το σχεδιασμό των στυλ CSS. Συγκέντρωσα πληροφορίες εδώ, η οποία θα σας επιτρέψει να χρησιμοποιήσετε ελεύθερα το φύλλο στυλ. Δεν θα γράψω για το πώς είναι απαραίτητο να το γνωρίζουμε, επειδή είναι κατανοητό - χωρίς αυτό δεν θα μπορείτε να φέρετε τον ιστότοπο σε μια λιγότερο κανονική προβολή. Εάν κάποιος μόλις αρχίσει να μελετά στυλ CSS, τότε αυτά τα υλικά είναι αρκετά για να αρχίσουν να μαθαίνετε CSS.
1. Βασικά πράγματα
Θα ξεκινήσω με το πολύ βασικό. Όταν άρχισα να διεξάγω αυτόν τον ιστότοπο, έγραψα μικρά μαθήματα για να μελετήσω τα στυλ CSS. Τα μαθήματα είναι κατάλληλα για όσους ξεκινούν και για εκείνους που ήδη γνωρίζουν κάτι για να ανανεώσουν τις γνώσεις τους. Όλα είναι διακοσμημένα σε εικόνες και σε πραγματικά παραδείγματα.
Μικρή υποχώρηση: Όταν ο ίδιος ο ίδιος άρχισε να μαθαίνω το θέμα των κτιρίων ιστοτόπων, έμαθα σχεδόν όλες τις ετικέτες HTML και δεν με ενέπνευσε πολύ. Αλλά αφού άρχισα να μελετώσω το τραπέζι στυλ CSS και να προσπαθήσω να εφαρμόσω κάθε ένα από τα ακίνητα - μου άρεσε τόσο πολύ (δεν θα δημιουργούσα αν δεν το άρεσε). Είδα ότι μπορείτε να κάνετε απλά εκπληκτικά πράγματα μόνο με CSS. Αυτή δεν είναι μια γλώσσα προγραμματισμού που πρέπει να λεγίζεται για μήνες. Το τραπέζι του στυλ μπορεί να κατακτηθεί σε ένα (μέγιστο σε δύο) εβδομάδες.
Φυσικά, δεν μαθαίνετε απολύτως όλες τις ιδιότητες και τις έννοιες τους, αλλά δεν είναι απαραίτητο! Πρέπει να γνωρίζετε μόνο τα βασικά, ώστε να αρχίσετε να εφαρμόσετε και να χρησιμοποιήσετε τα έργα σας. Ένα σημαντικό απόχρωμο είναι ότι πρέπει να εφαρμόσετε αμέσως την ιδιοκτησία που μόλις μάθατε στο πραγματικό παράδειγμα. Ας είναι η δική σας ιστοσελίδα ή Απλή HTML Ιστοσελίδα - καμία διαφορά. Είναι σημαντικό να προσπαθήσετε να γράψετε και να δείτε το αποτέλεσμα.
Έχω πολλά παραδείγματα στα οποία χρησιμοποιείται CSS. Περιέχουν μόνο περισσότερα από 100 μαθήματα! Όταν γνωρίζετε τουλάχιστον το ίδρυμα, τότε μπορείτε να αλλάξετε με ασφάλεια και να εφαρμόσετε όλα τα παραδείγματα από τα μαθήματα.
Τα μαθήματά μου για το CSS Cascading Styles
2. CRIB CSS και CSS3
Λοιπόν, μελετήσατε τα βασικά και μετά από μερικές μέρες τα πάντα με "επιτυχία" ξεχάσατε και, πιθανώς, νομίζετε ότι αυτό δεν είναι δικό σας και όλα είναι δύσκολα. Θέλω να σας παραλάβω αμέσως - εγώ ο ίδιος δεν γνωρίζω όλους cSS ιδιότητες. Αλλά τι interfers για να τα δείτε στο Διαδίκτυο;
Είναι αλήθεια ενώ θα πάτε στο Yandex ή στο Google, τότε θα λάβετε το αίτημα που χρειάζεστε. Και αν δεν εκδοθεί επίσης στην αναζήτηση που απαιτείται. Έτσι μπορείτε να περάσετε πολύ χρόνο, αλλά δεν είναι να βρείτε αυτό που πραγματικά ψάχνει.
Ευτυχώς, οι καλοί άνθρωποι ανήλθαν σε πολύ χρήσιμα κούνια που με αντιστράφουν περισσότερο από μία φορά. Το ένα είναι αρκετό για να αντιμετωπίσει οπουδήποτε και τότε η αναζήτηση για τις επιθυμητές ιδιότητες δεν είναι δύσκολη.
CSS και CSS3 CRIB
Αυτά είναι απλά απαραίτητα υλικά όταν τοποθετούν και αναπτύσσουν το σχεδιασμό του ιστότοπου. Ο χρόνος που θα αποσπαστεί και η αναζήτηση στις ιδιότητες περιγραφής του Διαδικτύου μειώνει πολλές φορές.
Είναι αλήθεια, όπως καταλαβαίνετε, τόσο περισσότερο βελτιώνετε ιστότοπους ή κάνετε το σχέδιο, τόσο λιγότερο πρέπει να εξετάσετε αυτή την ερώτηση, καθώς όλες οι απαραίτητες ιδιότητες παραμένουν στη μνήμη. Αλλά εξακολουθούν να έχουν αυτό το σύνολο εξαπατών φύλλων στο χέρι δεν θα είναι περιττό.
Είναι σαν ένα σχολείο: Ακόμα κι αν δεν χρησιμοποιείτε το παχνί, αλλά εξακολουθεί να είναι κατά κάποιον τρόπο στο ντους πιο ήσυχο.
Στην πορεία μας, θεωρούμε μαθήματα CSS - δηλ. Μαθήματα τεχνολογίας, μία από τις πιο σημαντικές ιστοσελίδες κατά την τοποθέτηση.
Σε αυτό το μάθημα, θα τοποθετήσουμε την ιστοσελίδα μας έτσι ώστε να γίνεται πιο πολύχρωμα (Σχήμα 1).
Εικόνα 1
Πριν προχωρήσετε σε σελίδες σχεδιασμού, θα μελετήσετε πώς έχει οριστεί το χρώμα του ιστού.
1. Καθορισμός χρωμάτων. Μαθήματα CSS
Όταν ορίζετε τα χρώματα για το έγγραφο HTML, μπορείτε να χρησιμοποιήσετε είτε τα ονόματα των χρωμάτων είτε οι δεκαεξαδικοί τους κωδικοί. Το σύστημα της δεκαεξαδικής κωδικοποίησης βασίζεται σε τρία εξαρτήματα - κόκκινο (κόκκινο), πράσινο (πράσινο) και μπλε (μπλε), από εδώ και το όνομα RGB, σύμφωνα με τα πρώτα γράμματα αυτών των χρωμάτων. Κάθε ένα από τα συστατικά αντιστοιχεί σε δεκαεξαδικό αριθμό από 00 σε FF (0 και 255 V μετρικό σύστημα Αριθμός). Αυτές οι τρεις τιμές στη συνέχεια συνδυάζονται σε μία τιμή στην οποία προηγείται το σήμα #, για παράδειγμα # 800080, το οποίο αντιστοιχεί σε βιολετί χρώμα.
Ο πίνακας δείχνει τα ονόματα ορισμένων χρωμάτων και των κωδίκων τους. Περισσότερο Πλήρης Πίνακες Τα χρώματα και οι κωδικοί τους μπορούν να προβληθούν στο φάκελο Χρωματιστά.Βρίσκεται στο φάκελο CD.
|
Χρώμα |
Χρώμα |
||
|
Μαύρο (μαύρο) |
Ασημένιο (ασήμι) |
||
|
Maroon (σκοτεινό μπορντό) |
Κόκκινο (κόκκινο) |
||
|
Πράσινο (πράσινο) |
Ασβέστη (ασβέστη) |
||
|
Ελιά (ελιά) |
Κίτρινο (κίτρινο) |
||
|
Ναυτικό (μπλε ναυτικό) |
Μπλε (μπλε) |
||
|
Μοβ (μοβ) |
Fuchia (φούξια) |
||
|
Teal (σκούρο πράσινο) |
|||
|
Γκρι (γκρι) |
Λευκό (λευκό) |
Ασφαλές πίνακα χρωμάτων για την ανάπτυξη του σχεδιασμού
Η παλέτα ασφαλών χρώματος παρέχει την πιο ακριβή αντιστοίχιση της οθόνης σε διάφορες οθόνες.
Μια ασφαλής παλέτα αποτελείται από 216 χρώματα. Τα ασφαλή χρώματα είναι πάντοτε αμετάβλητα όταν μετακινούνται από ένα πρόγραμμα περιήγησης σε άλλη ή από μία πλατφόρμα σε άλλη, από μια οθόνη στην άλλη με τη διαφορετική διαθεσιμότητα και τα δικαιώματά τους.
Αν κάποιο από τα τρία δεκαεξαδικές τιμές Διαφέρει από τα 00, 33, 66, 99, SS ή FF, το χρώμα δεν είναι ασφαλές.
Ο πίνακας ασφαλείας μπορεί να προβληθεί στο φάκελο. CD/ Χρωματιστά..
2. Ορισμός του CSS.
Η ιστοσελίδα μας δεν έχει ακόμη σχεδιαστεί, η οποία μπορεί να πραγματοποιηθεί με δύο τρόπους:
- Πρώτα - σημαίνει Τραπέζια στυλ CSS. (περισσότερη προοδευτική και σωστή μέθοδος)
- Δευτερόλεπτο - σημαίνει Χαρακτηριστικά για το Tagov Html .
Ας ξεκινήσουμε αμέσως από μια πιο προοδευτική μέθοδο.
CSS - Φύλλα στυλ Cascading (Ιεραρχικές προδιαγραφές στυλ ή φύλλα στυλ Cascading) Μην αντικαθιστούν τη γλώσσα σήμανσης, είναι ανεξάρτητη τεχνολογία, η οποία ισχύει για την ετικέτα HTML.
Σκοπός: Σας επιτρέπει να αλλάξετε αυτόματα το στυλ HTML του στοιχείου σε όλες τις σελίδες του ιστότοπου. Για παράδειγμα, χρησιμοποιούμε την κεφαλίδα H1 σε δέκα ιστοσελίδες, οι οποίες πρέπει να είναι πράσινες. Όταν χρησιμοποιείτε πίνακες στυλ, θα έχουμε μόνο μία φορά για να καθορίσουμε το πράσινο χρώμα και θα ισχύει αμέσως σε δέκα σελίδες.
Αντίστροφη κατάσταση: Χρησιμοποιώντας τα χαρακτηριστικά HTML που έχουν οριστεί για δέκα ιστοσελίδες σε όλες τις κεφαλίδες H1 Green, δηλ. το συνταγογραφήθηκε δέκα φορές. Στη συνέχεια αποφάσισαν να αλλάξουν το χρώμα της κεφαλίδας στο κόκκινο, τότε θα πρέπει να διορθώσουμε το πράσινο χρώμα στο κόκκινο.
Όταν χρησιμοποιείτε το ίδιο φύλλο στυλ, θα έχουμε μόνο μία φορά για να το κάνετε αυτό αλλάζοντας την κεφαλίδα του πράσινου χρώματος στο κόκκινο με το στυλ του στυλ και θα αλλάξει αυτόματα σε όλες τις δέκα ιστοσελίδες.
Ο πίνακας στυλ περιλαμβάνει ένα σύνολο στοιχείων CSS, η δομή του οποίου είναι διαφορετική από τη δομή του στοιχείου HTML.
ΣύνταξηCSS.- στοιχείο
Επιλογή (ιδιότητα 1: Αξία, Ακίνητα 2: Αξία, ... Ακίνητα Ν: Αξία)
Αρχικά, το όνομα του επιλογέα είναι γραμμένο, για παράδειγμα, το H1, αυτό σημαίνει ότι όλες οι ιδιότητες στυλ θα ισχύουν για την ετικέτα
, Στη συνέχεια, οι σγουρές αγκύλες στις οποίες γράφεται η ιδιότητα του στυλ και η αξία του υποδεικνύεται μετά το κόλον. Οι ιδιότητες στυλ με τιμές διαχωρίζονται μεταξύ τους με ένα ερωτηματικό, στο τέλος αυτό το σύμβολο μπορεί να παραλειφθεί.
Οι ιδιότητες στυλ με τιμές μπορεί να είναι πολλά πολλά, η ακολουθία τους δεν έχει.
Το CSS δεν είναι ευαίσθητο στο μητρώο, τις χορδές μεταφοράς, τα κενά και τις καρτέλες, Ως εκ τούτου, η μορφή καταγραφής εξαρτάται από την επιθυμία του προγραμματιστή.
για παράδειγμα:
h1 (FONT-Family: Arial; Μέγεθος γραμματοσειράς: 14pt)
ή το ίδιο μπορεί να καταγραφεί όπως αυτό:
Font-Οικογένεια: Arial;
Μέγεθος γραμματοσειράς: 14pt
Σε αυτό το παράδειγμα:
- h1 - Selector, σε αυτό το στοιχείο HTML στοιχείο,
- Οικογένεια γραμματοσειράς και μεγέθους γραμματοσειράς,
- - η αξία της ιδιοκτησίας οικογένειας γραμματοσειράς,
- 14pt - η τιμή της ιδιότητας μεγέθους γραμματοσειράς.
Τρόποι ενεργοποίησης των φύλλων στυλ σε έγγραφο HTML
- Εξωτερικό φύλλο στυλ (σχετικό στυλ).
- Εφαρμοσμένο φύλλο στυλ (παγκόσμιο στυλ).
- Εσωτερικά στυλ.
3. Εξωτερικός πίνακας στυλ CSS (σχετικό στυλ)
Καθορίζει το στυλ ολόκληρου του ιστότοπου.
Πρόκειται για ένα αρχείο κειμένου με την επέκταση CSS.
Σε αυτό το παράδειγμα, το φύλλο στυλ γράφεται στο αρχείο κειμένου. Style.css.
Πρακτική εργασία 1.
1. Ανοίξτε το καθαρό έγγραφο στο Notepad ++ και αποθηκεύστε το στο φάκελο. public_html με το όνομα Στυλ.. cSS.. Σημειώστε ότι στο πεδίο Τύπος αρχείου Βρέθηκε Ολοι οι τύποι. (Σχήμα 2).
Σχήμα 2.
2. Δεδομένου ότι το CSS είναι μια άλλη τεχνολογία, οι ετικέτες HTML στο αρχείο.css δεν γράφονται καθόλου. Θα εκδώσουμε τον τίτλο μας "κατάλογος αρχιτεκτονικών έργων" στο αρχείο Κύριος.. html. Με ευθυγράμμιση στο κέντρο, μπλε, Verdana γραμματοσειρά, ύψος 20 pt ύψος. Για να το κάνετε αυτό, στο αρχείο CSS, θα πραγματοποιήσουμε την ακόλουθη καταχώρηση (Εικόνα 3):
Σχήμα 3.
Στα μαθήματα του CSS μας, ας αναρωτηθούμε τι είναι γραμμένο εδώ σύμφωνα με τη σύνταξη στοιχείων CSS, την οποία μιλήσαμε παραπάνω σε αυτό το μάθημα.
- h1 - επιλογέας, δηλ. Στοιχείο HTML σε ποιο στυλ ισχύει.
- Κείμενο-Ευθυγράμμιση: Κέντρο; - την ιδιοκτησία στυλ του κειμένου-ευθυγράμμιση (ευθυγραμμίζει κείμενο) με την κεντρική τιμή (κεντραρισμένη).
- Χρώμα: # 0000FF; - Χρώμα στυλ Χρώμα (χρώμα κειμένου) με την τιμή του μπλε χρώματος # 0000ff (η τιμή λαμβάνεται από τον πίνακα χρωμάτων).
- Γραμματοσειρά: Verdana; - Γραμματοσειρά γραμματοσειράς ακινήτων στιλ-οικογένειας με αξία Verdana.
- Οι ιδιότητες στυλ με τιμές χωρίζονται μεταξύ τους με ένα σημείο κόμματος.
- Και ούτω καθεξής, όλα σύμφωνα με τη σύνταξη.
Έτσι, έτσι ώστε η ιστοσελίδα μας "είδε" το φύλλο στυλ και τις εφαρμοσμένες ιδιότητες σε στοιχεία HTML, πρέπει να εγκαταστήσετε μια δέσμη μεταξύ του αρχείου Κύριος.. html. και Στυλ.. cSS.. Για να το κάνετε αυτό, ανοίξτε το αρχείο main.html και μεταξύ των ετικετών < Κεφάλι.> και Κεφάλι.> Τοποθετήστε το σχέδιο , όπως και Σχήμα 4.
Σχήμα 4.
3. Ελέγξτε το αποτέλεσμα στο πρόγραμμα περιήγησης. Πρέπει να συμπέσει με το Σχήμα 5.
Εικόνα 5.
Σε αυτή την κατηγορία, το CSS θα εξετάσουμε πού να πάρετε τα ονόματα των ιδιοτήτων στυλ και τις αξίες τους; Για αυτό, υπάρχουν επίσης ειδικά βιβλία αναφοράς και η προδιαγραφή (εγχειρίδιο φακέλου CSS). Για να ξεκινήσετε, χρησιμοποιήστε ένα μικρό βιβλίο αναφοράς ως αναφορά Sprav_css.doc..
4. Καθορίστε τα έργα Header H2 "για το μελλοντικό σπίτι σας" με ευθυγράμμιση στο δεξί άκρο, Burgundy χρώμα, γραμματοσειρά Verdana, γραμματοσειρά 16 pt. Για να το κάνετε αυτό στο αρχείο Στυλ.. cSS. Η.2 (Σχήμα 6).
Εικόνα 6.
5. Ελέγξτε το αποτέλεσμα στο πρόγραμμα περιήγησης, πρέπει να ταιριάζει με το σχήμα 7.
Σχήμα 7.
6. Θα τοποθετήσουμε τις παραγράφους με ευθυγράμμιση σε πλάτος, σκούρο μπλε, arial γραμματοσειρά, 12 pt γραμματοσειρά. Για να το κάνετε αυτό στο αρχείο Στυλ.. cSS. Θα κάνουμε την ακόλουθη εγγραφή για τον επιλογέα Π. (Σχήμα 8).
Εικόνα 8.
7. Θα κάνουμε επίσης ένα ανοιχτό μπλε φόντο ολόκληρης της ιστοσελίδας. Για αυτό για τον επιλογέα Σώμα. Προσθέστε μια καταχώρηση (Εικόνα 9)
Εικόνα 9.
8. Ελέγξτε το αποτέλεσμα στο πρόγραμμα περιήγησης. Πρέπει να συμπέσει με το σχήμα 10.
Εικόνα 10.
Νομίζω ότι από αυτό το μάθημα CSS, η αρχή της χρήσης ενός φύλλου εξωτερικού στυλ είναι κατανοητή. Προκειμένου να γίνει εύκολα και να χρωματίσει τους Ιστός.- Είναι απαραίτητο να μελετήσετε τις ιδιότητες στυλ και τις έννοιες τους να σπουδάσουν στον κατάλογο και να δοκιμάσουν στην πράξη. Όσο περισσότερο θυμηθείτε τέτοιες ιδιότητες και αξίες χωρίς να επικοινωνήσετε με τον κατάλογο, τόσο υψηλότερο είναι ο επαγγελματισμός σας.
Ερευνητικά καθήκοντα
- Χρησιμοποιώντας το βιβλίο αναφοράς Sprav_css.doc, Εγγραφείτε στο στυλ του τίτλου < Η.3> Στο αρχείο main.html. Ακίνητα των στυλ για να διαλέξετε.
- Για μια λίστα με "Σπίτι έργα", χρησιμοποιώντας στυλ, αλλάξτε τους αραβικούς αριθμούς σε ρωμαϊκό. Οι υπόλοιπες παραμέτρους είναι προαιρετικές.
- Για μια λίστα με "σπίτια" ως δείκτη, εφαρμόστε μια εικόνα spisok_1.gif. Από το φάκελο html_css_2.. Οι υπόλοιπες παραμέτρους είναι προαιρετικές.
- Ως φόντο της ιστοσελίδας, εφαρμόστε την εικόνα μέσω των στυλ. fon9.jpg. Από το φάκελο html_css_2..
- Χρησιμοποιώντας στυλ, κάνουν τη γραμματοσειρά των παραγράφων BOLD.
Το κατά προσέγγιση αποτέλεσμα στο σχήμα 11.
Εικόνα 11.
4. Μαθήματα σε στυλιστικές προδιαγραφές
Στο μάθημά μας CSS, θα εξετάσουμε τα μαθήματα σε συσκευές στυλ ισχύουν εάν είναι απαραίτητο να προσδιοριστούν πολλά είδη του στυλ ενός στοιχείου. Κατά τον προσδιορισμό της τάξης στην επιθυμητή ετικέτα, προστίθεται ένα αυθαίρετο μοναδικό όνομα της τάξης, που διαχωρίζεται από το σημείο.
Για παράδειγμα, έχουμε αρκετούς τίτλους στο κείμενο Η.1 Και τους χρειαζόμαστε να είμαστε διαφορετικά χρώματα. Στη συνέχεια, διαιρέστε τα στυλ ως εξής
h1.golub (χρώμα: μπλε)
h1.Krasn (Χρώμα: Κόκκινο)
h1.Zelen (Χρώμα: Πράσινο)
Μετά το σημείο υπάρχει ένα όνομα κλάσης, το οποίο πρέπει να είναι μοναδικό και δεν μπορεί να αποτελείται μόνο από αριθμούς.
Τώρα όταν χρησιμοποιείτε την ετικέτα < Η.1> Στο έγγραφο πρέπει να εγκαταστήσετε ένα χαρακτηριστικό ΤάξηΓια να καθορίσετε ποιο στυλ πρέπει να εφαρμόσετε:
< Η.1 Τάξη=" golub."> Αυτός είναι ένας μπλε τίτλος Η.1>
< Η.1 Τάξη=" krasn."> Αυτός είναι ένας κόκκινος τίτλος Η.1>
< Η.1 Τάξη=" zelen."> Αυτός είναι ένας πράσινος τίτλος Η.1>
Πρακτική εργασία 2.
1. Ανοίξτε το αρχείο σάλιο. html.. Αποθηκεύστε το με το νέο όνομα plohady.. html.σε φάκελο public_html.
2. Γράψτε ανάμεσα στις ετικέτες
3. Στο περιεχόμενο
Αντιγράψτε το κείμενο από το αρχείο Τετράγωνα σπίτια.txtΑπό το φάκελο html._ cCS._2 .4. Θα γράψουμε στυλ στο ίδιο αρχείο. Στυλ.. cSS.που έχουμε δημιουργήσει στο προηγούμενο μάθημα. Επομένως στο αρχείο plohady.. html.Ρυθμίστε τη δέσμη με αυτό το φύλλο στυλ εισάγοντας μεταξύ των ετικετών
και (Εικόνα 12)
Εικόνα 12.
5. Διαμορφώστε την ετικέτα τίτλων
Και να αντιστοιχίσετε την τάξη σας σε κάθε κεφαλίδα (Εικόνα 13).
Εικόνα 13.
Το αρχείο σας plohady.. html.Τώρα θα πρέπει να μοιάζει με αυτό (Εικόνα 14).
Εικόνα 14.
6. Στο φύλλο στυλ Στυλ.. cSS. Δημιουργήστε την ακόλουθη καταχώρηση (Εικόνα 15)
Εικόνα 15.
7. Ελέγξτε την ιστοσελίδα στο πρόγραμμα περιήγησης. Το αποτέλεσμα είναι στο σχήμα 16.
Εικόνα 16.
8. Πιθανότατα παρατήρησα ότι στο δικό μας Νέα ηχογράφηση Τα στυλ των κεφαλίδων είναι επαναλαμβανόμενα σχέδια Γραμματοσειρά: Verdana; Κείμενο-Ευθυγράμμιση: Αριστερά. Μέγεθος γραμματοσειράς: 14pt.Τέτοιες δομές μπορούν να καταγραφούν μία φορά με ομαδοποίηση των επιλογών στους οποίους εφαρμόζονται. Για να το κάνετε αυτό, πρέπει να αναφέρετε τους επιλογείς μέσω του κόμματος και στη συνέχεια σε σγουρά στηρίγματα για να καταχωρίσετε τις γενικές ιδιότητες. Στη συνέχεια, ο πίνακας στυλ μας για κεφαλίδες θα μοιάζει με αυτό (Εικόνα 17):
Εικόνα 17.
Πρακτική εργασία 3.
Κάτω από κάθε επικεφαλίδα στο αρχείο plohady.. html.Υπάρχει κείμενο. Μορφοποιημένες παραγράφους που χρησιμοποιούν διαφορετικές τάξεις. Χρησιμοποιήστε διάφορα χρώματα, ευθυγράμμιση και γραμματοσειρές ακουστικών. Τα ονόματα κλάσης πρέπει να είναι μοναδικά. Είναι ανεπιθύμητο να χρησιμοποιήσετε τα ίδια ονόματα για διαφορετικούς επιλογείς. Ενας από Πιθανές επιλογές Εικόνα 18:
Εικόνα 18.
5. ID-STYLE για ένα συγκεκριμένο στοιχείο
Τα μαθήματα CSS περιλαμβάνουν τη μάθηση των λεγόμενων μορφών ταυτότητας.
Οποιοδήποτε στοιχείο μπορεί να αντιστοιχιστεί ένα αναγνωριστικό. ταυτότητακαι στη συνέχεια να συμμορφωθείτε με αυτό το στοιχείο οποιοδήποτε στυλ χρησιμοποιώντας ταυτότητα.
Για παράδειγμα:
Η είσοδος στο αρχείο πίνακα στυλ θα είναι τα εξής
# Δοκιμή { Χρώμα:#00 ffff.}
Τώρα μπορείτε να βάλετε αυτό το στυλ σύμφωνα με οποιοδήποτε στοιχείο στο έγγραφο HTML:
...
...
Σε αυτό το παράδειγμα, η δοκιμαστική λέξη είναι το όνομα στυλ. Το όνομα μπορεί να είναι αυθαίρετο από λατινικά γράμματα, αλλά θα πρέπει να είναι μοναδική, δηλ. Κανένα στοιχείο στο φύλλο στυλ δεν θα πρέπει πλέον να έχει ένα τέτοιο όνομα.
Πρακτική εργασία 4.
Κάντε ένα τεμάχιο εργασίας για το μελλοντικό μενού του ιστότοπού μας.
1. Ανοίξτε το αρχείο σάλιο. html. και να το αποθηκεύσετε κάτω από το νέο όνομα Μενού.. html.σε φάκελο public_html.
2. Στο περιεχόμενο της σελίδας αρχείου Μενού.. html.Κάντε κείμενο από αρχείο Μενού.. ΚΕΙΜΕΝΟ.Από το φάκελο html._ cSS._2 .
3. Μορφοποιήστε το αρχείο στις ετικέτες HTML ως εξής:
- Για τους τίτλους της "Κατηγορίας Έργου", "Κατάλογος Αρχιτεκτονικών Έργων" και "Σπίτι πλατεία" Χρησιμοποιήστε μια ετικέτα
;
- Για μια λίστα με τις "κατηγορίες έργων", χρησιμοποιήστε μια αριθμημένη λίστα
- ;
- Για τους καταλόγους "Κατάλογος αρχιτεκτονικών έργων" και "Πλατεία Σπίτι" Χρησιμοποιήστε μια σημειωμένη λίστα
4. Στην κορυφή της ιστοσελίδας εισάγετε το λογότυπο (αρχείο logo_myhouse.gif.). Το αποτέλεσμα θα πρέπει να συμπίπτει με το σχήμα 19.
Εικόνα 19.
5. Για αυτό το μενού, κάντε ένα ξεχωριστό φύλλο στυλ κάτω από το όνομα Στυλ._ Μενού.. cSS.. Ρυθμίστε τη δέσμη μεταξύ του αρχείου Μενού.. html.και τραπέζι στυλ Στυλ._ Μενού.. cSS.Εισάγοντας την εγγραφή Μεταξύ ετικετών και σε αρχείο Μενού.. html..
6. Δημιουργήστε ένα καθαρό έγγραφο και αποθηκεύστε το με το όνομα Στυλ._ Μενού..cssΣτο φάκελο σας.
7. Για την ομάδα κατηγορίας του έργου, η οποία περιλαμβάνει μια κεφαλίδα και μια αριθμημένη λίστα και για την ομάδα καταλόγου αρχιτεκτονικού έργου, η οποία περιλαμβάνει τον ίδιο τον τίτλο και η ετικέτα που θα χρησιμοποιήσει το όνομα του ονόματος Μπλε. Εκείνοι. Ο κώδικας θα μοιάζει με αυτό (Εικόνα 20):
Εικόνα 20.
8. Στο αρχείο Στυλ._ Μενού.. cSS.Στυλ για αυτά τα στοιχεία Ας κάνουμε σκούρο μπλε, γραμματοσειρά Tahoma (Σχήμα 21):
Εικόνα 21.
9. Για την ομάδα "Square Square", η οποία περιλαμβάνει έναν τίτλο και μια αξιοσημείωτη λίστα, θα χρησιμοποιήσουμε το όνομα του ID-STYLE Καφέ.. Εκείνοι. Ο κώδικας θα μοιάζει με αυτό (Εικόνα 22):
Εικόνα 22.
10. Στο αρχείο Στυλ._ Μενού.. cSS.Στυλ για αυτά τα στοιχεία κάνουν καφέ, Times Font (Εικόνα 23):
Εικόνα 23.
11. και προσθέστε το χρώμα του φόντου με το αρχείο MENU.HTML (Εικόνα 24)
Εικόνα 24.
12. Ως αποτέλεσμα, λαμβάνουμε την ακόλουθη ιστοσελίδα (Εικόνα 25)
Εικόνα 25.
Ως αποτέλεσμα της εκτέλεσης αυτού του μαθήματος CSS, πρέπει να έχετε τα ακόλουθα αρχεία:
- Στυλ..
cSS.
- Στυλ._ Μενού.. cSS.
- plohady..
html.
- Μενού..
html.
Το ρωσικό τμήμα του Διαδικτύου αυξάνεται καθημερινά. Κατά τη διάρκεια του περασμένου έτους - δύο, ο συνολικός όγκος των ρωσικών σελίδων έχει αυξηθεί περισσότερο από δύο φορές. Σήμερα στη Ρωσία κανείς δεν θα εκπλήξει τη φράση<домашняя страничка> ή αγγλική λέξη
. Αν νωρίτερα η δημιουργία των ιστοσελίδων ήταν πολλά αγαπημένα και στις εκτάσεις του Ranet βασιλεύθηκε μόνο αναγνώρισε<киты> Σχεδιασμός ιστοσελίδων, τώρα ακόμη και ο δέκαχρονος γιος μου στον ελεύθερο χρόνο του θα μαστίζει τη δική του σελίδα του Sather, θα το τοποθετήσει σε μερικούς Δωρεάν διακομιστής (όπως το narod.ru ή το boom.ru), το οποίο κατά το παρελθόν έτος διαζευγνύτηκε επίσης πολλά στο runet. Το Web-Design σήμερα δεν εμπλέκεται, πιθανότατα δεν συνδέεται μόνο με το δίκτυο ή τεμπέληδες. Πολλοί άνθρωποι αναρωτιούνται μέσα από τους χώρους του Διαδικτύου, νωρίτερα ή αργότερα σκεφτούν τη δημιουργία των δικών τους σελίδων. Για αυτούς, το άρθρο αυτό είναι γραμμένο. Ομιλία εδώ θα πάει για<правильном> HTML για αρχάριους, δηλαδή, περίπου ορισμένα πρόσθετα χαρακτηριστικά που εγκρίθηκαν επισήμως από την κοινοπραξία του Διαδικτύου (http://www.w3.org/). Ειδικότερα, σε ορισμένες δυνατότητες που παρέχονται από το δυναμικό HTML (DHTML). Ακριβώς - για το πώς να φτιάξετε μια σελίδα που θα φανεί καλύτερα από τις σελίδες που δημιουργούνται από CSS (Cascade Style Sets, ή Cascading Style Tables)<классического> HTML, ενώ αναλαμβάνει λιγότερο χώρο και, κατά συνέπεια, φορτώστε ταχύτερα.
Λίγοι άνθρωποι που αποφασίζουν για πρώτη φορά τη δημιουργία της δικής τους εκπροσώπησης ιστού, όπισθεν σημειωματάριο "Ohm ή άλλου επεξεργαστή κειμένου όπως το homesite. Συνήθως ο νεοφερμένος θεωρεί ως εξής:<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - Δημιουργώ κείμενα στο MS Word, παρουσιάσεις - στο MS PowerPoint, οπότε θα πάρω ένα παρόμοιο πρόγραμμα για να δημιουργήσω μια ιστοσελίδα - MS FrontPage ...\u003e Έχοντας υιοθετήσει μια τέτοια απόφαση, ο νεοσυσταθείσας αποκαλυπτόμενης Web-Scaber παίζει τον εαυτό του εις διπλούν.
Την πρώτη φορά - με την έννοια της ορθολογικής χρήσης του ιστού. Το γεγονός είναι ότι όλοι οι οπτικοί συντάκτες των ιστοσελίδων στις οποίες αναφέρεται η MS FrontPage εισάγεται στις δημιουργημένες σελίδες.<отсебятину> - πολλές επιπλέον περιττές ετικέτες. Η εξαίρεση είναι ίσως η Macromedia Dreamweaver (για την οποία έχει κερδίσει την άξιζτη δημοτικότητα ως μεταξύ των αρχαρίων και μεταξύ των επαγγελματιών). Αλλά ακόμη και από αυτή την άποψη, δεν είναι ιδανικό - θέλει να φράξει το κείμενο πηγής με εισαγωγικά (στις περισσότερες περιπτώσεις εντελώς περιττές), καθώς και να εισάγετε τα σύμβολα του αναπόσπαστου χώρου στα πιο ακατάλληλα μέρη. Δικαιοσύνη αξίζει να σημειωθεί ότι όλοι οι οπτικοί συντάκτες παρέχουν στον χρήστη την ευκαιρία να συνεργαστεί με τον πηγαίο κώδικα. Δημιουργήθηκε σελίδαΑλλά τόσο πολύ που αγαπούσε από πολλές frontpage θα επαναλάβει και πάλι τα πάντα με τον δικό τους τρόπο, θα πρέπει να αλλάξετε ξανά στην οπτική λειτουργία.
Από αυτό προκύπτει ότι η δεύτερη φορά ο νεοφερμένος διαδραματίζει ακριβώς όσον αφορά την ευελιξία και την πληρότητα της διαχείρισης των συνιστωσών των οπτικών συντήρησης δεν παρέχουν τέτοια ελευθερία δημιουργικότητας, η οποία θα σας παράσχει εργασία απευθείας με τον πηγαίο κώδικα της δημιουργίας σελίδας.
Λοιπόν, τώρα ας πάμε κατευθείαν στην περίπτωση - να δημιουργήσουμε όμορφες και μικρές ιστοσελίδες χρησιμοποιώντας φύλλα στυλ Cascading (στο μέλλον, θα χρησιμοποιήσω το συντομογραφημένο όνομα τους - CSS). Θεωρείται ότι εσείς, αγαπητοί αναγνώστες, αφού διαβάσετε την είσοδο, συμφωνήθηκε μαζί μου, αρνήθηκε οπτικοί συντάκτες, εξόρυξη ένα βιβλίο στο HTML, μελετήθηκε τουλάχιστον ένα μικρό αριθμό κύριων ετικετών και χαρακτηριστικών και καίει την επιθυμία να μάθετε τι είναι και τι CSS είναι και τι τρώει.
Λογική και σωματική μορφοποίηση
Κλασική έκδοση HTML 3.2, τα πιο συνηθισμένα αυτή τη στιγμή στο δίκτυο, μας παρέχει τα φυσικά εργαλεία μορφοποίησης, για τα οποία υπάρχουν ειδικές ετικέτες (για παράδειγμα, ετικέτες , , ) Και πολλά διαφορετικά χαρακτηριστικά (μέγεθος, χρώμα, ύψος, πλάτος κ.λπ.). Χαρακτηριστικά της μορφοποίησης ιστού μας αναγκάζονται ξανά και και πάλι να συνταγογραφούν αυτές τις ετικέτες και τα χαρακτηριστικά για κάθε νέα παράγραφο, η οποία, φυσικά, αυξάνει έντονα το μέγεθος του κώδικα σελίδων. Επιπλέον, με αυτή τη μέθοδο μορφοποίησης σε περίπτωση ανάλυσης της δομής του εγγράφου, παραμένει ακατανόητο γιατί αυτή η λέξη επισημαίνεται με λιπαρό σχεδιασμό - μόνο για την ομορφιά ή να δώσει ιδιαίτερη προσοχή στον τελικό χρήστη; Εάν ένας ζωντανός άνθρωπος εξακολουθεί να βρίσκεται σε ένα κράτος, κατανοεί κακή τα λογικά κτίρια των σελίδων στο κλασικό HTML, τότε οι μηχανές αναζήτησης ή, για παράδειγμα, τα φωνητικά προγράμματα περιήγησης δεν μπορούν να ειπωθούν. Το παίρνουν ναι. Βάλτε καθαρή λογική στη δομή της σελίδας. Ακριβώς λόγω τέτοιων<неподвластности> Λογική ανάλυση Αυτή τη μέθοδο Η μορφοποίηση κλήθηκε φυσική μορφοποίηση. Σε αντίθεση με τον ίδιο κατά τη δημιουργία μιας νέας προδιαγραφής του HTML 4.0, η λογική μορφοποίηση έγινε κάτω από το κεφάλι της γωνίας, δηλαδή, μια τέτοια μορφοποίηση, στην οποία η δομή και ο σχεδιασμός του εγγράφου θα διαχωριστούν σαφώς. Αυτή η μέθοδος μορφοποίησης συνιστάται η εφαρμογή μιας κοινοπραξίας στο Internet, καθώς παρέχει προηγμένες πληροφορίες από τις πληροφορίες δικτύου στο δίκτυο, σας επιτρέπει να δομήσετε με μεγαλύτερη ακρίβεια και να αναλύσετε πληροφορίες μέσω των μηχανών αναζήτησης και επίσης να μειώσετε σημαντικά το μέγεθος των σελίδων και την ώρα του την πλήρη φόρτωσή τους. Ο διαχωρισμός της δομής και ο σχεδιασμός του εγγράφου εφαρμόζεται μόνο χρησιμοποιώντας το CSS.
Αξίζει να σημειωθεί ότι οι ενσαρκώσεις της λογικής μορφοποίησης ήταν παρούσες σε κλασικές ετικέτες HTML
,
,
Φυσικά, συνέβαλε στον διαχωρισμό των εγγράφων για ορισμένα λογικά μπλοκ. Αλλά πολλοί από τους συγγραφείς των σελίδων χρησιμοποιήθηκαν και μέχρι σήμερα εξακολουθούν να χρησιμοποιούν αυτές τις ετικέτες όχι κατά προορισμό: σε σχέση με την έλλειψη κεφαλαίων για την εγγραφή της σελίδας ετικετών τίτλου, για παράδειγμα, που χρησιμοποιούνται για την επισήμανση αυτών των στοιχείων Η σελίδα, η οποία δεν ήταν πραγματικά πρωτοσέλιδα. Το CSS παρέχει επαρκή ποσότητα εργαλείων σχεδιασμού, η οποία σας επιτρέπει να ακολουθείτε με μεγαλύτερη ακρίβεια τους κανόνες της λογικής μορφοποίησης και να διαχωρίζετε πραγματικά τη δομή της σελίδας από την οπτική του αναπαράσταση.
Σκοπός του στυλ ξεχωριστά στοιχεία σελίδας
Το CSS σας επιτρέπουν να αντιστοιχίσετε το δικό σας στυλ. Οπτική παρουσίαση Οποιαδήποτε ετικέτα HTML, συμπεριλαμβανομένης της ετικέτας
. Εάν το στυλ καθορίζεται για την ετικέτα Κληρονομείται από όλα τα στοιχεία (παραγράφους, τίτλους κ.λπ.) τοποθετημένα μέσα σε αυτό το δοχείο, απουσία δικών στυλ για αυτά τα στοιχεία. Επομένως, δεν χρειάζεται πλέον να συνταγογραφήσετε ετικέτες και τα χαρακτηριστικά του χρώματος, του μεγέθους κλπ. Για κάθε παράγραφο στη σελίδα - αρκετά για να ζητήσετε κάποιο στυλ για ετικέτα Και όλες οι παραγράφους στη σελίδα θα εμφανιστούν ανάλογα με αυτό το στυλ. Πως να το κάνεις?Ας υποθέσουμε ότι θέλουμε να εμφανιστούν όλες οι παραγράφους από την εποχή της νέας ρωμαϊκής γραμματοσειράς 12 σκοτεινών πράσινων σημείων. Για να το κάνετε αυτό, θα πρέπει να καταχωρίσετε το χαρακτηριστικό ετικέτα στυλ
Αναθέτοντας την αντίστοιχη αξία σε αυτόν. Η σύνταξη είναι:Έτσι, όλες οι παραγράφους στη σελίδα εμφανίζονται όπως θέλαμε και ο κώδικας δεν έχει φράξει με ετικέτες Και τα χαρακτηριστικά τους. Φανταστείτε τι είδους εξοικονόμηση μεγέθους αρχείου, εάν η σελίδα σας αποτελείται από Μεγάλος αριθμός Κείμενο!
Σημείωση - Όταν ορίσαμε την επιγραφή γραμματοσειράς, μετά τα ονόματα των εποχών της νέας ρωμαϊκής, επεσήμαναμε τη Serif επιγραφή, που σημαίνει οποιαδήποτε γραμματοσειρά με Serifs. Εάν η εποχή της νέας ρωμαϊκής γραμματοσειράς δεν είναι εγκατεστημένη στο μηχάνημα τελικού χρήστη, το πρόγραμμα περιήγησης θα αντικαταστήσει κάποια από τις διαθέσιμες γραμματοσειρές με serifs αντί και η χαρτογράφηση της σελίδας θα είναι όσο το δυνατόν πιο κοντά σε αυτό που έχετε σκεφτεί. Επιπλέον, το παράδειγμα θα γίνει κατανοητό και για το IE (4.0 και υψηλότερο) και για το NN (4.0 και υψηλότερο). Παρόλο που είναι απαραίτητο να κάνουμε άμεση κράτηση ότι ο Netscape Navigator υποστηρίζει όλες τις δυνατότητες που παρέχει το CSS και το DHTML και αυτό σίγουρα δεν αυξάνει τον αριθμό των οπαδών του.
Το παράδειγμα του στυλ χρησιμοποιείται απευθείας στην ετικέτα εγγράφων - το λεγόμενο inline στυλ. Αυτή η μέθοδος δέσμευσης CSS με ένα αρχείο HTML συνιστάται σε απομονωμένες περιπτώσεις - εάν αυτό το στυλ προγραμματίζεται να εφαρμοστεί μόνο σε ένα στοιχείο μόνο σε μία σελίδα ιστότοπου. Εάν το στυλ θα πρέπει να εφαρμοστεί σε πολλά στοιχεία σε μία σελίδα ή αρκετές σελίδες αμέσως, συνιστώνται άλλες σελίδες και μέθοδοι δέσμευσης HTML, τις οποίες θα μιλήσουμε.
Σκοπός στυλ σε πολλά στοιχεία μιας σελίδας - Δημιουργία ενός ενσωματωμένου φύλλου στυλ
Ενώ μιλούσαμε για το έργο μόνο ενός στυλ για ένα στοιχείο. Και τώρα θα μάθουμε πώς να δημιουργήσουμε πίνακες στυλ.
Ας θέλουμε όλες τις παραγράφους στη σελίδα να μοιάζουν με το προηγούμενο παράδειγμα, όλες οι κεφαλίδες πρώτου επιπέδου εμφανίστηκαν στη γραμματοσειρά του πράσινου χρώματος ενός τολμηρού μεγέθους μεγέθους 16 βαθμών και όλων των κεφαλίδων δευτέρου επιπέδου - μέγεθος γραμματοσειράς Helvetica 14 από τα ημι-πράσινα σώματα του κίτρινου-πράσινου. Να το κάνετε αυτό, πρέπει να δημιουργήσουμε<голове> Σελίδες (οπουδήποτε μεταξύ ετικετών
και) Ο εισαχόμενος πίνακας στυλ στα οποία προεδρεύουμε αρκετούς κανόνες αμέσως. Για να το κάνετε αυτό, δημιουργήστε μια ετικέτα δοχείου πίνακα στυλ, ξεκινώντας από την ετικέτα Discovery.. Μέσα σε αυτή την ετικέτα δοχείου, είμαστε ελεύθεροι να ορίσετε οποιονδήποτε αριθμό κανόνων CSS που αποτελείται από έναν επιλογέα (τα ονόματα της ετικέτας HTML στην οποία θα εφαρμοστεί ο κανόνας) και ο ορισμός του (απευθείας ως σύνολο μέσων μορφοποίησης) που περικλείονται σε σγουράκια . Η σύνταξη για το παραπάνω παράδειγμα είναι:
... ...Αυτή η μέθοδος δεσμευτικής CSS και HTML ονομάζεται εφαρμογή. Συνιστάται να εφαρμόσετε σε περιπτώσεις όπου αποφασίζετε να ορίσετε οποιοδήποτε σύνολο κανόνων μορφοποίησης μόνο για μία σελίδα του ιστότοπου και όλες οι άλλες σελίδες σύμφωνα με το σχέδιό σας θα πρέπει να φαίνονται διαφορετικές.
Σκοπός των στυλ ταυτόχρονα για πολλές σελίδες του ιστότοπου
Εκτός από την ενσωμάτωση και την εφαρμογή, οι επικοινωνίες CSS και HTML χρησιμοποιούν μεθόδους εισαγωγής και δέσμευσης πινάκων στυλ. Αυτό είναι σίγουρα Τους καλύτερους τρόπους Για να δώσετε ένα σχεδιασμό ενός στυλ, πολλές (ή ακόμα και σε όλους) σελίδες ενός ιστότοπου. Ταυτόχρονα, ολόκληρο το φύλλο στυλ αποθηκεύεται σε ένα αρχείο (η επέκταση αρχείου πρέπει να είναι στάνταρ - .cs).
Εδώ είναι ένα παράδειγμα του περιεχομένου ενός τέτοιου αρχείου (για παράδειγμα, my.css):
Σώμα (Font-Family: "Times New Roman", Serif; Μέγεθος γραμματοσειράς: 12pt; Χρώμα: Σκούρο: Carmgreen;) H1 (Font-Face: Arial, Sans-Serif; Γραμματοσειρά: 16pt. Χρώμα: πράσινο; : Bold,) H2 (FONT-Face: Arial, Sans-Serif, μεγέθους γραμματοσειράς: 14pt; Χρώμα: Greenynellow; Γραμματοσειρά-Βάρος: Bold; Στυλ γραμματοσειράς: Italic;)
Σημείωση: Ετικέτες Μέσα στο αρχείο πίνακα αρχείων, η επέκταση. Το CSS υποδεικνύει ρητά το πρόγραμμα περιήγησης που το αρχείο είναι ένας πίνακας στυλ. Ένα τέτοιο αρχείο μπορεί να συνδεθεί αμέσως με πολλές σελίδες (ή να εισαγάγει αμέσως σε διάφορες σελίδες). Στο αρχείο HTML για δέσμευση πρέπει να εγγραφείτε οπουδήποτε μεταξύ των ετικετών
και Επόμενη συμβολοσειρά:
... ...Αυτή η γραμμή υποδεικνύει ότι ο σύνδεσμος αρχείου είναι ένας πίνακας στυλ (rel \u003d "φύλλο στυλ), η μορφή αυτού του αρχείου είναι .css (type \u003d" κείμενο / css ") και βρίσκεται στον ίδιο κατάλογο με το αρχείο HTML ή έχει το αρχείο HTML μια άλλη διεύθυνση URL (href \u003d "my.css"). Προφανώς, μπορούμε να καταχωρίσουμε αυτή τη γραμμή σε οποιαδήποτε (καθόλου) από τα αρχεία HTML. Έτσι, το ομοιόμορφο στυλ θα διευκρινιστεί αμέσως για αρκετές σελίδες.
Παρακαλείστε να σημειώσετε ότι οι μορφές inline (στυλ που συνταγογραφούνται για μεμονωμένα στοιχεία σελίδας χρησιμοποιώντας το χαρακτηριστικό στυλ) και ενσωματωμένα στυλ (στυλ που προδιαγράφονται<голове> Σελίδες μέσα στην ετικέτα του δοχείου ...
Εκτός από τη διεύθυνση του εισαγόμενου φύλλου στυλ, μπορείτε να εγγραφείτε στο δοχείο ετικέτας ...
...Ερώτηση δημοσιογράφου
Συνεντευμένη απάντηση
...
Στο δεδομένο παράδειγμα, οι ερωτήσεις του δημοσιογράφου θα εμφανιστούν από τους Arials της γκρίζας, τολμηρής, επιθεώρησης σώματος, 10 μονάδες με μια περίπτωση 15 εικονοστοιχείων από την αριστερή άκρη της σελίδας. Οι απαντήσεις θα εμφανιστούν από την εποχή της νέας ρωμαϊκής γραμματοσειράς μεγέθους 12 μαύρων σημείων. Είναι σημαντικό να μην ξεχάσετε να ορίσετε την παράμετρο τάξης σε διάφορες κατηγορίες παραγράφων απευθείας στο Κωδικός HTML. Μπορείτε να δημιουργήσετε οποιοδήποτε αριθμό κατηγοριών για οποιαδήποτε σελίδα.
Αναγνωριστικό επιλογέα.
Πάρτε μια άλλη περίπτωση. Ας υποθέσουμε ότι θέλετε να δημιουργήσετε οποιαδήποτε μοναδικά στοιχεία στη σελίδα στην οποία στο μέλλον σχεδιάζετε να επικοινωνήσετε με τα προγράμματα JavaScript. Ίσως αυτά τα στοιχεία να επαναληφθούν σε άλλες σελίδες και θα θέλατε να τους ρωτήσετε ένα μόνο σχέδιο από το CSS. Σε αυτή την περίπτωση, σε Cascading Styles, υπάρχει η δυνατότητα εκχώρησης μοναδικών στοιχείων αναγνωριστικού (ID). Τα πιο συχνά χρησιμοποιούμενα αναγνωριστικά χρησιμοποιούνται για στοιχεία μορφών που στην προδιαγραφή HTML 4.0 έχουν πλήρη ή περιορισμένη υποστήριξη CSS (ανάλογα με το στοιχείο). Ακολουθεί ένα παράδειγμα της ανάθεσης του αναγνωριστικού και των κανόνων CSS σε τέτοια στοιχεία:
... ... ... ...
Ομοίως, τα μοναδικά αναγνωριστικά μπορούν να αντιστοιχιστούν σε οποιοδήποτε αριθμό οποιωνδήποτε στοιχείων της σελίδας. Αυτό μπορεί να είναι χρήσιμο για την πρόσβαση στο στοιχείο από το πρόγραμμα JavaScript και αλλαγές στο στυλ της οθόνης σε απάντηση στις ενέργειες χρήστη, το οποίο σας επιτρέπει να δημιουργήσετε διάφορα δυναμικά αποτελέσματα.
Επιλογές συμφραζομένων
Ας υποθέσουμε ότι δημιουργήσαμε ένα φύλλο στυλ σύμφωνα με το οποίο όλοι οι τίτλοι του πρώτου επιπέδου στη σελίδα εμφανίζονται με κόκκινο χρώμα σε γκρίζο φόντο, όλες τις παραγράφους - πράσινο σε κίτρινο φόντο και όλα διατίθενται με ετικέτα 1 λέξεις μέσα στις παραγράφους - μαύρο σε ασημένιο φόντο. Κωδικός πίνακα στυλ, όπως έχετε ήδη μαντέψει, ενώ μοιάζει με αυτό:
H1 (χρώμα: κόκκινο, φόντο-χρώμα: γκρι;) p (χρώμα: πράσινο, φόντο-χρώμα: κίτρινο;) em (χρώμα: μαύρο χρώμα;
Ας υποθέσουμε ότι θέλουμε επίσης να επισημάνετε κάποιες λέξεις στον τίτλο μέσω της ίδιας ετικέτας Αλλά δεν είμαστε ικανοποιημένοι με την εμφάνιση του μαύρου κειμένου σε ένα ασημένιο φόντο στον τίτλο. Θέλουμε να επισημάνουμε τις λέξεις στον τίτλο του χρώματος της Βουργουνδίας σε γκρίζο φόντο. Για αυτό, υπάρχουν επιλογείς συμφραζομένων. Εγγραφή του κανόνα που θα προσθέσουμε στον πίνακα στυλ γι 'αυτό θα μοιάζει με αυτό:
H1 em (Χρώμα: # CC0000, φόντο-χρώμα: γκρι;)
Και εδώ είναι ένα παράδειγμα ενός κώδικα σελίδας χρησιμοποιώντας αυτόν τον επιλογέα συμφραζομένων:
... ... ...Αυτή είναι η κεφαλίδα του πρώτου επιπέδου με αφιερωμένος Εν συντομία
Και αυτή είναι η συνήθης παράγραφος με Αφιερωμένα λόγια
...
Σήμερα είναι όλα. Την επόμενη φορά που θα μιλήσουμε για τους κανόνες για τη μορφοποίηση στοιχείων μπλοκ της σελίδας, σχετικά με την τοποθέτηση στοιχείων και άλλων ενδιαφερόντων και χρήσιμων χαρακτηριστικών που εφαρμόζονται χρησιμοποιώντας CSS.
Στυλ πίνακα εφαρμογών σε έγγραφο
Ενσωμάτωση φύλλων στυλ στο έγγραφο
Στυλ εργασιών για ένα ξεχωριστό τεμάχιο εγγράφου
Τραπέζια στυλ εισαγωγής
Καθορισμός αρκετών ιδιοτήτων ταυτόχρονα
Ομαδοποίηση επιλογών
Σχολιάζοντας τον πίνακα στυλ
Ακίνητα στυλ
Ιστορικό Ιστορικό
Πλαισίωση στοιχείων
Ακίνητα των καταλόγων
Ιδιότητες κειμένου
Ομαδοποίηση ιδιοτήτων για απλοποίηση ορισμού στυλ
Ιδιότητες κληρονομιάς
Εφαρμογή επιλογών συμφραζομένων
Γιατί τα τραπέζια στυλ ονομάζονται καταρράκτεςΤα τραπέζια στυλ παρέχονται από τις συστάσεις του W3C και αποτελούν ένα τυποποιημένο εργαλείο για τη μορφοποίηση ιστοσελίδων χρησιμοποιώντας προσεγγίσεις χαρακτηριστικά των συστημάτων δημοσίευσης επιτραπέζιων υπολογιστών. Το πρόγραμμα Microsoft Internet Explorer 3.0 έχει γίνει το πρώτο πρόγραμμα περιήγησης που υποστηρίζει φύλλα στυλ. Το πρόγραμμα περιήγησης NetScape Navigator υποστηρίζει φύλλα στυλ, ξεκινώντας από την έκδοση 4.0v2 (Beta 2) διαθέσιμη από τον Φεβρουάριο του 1997.
Λεπτομέρειες σχετικά με τις συστάσεις του W3C μπορούν να ληφθούν σε: h tTP: //www.w3.org/pub/www/tr/wd-cssl.html. . Το πρότυπο W3C χρησιμοποιεί τον όρο "Cascade Level 1" Styles 1 "(" Style Style Style Level 1, CSSI ").
Αρχικά, είναι απαραίτητο να εξηγήσετε τι σημαίνει με το όνομα "Τραπέζια στυλ". Οι περισσότεροι σύγχρονοι συντάκτες κειμένου επιτρέπουν στον χρήστη να καθορίσει το στυλ που θα χρησιμοποιηθεί για να διαμορφώσει το έγγραφο. Συγκεκριμένα, μπορείτε να επιλέξετε ένα στυλ παραγράφου με ένα ενιαίο διάμεσο διάστημα, γραμματοσειρά ταχυμεταφορών και αριστερό πεδίο μιας ίντσας. Αυτό το στυλ μορφοποίησης μπορεί να εφαρμοστεί περαιτέρω σε οποιοδήποτε αριθμό παραγράφων αυτού και άλλων εγγράφων. Nt πίνακες στυλ
Μ. L Πράξη με τον ίδιο τρόπο. Παρακάτω είναι μια σύντομη λίστα βασικών λειτουργιών:Αλλάξτε τις αποστάσεις μεταξύ σειρών, λέξεων και χωριστών χαρακτήρων.
Ορίστε τα αριστερά, δεξιά, άνω και κάτω πεδία του στοιχείου (μπλοκ κειμένου δοχείου HTML).
Εγκατάσταση συνταξιοδότησης στοιχείου.
Αλλαγή του μεγέθους, στυλ και άλλων χαρακτηριστικών γραμματοσειρών στοιχείων.
Ρύθμιση του πλαισίου γύρω από το στοιχείο.
Ενεργοποιώντας την εικόνα φόντου και το χρώμα φόντου στο στοιχείο.
Το μεγάλο πλεονέκτημα των στυλ HTML είναι η δυνατότητα διανομής της λειτουργίας μορφοποίησης από το περιεχόμενο του εγγράφου. Πρώτον, καθορίζεται πώς πρέπει να μοιάζει το κείμενο σε μια συγκεκριμένη θέση της σελίδας και στη συνέχεια να εισέλθει στο ίδιο το κείμενο. Εάν αργότερα αποφασίσετε, για παράδειγμα, αντικαταστήστε το χρώμα της γραμματοσειράς των κεφαλίδων στο μπλε, γι 'αυτό θα είναι αρκετό να αλλάξετε το στυλ αυτών των τίτλων. Να κάνετε αλλαγές στο κείμενο που δεν χρειάζεται .
Υπάρχουν τέσσερις μέθοδοι για την εφαρμογή ενός φύλλου στυλ στο έγγραφο:
-
Σύνορα - Χρησιμοποιείται για τον προσδιορισμό του πλαισίου που βρίσκεται στα αριστερά, στα δεξιά, πάνω και κάτω από το στοιχείο. Μπορείτε να ορίσετε το πλάτος, το χρώμα και το στυλ πλαισίου.
-
Περιθώριο - χρησιμοποιούνται για τον προσδιορισμό των πεδίων που βρίσκονται στα αριστερά, στα δεξιά, πάνω και κάτω από το στοιχείο. Μπορείτε επίσης να ορίσετε το πλάτος των πεδίων.
-
padding - Χρησιμοποιείται για τον καθορισμό του ελεύθερου χώρου μεταξύ του πλαισίου και των περιεχομένων του στοιχείου.
-
Εμπορευματοκιβώτιο ul.
Οι ιδιότητες σας δίνουν πλήρη έλεγχο του τρόπου εμφάνισης του προβολέα. Με τη βοήθειά τους, μπορείτε να ελέγξετε το χρώμα, το μέγεθος, τη γραμματοσειρά, ένα διάστημα διαστήματος κλπ. Οι ακόλουθες λεπτομέρειες περιγράφονται λεπτομερώς όλες τις ιδιότητες του κειμένου.
Πολλές από τις ιδιότητες που περιγράφονται παραπάνω μπορούν να ομαδοποιηθούν μεταξύ τους. Έτσι, αντί του κανόνα
H1 (Γραμματοσειρά γραμματοσειράς: Bold, στυλ γραμματοσειράς: Κανονική, Γραμματοσειρά-Μέγεθος: 12PT; Font-Face: Serif)
Μπορείτε να γράψετε μια πιο σύντομη διατύπωση:
H1 (γραμματοσειρά: τολμηρό κανονικό 12PT Serif)
Τα φύλλα στυλ HTML σας επιτρέπουν να ομαδοποιήσετε τα περιθώρια, φόντο, γραμματοσειρά, λίστα, περιθώριο και padding. Εξετάστε κάθε μία από τις ομάδες ξεχωριστά.
Ομάδα ιδιοτήτων των συνόρων
Οι ιδιότητες της ομάδας μπορούν να κατηγοριοποιηθούν με πέντε διαφορετικούς τρόπους. Μπορείτε να ορίσετε ιδιότητες για ξεχωριστή πλευρά του πλαισίου χρησιμοποιώντας
ΣΙ. ΠΑΡΑΓΓΕΛΙΑ - Κορυφή, Δείκτη, Ονοτομίας και Ορίστε αριστερά, ή ορίστε αμέσως ολόκληρο το πλαίσιο με το περίγραμμα.Με κάθε μία από αυτές τις ιδιότητες, μπορείτε να καθορίσετε το πλάτος, το στυλ και το χρώμα του πλαισίου, για παράδειγμα:
b παραγγελία - κορυφή: λεπτό διάστικτο μαύρο
Ομάδα ιδιοτήτων Ιστορικό
Στην ομάδα ιδιοτήτων φόντου, μπορείτε να καθορίσετε τις τιμές για το χρώμα, την εικόνα, την επανάληψη, το συνημμένο και τη θέση, για παράδειγμα:
Ιστορικό: Λευκή διεύθυνση URL (http://www.myserver.com/image/bg.gif) Επαναλάβετε-x σταθερή κορυφή αριστερά
Ομάδα ακινήτων γραμματοσειράς
Η ομάδα γραμματοσειράς μπορεί να δώσει βάρος, στυλ, μέγεθος και οικογένεια, για παράδειγμα:
Γραμματοσειρά: Έντονη κανονική 12PT φορές, Serif
Λίστα ιδιοτήτων ομάδας
Οι ιδιότητες ομαδοποιούνται χρησιμοποιώντας την ιδιότητα του στιλ λίστας. Είναι δυνατόν να καθορίσετε την εικόνα για τον δείκτη, τον τύπο και τη θέση του δείκτη, για παράδειγμα:
Στυλ λίστας: τετράγωνο URL (http://www.myserver.com/Images/marker.gif) μέσα
Ομάδα ιδιοτήτων περιθωρίου περιθωρίου
Η ομάδα περιθωρίου μπορεί να καθοριστεί πλάτος για κάθε ένα από τα κορυφαία, δεξιά, κάτω και αριστερά πεδία, για παράδειγμα:
Περιθώριο: .5in 1in 1in 1in
Εάν έχει καθοριστεί μόνο μία τιμή, το πρόγραμμα προβολής θα κάνει το πλάτος άλλων πεδίων το ίδιο. Εάν δεν καθορίσετε μία ή δύο τιμές, τα πεδία με απροσδιόριστες τιμές θα είναι το ίδιο πλάτος ως αντίθετα πεδία. Για παράδειγμα, εάν μειώσετε την τελευταία τιμή (αριστερά), το πλάτος των αριστερών πεδίων θα είναι ίσο με το πλάτος των δεξιών πεδίων, δηλ. 1 ίντσα.
Ομάδα ακινήτων
Στην ομάδα Padding, μπορείτε να καθορίσετε τις τιμές για την κορυφή, δεξιά, κάτω και αριστερά, για παράδειγμα:
padding :.25in .25in .25in .25ιν
Εάν οριστεί μόνο μία τιμή, ο θεατής θα εκχωρήσει την ίδια τιμή με την παρουσία. Εάν δεν καθορίζετε μία ή δύο τιμές, οι ελεύθεροι χώροι με απροσδιόριστες τιμές θα είναι το ίδιο πλάτος καθώς είναι αντίθετο. Για παράδειγμα, εάν μειώσετε την τελευταία τιμή (αριστερά), ο ελεύθερος χώρος μεταξύ της αριστερής πλευράς του πλαισίου και η περιεκτικότητα του στοιχείου θα είναι η ίδια με το χώρο στη δεξιά πλευρά.
Σε υποδεέστερες ετικέτες HTML κληρονομούν ορισμένες ιδιότητες των γονικών ετικετών. Για παράδειγμα, όλες οι ετικέτες εμπορευματοκιβωτίων
(< P > και- ) θα έχει κάποιες ιδιότητες ετικέτας . Επίσης ετικέτα
- Κληρονομεί ιδιότητες ετικέτας
- . Εξετάστε τον ακόλουθο κώδικα:
- : ένα για την περίπτωση που είναι υποταγμένος στην ετικέτα
- Μόνο αν αυτή η ετικέτα είναι μια δευτερεύουσα ετικέτα
-
:
- Μπορείτε να ορίσετε ένα άλλο στυλ, ισχύει μόνο στην περίπτωση της υποταγής στην ετικέτα
-
:
UL LI (Τύπος τύπου λίστα: Πλατεία)
Πρέπει να σημειωθεί ότι ο κατάλογος των επιλογών δεν διαιρείται με κόμματα. Διαφορετικά, όλες οι ετικέτες της λίστας θα εκχωρηθούν το ίδιο στυλ.
Στις συστάσεις των φύλλων στυλ W3C ονομάζονται "πίνακες στυλ Cascade " Επειδή για την απόρριψη της ιστοσελίδας, μπορείτε να εφαρμόσετε ένα, αλλά ταυτόχρονα αρκετοί πίνακες. Ταυτόχρονα, το ίδιο το πρόγραμμα προβολής καθορίζει την ακολουθία της χρήσης των πινάκων και επιτρέπει τις συγκρούσεις μεταξύ τους στην αρχή του cascading. Για παράδειγμα, ένα φύλλο στυλ για μια σελίδα μπορεί να προσδιοριστεί όχι μόνο από τον συγγραφέα του, αλλά και από τον αναγνώστη, και στη συνέχεια οι κανόνες Cascading αποφασίζουν ποιες μορφές θα είναι ισχυρές.
Λειτουργεί? Κάθε πρόγραμμα περιήγησης του κανόνα αποδίδει τον συντελεστή βάρους. Κατά την ερμηνεία κάθε ερμηνείας ετικέτας, το πρόγραμμα σαρώνει όλους τους κανόνες για αυτήν την ετικέτα και τα ταξινομεί με το μέγεθος του συντελεστή βάρους. Κερδίζει τον πιο "βαρύ" κανόνα.
Υπάρχουν οι ακόλουθες γενικές αρχές για την επίλυση συγκρούσεων μεταξύ φύλλων στυλ:
Τύποι τύπου τύπου στυλ σε έγγραφο (φθίνουσα): τρέχουσα ρύθμιση στυλ (inline), ενσωμάτωση (ενσωμάτωση), σύνδεση (σύνδεση).
Μπορείτε επίσης να αλλάξετε την αναλογία βάρους του κανόνα χρησιμοποιώντας τη λέξη εξυπηρέτησης σημαντική. Στο παρακάτω παράδειγμα, η τιμή των κόκκινων ιδιοτήτων
OL LI (Τύπος στιλ λίστας: Δεκαδικό)
Για την ίδια ετικέτα
- Μπορείτε να ορίσετε ένα άλλο στυλ, ισχύει μόνο στην περίπτωση της υποταγής στην ετικέτα
Γεια. Αυτή είναι μια παράγραφο κειμένου. Αυτό τονίζεται.
Ο πίνακας των στυλ αυτού του εγγράφου θέτει χρώμα σε ετικέτα
< P > Μπλε, ωστόσο, χρώμα για ετικέτα Είναι σαφώς καθορισμένο (από προεπιλογή είναι το μαύρο χρώμα). Δεν υπάρχει τίποτα να ανησυχείτε, αφού αυτή η ετικέτα βρίσκεται στο γονικό δοχείοΚαι έτσι κληρονομεί μπλε.
Μερικές φορές υπάρχει ανάγκη να προσδιοριστούν δύο (ή περισσότερα) στυλ για μία ετικέτα. Για παράδειγμα, ίσως χρειαστεί να καθορίσετε δύο στυλ για ετικέτα
-
, και το δεύτερο όταν είναι υποταγμένος στην ετικέτα
- . Είναι δυνατή η χρήση επιλογών με βάση τα συμφραζόμενα.
Ο επιλογέας συμφραζομένων ορίζει την ακριβή ακολουθία ετικετών για τις οποίες θα εφαρμοστεί ένα ή ένα άλλο στυλ. Με άλλα λόγια, μπορείτε να ορίσετε ότι πρέπει να εφαρμοστεί κάποιο στυλ, για παράδειγμα, στην ετικέτα
H1 (Χρώμα: Κόκκινο! Σημαντικό Γραμματοσειρά: BOLD FONT-Οικογένεια: Sans-Serif! Σημαντικό)
Η τάξη είναι ο ορισμός πολλών στυλ ενός στοιχείου, το καθένα από τα οποία μπορεί να χρησιμοποιηθεί στη σωστή θέση της σελίδας. Για παράδειγμα, μπορείτε να ορίσετε τρεις παραλλαγές του στυλ τίτλου H1. Ο προσδιορισμός των παραλλαγών είναι παρόμοιος με την ένδειξη του στυλ, μόνο το όνομα της ετικέτας προστίθεται ένα αυθαίρετο όνομα της τάξης, διαχωρίζεται από ένα σημείο:
H1 Blue (Χρώμα: Μπλε) H1 .RED (Χρώμα: Κόκκινο) H1 .Black (Χρώμα: Μαύρο)
Τώρα, συμπεριλαμβανομένου ενός εγγράφου TEG
Μπορείτε να ορίσετε ένα συγκεκριμένο στυλ σε αυτό χρησιμοποιώντας το χαρακτηριστικό κλάσης:
Κόκκινος τίτλος
- Κληρονομεί ιδιότητες ετικέτας
Σύνδεση - Μπορείτε να συνδέσετε το HTML - ένα έγγραφο με το τραπέζι στυλ που είναι αποθηκευμένο σε ένα ξεχωριστό αρχείο.
Ενσωμάτωση (ενσωμάτωση) - Μπορείτε να ενσωματώσετε το φύλλο στυλ σε html - έγγραφο χρησιμοποιώντας το δοχείο
Ετικέτα
Όπως αναφέρθηκε προηγουμένως, τα φύλλα στυλ αποθηκεύονται Αρχεία κειμένου, βολικό να επεξεργαστείτε. Είναι εύκολο να τα δημιουργήσετε χειροκίνητα, ωστόσο υπάρχουν ειδικοί συντάκτες των πινάκων στυλ, όπως το δημοφιλές πρόγραμμα της Microsoft Frontpage.
Τα τραπέζια στυλ σας επιτρέπουν να καθορίσετε το στυλ για μία ή περισσότερες ετικέτες. Για παράδειγμα, μπορείτε να δημιουργήσετε έναν πίνακα στυλ, ορίζοντας στυλ για ετικέτες
,
,
ΚΑΙ . Κάθε ορισμός καλείται Κανόνας ( μι). Ο κανόνας περιέχει εκλέκτορας (HTML TEG), ακολουθούμενη από δήλωση (Ορισμός στυλ). Ο επιλογέας είναι ένας σύνδεσμος μεταξύ ορισμού και ετικέτας. Παρακάτω είναι ένα παράδειγμα του κανόνα που δείχνει το στυλ για κάθε μία από τις ετικέτες του τίτλου.
:
H1 (Χρώμα: Μπλε)
Η δήλωση βρίσκεται σε σγουρές αγκύλες. Κάθε δήλωση έχει δύο μέρη: το όνομα του ακινήτου και η τιμή που αντιστοιχεί σε αυτό που χωρίζεται από το κόλον. Το HTML περιλαμβάνει δεκάδες ιδιότητες (μέγεθος γραμματοσειράς, στυλ γραμματοσειράς, χρώμα, περιθώριο-δεξί κλπ.), Οι οποίες θα συζητηθούν παρακάτω. Κάθε ιδιοκτησία μπορεί να πάρει διάφορες τιμές, μία από τις οποίες το αποδίδεται από προεπιλογή.
Στο προηγούμενο παράδειγμα, καθορίστηκε μόνο μία έγχρωμη ιδιότητα. Ωστόσο, τίποτα δεν εμποδίζει την αναγνώριση ενός αριθμού ιδιοτήτων σε μία ετικέτα, χωρίζοντάς τα από ένα ερωτηματικό εκτός:
Γεια σας (Χρώμα: Μπλε; Μέγεθος γραμματοσειράς: 12PT; Γραμμή κειμένου: Κέντρο)
Σε αυτό το παράδειγμα, το πρόγραμμα προβολής θα εμφανίσει κάθε κεφαλίδα πρώτου επιπέδου με μπλε μέγεθος γραμματοσειράς 12 βαθμών και γραμμές στο κέντρο του παραθύρου. Για όλες τις άλλες ιδιότητες, οι προεπιλεγμένες τιμές θα χρησιμοποιηθούν (για παράδειγμα, η ιδιότητα τύπου γραμματοσειράς θα αντιστοιχιστεί στο φυσιολογικό).
Εάν πρέπει να ορίσετε το ίδιο στυλ για αρκετές ετικέτες, μπορείτε να τις αναφέρετε σε ξεχωριστή λίστα:
P (Μέγεθος γραμματοσειράς: 12pt)
UL (μέγεθος γραμματοσειράς: 12pt)
LI (μέγεθος γραμματοσειράς: 12PT)Το HTML σας επιτρέπει να κάνετε το ίδιο σε μια πιο συμπαγή μορφή - σε μία γραμμή:
P, UL, LI (μέγεθος γραμματοσειράς: 12pt)
Το κόμμα εδώ είναι ένα υποχρεωτικό στοιχείο. Εάν παραλειφθεί, η έννοια του κανόνα θα αλλάξει (βλέπε τμήμα "" παρακάτω στο παρόν κεφάλαιο).
Καθώς το φύλλο στυλ περιπλέκει, πιθανότατα θα πρέπει να συμπεριλάβουν πρόσθετες πληροφορίες σχετικά με το διορισμό συγκεκριμένου κανόνα. Τα σχόλια βρίσκονται μεταξύ χαρακτήρων / * και * / και αγνοούνται από τα προγράμματα προβολής, για παράδειγμα:
Σώμα (περιθώριο αριστερά: lin) / * 1. ίντσες,
H1 (Margin-αριστερά: -Lin) / * Μετακίνηση προς τα αριστερά της 1 ίντσας * /
H2 (Margin-Left: -LIN) / * Μετατόπιση αριστερά για 1 ίντσα * /Το HTML σας επιτρέπει να ορίσετε ένα ευρύ φάσμα ιδιοτήτων πίνακα στυλ. Τα ονόματα ιδιοκτησίας αποτελούνται από ένα, και πιο συχνά - από δύο ή τρεις λέξεις που χωρίζονται από ένα παύλα. Σε δύσκολα ονόματα, η πρώτη λέξη αντιπροσωπεύει συνήθως την κατηγορία και ταυτόχρονα είναι μια μειωμένη επιλογή (στενογραφία) του ονόματος ιδιοκτησίας (βλέπε κεφάλαιο "").
Ο πίνακας εμφανίζει μια επισκόπηση των ιδιοτήτων των στυλ HTML. Στην στήλη της κατηγορίας, εμφανίζεται εάν αυτό ή άλλο ιδιότητα συνδυάζεται σε μια ομάδα με άλλες ιδιότητες. Στην τρίτη στήλη, αναφέρονται πληροφορίες σε κληρονομική ή όχι την ιδιότητα των υποκείμενων ετικετών (για την κληρονομιά των ιδιοτήτων, βλέπε την ενότητα "").
Κληρονομία
Τα τραπέζια στυλ HTML σας επιτρέπουν να διακοσμήσετε το φόντο του στοιχείου σελίδας με χρώμα ή εικόνα. Πρέπει να σημειωθεί ότι εδώ και στη συνέχεια θα συζητήσει τη χρήση ιδιοτήτων όχι για ολόκληρη τη σελίδα, αλλά για ένα ξεχωριστό στοιχείο. Για παράδειγμα, αν ο υπόβαθρο ορίζεται για ετικέτα
- , τότε αυτό θα είναι το φόντο μόνο σε ετικέτες
- Ολες οι σελίδες:
U. L (εικόνα φόντου: URL (http://www.myserver.com/Images/watermark.gif))
Οι συστάσεις του W3C καθιστούν δυνατή τον καθορισμό πλαισίων, πεδίων και ελεύθερου χώρου για στοιχεία σελίδων. Μπορείτε, για παράδειγμα, να εισάγετε τον τίτλο στο πλαίσιο ή να αλλάξετε τα πεδία στην ετικέτα παραγράφου<Р> Έτσι, να διοργανώσει μια περίπτωση για όλες τις παραγράφους κειμένου. Για τους σκοπούς αυτούς, μπορούν να χρησιμοποιηθούν οι ακόλουθες ομάδες ιδιοτήτων:
Αυτές οι ιδιότητες εφαρμόζονται για τον καθορισμό των λιστών εξόδου. Με τη βοήθειά τους, μπορείτε να αλλάξετε τη θέση του δείκτη (ιδιοκτησία θέσης-στυλ λίστας), στυλ ή εικόνα του δείκτη (τύπου λίστα τύπου-τύπου και ιστοσελίδας-στυλ λίστας).
Οι ιδιότητες των καταλόγων κληρονομούνται, δηλ. Εάν η ιδιότητα ορίζεται στην ετικέτα
- Θα πραγματικά για όλες τις ετικέτες
- Στυλ..
cSS.
