Οι ιστότοποι που προσελκύουν τους χρήστες απαιτούν συχνά να προσαρτώνται πολλές μεθοδολογίες στυλ κατά καιρούς. Σε τέτοιες περιπτώσεις, το στυλ της διακόσμησης κειμένου μπορεί να πραγματοποιηθεί με πολλούς τρόπους με βάση διαφορετικές τιμές σύμφωνα με τις απαιτήσεις για να ξεχωρίσει ο ιστότοπος.
Αυτό το ιστολόγιο θα καλύπτει τις ακόλουθες περιοχές περιεχομένου:
Πώς να ορίσετε το στυλ διακόσμησης κειμένου στο Tailwind CSS;
Το στυλ κειμένου μπορεί να ρυθμιστεί και να διακοσμηθεί με τη βοήθεια του ' κείμενο-διακόσμηση-στυλ ” ιδιοκτησία που κατανέμεται με διαφορετικές τιμές στυλ.
Ιδιότητες στυλ διακόσμησης κειμένου
| Τάξη | Ιδιότητες |
| διακόσμηση-στερεό | κείμενο-διακόσμηση-στυλ: συμπαγής; |
| διακόσμηση-διπλό | κείμενο-διακόσμηση-στυλ: διπλό; |
| διακόσμηση-κυματιστή | κείμενο-διακόσμηση-στυλ: κυματιστό? |
| διακόσμηση-διακεκομμένη | κείμενο-διακόσμηση-στυλ: διακεκομμένη? |
| διακοσμητικό-στιγμένο | κείμενο-διακόσμηση-στυλ: διάστικτη? |
Παράδειγμα: Ρύθμιση του στυλ διακόσμησης κειμένου στο Tailwind CSS
Αυτό το παράδειγμα χρησιμοποιεί τα προαναφερθέντα ' κείμενο-διακόσμηση-στυλ ιδιότητα με όλες τις τιμές για το στυλ του κειμένου της παραγράφου:
DOCTYPE html >< html >
< κεφάλι >
< μετα σύνολο χαρακτήρων = 'utf-8' >
< μετα όνομα = 'Θύρα προβολής' περιεχόμενο = 'width=device-width, αρχική κλίμακα=1' >
< γραφή src = 'https://cdn.tailwindcss.com' γραφή >
κεφάλι >
< σώμα >
< div >
< Π τάξη = 'υπογράμμιση διακόσμησης-συμπαγής ...' > Αυτή είναι η ιστοσελίδα Linuxhint Π >
< Π τάξη = 'υπογράμμιση διακόσμηση-διπλό ...' > Αυτή είναι η ιστοσελίδα Linuxhint Π >
< Π τάξη = 'υπογράμμιση διακόσμησης-κυματιστή ...' > Αυτή είναι η ιστοσελίδα Linuxhint Π >
< Π τάξη = 'υπογράμμιση διακόσμησης-διακεκομμένη ...' > Αυτή είναι η ιστοσελίδα Linuxhint Π >
< Π τάξη = 'υπογράμμιση διακόσμησης-στιγμένη ...' > Αυτή είναι η ιστοσελίδα Linuxhint Π >
div >
σώμα >
html >
Με βάση αυτόν τον κώδικα, εφαρμόστε τα ακόλουθα βήματα:
-
- Συμπεριλάβετε το δεδομένο ' CDN 'μονοπάτι εντός του ' <κεφάλι> ετικέτα ” για να εφαρμόσετε τις λειτουργίες Tailwind.
- Τώρα, δημιουργήστε τέσσερις παραγράφους χρησιμοποιώντας το ' ' ετικέτα που περιέχει το ' κείμενο-διακόσμηση ” ιδιότητα που εκχωρείται με διαφορετική τιμή σε κάθε περίπτωση, όπως συζητήθηκε.
- Αυτό υπογραμμίζει το κείμενο με συμπαγείς, διπλές, κυματιστές, διακεκομμένες και διακεκομμένες γραμμές.
Παραγωγή
Από αυτό το αποτέλεσμα, επαληθεύεται ότι το κείμενο έχει διακοσμηθεί ανάλογα.
συμπέρασμα
Το στυλ κειμένου μπορεί να ρυθμιστεί και να διακοσμηθεί με τη βοήθεια του ' κείμενο-διακόσμηση-στυλ ” ιδιοκτησία που κατανέμεται με διαφορετικές τιμές στυλ. Αυτές οι τιμές περιλαμβάνουν συμπαγή, διπλή, κυματιστή, διακεκομμένη και διακεκομμένη. Αυτό το ιστολόγιο είχε να κάνει με τη ρύθμιση του στυλ διακόσμησης κειμένου χρησιμοποιώντας το Tailwind CSS.