CSS是一種很有用的前端開發(fā)技術(shù),可以用來美化網(wǎng)頁的表格和表單樣式。表格和表單是網(wǎng)頁中經(jīng)常使用的元素,通過CSS可以改變它們的邊框顏色、背景顏色、字體等屬性,讓網(wǎng)頁看起來更加美觀。
table { border: 1px solid black; border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 10px; text-align: center; } th { background-color: #dddddd; } tr:nth-child(even) { background-color: #f2f2f2; }
上面的代碼是一個(gè)簡(jiǎn)單的表格樣式。通過table選擇器,我們?cè)O(shè)置了表格的整體邊框樣式,并去除了單元格之間的空隙。用th和td選擇器分別設(shè)置了表頭和表格單元格的邊框和內(nèi)邊距樣式,并且讓文本居中對(duì)齊。再用th選擇器設(shè)置了表頭的背景顏色,最后通過tr:nth-child() 偽類選擇器設(shè)置了隔行換色。
form { margin: 50px auto; width: 500px; background-color: #f2f2f2; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px grey; } label { display: block; font-weight: bold; margin: 10px 0px; } input[type="text"], input[type="email"], textarea { width: 100%; padding: 10px; border-radius: 5px; border: none; margin-bottom: 20px; } input[type="submit"] { background-color: #4CAF50; border: none; color: white; padding: 10px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 5px; cursor: pointer; }
上面的代碼是一個(gè)簡(jiǎn)單的表單樣式。通過form選擇器設(shè)置了表單的背景顏色、邊框樣式、圓角和陰影效果。用label選擇器設(shè)置了表單的標(biāo)簽樣式,使標(biāo)簽文本加粗且與上下元素有一定的間距。然后用input[type="text"], input[type="email"], textarea選擇器設(shè)置了表單輸入框的寬度、內(nèi)邊距、邊框樣式和圓角效果,并且讓它們撐滿整個(gè)表單。最后用input[type="submit"]選擇器設(shè)置了表單提交按鈕的樣式,使其有明顯的點(diǎn)擊效果。