发展历史

CSS 最初的版本于 1996 年发布，随后在 1998 年发布了 CSS2。2011 年发布的 CSS3 是目前最新的版本。随着时间的推移，CSS 被越来越多地应用于网页设计和排版中。现在，CSS 已经成为了网页设计的基本技能之一。

CSS基础语句以及其用法：

使用 CSS

CSS 可以通过3种方式添加到 HTML 文档：

内联 - 通过在 HTML 元素中使用 style 属性
内部 - 使用 <head> 部分中的 <style> 元素
外部 - 通过使用 <link> 元素链接到外部 CSS 文件

选择器（Selector）：用于选择要应用样式的元素。选择器可以是元素名称、类、ID或属性。例如：

h1 {color: red;}
/* 选择所有<h1>元素，并将它们的颜色设置为红色 */
 
.example {font-size: 14px;}
/* 选择所有class="example"的元素，并将它们的字体大小设置为14像素 */
 
#intro {background-color: yellow;}
/* 选择id="intro"的元素，并将它们的背景颜色设置为黄色 */
 
input[type="text"] {border: 1px solid gray;}
/* 选择所有type="text"的<input>元素，并将它们的边框设置为1像素实心灰色 */

属性（Property）：用于定义元素的外观样式。属性由一个名称和一个值组成，中间用冒号分隔。例如：

h1 {
  color: red; /* 将<h1>元素的颜色设置为红色 */
  font-size: 24px; /* 将<h1>元素的字体大小设置为24像素 */
  text-align: center; /* 将<h1>元素的文本居中对齐 */
}

值（Value）：用于指定属性的具体设置。值可以是数字、颜色、字符串或关键字。例如：

p {
  margin-top: 20px; /* 将<p>元素的上边距设置为20像素 */
  background-color: #ffffff; /* 将<p>元素的背景颜色设置为白色 */
  font-family: "Helvetica Neue", Arial, sans-serif; /* 将<p>元素的字体设置为"Helvetica Neue"、Arial或sans-serif */
}

下面是一些使用CSS的案例：

将文本居中对齐：

.center {
  text-align: center;
}

为链接添加下划线：

a {
  text-decoration: underline;
}

将元素的背景颜色设置为淡蓝色：

.background {
  background-color: #e6f2ff;
}

将图片宽度设置为50%：

img {
  width: 50%;
}

常见的CSS实例：

居中一个元素：

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

悬浮特效：

.hover-effect {
  transition: all 0.3s ease-in-out;
}
.hover-effect:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

渐变背景：

.gradient-bg {
  background: linear-gradient(to bottom, #00c6ff, #0072ff);
}

旋转动画：

.rotate {
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

模糊效果：

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

总结

关于css没什么好介绍的虽然CSS是一门相对简单的技术，但它对于网站的设计和用户体验来说是至关重要的。除了基础语法之外，CSS还有很多高级用法和技巧，比如响应式布局、动画效果、自定义样式等。这些技术可以帮助开发者实现各种复杂的网页样式和交互效果。

此外，随着Web技术的不断发展，CSS也在不断演进和改进。CSS3引入了很多新的特性和属性，如弹性盒子模型、网格布局、变形、过渡、动画、滤镜等，这些属性可以帮助我们更加高效和灵活地使用CSS来实现各种网页样式和交互效果。

CSS | 青训营笔记

发展历史

CSS基础语句以及其用法：

使用 CSS

常见的CSS实例：

总结