css只运用于header

CSS是前端开发中必不可少的一部分，它可以控制网页的样式和布局。今天我们来聊一下CSS只运用于header的一些技巧。

header {
  background-color: rgba(0,0.5);
  color: #fff;
  padding: 20px;
  Box-shadow: 0 0 10px rgba(0,0.5);
  text-align: center;
}

在上面的代码中，我们使用了header选择器，它表示只在header标签中生效。我们为header添加了一个半透明的黑色背景，白色文字和阴影效果。我们还使用了text-align来让header中的内容居中显示。

如果我们想要在header中添加一个logo，可以使用如下代码：

header {
  background-color: #fff;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

header img {
  height: 80%;
}

在上面的代码中，我们使用了display: flex来让header中的内容在垂直和水平两个方向上居中显示。我们还使用了align-items和justify-content来设置logo的位置。需要注意的是，我们为header指定了一个固定高度，这是因为我们的logo要铺满header，如果header的高度不固定，就无法实现这一效果。

总结一下，我们可以使用CSS来控制header的样式和布局，并实现一些常见的效果，如半透明背景、居中显示和logo等等。希望这篇文章能够帮助你更好地掌握CSS的技巧。