Κείμενο-διακόσμηση - CSS-Κόλπα

Anonim

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

h3 ( text-decoration: underline; )

Αξίες

  • none: δεν έχει σχεδιαστεί γραμμή και αφαιρείται οποιαδήποτε υπάρχουσα διακόσμηση.
  • underline: σχεδιάζει μια γραμμή 1px κατά μήκος του κειμένου στη γραμμή βάσης.
  • line-through: σχεδιάζει μια γραμμή 1px στο κείμενο στο «μεσαίο» σημείο.
  • overline: σχεδιάζει μια γραμμή 1px στο κείμενο, ακριβώς πάνω από το «πάνω» σημείο.
  • inherit: κληρονομεί τη διακόσμηση του γονέα.

Η blinkτιμή είναι στην προδιαγραφή W3C, αλλά έχει καταργηθεί και δεν θα λειτουργεί σε κανένα τρέχον πρόγραμμα περιήγησης. Όταν λειτούργησε, έκανε το κείμενο να φαίνεται "αναβοσβήνει" αλλάζοντας γρήγορα μεταξύ 0% και 100% αδιαφάνειας.

Διαδήλωση

Δείτε το στυλό CSS-Tricks: Διακόσμηση κειμένου από CSS-Tricks (@ css-tricks) στο CodePen.

Σημειώσεις χρήσης

Μπορείτε να συνδυάσετε το underline, overlineή τις line-throughτιμές σε μια λίστα χωρισμένη με κενό για να προσθέσετε πολλές γραμμές διακόσμησης:

p ( text-decoration: overline underline line-through; )

Από προεπιλογή, η γραμμή ή οι γραμμές κληρονομούν το χρώμα του κειμένου όπως ορίζεται από την colorιδιότητά του. Μπορείτε να το αλλάξετε σε προγράμματα περιήγησης που υποστηρίζουν την text-decoration-colorιδιότητα ή την ιδιοκτησία τριών αξιών.

text-decoration ως ιδιοκτησία Shorthand

text-decorationμπορεί να χρησιμοποιηθεί σε συνδυασμό με text-decoration-styleκαι text-decoration-colorως στενή ιδιότητα:

.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )

Προς το παρόν μόνο το Firefox υποστηρίζει αυτό το μη επιδιορθωμένο. Το Safari το υποστηρίζει με το -webkitπρόθεμα. Το Chrome χρειάζεται επίσης το -webkitπρόθεμα και τις πειραματικές λειτουργίες πλατφόρμας ιστού που είναι ενεργοποιημένες στις σημαίες του Chrome.

Σχετιζομαι με

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Περισσότερες πληροφορίες

  • κείμενο-διακόσμηση ως μια στενή ιδιότητα στο W3C spec CSS Text Decoration Module Level 3 CR
  • κείμενο-διακόσμηση στο MDN

Υποστήριξη προγράμματος περιήγησης

Όλα τα προγράμματα περιήγησης υποστηρίζουν την ιδιότητα "longhand" CSS2.1 text-decoration. Η στενή ιδιότητα και οι δευτερεύουσες ιδιότητες text-decoration-color, text-decoration-lineκαι text-decoration-styleυποστηρίζονται μη προκαθορισμένες στον Firefox και με το -webkitπρόθεμα στο Safari. Το Chrome θα αναγνωρίσει επίσης αυτές τις τιμές με -webkitενεργοποιημένο το πρόθεμα και τη σημαία της Πειραματικής πλατφόρμας Ιστού.

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

Επιφάνεια εργασίας

Χρώμιο Firefox ΙΕ Ακρη Σαφάρι
91 87 Οχι 88 ΤΡ

Κινητό / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14.0-14.4 *

* text-decorationυποστηρίζεται πλήρως, υπο-ιδιότητες που υποστηρίζονται με -webkitπρόθεμα.
† Οι δευτερεύουσες ιδιότητες απαιτούν επιπλέον πειραματικές δυνατότητες πλατφόρμας ιστού ενεργοποιημένες
‡ text-decorationμόνο CSS2.1 . Υπο-ιδιότητες δεν υποστηρίζονται.