CSS [Λεπτομερής εξήγηση] Προσαρμοσμένες ιδιότητες (γνωστές και ως μεταβλητές CSS)

2024-07-12

Δήλωση μεταβλητών - -

Κανόνες ονομασίας μεταβλητών

Υποστήριξη αριθμητικής ονομασίας
Υποστηρίζει την ονομασία χρησιμοποιώντας παύλες και κενά
Υποστηρίζει κινέζικα και άλλα κείμενα CJK
Δεν υποστηρίζονται ονόματα που περιέχουν ειδικούς χαρακτήρες όπως $, [,], ^, (,), %, ", κ.λπ.

μεταβλητός

Μπορεί να είναι οποιαδήποτε τιμή ήέκφραση

 --direction: to top;
 --gradientColor: deeppink, deepskyblue;
 --gradient: to top, deeppink, deepskyblue;
 --linear-gradient: linear-gradient(to top, deeppink, deepskyblue);
1
2
3
4

μεταβλητό εύρος

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

body {
    --color: deepskyblue;
}
.box {
    background-color: var(--color);
}
1
2
3
4
5
6

καθολικές μεταβλητές

:root {
  --borderColor: #ccc;
}
1
2
3

Χαρακτηριστικά μεταβλητών

Οι μεταβλητές τιμές μπορούν να περάσουν η μία στην άλλη

body {
    --green: #4CAF50;   
    --successColor: var(--green);
}
1
2
3
4

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

/* 这种写法是非法的 */
--primary-color: var(--primary-color, #2a80eb);
1
2

Οι μεταβλητές css δεν μπορούν να χρησιμοποιηθούν ως τιμή της δυνατότητας πολυμέσων @media

:root {
    --maxWidth: 640px;
}
/* 不合法，语法无效 */
@media (max-width: var(--maxWidth)) {}
1
2
3
4
5

Οι μεταβλητές CSS ως τιμές ιδιοτήτων περιεχομένου δεν έχουν καμία επίδραση

/* 无效 */
.bar::before {
    content: var(--percent);
}
1
2
3
4

Χρησιμοποιήστε τη μεταβλητή var()

p {  
   background-color: var(--any-what, deepskyblue); 
}
1
2
3

Το deepskyblue είναιΠροεπιλεγμένη τιμή, χρησιμοποιήστε deepskyblue όταν το –any-what δεν είναι έγκυρο

Όταν η παράμετρος της συνάρτησης var() είναι παράνομη

body {
    --color: 20px;
    background-color: deeppink;
    background-color: var(--color, deepskyblue);
}
1
2
3
4
5

Το τελικό χρώμα φόντου του σώματος είναι διαφανές, επειδή η αρχική τιμή του χρώματος φόντου είναι διαφανής

Εφόσον η πρώτη τιμή παραμέτρου της συνάρτησης var() είναι έγκυρη, ακόμα κι αν η τιμή της παραμέτρου είναι μπερδεμένη, θα εξακολουθεί να αναλύεται κανονικά. Εάν η πρώτη τιμή παραμέτρου είναι παράνομη, η συνάρτηση var() επιλύει την αρχική τιμή ή την κληρονομούμενη τιμή της τρέχουσας ιδιότητας CSS (αν υπάρχει κληρονομικότητα), δηλαδή αποδίδεται σύμφωνα με τους κανόνες της μη καθορισμένης καθολικής λέξης-κλειδιού. (Λάβετε υπόψη ότι οι κανόνες απόδοσης είναι παρόμοιοι και δεν ισοδυναμούν με τον απευθείας ορισμό της μη καθορισμένης λέξης-κλειδιού.)

Τα ίχνη διαστημάτων χαρακτηριστικό της συνάρτησης var().

html {
    font-size: 14px;
}
body {
    --size: 20;
    font-size: 16px;
    font-size: var(--size)px;
}
1
2
3
4
5
6
7
8

Το τελικό μέγεθος γραμματοσειράς σώματος είναι 14 px

Αρχή: Εδώ το μέγεθος γραμματοσειράς:var(–size)px είναι ισοδύναμο με το μέγεθος γραμματοσειράς:20 px Σημειώστε ότι υπάρχει ένα κενό διάστημα μετά το 20, το οποίο είναι μια παράνομη τιμή χαρακτηριστικού μεγέθους γραμματοσειράς. Εφόσον το var(-size)px είναι γραμματικά νόμιμο, θα γίνει επαναφορά του μεγέθους γραμματοσειράς:16px και τελικά θα χρησιμοποιηθεί το μέγεθος γραμματοσειράς 14px που έχει οριστεί από το γονικό στοιχείο.

Το σχέδιο βελτίωσης είναι:

body {
    --size: 20;   
    font-size: calc(var(--size) * 1px);
}
1
2
3
4

body {
    --size: 20px;   
    font-size: var(--size);
}
1
2
3
4

js παίρνει την τιμή της καθολικής μεταβλητής CSS

let borderColor= getComputedStyle(document.documentElement).getPropertyValue("--borderColor");
1

// 获取 --color CSS变量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); 
// 输出cssVarColor值，结果是deepskyblue 
console.log(cssVarColor);
1
2
3
4

js τροποποιεί την τιμή των καθολικών μεταβλητών CSS

document.documentElement.style.setProperty("--borderColor","green");
1

js ορίζει την τιμή των τοπικών μεταβλητών CSS

<div id="box">
    <img src="1.jpg" style="border: 10px solid var(--color);">
</div>
1
2
3

box.style.setProperty('--color', 'deepskyblue');
1

Πρακτικά παραδείγματα

Εμφανίστε την τιμή της μεταβλητής CSS στη σελίδα με τη βοήθεια του μετρητή CSS

/* 有效 */
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress);
}
1
2
3
4
5

