Λέξις νόμιμης τιμής χρώματος CSS

Χρώματα του CSS

Το χρώμα στο CSS μπορεί να καθοριστεί με τα εξής τρόπους:

  • Το εξαδecimal χρώμα
  • Το εξαδecimal χρώμα με διαφάνεια
  • RGB χρώμα
  • #p3 {background-color: rgb(0, 0, 255);} /* Μπλε */
  • Χρώματα HSL
  • Χρώμα HSLA
  • Προκαθορισμένα/διαbrowser colors
  • Χρησιμοποιείται κλειδί currentcolor Κλειδί

Το εξαδecimal χρώμα

Χρησιμοποιώντας το #RRGGBB καθορίζει το εξαδecimal χρώμα, όπου το RR (κόκκινο), το GG (πράσινο) και το BB (μπλε) είναι εξαδecimal αριθμοί που καθορίζουν τα στοιχεία του χρώματος (μονοχρωμίες). Όλες οι τιμές πρέπει να είναι μεταξύ 00 και FF.

Για παράδειγμα, η τιμή #0000ff φαίνεται μπλε, γιατί η μονοχρωμία του μπλε είναι στο μέγιστο όριο (ff), ενώ οι άλλες μονοχρωμίες είναι στο 00.

Παράδειγμα

Ορίζει διαφορετικά HEX χρώματα:

#p1 {background-color: #ff0000;}   /* Κόκκινο */
#p2 {background-color: #00ff00;}   /* Γκρίζο */
#p3 {background-color: #0000ff;}   /* Μπλε */

Δοκιμάστε προσωπικά

Το εξαδecimal χρώμα με διαφάνεια

Χρησιμοποιώντας το #RRGGBB καθορίζει το εξαδecimal χρώμα. Για να αυξήσετε τη διαφάνεια, προσθέστε δύο επιπλέον αριθμούς μεταξύ 00 και FF.

Παράδειγμα

Ορίζει το HEX χρώμα με διαφάνεια:

#p1a {background-color: #ff000080;}   /* Κόκκινο με διαφάνεια */
#p2a {background-color: #00ff0080;}   /* Γκρίζο με διαφάνεια */
#p3a {background-color: #0000ff80;}   /* Μπλε με διαφάνεια */

Δοκιμάστε προσωπικά

RGB χρώμα

Η τιμή RGB χρώματος αποτελείται από Η συνάρτηση rgb()Ορίζεται, η γραμματική είναι ως εξής:

rgb(κόκκινο, green, μπλε)

Κάθε παράμετρος (κόκκινο, green, μπλε()) ορίζει την ένταση του χρώματος, μπορεί να είναι ακέραιος αριθμός από 0 έως 255 ή ποσοστό (από 0% έως 100%).

π.δ. η τιμή rgb(0,0,255) φαίνεται μπλε, γιατί ο παράμετρος blue είναι στο μέγιστο όριο (255), ενώ οι άλλες παράμετροι είναι στο 0.

此外，以下值定义相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。

Παράδειγμα

Επιπλέον, οι εξής τιμές ορίζουν το ίδιο χρώμα: rgb(0,0,255) και rgb(0%,0%,100%).

Ορισμός διαφορετικών χρωμάτων RGB:
#p1 {background-color: rgb(255, 0, 0);}   /* Κόκκινο */
#p2 {background-color: rgb(0, 255, 0);}   /* Πράσινο */

Δοκιμάστε προσωπικά

#p3 {background-color: rgb(0, 0, 255);} /* Μπλε */

Χρώματα RGBA

Τα χρώματα RGBA είναι επέκταση των χρωμάτων RGB, με Alpha κανάλι - ορίζει την αδιαφάνεια του αντικειμένου. Συνάρτηση rgba()Ορίζεται, η γραμματική είναι ως εξής:

rgba(κόκκινο, green, μπλε, alpha)

alpha Τα παραμέτρων είναι αριθμοί μεταξύ 0.0 (πλήρως διαφανές) και 1.0 (πλήρως αδιαφάνεια).

Παράδειγμα

Ορισμός διαφορετικών χρωμάτων RGB με αδιαφάνεια:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* Κόκκινο με αδιαφάνεια */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* Εκρηκτικό πράσινο με αδιαφάνεια */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* Μπλε με αδιαφάνεια */

Δοκιμάστε προσωπικά

