HTML语义化与CSS怎么配合_HTML语义化标签与CSS样式的配合使用

CSS 不改变这些标签的语义含义，而是基于它们来设置样式。比如：

• 表示主导航区域，CSS 可为其添加背景色、内边距和水平布局
• 包含独立内容，可用CSS设置卡片式外观或边框
• 用于侧边栏，CSS 可将其定位在主内容旁或响应式折叠

通过类名增强语义与样式的衔接

虽然语义标签已有含义，但在实际开发中常结合 class 来更精确地描述功能或样式意图。

例如：

  
今日要闻
  
简要内容…

CSS 中就可以针对这些类定义样式：

.news-item {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 8px;
}
.news-title {
  color: #333;
  font-size: 1.4em;
}

这样既保留了 的语义，又通过类名实现了样式控制。

避免用非语义标签替代结构意义

不要为了“方便写样式”而全用 和 。比如把导航写成：

...

.site-footer {
  text-align: center;
  padding: 20px;
}
@media (min-width: 768px) {
  .site-footer {
    text-align: left;
  }
}