CSS（層疊樣式表）是一種被廣泛應用于網頁設計的語言，通過它我們可以輕松的控制網頁的樣式。其中，日期格式的設置也是經常需要用到的。那么，在CSS中如何設置日期格式呢？下面是一個簡單的教程。

.date{
font-size: 14px;
color: #333;
text-transform: uppercase;
font-weight: bold;
padding: 5px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 2px 2px #ccc;
text-align: center;
/* 設置日期格式 */
content: attr(data-date);
/* 如果需要使用英文表示月份的話，可以加上下面這行代碼 */
/* text-transform: capitalize; */
}

在上面的代碼中，我們創建了一個class名為“date”的樣式，其中包括字體大小、顏色、字母大小寫、邊框等等多種樣式。在這里，我們需要特別關注一下“content: attr(data-date);”這一行代碼。它的作用是將設置為“data-date”的屬性值作為文本內容顯示出來，從而實現日期格式的設置。

接下來，我們需要在HTML文檔中使用這個class。例如：

<div class="date" data-date="2021-10-01"></div>

在這里，我們創建了一個div元素，并使用了“date”和“data-date”這兩個屬性。其中，“date”屬性用于調用CSS中定義的樣式，而“data-date”則用于存儲日期值。“data-date”的值可以是任何日期格式，例如“2021/10/01”或“01-10-2021”等等。

最后，我們可以在頁面中看到一個美觀的日期格式。

總之，CSS中的“content: attr(data-date)”函數可以很方便地實現日期格式的設置，從而幫助我們美化網頁布局。