Χρώματα HSL

Το HSL σημαίνει χρωματική φάση (hue), ισορροπία (saturation) και ένταση (lightness) - την κυλινδρική συντεταγμένη αναπαράσταση του χρώματος.

Χρησιμοποιείται Συνάρτηση hsl()Ορίζει την τιμή του χρώματος HSL, η γραμματική της συνάρτησης είναι ως εξής:

hsl(χρώμα, χρωματικότητα, χρώμα)

Η χρωματική φάση είναι το βαθμό του κύκλου χρωμάτων (από 0 έως 360); 0 (ή 360) είναι κόκκινο, 120 είναι πράσινο, 240 είναι μπλε.

Η ισορροπία είναι ποσοστό απόλυτου; 0% σημαίνει σκοτεινή σκιά, ενώ 100% είναι πλήρης χρώμα.

Η ένταση είναι επίσης ποσοστό απόλυτου; 0% είναι μαύρο, 100% είναι λευκό.

Παράδειγμα

Ορισμός διαφορετικών χρωμάτων HSL:

#p1 {background-color: hsl(120, 100%, 50%);}   /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}   /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}   /* 深绿色 */
#p4 {χρώμα περιβάλλοντος: hsl(120, 60%, 70%);}    /* Ευγενές πράσινο */

Δοκιμάστε προσωπικά

Χρώμα HSLA

Η τιμή χρώματος HSLA είναι επέκταση της τιμής χρώματος HSL, η οποία περιλαμβάνει το κανάλι Alpha - καθορίζει την αδιαφάνεια του αντικειμένου.

Η τιμή χρώματος HSLA αποτελείται από Συνάρτηση hsla()Ορίζεται, η σύνταξη της γλώσσας της συνάρτησης είναι ως εξής:

hsla(χρώμα, χρωματικότητα, χρώμα, alpha)

alpha Τα παραμέτρων είναι αριθμοί μεταξύ 0.0 (πλήρως διαφανές) και 1.0 (πλήρως αδιαφάνεια).

Παράδειγμα

Ορισμός διαφορετικών χρωμάτων HSL με αδιαφάνεια:

#p1 {χρώμα περιβάλλοντος: hsla(120, 100%, 50%, 0.3);}   /* Μπλε πράσινο με αδιαφάνεια */
#p2 {χρώμα περιβάλλοντος: hsla(120, 100%, 75%, 0.3);}   /* Πράσινο με αδιαφάνεια */
#p3 {χρώμα περιβάλλοντος: hsla(120, 100%, 25%, 0.3);}   /* Γκριζοπράσινο με αδιαφάνεια */
#p4 {χρώμα περιβάλλοντος: hsla(120, 60%, 70%, 0.3);}    /* Μπλε πράσινο με αδιαφάνεια */

Δοκιμάστε προσωπικά

Προκαθορισμένα/διαbrowser colors

Στα πρότυπα HTML και CSS προκαθορίζονται 140 ονομασίες χρωμάτων.

π.χ.:μπλεκαι:κόκκινοκαι:κόκκινο πυρσοπλαστικόκαι:καφέ π.χ.:

Παράδειγμα

Ορισμός διαφορετικών ονομάτων χρωμάτων:

#p1 {χρώμα περιβάλλοντος: μπλε;}
#p2 {χρώμα περιβάλλοντος: κόκκινο;}
#p3 {χρώμα περιβάλλοντος: κόκκινο πυρσοπλαστικό;}
#p4 {χρώμα περιβάλλοντος: καφέ;}

Δοκιμάστε προσωπικά

Η λίστα με όλες τις προκαθορισμένες ονομασίες χρωμάτων μπορεί να βρεθεί στο χειροκίνητο έγγραφο αναφοράς χρωμάτων.

κλειδί currentcolor

κλειδί currentcolor Αναφορά της τιμής της ιδιότητας color του στοιχείου με λέξεις-κλειδιά.

Παράδειγμα

Η χρώμα περιγράμματος του στοιχείου <div> θα είναι μπλε, επειδή το χρώμα κειμένου του στοιχείου <div> είναι μπλε:

#myDIV {
  χρώμα: μπλε; /* Χρώμα κειμένου μπλε */
  περιγράμματα: 10px δοτυπική γραμμή χρώματος; /* Χρώμα περιγράμματος μπλε */
}

Δοκιμάστε προσωπικά