Για να επιλέξετε τα επιθυμητά στοιχεία εισόδου με τον τύπο "πλαίσιο ελέγχου", μπορείτε να χρησιμοποιήσετε τον επιλογέα ':checkbox'. Παράδειγμα:

όπου χειριστής- ένας χειριστής που καλείται όταν αλλαγή γεγονότων

Εργασία με το αντικείμενο jQuery Callbacks: Χρήση λίστας επιστροφών κλήσεων

Το αντικείμενο Callbacks στο jQuery σάς επιτρέπει να δημιουργήσετε κάτι σαν λίστα αντίστροφες συναρτήσεις, το οποίο θα εκτελεστεί όταν κληθεί η βοηθητική μέθοδος fire(). Σε αυτήν την περίπτωση, κατά την κλήση της μεθόδου fire(), είναι δυνατό να περάσει κάποιο όρισμα που θα χρησιμοποιηθεί από κάθε συνάρτηση επανάκλησης. Πώς λειτουργεί, θα αναλύσουμε τώρα με μερικά παραδείγματα.

Πιάνουμε την απώλεια της εστίασης. μέθοδο blur() στο jQuery

Η μέθοδος blur() στο jQuery σάς επιτρέπει να αντιστοιχίσετε έναν χειριστή σε ένα συγκεκριμένο στοιχείο της σελίδας, το οποίο θα κληθεί μόλις χαθεί η εστίαση από αυτό το στοιχείο. Αρχικά, αυτό το συμβάν αφορούσε κυρίως στοιχεία φόρμας - ετικέτες εισαγωγής, ωστόσο πιο πρόσφατες εκδόσειςτα προγράμματα περιήγησης είναι σε θέση να χειριστούν αυτό το συμβάν για σχεδόν όλα τα είδη στοιχείων DOM.

Εισαγάγετε περιεχόμενο πριν από το περιεχόμενο του επιλεγμένου αντικειμένου. μέθοδο before() στο jQuery

Η μέθοδος Before() στο jQuery σάς επιτρέπει να εισάγετε συγκεκριμένο περιεχόμενο ή αντικείμενα πριν από το περιεχόμενο καθενός από ένα σύνολο καθορισμένων αντικειμένων.
Η σύνταξη της μεθόδου είναι απλή:

1	.πριν (περιεχόμενο, )

Δεύτερη παραλλαγή:

1	.before (λειτουργία)

jQuery. μέθοδος attr(). Πώς να αποκτήσετε ή να προσθέσετε ένα χαρακτηριστικό σε ένα στοιχείο

Το jQuery καθιστά πολύ εύκολη την πρόσβαση στα χαρακτηριστικά του επιθυμητού στοιχείου, είτε ανακτώντας την τιμή του είτε, αντίθετα, ορίζοντας και τροποποιώντας το. Για τέτοιους χειρισμούς, χρησιμοποιείται η μέθοδος attr().

Η μέθοδος .appendTo() στο jQuery. Προσθήκη περιεχομένου στο τέλος των στοιχείων

Η μέθοδος appendTo() εκτελεί ουσιαστικά την ίδια εργασία με τη μέθοδο append(). Η διαφορά, σε γενικές γραμμές, είναι μόνο στη σύνταξη. Εάν για το append() καθορίσουμε τον επιθυμητό επιλογέα προσθέτοντας αυτήν τη μέθοδο σε αυτόν, όπου υποδεικνύουμε σε αγκύλες τι ακριβώς πρέπει να προστεθεί στο τέλος των περιεχομένων του καθορισμένου αντικειμένου, τότε για το appendTo() αυτό που πρέπει να προστεθεί είναι όχι πλέον σε αγκύλες ως παράμετρος μεθόδου, αλλά λίγο πριν από την ίδια τη μέθοδο ως το αντικείμενο στο οποίο καλείται η appendTo(). Η διαφορά θα γίνει καλύτερα κατανοητή με το παρακάτω παράδειγμα.

Μέθοδος jQuery .animate(): Κινούμενη εικόνα, κείμενο και οτιδήποτε

Η μέθοδος .animate() σάς επιτρέπει να δημιουργείτε εφέ κίνησης χρησιμοποιώντας τις ιδιότητες css των ίδιων των αντικειμένων. Η μέθοδος έχει δύο παραλλαγές με διαφορετικό αριθμό περασμένων παραμέτρων

Μετατροπή βίντεο με το Movavi

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

Όπως υποσχέθηκα νωρίτερα, σε αυτό το σεμινάριο θα μάθετε πώς να ευθυγραμμίζετε οριζόντια το περιεχόμενο οποιασδήποτε ετικέτας HTML σε μια σελίδα χωρίς να χρησιμοποιείτε το χαρακτηριστικό στοίχισης που έχει καταργηθεί. Όπως ίσως μαντέψατε, θα χρησιμοποιήσουμε ξανά στυλ (CSS), ή μάλλον το αγαπημένο μας χαρακτηριστικό στυλ.

Έτσι, για να ευθυγραμμίσετε το περιεχόμενο ενός στοιχείου HTML, πρέπει να αντιστοιχίσετε μία από τις ακόλουθες τιμές στο χαρακτηριστικό style:

