CSS笔记

CSS（层叠样式表）是用于网页样式设计的语言，可以控制网页的外观和布局。下面将对 CSS 的主要功能进行分类讲解，并举例说明。

1. 选择器

选择器是用来选择要应用样式的 HTML 元素。CSS 有很多种选择器，如标签选择器、类选择器、ID 选择器、属性选择器等。

例子：

/* 标签选择器 */
p {
  color: red;
}

/* 类选择器 */
.my-class {
  background-color: yellow;
}

/* ID 选择器 */
#my-id {
  font-size: 20px;
}

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

2. 盒模型

盒模型是指 HTML 元素所占空间的一种模型，包括内容区、内边距、边框和外边距。CSS 可以通过盒模型的属性设置来控制元素的大小、边框、内边距、外边距等。

例子：

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 1px solid black;
  margin: 20px;
}

3. 布局

布局是指通过 CSS 来控制 HTML 元素的位置和排列方式，包括浮动、定位、弹性布局等。

例子：

/* 浮动 */
.float-left {
  float: left;
}

/* 定位 */
.absolute {
  position: absolute;
  top: 50px;
  left: 50px;
}

/* 弹性布局 */
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

4. 文本样式

文本样式是指通过 CSS 来控制 HTML 元素的字体、颜色、大小、行高等属性。

例子：

.text {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

5. 动画效果

CSS 还可以通过动画效果来为网页增加更加生动的效果，包括过渡、变形、动画等。

例子：

/* 过渡 */
.box {
  transition: all 0.5s;
}

.box:hover {
  transform: rotate(180deg);
}

/* 动画 */
@keyframes slidein {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.box {
  animation: slidein 1s ease-out;
}