CSS是一种基于样式的层叠样式表语言。它被用来控制HTML文档的呈现样式。CSS建立在HTML以及其他标记语言基础之上,可以为HTML元素添加视觉样式、布局和特效等。
p { color: red; font-size: 16px; text-align: center; }
在CSS中,样式的基础可以是元素、类、ID等。使用元素选择器可以直接为HTML元素添加样式,如上面的p标签。通过为HTML元素添加class或id属性,可以使用类选择器或ID选择器,将样式应用到特定的HTML元素上。
.header { background-color: #333; color: #fff; padding: 10px; } #main { width: 80%; margin: 0 auto; }
类选择器以"."开头,ID选择器以"#"开头。
CSS的层叠机制是指不同样式的叠加顺序,通过选择器的权重来决定哪一个样式被应用到HTML元素上。选择器的权重从高到低依次是:!important >行内样式 >ID选择器 >类选择器 >元素选择器。当样式冲突时,优先使用权重高的样式。
p { font-size: 16px; } #headline { font-size: 22px; } p#intro { font-size: 18px; } .highlight { color: red; font-weight: bold; }
同时,CSS提供了伪类和伪元素,用于在HTML元素的不同状态下应用样式。常见的伪类有:hover、:active、:visited等,表示元素的鼠标悬停、点击或访问状态。而伪元素可以添加特定的内容,如:before和:after。
a:hover { color: orange; } input:focus { outline: none; } p:first-of-type { font-weight: bold; } li:before { content: "• "; }
CSS是一种强大的前端开发工具,可以大大提高网页的呈现效果和用户体验。通过优雅的代码编写和灵活的样式调整,可以让网页变得更加美观、易用、高效。