今天我們來一起了解一下CSS樣式的創建，并從無到有打造一個基礎的樣式效果。
/* 先創建一個樣式文件，比如style.css */
在HTML文件中引用該樣式文件：
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
接下來，我們來創建一個基本的樣式，比如改變文本顏色：
/* 在style.css中添加以下代碼 */
p {
color: #333; /* 改變字體顏色 */
}現在，我們已經可以在HTML中使用這個樣式了：
<body> <p>這是一段文本</p> </body>
然后，我們可以添加更多的樣式，比如修改字體、文字對齊方式：
p {
color: #333;
font-family: Arial, sans-serif; /* 修改字體為Arial */
text-align: center; /* 修改文字排列方式為居中 */
}接下來，我們可以為不同的元素添加不同樣式：
/* 添加一個類樣式 */
.red {
color: red;
}
/* HTML代碼如下 */
<p class="red">這是個紅色的字</p>
/* 添加ID樣式 */
#heading {
font-size: 24px; /* 設置字體大小為24像素 */
font-weight: bold; /* 設置文字加粗 */
}
/* HTML代碼如下 */
<h1 id="heading">這是一個大標題</h1>最后，我們可以使用CSS選擇器來選擇更具體的元素：
/* 選擇所有p標簽下的a標簽 */
p a {
text-decoration: none; /* 去除超鏈接下劃線 */
}
/* 選擇第一個p標簽 */
p:first-child {
font-size: 18px; /* 設置文字大小為18像素 */
}
/* 選擇帶有red類的p標簽 */
p.red {
color: red; /* 修改文字顏色為紅色 */
}
/* 選擇帶有heading ID的h1標簽 */
h1#heading {
font-size: 24px; /* 設置字體大小為24像素 */
font-weight: bold; /* 設置文字加粗 */
}通過以上步驟，我們已經學會了如何創建CSS樣式，并使用它們改變文字大小、顏色和排列方式，同時還能夠選擇不同的元素應用不同的樣式，相信在今后的頁面開發中，這些基礎知識會派上用場。