css基础代码

css
/* 选择所有段落元素并设置字体大小和颜色 */
p {
    font-size: 16px;
    color: #333;
}

/* 选择所有标题元素并设置字体大小和颜色 */
h1, h2, h3 {
    font-size: 24px;
    color: #555;
}

/* 选择所有链接元素并设置颜色和文本修饰 */
a {
    color: #007bff;
    text-decoration: none; /* 链接无下划线 */
}

/* 当链接处于鼠标悬停状态时改变颜色 */
a:hover {
    color: #0056b3;
}

/* 设置页面背景颜色 */
body {
    background-color: #f4f4f4;
}

/* 设置容器元素的宽度和居中 */
.container {
    width: 80%;
    margin: 0 auto; /* 在水平方向上自动居中 */
}

/* 设置按钮样式 */
.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
}

/* 当按钮处于鼠标悬停状态时改变背景颜色 */
.button:hover {
    background-color: #0056b3;
}

这段代码展示了一些常见的 CSS 属性和选择器用法，用于设置页面元素的样式，包括段落、标题、链接、背景色、容器和按钮等。您可以根据自己的需求进行修改和扩展。

css
/* 设置列表样式 */

ul {

list-style-type: disc; /* 使用实心圆点作为列表符号 */

}

/* 设置表格样式 */

table {

width: 100%;

border-collapse: collapse; /* 合并表格边框 */

}
table, th, td {

border: 1px solid #ddd; /* 设置表格边框样式 */

padding: 8px;

}
th {

background-color: #f2f2f2; /* 设置表头背景色 */

text-align: left;

}
/* 设置图片样式 */

img {

max-width: 100%; /* 图片的最大宽度为其容器的宽度 */

height: auto; /* 图片高度自动调整 */

display: block; /* 让图片在父容器中垂直居中 */

margin: 0 auto; /* 图片水平居中 */

}
/* 设置响应式设计 */

@media screen and (max-width: 600px) {

/* 在屏幕宽度小于等于 600px 时应用
希望这些代码能够帮助您更好地理解 CSS 的基础用法，并能够满足您的样式设计需求。