h1 { font-size: 36px; font-family: Arial, sans-serif; }
字体样式
字体样式是 CSS 最基础的样式类型,它用于控制文本的字体、字号和字体颜色等基本属性。在字体样式中,常常会用到 font-family、font-size 以及 color 等属性。
.container { width: 90%; margin: 20px auto; display: flex; flex-wrap: wrap; }
布局样式
布局样式用于控制网页的布局方式,包括网页的宽度、边距、浮动以及定位等属性。其中,display 和 position 属性经常会被用到。
.btn { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }
按钮样式
按钮样式用于控制网页中的按钮的外观,常常包括背景颜色、文本颜色、内边距、边框、圆角、对齐方式等属性。在按钮样式中,可以使用众多的 CSS 属性来定制一个美观的按钮。
@media screen and (max-width: 600px) { body { background-color: lightblue; } }
媒体查询样式
媒体查询样式用于根据用户的设备类型或屏幕尺寸等特性来调整网页的样式表,这种样式类型可以让网页在各种设备上都具有良好的视觉效果。在媒体查询样式中,可以使用 @media 规则来设置样式表的条件和样式。
总之, CSS 中有各种各样的样式类型,它们可以被灵活地组合使用,以创建出独具风格的网页。对于想要成为 CSS 高手的开发者来说,熟练掌握各种样式类型的特点是非常重要的。