在网页设计中，标签页是一个常见的元素。在展示多个内容的同时，保证页面的整洁和易读。CSS样式选项卡是实现标签页的一种常见方案。

.tab { 
display: flex; 
justify-content: center; 
align-items: center; 
margin: 0 auto; 
width: 80%; 
border-bottom: 2px solid #ccc; 
}
.tab button { 
outline: none; 
cursor: pointer; 
padding: 1em; 
background-color: transparent; 
font-size: 1.2em; 
font-weight: bold; 
border: none; 
} 
.tab button:hover { 
color: #333; 
border-bottom: 2px solid #333; 
} 
.tab button.active { 
color: var(--primary-color); 
border-bottom: 2px solid var(--primary-color); 
} 
.tab-content { 
width: 80%; 
margin: 0 auto; 
display: none; 
}
.tab-content.show { 
display: block; 
}

以上是实现选项卡的 CSS 样式代码。这段代码利用了 Flexbox 布局，将按钮居中排列并去除了默认的样式，同时为了表现选中状态，还加入了 :hover、.active 伪类。

为了实现选项卡内容区域的切换，利用了 display 属性将内容区域初始设为 display: none，只有选中对应按钮，该区域才会显示（display: block）。

当然，这只是一个简单的实现，可以根据需求进行样式修改或添加 JavaScript 代码实现更复杂的交互效果。例如，可以在按钮点击时添加 class(active) 的同时，给其他未选中按钮删除该 class ，也可以利用 JavaScript 实现滑动效果。