• text-align:center- Ευθυγραμμίστε κάθε γραμμή στο κέντρο ενός στοιχείου, όπως μια παράγραφο.
• text-align:αριστερά- Κάθε γραμμή βρίσκεται στο ίδιο επίπεδο με την αριστερή πλευρά του στοιχείου (αυτή είναι η προεπιλογή).
• text-align:right- Κάθε γραμμή πιέζεται στη δεξιά πλευρά.
• text-align:justify- Ευθυγράμμιση αμέσως στην αριστερή και δεξιά πλευρά του στοιχείου. Θα εξηγήσει. Συνήθως, ένα στοιχείο, όπως μια παράγραφος, έχει τη μία πλευρά του κειμένου πάντα επίπεδη και την άλλη πλευρά είναι "σκισμένη", καθώς τα μήκη των γραμμών είναι ελαφρώς διαφορετικά. Και όταν χρησιμοποιούμε την τιμή text-align:justify , τότε κάθε γραμμή κατανέμεται ομοιόμορφα σε πλάτος. Εάν είναι απαραίτητο, το πρόγραμμα περιήγησης προσθέτει επιπλέον κενά μεταξύ των λέξεων και η πρώτη και η τελευταία λέξη της γραμμής πιέζονται πάντα στις αντίστοιχες πλευρές, έτσι ώστε το μπλοκ να είναι ομοιόμορφο και στις δύο πλευρές.

Παράδειγμα στοίχισης περιεχομένου ετικετών

Κεντρικός τίτλος.

Κεντρική παράγραφος.

Αποτέλεσμα στο πρόγραμμα περιήγησης

Κεντρικός τίτλος.

Το κείμενο της παραγράφου πατιέται προς τα δεξιά.

Κεντρική παράγραφος.

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

Εργασία για το σπίτι.

1. Δημιουργήστε μια επικεφαλίδα για το άρθρο, δύο από τις ενότητες του και μια υποενότητα στην πρώτη ενότητα. Και αφήστε τον τίτλο του άρθρου να βρίσκεται στο κέντρο της σελίδας.
2. Ορίστε τη γραμματοσειρά για ολόκληρη τη σελίδα σε Arial και όλες τις επικεφαλίδες σε Times και αφήστε τις να είναι με πλάγιους χαρακτήρες.
3. Ορίστε το χρώμα κειμένου του τίτλου του άρθρου σε #FF6600, ενότητες σε #6600FF και αφήστε την υποενότητα αμετάβλητη.
4. Γράψτε μία παράγραφο κάτω από κάθε επικεφαλίδα και το κείμενο καθεμιάς από αυτές θα πρέπει να καταλαμβάνει τουλάχιστον τρεις γραμμές όταν προβάλλεται σε ένα πρόγραμμα περιήγησης.
5. Ευθυγραμμίστε τη δεύτερη παράγραφο στο κέντρο, την τρίτη προς τα δεξιά και την τέταρτη και στα δύο.

Γειά σου! Συνεχίζοντας να μαθαίνετε τα βασικά Γλώσσα HTML. Ας δούμε τι χρειάζεται να γράψετε για να ευθυγραμμίσετε το κείμενο στο κέντρο, το πλάτος ή τις άκρες.

Για να ξεκινήσουμε τη δουλειά, ας δούμε πώς να κάνουμε το κέντρο κειμένου τρία σε HTML διαφορετικοί τρόποι. Τα δύο τελευταία σχετίζονται άμεσα με το φύλλο στυλ. Μπορεί να είναι ένα αρχείο CSS που συνδέεται με τις σελίδες του ιστότοπου και ορίζει την εμφάνισή τους.

Μέθοδος 1 - εργασία απευθείας με HTML

Στην πραγματικότητα, όλα είναι πολύ απλά. Δείτε παράδειγμα παρακάτω.

Ευθυγραμμίστε την παράγραφο στο κέντρο.

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

• δικαιολογία - στοίχιση κειμένου στο πλάτος της σελίδας.
• δεξιά - στη δεξιά άκρη.
• αριστερά - στα αριστερά.

Κατ' αναλογία, μπορείτε να μετακινήσετε το περιεχόμενο που βρίσκεται στις κεφαλίδες (h1, h2), κοντέινερ (div).

Μέθοδοι 2 και 3 - χρήση στυλ

Το σχέδιο που παρουσιάζεται παραπάνω μπορεί να μεταμορφωθεί ελαφρώς. Το αποτέλεσμα θα είναι το ίδιο. Για να το κάνετε αυτό, πρέπει να γράψετε τον παρακάτω κώδικα.

Μπλοκ κειμένου.

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

Υπάρχει κάποιο άλλο Εναλλακτική επιλογηγια να επιτευχθεί αποτέλεσμα. Θα χρειαστεί να κάνετε μερικά πράγματα.

Βήμα 1. Στον κύριο κώδικα, γράψτε

Υλικό κειμένου.

Βήμα 2. Στο περιλαμβανόμενο αρχείο CSS, πληκτρολογήστε τον ακόλουθο κώδικα:

Rovno (στοίχιση κειμένου: κέντρο;)

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

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

Μόνο μερικές ερωτήσεις:

