CSS3 简介学习笔记

CSS（层叠样式表）是用于为 HTML 文档添加样式和布局的语言。CSS3 是 CSS 的最新版本，引入了许多新特性，包括过渡、动画、阴影和圆角等。

选择器

CSS3 提供了多种选择器，可以根据元素的属性、类型、位置和关系来选择元素。以下是一些常见的选择器：

• 元素选择器：选择指定元素类型的所有元素。
• 类选择器：选择具有指定 class 属性值的所有元素。
• ID 选择器：选择具有指定 id 属性值的唯一元素。
• 属性选择器：选择具有指定属性的元素。

示例：

Copy Code
/* 元素选择器 */
p {
  color: blue;
}

/* 类选择器 */
.blue-text {
  color: blue;
}

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

/* 属性选择器 */
a[target="_blank"] {
  color: red;
}

盒模型

盒模型是 CSS 中一个重要的概念，它指的是 HTML 元素被包含在一个矩形框中，这个框由内向外分别包含内容区域、内边距区域、边框区域和外边距区域。

示例：

Copy Code
/* 盒模型 */
div {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid black;
  margin: 30px;
}

过渡和动画

CSS3 引入了过渡和动画，可以实现元素在状态之间平滑的转换。过渡是元素从一种状态到另一种状态的过程，而动画则是一个连续的过渡效果。

示例：

Copy Code
/* 过渡 */
div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition-property: background-color;
  transition-duration: 2s;
}

div:hover {
  background-color: red;
}

/* 动画 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

div {
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

阴影和圆角

CSS3 还提供了阴影和圆角的功能，可以用于美化元素的外观。

示例：

Copy Code
/* 阴影 */
div {
  box-shadow: 2px 2px 5px gray;
}

/* 圆角 */
div {
  border-radius: 10px;
}

以上就是 CSS3 的简介学习笔记。