CSS文件和MDX文件是Web開發中常見的兩種文件類型。CSS文件是用于定義網頁樣式的文件，而MDX文件是用于創建React組件的文件。 CSS文件通常包含一系列CSS規則，每個規則都包含一個選擇器和一組屬性。選擇器用于選擇需要應用樣式的HTML元素，而屬性則用于定義元素的外觀和行為。以下是一個示例CSS文件：

<style>
h1 {
color: blue;
font-size: 24px;
}
p {
font-size: 16px;
line-height: 1.5;
}
</style>

在上面的示例中，h1元素的顏色為藍色，字體大小為24像素，而p元素的字體大小為16像素，行高為1.5。 MDX文件通常用于創建React組件，可以使用JSX語法來定義組件的結構和樣式。以下是一個示例MDX文件：

import React from 'react';
export default function MyComponent(props) {
return (
<div style={{ backgroundColor: 'yellow', padding: '20px' }}>
<h1>{props.title}</h1>
<p>{props.content}</p>
</div>
);
}

在上面的示例中，我們使用了React的函數式組件來創建一個MyComponent組件。該組件包含一個div元素，背景顏色為黃色，內邊距為20像素。在該div元素中，我們添加了一個h1元素和一個p元素，分別用于顯示組件的標題和內容。同時，我們使用了props屬性來接收父組件傳遞的參數。 綜上所述，CSS文件和MDX文件在Web開發中都起到了重要的作用，一個用于定義網頁樣式，一個用于創建React組件。掌握這兩種文件的使用方法對于Web開發人員來說是非常值得的。