CSS樣式表是網頁設計中最常用的工具之一。CSS樣式表可以控制網頁的外觀和布局,使得網頁更加美觀和易于操作。在下面的代碼中,我們將介紹如何使用CSS樣式表來控制網頁的樣式。
/* 定義標題的樣式 */ h1 { color: red; font-size: 34px; font-weight: bold; text-align: center; } /* 定義段落的樣式 */ p { color: black; font-size: 16px; line-height: 1.5; margin: 20px; } /* 定義鏈接的樣式 */ a { text-decoration: none; color: blue; } /* 定義列表的樣式 */ ul { list-style-type: none; margin: 0; padding: 0; } /* 定義表格的樣式 */ table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid black; padding: 8px; text-align: left; } /* 定義表單的樣式 */ input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } /* 定義圖片的樣式 */ img { width: 100%; height: auto; }
要使用上述樣式表,您只需將其保存為style.css文件,然后將其鏈接到您的HTML文件中。例如:
<head> <link rel="stylesheet" href="style.css"> </head>
這樣,您就可以在HTML文件中使用上述樣式表中的所有樣式了!
上一篇皮卡丘css
下一篇純css圖片旋轉180度