在開發(fā)Web應(yīng)用程序時，我們常常需要為用戶存儲一些信息，例如登錄憑證或偏好設(shè)置等。這些信息可以通過Cookie來保存和讀取，CSS也可以通過設(shè)置Cookie來實現(xiàn)一些設(shè)置。

首先，要設(shè)置一個Cookie，我們需要使用JavaScript的document.cookie屬性來完成。例如，如果我們希望將“username”和“john”這兩個鍵值對保存到Cookie中，可以使用以下代碼：
document.cookie = "username=john";
如果要保存多個鍵值對，可以使用分號來分隔它們，例如：
document.cookie = "username=john; password=123456;";
此外，我們還可以通過設(shè)置Cookie的過期時間來控制其有效期。例如，在以下代碼中，我們將設(shè)置Cookie的過期時間為7天：
var date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));
document.cookie = "username=john; expires=" + date.toUTCString() + ";";
接下來，我們可以通過CSS的屬性選擇器來讀取Cookie中保存的值。例如，以下CSS規(guī)則將根據(jù)Cookie中保存的“theme”值來設(shè)置頁面的主題色：
body[data-theme="dark"] {
background-color: #222;
color: #fff;
}
body[data-theme="light"] {
background-color: #fff;
color: #222;
}
為了實現(xiàn)這一點，我們需要將設(shè)置Cookie的JavaScript代碼與設(shè)置屬性選擇器的CSS代碼相結(jié)合。例如，以下JS代碼將在頁面加載時讀取Cookie中保存的“theme”值并將其應(yīng)用到body元素上：
window.onload = function() {
var theme = getCookie("theme");
if (theme) document.body.setAttribute("data-theme", theme);
}
function getCookie(name) {
var cookies = document.cookie.split(';');
for (var i = 0; i< cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.startsWith(name + "=")) return cookie.substring(name.length + 1);
}
return null;
}
在這個示例中，我們定義了一個名為“getCookie”的函數(shù)，該函數(shù)接受一個Cookie名稱并返回相應(yīng)的值。我們使用“split”方法將Cookie字符串拆分為鍵值對，并使用循環(huán)和“startsWith”方法來查找指定名稱的Cookie。如果找到了指定的Cookie，我們返回其值，否則返回null。
通過將JavaScript和CSS結(jié)合起來，我們可以輕松地將Cookie用于樣式設(shè)置，從而實現(xiàn)更好的Web體驗。