100种常用css样式

CSS（层叠样式表）是前端开发的必备技能之一，可以美化和改善网站的外观和用户界面。在此，我们将列举出100种最常用的CSS样式，以便您快速入门，让您的网站看起来更专业、更有吸引力。

/* 1. 基本样式 */
p {
font-size: 16px;
color: #333;
line-height: 1.5;
font-family: Arial, Helvetica, sans-serif;
margin: 1em 0;
}
/* 2. 头部样式 */
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
margin-bottom: 20px;
}
/* 3. 链接样式 */
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
/* 4. 按钮样式 */
button {
background-color: #333;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #000;
}
/* 5. 表格样式 */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #333;
color: #fff;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 6. 图片样式 */
img {
max-width: 100%;
height: auto;
display: block;
margin: 10px auto;
}
/* 7. 列表样式 */
ul, ol {
margin: 1em 0;
padding-left: 20px;
}
li {
margin: 5px 0;
}
/* 8. 背景图样式 */
body {
background-image: url("background.jpg");
background-size: cover;
}
/* 9. 元素居中样式 */
.container {
text-align: center;
}
/* 10. 输入框样式 */
input[type="text"], input[type="email"], textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
box-sizing: border-box;
}
/* 11. 表单样式 */
form {
width: 70%;
margin: 0 auto;
}

以上是我们为您整理的100种常用CSS样式，如果您运用得当，将会在网站设计中发挥重要的作用。让我们一起来打造一个独一无二且让人难以忘记的网站吧！

查看更多关于100种常用css样式的详细内容...