CSS/CSS3语法新特性笔记

这篇文章距离上次修改已过241天，其中的内容可能已经有所变动。

CSS/CSS3是一种用于描述网页样式的语言，其语法规则主要包括选择器、属性和值等。以下是一些常见的CSS/CSS3语法特性：

选择器：用于选择需要添加样式的元素，例如：

p { color: red; } /* 选择所有的段落元素 */
.myClass { font-size: 16px; } /* 选择所有class为myClass的元素 */
#myId { background-color: blue; } /* 选择id为myId的元素 */

属性和值：属性是样式的特性，值是样式的设置，例如：

p { color: red; } /* color是属性，red是值 */

注释：用于解释代码，浏览器会忽略它们，例如：

/* 这是一段注释 */

字体属性：可以设置字体的样式、大小、粗细等，例如：

p {
  font-style: italic; /* 斜体 */
  font-weight: bold; /* 加粗 */
  font-size: 14px; /* 字体大小 */
  font-family: "Arial", sans-serif; /* 字体类型 */
}

背景属性：可以设置背景色、图片、位置等，例如：

div {
  background-color: yellow; /* 背景颜色 */
  background-image: url('image.jpg'); /* 背景图片 */
  background-position: top right; /* 背景位置 */
}

边框属性：可以设置边框的样式、宽度和颜色等，例如：

p {
  border-style: dotted; /* 边框样式 */
  border-width: 2px; /* 边框宽度 */
  border-color: green; /* 边框颜色 */
}

布局属性：可以设置元素的位置、显示方式等，例如：

div {
  display: flex; /* 设置为弹性盒模型 */
  position: relative; /* 元素相对于其正常位置进行定位 */
}

CSS3特性：如圆角、阴影、渐变等，例如：

div {
  border-radius: 10px; /* CSS3圆角 */
  box-shadow: 5px 5px 5px #888888; /* CSS3阴影 */
  background: linear-gradient(to right, red , yellow); /* CSS3渐变 */
}

CSS/CSS3是一种强大的工具，可以用于创建各种网页样式。在实际开发中，可以根据需要选择使用相应的特性。

CSS/CSS3语法新特性笔记

评论已关闭

推荐阅读