• Κάνετε ένα ενημερωτικό μη εμπορικό έργο;
• Θέλετε ο ιστότοπός σας να κατατάσσεται καλά στις μηχανές αναζήτησης;
• Θέλετε να κερδίσετε εισόδημα μέσω Διαδικτύου;

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

Θα ήθελα να σημειώσω ότι οι δικοί σας ιστότοποι είναι μόνο μία από τις πολλές επιλογές για τη δημιουργία παθητικού ή ενεργού εισοδήματος στο Διαδίκτυο. Το ιστολόγιό μου είναι απλώς για οικονομικές ευκαιρίες στο διαδίκτυο.

Έχετε εργαστεί ποτέ στον τομέα του traffic arbitrage, του copywriting και άλλων δραστηριοτήτων που φέρνουν το κύριο ή πρόσθετο εισόδημα με τη συνεργασία εξ αποστάσεως; Μπορείτε να μάθετε για αυτό και πολλά άλλα αυτή τη στιγμή στις σελίδες του blog μου.

Μπροστά θα δημοσιεύσω ακόμα όχι λίγο ρεαλιστικό ΧΡΗΣΙΜΕΣ ΠΛΗΡΟΦΟΡΙΕΣ. Να κρατήσουμε επαφή. Εάν θέλετε, μπορείτε να εγγραφείτε στις ενημερώσεις του Workip μέσω e-mail. Η φόρμα συνδρομής βρίσκεται παρακάτω.

Πολλά στοιχεία κειμένουπρέπει να ευθυγραμμιστεί στο κέντρο της ιστοσελίδας. Κυρίως πρωτοσέλιδα. Ας δούμε πώς γίνεται μέσα css στοίχισηκεντρικό κείμενο.

ιδιότητα στοίχισης κειμένου

Υπεύθυνος για αυτό ιδιότητα στοίχισης κειμένουκαι έχει τέσσερις έννοιες:

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

Για παράδειγμα, έχουμε αυθαίρετο κείμενο με τίτλο:

επί κεφαλής

Για να ευθυγραμμίσουμε την επικεφαλίδα μας (h1) στο κέντρο, πρέπει να γράψουμε αυτό:

H1(
Στοίχιση κειμένου: κέντρο
}

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

Το Text-align δεν λειτουργεί σαν μια ιδιότητα float. Εάν εφαρμοστεί στοίχιση κειμένου σε ένα στοιχείο μπλοκ με κείμενο, τότε το μπλοκ δεν θα χάσει τη συμπεριφορά του. Το κείμενο σε αυτό θα πατηθεί, όχι το ίδιο το μπλοκ. Σημειώστε ότι αυτή είναι διαφορετική από την ιδιότητα float, η οποία στέλνει ολόκληρο το στοιχείο δεξιά ή αριστερά.

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

Αν δεν έχετε διαβάσει το πρώτο άρθρο, μπορείτε να το βρείτε εδώ:

• Μάθημα 1. Τι είναι η HTML;

Θεωρία και Πράξη - Παράγραφοι και επικεφαλίδες μιας σελίδας HTML

Σήμερα θα μιλήσουμε για παραγράφους και επικεφαλίδες. Ας ξεκινήσουμε απλά - με παραγράφους και πού ισχύουν.

Παράγραφοι ανά σελίδα

Θα δώσω τώρα ένα παράδειγμα κώδικα στον οποίο θα υπάρχει η ετικέτα παραγράφου.

Θυμάστε ήδη τη βασική δομή από το πρώτο μάθημα. Εκεί αποσυναρμολογήσαμε τα βασικά και εξετάσαμε τι είναι η HTML. Ως εκ τούτου, θα επικεντρωθούμε σε αυτό που υπάρχει μεταξύ των ετικετών. .

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

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

Δοκιμάστε να γράψετε μερικές παραγράφους. Βάλτε μερικές παραγράφους στην ετικέτα και αφήστε μερικές χωρίς αυτήν. Και θα δείτε αμέσως τη διαφορά. Γιατί αν γράψετε μια παράγραφο μέσα σε αυτήν την ετικέτα, τότε θα έχει αμέσως εσοχές. Τώρα ας προχωρήσουμε στις επικεφαλίδες HTML της σελίδας.

Επικεφαλίδες HTML ανά σελίδα

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

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

Εδώ είναι ολόκληρη η λίστα με τις κεφαλίδες που μπορείτε να χρησιμοποιήσετε:

Ορισμένες από αυτές τις ετικέτες χρησιμοποιούνται πολύ πιο συχνά. Αυτές είναι ετικέτες όπως h1, h2 ή h3. Εάν κάποιος είναι ήδη εξοικειωμένος με το CSS, τότε καταλαβαίνει ότι η επικεφαλίδα HTML Η επικεφαλίδα της σελίδας h3 μπορεί να διαμορφωθεί με τέτοιο τρόπο ώστε να μοιάζει και με h1 ή h2. Αλλά οι έννοιες που φέρουν, τουλάχιστον για τη βελτιστοποίηση SEO, είναι ριζικά διαφορετικές. Κατά κανόνα, αυτοί οι αριθμοί, μέσα στις ετικέτες, θα πρέπει να θεωρούνται ως το επίπεδο σημασίας αυτής ή εκείνης της επικεφαλίδας HTML. Επομένως, είναι απαραίτητο να μελετηθούν προσεκτικά αυτά τα στοιχεία και στη συνέχεια μηχανές αναζήτησηςτα άρθρα σας θα γίνουν αντιληπτά.

