Οικιακές συσκευές

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

Ετικέτα

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

Στοίχιση παραγράφου

Μπορείτε να στοιχίσετε μια παράγραφο χρησιμοποιώντας το χαρακτηριστικό align με τις ακόλουθες τιμές:

text-align: left|right|center|justify|initial|inherit;

Αντιγράψτε τον παρακάτω κώδικα στο αρχείο σας .html.

Αυτή η παράγραφος είναι στοίχιση στο κέντρο

Αυτή η παράγραφος είναι δεξιά στοίχιση

Αυτή η παράγραφος εμφανίζεται δικαιολογημένη στο παράθυρο του προγράμματος περιήγησης. Μια αιτιολογημένη παράγραφος στοιχίζεται δεξιά και αριστερά προσθέτοντας επιπλέον χώρους. Μπορείτε να δείτε ότι οι άκρες της αιτιολογημένης παραγράφου ταιριάζουν με τις άκρες των παραγράφων με ευθυγράμμιση αριστερά και δεξιά. Σε μια παράγραφο με αριστερή στοίχιση, η αριστερή άκρη είναι ευθεία, ενώ σε μια παράγραφο με στοίχιση δεξιά, η αριστερή άκρη είναι ευθεία. Βλέπετε πώς και οι δύο άκρες αυτής της παραγράφου είναι ευθείες; Αυτό επιτυγχάνεται μέσω του στυλ text-align:justify.

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

Διάστιχο

Μπορείτε να ελέγξετε την απόσταση των γραμμών παραγράφου χρησιμοποιώντας style=line-height . Χρησιμοποιήστε το χαρακτηριστικό στυλ με τις ακόλουθες τιμές:

γραμμή-ύψος: κανονική|αριθμός|μήκος|αρχική|κληρονομιά;

Παρακάτω είναι ένα παράδειγμα κώδικα HTML που εμφανίζει παραγράφους με διαφορετικό διάστιχο:

Αυτή η παράγραφος χρησιμοποιεί δύο τιμές για το χαρακτηριστικό στυλ. Η πρώτη γραμμή-ύψος:1.5 καθορίζει διάστιχο ενάμιση γραμμή για την παράγραφο και η δεύτερη τιμή text-align:justify καθορίζει ότι το κείμενο της παραγράφου πρέπει να κατανεμηθεί σε όλο το πλάτος.

Αυτή η παράγραφος είναι διπλό διάστημα και αιτιολογημένη. line-height:2 καθορίζει διπλή απόσταση. Το χαρακτηριστικό style δεν χρειάζεται να έχει δύο τιμές. Αλλά αν χρειάζεται να καθορίσετε δύο τιμές, μπορείτε να το κάνετε διαχωρίζοντάς τις με ένα ερωτηματικό.

: Σετ διάστιχο 13 pixel?

: Ορίζει το διάστημα HTML μεταξύ των παραγράφων στο 200% σε σχέση με το τρέχον μέγεθος γραμματοσειράς.

: Ορίζει το ύψος της γραμμής σε 14 pixel.

Εσοχές

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

Ακολουθεί ένα παράδειγμα παραγράφων με αριστερή και δεξιά εσοχή:

Αυτή η παράγραφος δεν έχει εσοχή, απλώς δικαιολογείται. Κοιτάξτε το χαρακτηριστικό στυλ του στοιχείου P για αυτήν την παράγραφο.

Για αυτήν την παράγραφο, έβαλα το αριστερό padding σε 30px χρησιμοποιώντας το στυλ padding-left:30px. Αυτή η παράγραφος δικαιολογείται επίσης χρησιμοποιώντας το στυλ text-align:justify. Όπως ήδη γνωρίζετε, μπορούμε να χρησιμοποιήσουμε πολλαπλές τιμές για το χαρακτηριστικό Style διαχωρίζοντάς τες με ένα ερωτηματικό.

