CSS 语法示例 - CSS

CSS（层叠样式表）是一种用于描述网页样式的语言，它可以控制网页中元素的位置、布局、字体、颜色等。在这篇文章中，我们将会介绍 CSS 的基本语法和常用属性。

基本语法

CSS 由两部分组成：选择器和声明块。选择器用于选中 HTML 元素，声明块则包含了一些属性和属性值，用于控制元素的样式。

下面是一个 CSS 声明块的示例：

h1 {
  color: red;
  font-size: 24px;
}

在这个示例中，选择器是 h1，表示选中所有 <h1> 元素。声明块中有两个属性：color 和 font-size，它们分别控制元素的颜色和字体大小，属性值分别为 red 和 24px。

选择器

CSS 中有多种选择器，可以根据元素类型、类名、ID、属性等进行选择。下面是一些常用的选择器示例：

/* 类选择器 */
.text-align-center {
  text-align: center;
}

/* ID 选择器 */
#header {
  font-size: 18px;
}

/* 属性选择器 */
a[href="https://www.example.com"] {
  color: blue;
}

/* 后代选择器 */
nav ul li {
  display: inline-block;
}

/* 伪类选择器 */
a:hover {
  text-decoration: underline;
}

常用属性

CSS 中有很多属性，这里列举一些常用的属性和示例：

/* 颜色 */
color: red;

/* 背景色 */
background-color: #eee;

/* 字体 */
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;

/* 边框 */
border: 1px solid black;
border-radius: 5px;

/* 盒子模型 */
width: 300px;
height: 200px;
margin: 10px;
padding: 20px;
display: inline-block;

/* 定位 */
position: relative;
top: 10px;
left: 20px;

/* 动画 */
animation: fade 2s ease-in-out infinite;

/* 媒体查询 */
@media (max-width: 768px) {
  /* 在移动设备上隐藏元素 */
  .hidden-on-mobile {
    display: none;
  }
}

结语

以上是 CSS 的基本语法和常用属性示例。当然还有很多其他的语法和属性，这里没有一一列举。希望这篇文章能够帮助你更好地理解 CSS。