γραμμή προόδου

https://blog.csdn.net/weixin_41192489/article/details/121007837

εικόνες svg που χρησιμοποιούνται σε πολλά μέρη

:root {
    --icon-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32'%3E%3Cpath 
fill='green' d='M28.027 5.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 
20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-check {
    background: var(--icon-check) no-repeat center / 16px;
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
.valid-pass::after {
    content: var(--icon-check);
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Δείτε το αποτέλεσμα https://demo.cssworld.cn/new/8/1-3.php

Εφέ κλικ κουμπιού

Δείτε το αποτέλεσμα https://demo.cssworld.cn/new/8/1-1.php

button {
    /* 这里的空格很重要 */
    --open: ;
    color: #2a80eb;
    -webkit-text-fill-color: #fff;
    border-radius: 4px;
    padding: 9px 20px;
    border: 1px solid var(--open, rgba(0,0,0,.1));
    box-shadow: var(--open, inset 0 1px 2px rgba(0,0,0,.1));
    background: var(--open, linear-gradient(#0003, transparent)) currentColor;
    text-shadow: var(--open, -1px -1px #0003);
    transition: .15s;
}
button:active {
    /* 任意全局关键字都可以 */
    --open: inherit;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Αρχή εφαρμογής

Υπάρχει ένα κενό μπροστά από το –open:;, δηλαδή, η τιμή του χαρακτηριστικού –open είναι ένα διάστημα, το οποίο μπορεί να είναι συντακτικά έγκυρο.Ωστόσο, τα κενά διαστήματα δεν είναι έγκυρα για ιδιότητες CSS, όπως το πλαίσιο-σκιά και το φόντο, επομένως, οι ιδιότητες CSS όπως το πλαίσιο-σκιά και το φόντο επιλύονται στις αρχικές τιμές.
Αφού κάνετε κλικ στο κουμπί για να ενεργοποιήσετε την ψευδοκλάση :active, θα εκτελεστεί η δήλωση CSS –open:inherit Η καθολική λέξη-κλειδί CSS δεν πρέπει να είναι έγκυρη ως προσαρμοσμένη τιμή χαρακτηριστικού CSS, επομένως η συνάρτηση var() θα χρησιμοποιεί το εφεδρικό χαρακτηριστικό CSS. αξία για απόδοση.

Προσαρμοσμένη λέξη-κλειδί συνάρτησης CSS()

https://blog.csdn.net/weixin_41192489/article/details/121021277

Προσομοίωση συνάρτησης attr().

https://blog.csdn.net/weixin_41192489/article/details/121022170

Κοινή χρήση τεχνολογίας