Και αυτή η παράγραφος έχει δεξιά εσοχή 30 pixel, αλλά όχι αριστερή εσοχή. Είναι επίσης ευθυγραμμισμένο στο πλάτος. Η τιμή "padding-right" του χαρακτηριστικού στυλ καθορίζει τη σωστή συμπλήρωση. Εάν δεν βλέπετε το εφέ, μειώστε το πλάτος του παραθύρου του προγράμματος περιήγησής σας, ώστε η αιτιολογημένη παράγραφος HTML να εμφανίζεται σωστά.

Εσοχή μεταξύ παραγράφων (εσοχή πριν και εσοχή μετά την παράγραφο)

Δεν το χρειαζόμαστε σε HTML ή CSS. Μπορούμε απλά να καθορίσουμε το στυλ πλήρωσης για το στοιχείο

Το padding-top και padding-bottom καθορίζουν το λευκό διάστημα πριν και μετά από μια παράγραφο, το οποίο λειτουργεί σαν padding στο επάνω ή στο κάτω μέρος. Κοιτάξτε το παράδειγμα ετικέτας παρακάτω

Εγκατέστησα για την πρώτη Παράγραφος HTMLεσοχή 10 pixel πριν από τη δεύτερη και 50 pixel μετά τη δεύτερη παράγραφο:

Αυτή η παράγραφος δεν έχει εσοχές πριν ή μετά. Αυτή είναι μια κανονική παράγραφος, αιτιολογημένη. Όπως ήδη γνωρίζετε, μπορούμε να δικαιολογήσουμε μια παράγραφο χρησιμοποιώντας τον κώδικα style=”text-align:justify” μέσα στην ετικέτα.

Αυτή η παράγραφος είναι υπερμεγέθης. Έχει επίσης 10 pixel padding πριν από την παράγραφο και 50 pixel μετά από αυτήν. Μέσα στην ετικέτα έχω ορίσει 3 στυλ.

Αυτή είναι μια κανονική παράγραφος χωρίς εσοχές και προεπιλεγμένη στοίχιση.

Πράγματα που πρέπει να θυμάστε

