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

Ορισμός χαρακτηριστικού στυλ ενσωματωμένου κειμένου

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

Για να αλλάξετε το χρώμα του κειμένου, απλώς εισαγάγετε τη λέξη style= "" στην επιλεγμένη περιοχή του πεδίου κειμένου μέσα στην ετικέτα ανοίγματος. Μέσα σε αυτό το χαρακτηριστικό, μπορείτε να καθορίσετε διαφορετικές τιμές παραμέτρων - η τιμή του χαρακτηριστικού χρώματος είναι υπεύθυνη για την αλλαγή του χρωματικού τόνου του κειμένου. Καθορίζοντας αυτήν την παράμετρο, μετά το σύμβολο άνω και κάτω τελείας θα πρέπει να καθορίσετε το χρώμα στο οποίο θα χρωματιστούν όλοι οι χαρακτήρες σε αυτό το πεδίο. Σε αυτήν την περίπτωση, όταν ορίζετε μια απόχρωση, μπορείτε να καθορίσετε τόσο μια ρητή τιμή χρώματος, για παράδειγμα, κόκκινο ή κίτρινο, όσο και τη δεκαεξαδική τιμή του ή rgb.

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

1.

κείμενο

2.

κείμενο

3.

κείμενο

Αλλαγή χρώματος με χρήση CSS

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

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

Κατασκευαστής τοποθεσίες "Nubex"

Εδώ ορίζουμε ένα μπλε χρώμα για τη λέξη "Designer" (το μέγεθός του, από προεπιλογή, είναι 100% της βάσης), ένα πράσινο χρώμα και ένα μέγεθος 125% για τη λέξη "sites", ένα πορτοκαλί χρώμα και ένα μέγεθος 150% για τη λέξη «Nubex».

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

Δεν υπάρχει τέτοιο χαρακτηριστικό; Επομένως, όπως και στα προηγούμενα μαθήματα, θα χρησιμοποιήσουμε styles (CSS), δηλαδή το χαρακτηριστικό universal style, το οποίο θα μας επιτρέψει να αλλάξουμε το χρώμα όπου θέλουμε.

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

Τα χρώματα σε HTML (και CSS) μπορούν να καθοριστούν με διάφορους τρόπους, θα σας δείξω τα πιο δημοφιλή και κοινά:

• Όνομα χρώματος- Η HTML έχει μεγάλη λίστα και για να υποδείξετε ένα χρώμα, αρκεί να γράψετε το όνομά του στα αγγλικά, για παράδειγμα: κόκκινο, πράσινο, μπλε.
• Χρωματικός κωδικός HEX- Απολύτως οποιοδήποτε χρώμα μπορεί να ληφθεί με την ανάμειξη τριών βασικών χρωμάτων σε διαφορετικές αναλογίες - κόκκινο, πράσινο και μπλε. Ένας κωδικός HEX είναι τρία ζεύγη δεκαεξαδικών τιμών που είναι υπεύθυνα για τον αριθμό αυτών των χρωμάτων σε κάθε χρώμα. Πριν από τον χρωματικό κώδικα πρέπει να υπάρχει ένα σύμβολο κατακερματισμού (#), για παράδειγμα: #FF8C00, #CC3300 και ούτω καθεξής.

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

Πώς να αλλάξετε το χρώμα του κειμένου;

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

<тег style= "color:color name" >... - προσδιορίζοντας το χρώμα του κειμένου με το όνομα.

<тег style= "color:#HEX code" >... - Καθορισμός του χρώματος του κειμένου με κωδικό.

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

Παράδειγμα αλλαγής χρώματος κειμένου

Κόκκινο κείμενο τίτλου

Μπλε κείμενο παραγράφου.

Πράσινο πλάγιο. Κόκκινο κείμενο.

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

Πώς να αλλάξετε το χρώμα του φόντου;

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

<тег στυλ= "φόντο: όνομα χρώματος">... - προσδιορίζοντας το χρώμα φόντου με το όνομα.

<тег style= "background:#HEX code" >... - Καθορισμός του χρώματος φόντου με κωδικό.

Παράδειγμα αλλαγής χρώματος φόντου

Τίτλος.

Παράγραφος.

Ονυξ του αντίχειρος. Απλό κείμενο.

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

Τίτλος.

Παράγραφος.

Ονυξ του αντίχειρος.Απλό κείμενο.

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

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

1. Δημιουργήστε έναν τίτλο για το άρθρο και τις δύο ενότητες του. Γράψτε μια παράγραφο στην αρχή του άρθρου και κάθε ενότητα.
2. Ορίστε ολόκληρη τη σελίδα σε μέγεθος γραμματοσειράς Courier 16 εικονοστοιχεία, τον τίτλο του άρθρου σε 22 εικονοστοιχεία και τις υπότιτλους σε 19 εικονοστοιχεία.
3. Αφήστε τον τίτλο του άρθρου να έχει χρώμα κειμένου #0000CC και οι υπότιτλοι έχουν χρώμα κειμένου #CC3366.
4. Χρησιμοποιήστε το χρώμα φόντου #66CC33 για να επισημάνετε τις δύο λέξεις στη δεύτερη παράγραφο. Και στην τρίτη παράγραφο, στο ίδιο χρώμα, αλλά με μια υπογραμμισμένη λέξη.
5. Μην ξεχνάτε ότι μπορείτε να ομαδοποιήσετε τις τιμές των χαρακτηριστικών στυλ τοποθετώντας ένα ερωτηματικό (;) ανάμεσά τους.

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