CSS揭秘第二章笔记——用CSS玩出新花样

摸鱼期间实在无聊，读了一下这本《CSS揭秘》，才发现CSS有这么多新奇的用法，故想记录下来。作者一共讲了10个CSS技巧，每个技巧都非常实用，可以帮助我们在CSS的世界里尽情发挥创意，玩出新花样。

1. CSS变量

CSS变量允许我们在CSS文件中存储和使用变量。这使得我们可以更轻松地更改网站的配色方案或字体，而无需在整个文件中搜索和替换每个值。例如，我们可以这样定义一个CSS变量：

:root {
  --primary-color: #ff0000;
}

然后，我们就可以在CSS文件中使用这个变量：

h1 {
  color: var(--primary-color);
}

当我们想要更改网站的配色方案时，只需要更改--primary-color变量的值即可。

2. CSS选择器

CSS选择器允许我们指定哪些HTML元素应该被某个CSS规则所影响。CSS选择器有许多种类型，每种类型都有自己的用途。例如，我们可以使用类选择器来指定具有特定类名的元素，或者我们可以使用ID选择器来指定具有特定ID的元素。

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

/* ID选择器 */
#my-id {
  color: blue;
}

3. CSS动画

CSS动画允许我们创建动画效果。我们可以使用CSS动画来创建淡入淡出效果、旋转效果、缩放效果等。例如，我们可以这样创建一个淡入淡出效果：

.fade-in {
  animation: fade-in 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

4. CSS媒体查询

CSS媒体查询允许我们根据不同的设备或屏幕尺寸来应用不同的CSS规则。例如，我们可以使用媒体查询来指定当屏幕宽度小于768像素时，网站应该使用不同的布局。

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

5. CSS网格布局

CSS网格布局允许我们创建复杂的网格布局。我们可以使用CSS网格布局来创建多列布局、响应式布局等。例如，我们可以这样创建一个两列布局：

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

6. CSS flexbox布局

CSS flexbox布局允许我们创建灵活的布局。我们可以使用CSS flexbox布局来创建弹性布局、流式布局等。例如，我们可以这样创建一个弹性布局：

.flex-container {
  display: flex;
  flex-direction: row;
}

7. CSS定位

CSS定位允许我们指定元素在页面中的位置。我们可以使用CSS定位来创建绝对定位元素、相对定位元素等。例如，我们可以这样创建一个绝对定位元素：

.absolute-positioned {
  position: absolute;
  top: 0;
  left: 0;
}

8. CSS过渡

CSS过渡允许我们在元素之间创建平滑的过渡效果。我们可以使用CSS过渡来创建淡入淡出效果、旋转效果、缩放效果等。例如，我们可以这样创建一个淡入淡出效果：

.transition {
  transition: opacity 1s;
}

.transition:hover {
  opacity: 1;
}

9. CSS变换

CSS变换允许我们对元素进行变换。我们可以使用CSS变换来创建旋转效果、缩放效果、位移效果等。例如，我们可以这样创建一个旋转效果：

.rotate {
  transform: rotate(45deg);
}

10. CSS滤镜

CSS滤镜允许我们对元素应用滤镜效果。我们可以使用CSS滤镜来创建模糊效果、亮度效果、对比度效果等。例如，我们可以这样创建一个模糊效果：

.blur {
  filter: blur(5px);
}

以上10个CSS技巧只是CSS的冰山一角。CSS还有很多其他强大的功能，等待我们去探索和发现。