• Μια παράγραφος HTML μπορεί να ευθυγραμμιστεί χρησιμοποιώντας το χαρακτηριστικό align ή το στυλ στοίχισης κειμένου.
• Το HTML θα αποδοθεί διαφορετικά ανάλογα με τα μεγέθη οθόνης, τα μεγέθη των παραθύρων του προγράμματος περιήγησης.
• Προσθήκη επιπλέον χώρων ή κενές γραμμέςΟ κώδικας HTML δεν επηρεάζει την έξοδο. Το πρόγραμμα περιήγησης αφαιρεί όλα τα επιπλέον κενά.
• Οι ετικέτες ορίζουν τι πρέπει να εμφανίζεται και τα στυλ καθορίζουν τον τρόπο εμφάνισης.
• Τα στυλ μπορούν να καθοριστούν σε τρία με διάφορους τρόπους— ενσωματωμένο (εντός ετικετών), εσωτερικό ( μέσα στο ίδιο αρχείο HTML χρησιμοποιώντας το στοιχείο
  

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

  Αποτέλεσμα:

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

  Τώρα μπορείτε εύκολα κάντε μια κόκκινη γραμμή στις σελίδες σας html. Τα λέμε ξανά!

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

  Όλες οι ετικέτες μορφοποίησης μπορούν να χωριστούν σε τρεις ομάδες:

  1. Ετικέτες τίτλου ( h1-h6).

  2. Ετικέτες σχεδίασης κειμένου σώματος ( , , ,

  , 
  και τα λοιπά.).
  3. Ομαδοποίηση ετικετών ( 
  
  , 
  
  , 
  
  )
  
  Ετικέτες τίτλου
  Μετατρέπουν το κανονικό κείμενο σε επικεφαλίδα συγκεκριμένου επιπέδου.  Ετικέτα 
  
  δημιουργεί μια επικεφαλίδα πρώτου επιπέδου - τη μεγαλύτερη και πιο σημαντική (συνήθως ο τίτλος του άρθρου στη σελίδα), 
  
  είναι υπεύθυνη για την επικεφαλίδα έκτου επιπέδου - τη μικρότερη και πιο δυσδιάκριτη.  Αυτές οι ετικέτες είναι σημαντικές τόσο για τους χρήστες όσο και για τις μηχανές αναζήτησης - και στις δύο αρέσουν οι επικεφαλίδες με υποτίτλους.  Πρέπει να τηρείται η ιεραρχία των επιπέδων, δηλαδή 
  
  πρέπει να πάει 
  
  , και όχι το αντίστροφο.
  
  Για να κατανοήσετε πώς λειτουργεί αυτό, εισαγάγετε τον ακόλουθο κώδικα στο αρχείο html:
   
  Κεφαλίδα πρώτου επιπέδου
  Επικεφαλίδα δεύτερου επιπέδου
  Επικεφαλίδα τρίτου επιπέδου
  Επικεφαλίδα τέταρτου επιπέδου
  Επικεφαλίδα επιπέδου 5
  Επικεφαλίδα επιπέδου έξι
  
  Θα μοιάζει με αυτό στο πρόγραμμα περιήγησης:
  Ετικέτες σχεδίασης κειμένου σώματος
  Επιτρέπει τη μορφοποίηση σε επίπεδο χαρακτήρων.  Ας δούμε τι μπορείτε να κάνετε με αυτά.
  Μαύρα γράμματα
  Χρειάζεται να εστιάσετε την προσοχή στο κείμενο.  Είναι επίσης σημαντικό για τις μηχανές αναζήτησης που μπορούν να τονίσουν λέξεις-κλειδιά.
  Υπεύθυνος για ετικέτες έντονου στυλ 
  Και .
  
  Εκθέτης και δείκτης
  Μπορούν να χρησιμοποιηθούν σε τύπους, εξισώσεις και στον προσδιορισμό ορισμένων ποσοτήτων.
  Η ετικέτα είναι υπεύθυνη για τη δημιουργία συνδρομητών 
  , για τα κορυφαία χρησιμοποιείται η ετικέτα 
  .
  Χ 1=32 μ 2
  Μείωση μεγέθους
  Εάν πρέπει να κάνετε το κείμενο κατά ένα μικρότερο από την καθορισμένη τιμή σε όλη τη σελίδα, τότε πρέπει να χρησιμοποιήσετε την ετικέτα 
  
  Απλό κείμενο. Μειωμένο κείμενο.
  Υπογραμμίζω
  Αυτός ο τύπος επισήμανσης μπορεί να χρησιμοποιηθεί για να υποδείξει τις αλλαγές που έγιναν σε ένα έγγραφο ή απλώς για να επιστήσει την προσοχή στο κείμενο.
  Απλό κείμενο. Υπογραμμισμένο κείμενο.
  Strikethrough
  Μπορείτε να διαγράψετε πληροφορίες εάν έχουν ήδη χάσει τη συνάφειά τους.  Αυτή είναι η ετικέτα για αυτό 
  .
  Κυρτά γράμματα
  Απαιτείται για την εστίαση της προσοχής στο κείμενο και μπορεί να δημιουργηθεί με ετικέτα 
  ή 
  .
  
  Εισαγωγή κειμένου στον υπολογιστή
  Συμβαίνει ότι πρέπει να προσθέσετε σε μια ιστοσελίδα πηγαίος κώδικαςπρόγραμμα και τα αποτελέσματά του.  Για να είναι εύκολη η οπτική διάκριση διαφορετικών τμημάτων του κειμένου μεταξύ τους, οι προγραμματιστές HTML εισήγαγαν ετικέτες αυτής της ομάδας.
  Σε δοχείο 
  περιέχει τον κώδικα του προγράμματος και οι μεταβλητές του επισημαίνονται με την ετικέτα 
  , και το αποτέλεσμα της εκτέλεσης είναι 
  .  Δοχείο 
  περιέχει κείμενο που πρέπει να εισάγει ο χρήστης από το πληκτρολόγιο όταν εργάζεται με το πρόγραμμα και όλα όσα περικλείονται σε ετικέτες 
  , σώζει πρωτότυπη μορφή, συμπεριλαμβανομένων των επιπλέον διαστημάτων και των διαλειμμάτων γραμμής.
  
    Ετσι α, β, γ, Εδώ αποτέλεσμα της εκτέλεσης του προγράμματος , και αυτό είναι ο χρήστης εισήγαγε κείμενο 
  εμφανίστηκε κάτι τέτοιο
  .
  
  Αποσπάσματα και ορισμοί
  Ο κώδικας του προγράμματος θα μοιάζει 
  Ετσι 
  , οι μεταβλητές ορίζονται ως εξής: 
  α, β, γ 
  , Εδώ 
  αποτέλεσμα της εκτέλεσης του προγράμματος 
  , και αυτό είναι 
  ο χρήστης εισήγαγε κείμενο 
  .  Διατηρήστε την αρχική μορφοποίηση 
  εμφανίστηκε κάτι τέτοιο 
  
  .
  
   
  Παράθεση στην ετικέτα blockquote.
  Προσφορά μέσα στο δοχείο αναφοράς.Σύντομο απόσπασμα με ετικέτα q.Αφιερωμένος ορισμός.Συντομογραφία (NPO, IP).
  
  Γενικό παράδειγμα
  Για να κατανοήσετε καλύτερα τι είναι υπεύθυνο κάθε ετικέτα και πώς λειτουργεί, δείτε τον παρακάτω κώδικα και το αποτέλεσμα της εκτέλεσής της.
   
  Λιπαρόςτο κείμενο μπορεί να μετατραπεί σε ετικέτες ισχυρόςΚαι σι.  Για κυρτά γράμματααπάντηση emΚαι εγώ.
  Ετικέτες υποΚαι γουλιάχρησιμοποιείται για τη δημιουργία χαμηλότερος(χ 1…x n) Και ανώτερος (42=16) ευρετήρια. Del σταυρώνει, ins - τονίζει.
  Ετικέτες κώδικας, kbd, varΚαι βρασμένος αραβόσιτοςχρησιμοποιούνται σπάνια και χρειάζονται για την εμφάνιση καταχωρίσεων προγραμμάτων
   συντομαπαιτείται για την ένδειξη συντομογραφιών ( HTML).  Οι ετικέτες blockquote, cite και q χρησιμοποιούνται για τη μορφοποίηση εισαγωγικών ( Ο ουρανός ανέπνεε ήδη το φθινόπωρο)
  Η προετικέτα διατηρεί την αρχική μορφοποίηση κειμένου χωρίς να αφαιρεί κενά ή διακοπές γραμμής.
  
  Το πρόγραμμα περιήγησης ερμηνεύει αυτόν τον κώδικα ως εξής:
  
  Ομαδοποίηση ετικετών
  Είναι απαραίτητο το κείμενο να μην ρέει σε μια συνεχή γραμμή, αλλά να χωρίζεται σε λογικά στοιχεία.
  Μέσα στις ετικέτες υπάρχει μια παράγραφος.
   
  Πρώτη παράγραφος
  Δεύτερη παράγραφος
  
  
  Ετικέτα 
  
  κάνει τη μετάβαση σε επόμενη γραμμήμέσα σε μια παράγραφο (δεν θα υπάρχει εσοχή πριν από τη γραμμή).
  
  σας επιτρέπει να σχεδιάσετε μια οριζόντια γραμμή.  Μπορείτε να το χρησιμοποιήσετε για να διαχωρίσετε το κείμενο πιο καθαρά.  Γνωρίσματα πλάτος, μέγεθος, χρώμα, ευθυγραμμίζωΚαι noshadeορίστε το πλάτος, το πάχος, το χρώμα, την ευθυγράμμιση και την έλλειψη τρισδιάστατου εφέ της γραμμής, αντίστοιχα.
   
  Γραμμή πάνω από τη γραμμή. 
  Γραμμή κάτω από τη γραμμή.
  
  Γειά σου!  Ας συνεχίσουμε να εξετάζουμε τα βασικά του προγραμματισμού ιστοτόπων.  Είναι δύσκολο να φανταστεί κανείς τουλάχιστον ένα από αυτά που δεν περιέχει ετικέτα παραγράφου στον κώδικά του.  Σήμερα θα δούμε πώς να το γράψουμε σωστά και μια περιγραφή πολλών πρόσθετες ενέργειεςμε κείμενο.
   
  Παράδειγμα
   
  Ας δούμε ένα παράδειγμα για το πώς να δημιουργήσετε μια παράγραφο σε κώδικα HTML.
   
   
  Μία ή περισσότερες προτάσεις.
  
   
  Απαραίτητη προϋπόθεση είναι η παρουσία μιας ετικέτας ανοίγματος και κλεισίματος.  Παρεμπιπτόντως, μπορείτε να κάνετε τα πάντα απευθείας στο Σημειωματάριο, απλά πρέπει να αποθηκεύσετε το αρχείο στην κατάλληλη μορφή αργότερα.
   
  Μορφοποίηση
   
  Αρκετά συχνά παρατηρώ ότι οι άνθρωποι ενδιαφέρονται για το πώς να κάνουν μια κόκκινη γραμμή.  Για μια συγκεκριμένη παράγραφο γίνεται πολύ απλά.
   
  Η ενεργοποίηση αυτών των επιλογών θα φέρει εσοχή στην πρώτη γραμμή 15 pixel από την αριστερή άκρη.  Εάν τέτοιες αλλαγές πρέπει να εφαρμοστούν σε όλες τις ετικέτες P, τότε αρχείο CSS, που συνδέεται με τις σελίδες του ιστότοπου, μπορείτε να γράψετε τον κώδικα που φαίνεται παρακάτω.
   
  Προσωπικά, συνήθως δεν κάνω κόκκινες γραμμές όταν επεξεργάζομαι κώδικα στο Σημειωματάριο ή σε άλλο πρόγραμμα επεξεργασίας.
   
  Περιλαμβάνω απλώς padding μεταξύ μπλοκ κειμένου.  Για να γίνει αυτό, πρέπει να γράψετε σε CSS ειδικές παραμέτρους.
   
   
  p(margin-bottom:25px;)
   
  Εάν χρησιμοποιείτε αυτό το σχέδιο, τότε μετά από κάθε παράγραφο θα εμφανίζεται μια εσοχή 25 pixel.
   
  Στην πραγματικότητα, υπάρχουν πολλές επιλογές για εργασία με HTML και διάφορα στυλ.  Έχω περιγράψει μόνο μερικά από αυτά είναι πολύ δύσκολο να καλύψω τα πάντα σε ένα άρθρο.
   
  Θέλετε να μάθετε περισσότερα;  Μπορεί να σας φανούν χρήσιμες οι προηγούμενες δημοσιεύσεις μου για τα ακόλουθα θέματα:
   
  Εδώ θα ολοκληρώσω το άρθρο και, νομίζω, τώρα δεν θα είναι δύσκολο να φτιάξετε παραγράφους σε HTML και να τις μορφοποιήσετε όμορφα χρησιμοποιώντας ειδικές ετικέτες.
   
  Σας εύχομαι καλή επιτυχία στο mastering του προγραμματισμού.  Παρεμπιπτόντως, έχετε σκεφτεί να κερδίσετε χρήματα σε μη κερδοσκοπικούς ιστότοπους πληροφόρησης;  Παρείχε απλά καταπληκτικές πληροφορίες ειδικά για τους αναγνώστες του.
   
  Η κανονική διαδικτυακή εργασία και τα οικονομικά είναι τα βασικά θέματα αυτού του ιστολογίου.  Μπορείτε να εξοικειωθείτε με μεμονωμένες προοπτικές στο διαδίκτυο αυτή τη στιγμή από δημοσιευμένο υλικό.  Συνεχίζω να προετοιμάζω και να δημοσιεύω νέα πράγματα, και το πιο σημαντικό, είναι αληθινό χρήσιμο περιεχόμενο.  Εγγραφείτε στις ενημερώσεις Workip στο δικό σας e-mail.  Τα λέμε αργότερα.