CSS
来自运维百科
CSS(层叠样式表,Cascading Style Sheets)是一种用于控制网页内容外观和布局的样式表语言。它与HTML(结构)和JavaScript(行为)并称为网页开发的三大核心技术。
CSS的核心作用:
- 美化网页
控制文字颜色、字体、间距、背景、边框等视觉效果。
- 实现响应式设计
通过媒体查询适配不同设备(手机、平板、电脑等)。
- 分离结构与样式
让HTML专注内容结构,CSS负责表现,便于维护。
基础语法示例:
/* 选择器 { 属性: 值; } */ h1 { color: blue; font-size: 24px; margin: 10px 0; }
关键特性:
- 层叠性
多条样式规则可叠加,按优先级生效(如内联样式 > ID选择器 > 类选择器 > 标签选择器)。
- 继承性
子元素会继承父元素的某些样式(如字体、颜色)。
- 盒模型
所有元素被视为盒子,包含content(内容)、padding(内边距)、border(边框)、margin(外边距)。
常用选择器:
选择器类型 | 示例 | 作用 |
---|---|---|
标签选择器 | p { } |
选择所有<p> 标签
|
类选择器 | .title { } |
选择class="title" 的元素
|
ID选择器 | #header { } |
选择id="header" 的元素
|
属性选择器 | [type="text"] { } |
选择特定属性的元素 |
伪类选择器 | a:hover { } |
鼠标悬停时的链接样式 |