Μέχρι να φτάσουμε στο CSS, θα βλέπετε στυλ επικεφαλίδων που ορίζονται από προεπιλογή στα προγράμματα περιήγησης. Εάν εισάγετε αυτές τις ετικέτες μία προς μία και γράψετε κάποιο κείμενο μέσα, θα δείτε τα εξής:

Για τα ρομπότ αναζήτησης, η χρήση επικεφαλίδων στη σελίδα είναι επίσης σημαντική. Υπάρχουν ορισμένοι κανόνες που μπορείτε να διαβάσετε στο βιβλίο μας − Προώθηση pdf βιβλίου στον ιστότοπο.

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

Εκμάθηση βίντεο - τίτλος σελίδας HTML; (πρακτική)

Οπτικό βίντεο σχετικά με το παράδειγμα εργασίας με αυτές τις ετικέτες:

Εργασία για το σπίτι

D/W:Για παράδειγμα, γράψτε ένα σύντομο κείμενο που θα αποτελείται από 5-7 παραγράφους και 2-3 διαφορετικές επικεφαλίδες.

Εξασκηθείτε περισσότερο σε παραγράφους και τίτλους σελίδων HTML!

www.sitehere.ru

Πώς να φτιάξετε έναν πίνακα σε HTML

Κάθε πίνακας περιέχει γραμμές και στήλες. Αυτά, με τη σειρά τους, μπορούν να περιέχουν κείμενο και μια εικόνα.

Για να προσθέσετε έναν πίνακα στη σελίδα, χρησιμοποιήστε την ετικέτα

. Αυτό είναι το κύριο και κύριο δοχείο στο οποίο τοποθετούνται τα στοιχεία του πίνακα (γραμμές και στήλες). Και αυτό το δοχείο πρέπει να κλείσει -.

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

Σειρές πίνακα ( ) πρέπει να τοποθετείται αυστηρά μεταξύ

. Και οι στήλες του πίνακα ( ) με τη σειρά τους τοποθετούνται αυστηρά μεταξύ των ετικετών .

Ας δημιουργήσουμε έναν πρακτικό πίνακα που θα αποτελείται από μία γραμμή και τέσσερις στήλες. Πρέπει να σημειώσουμε την αρχή του πίνακα (

), αρχή της γραμμής ( ), τέσσερα κελιά ( ), τέλος πίνακα (

), τέλος γραμμής (

).

Αποτέλεσμα:

Τώρα ας χρησιμοποιήσουμε την ετικέτα για να μην επιστρέψω ξανά σε αυτό.

Αποτέλεσμα:

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

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

Αυτές οι τιμές (πλάτος και ύψος) καθορίζονται σε pixel, τοις εκατό. Μπορείτε να το αφήσετε έτσι, μην γράψετε τίποτα, το πρόγραμμα περιήγησης θα σκεφτεί ότι ήσασταν πολύ τεμπέλης για να γράψετε "px" και να θεωρήσετε τον αριθμό ως pixel.

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

Αυξήστε το πλαίσιο (περιγράμματα) του τραπεζιού και αλλάξτε το χρώμα του

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

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

Προσθέτοντας μόνο 1 χαρακτηριστικό και γίνεται καλύτερο:

Είναι σαν το Excel! Φανταστείτε ότι δεν θα υπήρχε διαίρεση των κελιών με γραμμές (πλέγμα); Λοιπόν, φρίκη. Τι συμβαίνει όμως αν ορίσετε το περίγραμμα στο 10.

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

Ας αλλάξουμε το χρώμα αυτού του περιγράμματος, γιατί υπάρχει και ένα χαρακτηριστικό για αυτό - bordercolor. Ορίστε την τιμή του σε "d3d3d3". Αποτέλεσμα:

Πώς να κάνετε εσοχή σε έναν πίνακα

Απαιτούνται επίσης εσοχές στον πίνακα για να αυξηθεί η «αναγνωσιμότητα», καθώς και τα περιγράμματα κελιών. Για να δημιουργήσουμε padding, χρειαζόμαστε το χαρακτηριστικό "cellspacing". Θα συνεχίσω να εργάζομαι με τον πίνακα 4x4, εφαρμόζοντας αυτό το χαρακτηριστικό σε αυτόν. Θα ενημερώσω τον κώδικα για εσάς (περιλαμβάνω μόνο μία γραμμή για να μην μπερδεύω την ανάρτηση):

Αποτέλεσμα:

Αυτές ήταν οι εσοχές στο εξωτερικό των κελιών. Αλλά υπάρχει ένα παρόμοιο χαρακτηριστικό για τη ρύθμιση εσοχών μέσα στα κελιά - cellpadding, τώρα θα το κάνω επίσης ίσο με 10 και θα δείτε πώς έχει αυξηθεί η απόσταση από τα περιεχόμενα του κελιού στα σύνορά του (έπρεπε να κάνω τον αριθμό των κελιών μικρότερο για να μην μεγαλώνει υπερβολικά το τραπέζι). Ο κώδικας:

Αποτέλεσμα:

Τώρα θα αφαιρέσουμε το "cellspacing" και θα αφήσουμε μόνο το "cellpadding". Αποτέλεσμα:

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

Πώς να συγχωνεύσετε σωστά τα κελιά σε έναν πίνακα

Υπάρχουν επίσης ειδικά χαρακτηριστικά για τη συγχώνευση κελιών στον πίνακά σας. Αυτά είναι τα "colspan" και "rowspan". Το πρώτο (colspan) συνδυάζει κελιά ανά στήλες (οριζόντια), το δεύτερο (εύρος γραμμών) - ανά γραμμές ή κάθετα. Ας ενώσουμε κάτι στο τραπέζι μας.

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

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

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

Τώρα θα σας δείξω ένα παράδειγμα. Εδώ είναι ο τρέχων πίνακας μας:

Ας συγχωνεύσουμε κελιά με αριθμούς "1 και 2", "5 και 9", "4, 8, 12", "6 και 7". Κοιτάξτε πόσο ωραίο αποδείχθηκε, δεν το περίμενα!

Η αρχή της συσχέτισης είναι αυτή.

Όταν συγχωνεύετε οριζόντια κελιά με αριθμό 1 και 2, πρέπει να γράψετε "colspan =" 2 ″ στο πρώτο, να τοποθετήσετε τα περιεχόμενα του δεύτερου στο πρώτο (συγχωνεύουμε) και να διαγράψετε το δεύτερο κελί (ή να το αποκρύψετε από την HTML όπως εγώ έκανε - θα το δείξω αργότερα.)

Όταν συγχωνεύετε κάθετα κελιά με αριθμό 4, 8, 12, πρέπει να γράψετε "rowspan =" 2 ″ "στο πρώτο κελί (αριθμός 4) και να διαγράψετε τα περιεχόμενα των υπολοίπων, αφού τα τοποθετήσετε στο συγχωνευμένο κελί.

Εδώ είναι ο κώδικας που βρήκα. Έχω κρύψει τα κελιά για λόγους σαφήνειας (για να καταλάβετε ευκολότερα), αλλά μπορείτε επίσης να τα διαγράψετε.

Ελπίζω να εξήγησα ξεκάθαρα και να έδωσα ένα καλό παράδειγμα.

Πώς να φτιάξετε μια κεφαλίδα για ένα τραπέζι

Για να δώσετε τίτλο σε έναν πίνακα - χρησιμοποιήστε ετικέτες μετά την έναρξη του τραπεζιού (

), αλλά πριν από την έναρξη της ετικέτας . Να τι συμβαίνει:

Λοιπόν, ένα μικρό hack HTML για όσους πρέπει να τοποθετήσουν την κεφαλίδα του πίνακα κάτω από τον ίδιο τον πίνακα. Χρησιμοποιήστε το χαρακτηριστικό align με μια τιμή κάτω ως εξής:

Και τότε η κεφαλίδα του πίνακα θα μετακινηθεί κάτω από τον πίνακα.

Έτσι, καλύψαμε σχεδόν τα πάντα εκτός από το... παρασκήνιο!

Πώς να φτιάξετε ένα όμορφο φόντο για ένα κελί ή ένα ολόκληρο τραπέζι

Η HTML σάς επιτρέπει να ορίσετε το χρώμα όχι μόνο για ολόκληρο το φόντο του πίνακα, αλλά και για κάθε μεμονωμένο κελί (αν υπάρχει τέτοια ανάγκη). Ορίζει το χρώμα φόντου ενός πίνακα ή κελιού στο χαρακτηριστικό "bgcolor".

