css技术

作者：狂神战天发布日期:2026-02-20 浏览:79

/* 示例代码：使用CSS设置一个简单的样式 */

/* 选择器：为所有 <p> 元素设置字体颜色为蓝色 */
p {
    color: blue;
}

/* 类选择器：为具有 class="center" 的元素设置文本居中 */
.center {
    text-align: center;
}

/* ID 选择器：为具有 id="header" 的元素设置背景颜色 */
#header {
    background-color: #f1f1f1;
}

/* 伪类选择器：当鼠标悬停在链接上时，改变链接的颜色 */
a:hover {
    color: red;
}

/* 响应式设计：当屏幕宽度小于600px时，调整 <body> 元素的字体大小 */
@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

解释说明：

选择器：p 是标签选择器，用于选择所有的 <p> 元素。
类选择器：.center 用于选择所有带有 class="center" 的元素，并应用相应的样式。
ID 选择器：#header 用于选择具有 id="header" 的元素。
伪类选择器：:hover 用于定义当用户将鼠标悬停在元素上时的样式。
媒体查询：@media 用于根据设备的屏幕宽度应用不同的样式规则。

上一篇：css样式居中

下一篇：css动态样式