Επιτρέψτε μου να ορίσω πρώτα το φόντο για ολόκληρο το τραπέζι. Αυτό θα είναι το χρώμα ""ανοιχτό πράσινο"" (γενικά, μπορείτε να το ορίσετε έτσι - "" # 90EE90 ""). Έτσι ξεκινάει το τραπέζι μου τώρα:

Αποτέλεσμα:

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

Τάντα! Αποτέλεσμα:

Νομίζω ότι είναι ωραίο! Αν συμμετείχα σε διαγωνισμό δημιουργικού υπολογιστικού φύλλου (ή διδασκαλίας HTML σε παιδιά προσχολικής ηλικίας) σίγουρα θα κέρδιζα.

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

Καλή τύχη και επιτυχία στην εκμάθηση HTML.

blogwork.ru

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

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

Διάταξη και κεντράρισμα της περιοχής από καουτσούκ

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

Επομένως, το πλάτος των μπλοκ "κεφαλίδα" και "υποσέλιδο" θα είναι 100% του πλάτους της οθόνης. Το πλάτος του μπλοκ "μενού" πρέπει να είναι 30%, και το μπλοκ "περιεχόμενο" πρέπει να βρίσκεται δίπλα στο μπλοκ "μενού", δηλ. πρέπει να έχει ένα αριστερό περιθώριο (περιθώριο-αριστερά) με πλάτος ίσο με το πλάτος του μπλοκ "μενού", δηλ. τριάντα%.

Προκειμένου τα μπλοκ "μενού" και "περιεχομένου" να βρίσκονται δίπλα-δίπλα, ας κάνουμε το μπλοκ "μενού" να επιπλέει και ας το πιέσουμε στην αριστερή άκρη. Θα ορίσουμε επίσης τα χρώματα φόντου για τα μπλοκ μας. Τώρα ας τα γράψουμε όλα αυτά σε ένα φύλλο στυλ (στη σελίδα style.css)

Το ύψος των μπλοκ ορίστηκε υπό όρους ώστε το αποτέλεσμα να είναι ορατό. Δείτε τη σελίδα μας σε ένα πρόγραμμα περιήγησης:

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

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

Διάταξη και κεντράρισμα τοποθεσίας, σταθερό πλάτος

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

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

Ας το κάνουμε αυτό: ορίστε το πλάτος της ετικέτας "body" σε 800 pixel (όπως το "κύριο" μπλοκ) και την αριστερή εσοχή (padding-αριστερά) στο 50%. Στη συνέχεια, ολόκληρο το περιεχόμενο του "κύριου" μπλοκ θα εμφανιστεί στη δεξιά πλευρά της οθόνης (δηλαδή από τη μέση προς τα δεξιά):

Προκειμένου το "κύριο" μπλοκ μας να βρίσκεται στη μέση της οθόνης, η μέση του πρέπει να ταιριάζει με τη μέση της ετικέτας "σώμα". Εκείνοι. πρέπει να μετατοπίσουμε το "κύριο" μπλοκ προς τα αριστερά κατά το ήμισυ του μεγέθους του. Το πλάτος του "κύριου" μπλοκ είναι 800 pixel, επομένως πρέπει να ορίσετε την ιδιότητα "margin-left: -400px" σε αυτό. Ναι, αυτή η ιδιότητα μπορεί να λάβει αρνητικές τιμές, οπότε το αριστερό περιθώριο μειώνεται (δηλαδή μετατοπίζεται προς τα αριστερά). Και αυτό ακριβώς χρειαζόμαστε.

Τώρα το φύλλο στυλ μοιάζει με αυτό: Και η σελίδα μας στο πρόγραμμα περιήγησης βρίσκεται ακριβώς στη μέση:

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

Καλή επιτυχία στις δημιουργικές σας αναζητήσεις!

www.site-do.ru

Πώς να στοιχίσετε το κείμενο στο κέντρο σε html;

Στην HTML, υπάρχουν δύο επιλογές που δεν απαιτούν τη χρήση CSS.

1. 1.Ετικέτα
   Μια πολύ εύχρηστη ετικέτα που κεντράρει όλα τα ενσωματωμένα στοιχεία που βρίσκονται σε αυτήν, και συγκεκριμένα:
   • κείμενο,
   • Εικόνες,
   • συνδέσεις,
   • καθώς και ετικέτες , , , και μερικοί άλλοι.
     2. Χρησιμοποιώντας το χαρακτηριστικό align HTML με το κέντρο τιμών.
     Πρέπει να προσθέσουμε αυτό το χαρακτηριστικό μέσα στην ετικέτα μπλοκ, η οποία περιέχει το κείμενο που πρέπει να κεντράρουμε.
     Θα μπορούσε να είναι μια ετικέτα

     ,

     ,

     …

     και μερικοί άλλοι.

     Το χαρακτηριστικό align έχει επίσης άλλες τιμές:

     • align=""αριστερά"- στοίχιση κειμένου προς τα αριστερά
     • align='σωστό'- δεξιά ευθυγράμμιση
     • align='δικαιολογώ'- αιτιολογήστε το κείμενο

     Πώς να κεντράρετε κείμενο με CSS;

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

     Για αυτό έχουμε μια ειδική ιδιοκτησία στοίχιση κειμένου, το οποίο έχει επίσης πολλές έννοιες:

     • text-align: κέντρο;- για ευθυγράμμιση στο κέντρο
     • text-align: αριστερά;- στην αριστερή πλευρά
     • text-align: δεξιά;- στη δεξιά πλευρά
     • text-align: δικαιολογώ;- κατά το πλάτος του μπλοκ ή της σελίδας.

     Για να το εφαρμόσετε στο κείμενό μας, μπορείτε να χρησιμοποιήσετε μία από τις προτεινόμενες επιλογές:

     1. 1. Εκχωρήστε την ετικέτα μπλοκ (επικεφαλίδα, φόρμα, παράγραφος ή άλλο στοιχείο μπλοκ) κλάση CSS:

        Και μετά στο αρχείο CSS του ιστότοπού σας γράφουμε:

        Αντί μπλοκ-κείμενομπορεί να είναι οποιοδήποτε άλλο όνομα τάξης.

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

        Σε αυτήν την περίπτωση, η στοίχιση κειμένου στο κέντρο θα εφαρμοστεί σε όλες τις ετικέτες

        Ποια είναι μέσα στην ετικέτα με την κλάση μπλοκ:

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

     2. 2. Μπορείτε να προσθέσετε τις απαραίτητες ιδιότητες CSS στην ίδια την ετικέτα χρησιμοποιώντας το χαρακτηριστικό style:

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

     Αυτό είναι όλο για μένα! Σας ευχαριστούμε που επισκεφθήκατε την ιστοσελίδα μου! Θα χαρώ πολύ να δω τα σχόλιά σας! Καλή τύχη και ευημερία!

     Με εκτίμηση, Yulia Gusar

     impuls-web.ru

     Χαρακτηριστικά σε HTML

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

     Παραδείγματα Ιδιοτήτων

     Εξετάστε το ενδεχόμενο να εργαστείτε με χαρακτηριστικά σε παραδείγματα. Το απλούστερο παράδειγμα - πάρτε την ετικέτα παραγράφου

     Με το χαρακτηριστικό "align". Ας γράψουμε:

     Παράδειγμα παραγράφου αριστερή στοίχιση

     Το χαρακτηριστικό "align" λέει στο πρόγραμμα περιήγησης να ευθυγραμμίσει την παράγραφο στα αριστερά της οθόνης.

     Τα χαρακτηριστικά μπορούν επίσης να εφαρμοστούν στην ετικέτα παραγράφου:

     • align="center" - ευθυγράμμιση στο κέντρο της οθόνης.
     • align="right" - δεξιά στοίχιση;
     • align="justify" - ευθυγραμμίστε το κείμενο στο πλάτος της οθόνης.

     Τώρα ας περιπλέκουμε την εργασία - θα δημιουργήσουμε μια σελίδα HTML χρησιμοποιώντας πολλά διαφορετικά χαρακτηριστικά. Ένα παράδειγμα μιας τέτοιας σελίδας θα έχει τον ακόλουθο κώδικα:

     Χαρακτηριστικά σε HTML

     Το χαρακτηριστικό χρώματος "bgcolor" μας επιτρέπει να ορίσουμε το χρώμα φόντου της σελίδας. Τα χαρακτηριστικά "κέντρο" και "δικαιολογούν" ευθυγραμμίζουν το κείμενο μέσα τους, αντίστοιχα, στο κέντρο και στο πλάτος.

     Επικεφαλίδες σε HTML

     με ευρετήριο. Υπάρχουν μόνο έξι τέτοιοι δείκτες - από το 1 έως το 6, υποδεικνύουν το μέγεθος της κεφαλίδας (

     είναι ο μεγαλύτερος τίτλος,

     - το μικρότερο). Για παράδειγμα, ας δημιουργήσουμε μια ιστοσελίδα που έχει πολλές κεφαλίδες. Ο κώδικας αυτής της σελίδας θα μοιάζει με αυτό:

     Χαρακτηριστικά σε HTML

     Τι είναι ένα χαρακτηριστικό; Ένα χαρακτηριστικό είναι μια παράμετρος που δίνει στις ετικέτες συγκεκριμένες πληροφορίες. Αυτές οι παράμετροι μπορεί να είναι απεριόριστες.

     Επικεφαλίδες σε HTML

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

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

     Έτσι λειτουργούν με χαρακτηριστικά και επικεφαλίδες σε HTML. Δεν υπάρχει τίποτα περίπλοκο εδώ. Φροντίστε να εξασκηθείτε στα δικά σας παραδείγματα για να ενοποιήσετε τις πληροφορίες που λάβατε σε αυτό το μάθημα.

     siteblogger.ru

     Χαιρετίσματα σε όλους. Έχετε παρατηρήσει ότι ο τίτλος του ιστολογίου, ο τίτλος της ανάρτησης και οι τίτλοι του gadget δεν είναι κεντραρισμένοι στο σχέδιο.

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

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

     Ως συνήθως, μεταβείτε στην καρτέλα προτύπου και φροντίστε να δημιουργήσετε ένα αντίγραφο ασφαλείας. Εάν κάτι πάει στραβά, μπορείτε να κάνετε λήψη του προτύπου πίσω από τον υπολογιστή σας. Και θα ήταν καλύτερα, προς το παρόν, να κάνετε όλα τα πειράματα σε δοκιμές ιστολογίου. Δημιουργήστε ένα άλλο ιστολόγιο για αυτό με βάση το ίδιο πρότυπο.

     Πώς να στοιχίσετε τον τίτλο του ιστολογίου στο κέντρο.
     
     Καρτέλα Πρότυπο - Επεξεργασία HTML. Στην κορυφή του προτύπου, κάντε κλικ στον μαύρο δείκτη (βέλος) στα αριστερά.

     Και εδώ όλοι οι κωδικοί CSS άνοιξαν μπροστά μας. Κατεβαίνουμε αργά και βρίσκουμε τη γραμμή .Κεφαλίδα h1 (
     
     

     Αμέσως μετά τις αγκύλες, γράψτε την τιμή

     text-align:center;

     Έτσι, το όνομα του ιστολογίου βρίσκεται αυστηρά στο κέντρο. Κάντε κλικ στην προβολή προτύπου για να δείτε το αποτέλεσμα. Όλα λειτούργησαν. Κάντε κλικ στην αποθήκευση.

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

     φόντο:#e9967a; - χρώμα φόντου.
     ή background:url (http://www.fonstola.ru/large/201310/134392.jpg); εικόνα αντί για φόντο.
     ύψος: 50 px; — τιμή πλάτους του μπλοκ τίτλου.
     text-shadow: 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0,10); - ορίστε τη σκιά για το κείμενο
     ακτίνα περιγράμματος: 15 εικονοστοιχεία; - στρογγυλεμένες γωνίες.
     -moz-box-shadow:0 0 30px #a28b53 ένθετο;
     box-shadow:0 0 30px #a28b53 inset;
     -webkit-box-shadow:0 0 30px #a28b53 inset;

     Επισημαίνεται με μπλε χρώμα η εσωτερική σκιά του πεδίου τίτλου. Απλά πρόσεχε. Αν αλλάξετε χρώμα, τότε μόνο αυτό #e9967a(κατακερματισμός και εξαψήφιος αριθμός). Άνω τελεία, αγκύλες, παύλα, ερωτηματικό - όλα είναι πολύ σημαντικά στον κώδικα.

     Πώς να στοιχίσετε τον τίτλο του gadget στο κέντρο στην πλαϊνή γραμμή.

     Κατεβαίνουμε επίσης παρακάτω και βρίσκουμε αυτή τη γραμμή
     
     .sidebar .widget h2 (
     
     

     Σε αγκύλες γράφουμε text-align: center; Ωστόσο, σε αυτήν την περίπτωση, είναι απαραίτητο να ορίσετε το πλάτος, το μέγεθος γραμματοσειράς, τις εσοχές. Εδώ χρησιμοποίησα μια εικόνα αντί για φόντο και έβαλα μια σκιά για το κείμενο και το μπλοκ.

     background:url(http://www.fonstola.ru/large/201310/134392.jpg); φόντο ή εικόνα
     ύψος: 20 px;
     πλάτος: 200 px
     περίγραμμα-ακτίνα: 13px;
     περιθώριο-αριστερά: 0px;
     padding-top:0px; /απόσταση από την άκρη του πλαισίου/
     μέγεθος γραμματοσειράς: 16 px; /μέγεθος γραμματοσειράς/
     text-align: κέντρο; /θέση κειμένου/
     text-shadow: 4px 3px 0px #d2bf94;, 6px 5px 5px rgba(0,0,0,0,10); /σκιά για κείμενο/
     box-shadow: 0 4px 6px rgba(0, 0, 0, .2); /block shadow/
     

     www.spargalochki.ru

     Κάθετο και οριζόντιο κεντράρισμα στο CSS Επίπεδο 3

     Μπορούμε να επεκτείνουμε και τις δύο μεθόδους στο κέντρο οριζόντια και κάθετα ταυτόχρονα.

     Μια παρενέργεια της απόλυτης τοποθέτησης της παραγράφου είναι ότι η παράγραφος γίνεται ακριβώς τόσο φαρδιά όσο θα έπρεπε (εκτός αν προσδιορίσουμε ρητά ένα πλάτος). Στο παρακάτω παράδειγμα, αυτό ακριβώς θέλουμε: κεντράρουμε μια παράγραφο μονολεκτικής λέξης ("Κέντρο!"), οπότε το πλάτος της παραγράφου πρέπει να είναι ίσο με το πλάτος αυτής της λέξης.

     Το κίτρινο φόντο δείχνει ξεκάθαρα ότι η παράγραφος έχει πράγματι το ίδιο πλάτος με το περιεχόμενό της. Υποθέτουμε ότι η σήμανση παραμένει η ίδια:

     Κέντρο!

     Όσον αφορά το κατακόρυφο κεντράρισμα, αυτό το φύλλο στυλ είναι παρόμοιο με αυτό στο προηγούμενο παράδειγμα. Αλλά τώρα μετακινούμε επίσης το στοιχείο στα μισά του κοντέινερ με τον κανόνα "αριστερά: 50%" και ταυτόχρονα το μετατοπίζουμε προς τα αριστερά κατά το ήμισυ του πλάτους του στον μετασχηματισμό "translate":

     div.container4 ( ύψος: 10em; θέση: σχετική ) div.container4 p ( περιθώριο: 0; φόντο: κίτρινο; θέση: απόλυτη; κορυφή: 50%; αριστερά: 50% margin-right: -50% transform: translate( -50%, -50%) }

     Το ακόλουθο παράδειγμα εξηγεί γιατί απαιτείται ο κανόνας "περιθώριο-δικαίωμα: -50%".

     Όταν ο μορφοποιητής CSS υποστηρίζει «flex», τα πράγματα γίνονται ακόμα πιο εύκολα:

     με αυτό το φύλλο στυλ:

     Div.container6( ύψος: 10em; οθόνη: flex; στοίχιση στοιχείων: κέντρο; δικαιολογώ-περιεχόμενο: κέντρο) div.container6 p ( περιθώριο: 0 )

     εκείνοι. η μόνη προσθήκη είναι «justify-content: center». Ακριβώς όπως το "align-item" ορίζει την κατακόρυφη στοίχιση των περιεχομένων του κοντέινερ, το "justify-content" ορίζει την οριζόντια στοίχιση με τον ίδιο τρόπο. (Στην πραγματικότητα, είναι λίγο πιο περίπλοκο, όπως υποδηλώνουν τα ονόματά τους, αλλά σε μια απλή περίπτωση, έτσι λειτουργεί.). Μια παρενέργεια της χρήσης της ιδιότητας 'flex' είναι ότι το στοιχείο παιδί, το P στην περίπτωσή μας, γίνεται αυτόματα όσο το δυνατόν μικρότερο.

     2022 bar812.ru. Ακριβώς για το συγκρότημα. Προγράμματα. Σίδερο. Διαδίκτυο. Windows
     Επεξεργασία με Live CSS