CSS基础 - CSS3

A. 简介

B. 基础用法

C. 总结

A. 简介

CSS3 是 CSS（层叠样式表）技术的升级版本。

一、新特性概述

选择器增强
- CSS3 引入了更多强大的选择器，使得开发者能够更精确地选择和样式化网页元素。例如，属性选择器可以根据元素的属性值来选择元素，nth-child选择器可以选择父元素中的特定子元素等。这些选择器减少了对 JavaScript 进行复杂 DOM 操作的需求，提高了样式设置的效率和灵活性。
- 示例：使用nth-child选择器为表格的奇数行和偶数行设置不同的背景颜色。

   table tr:nth-child(even) {
       background-color: #f2f2f2;
   }
   table tr:nth-child(odd) {
       background-color: #ffffff;
   }

边框和背景
- 在 CSS3 中，可以创建更丰富的边框和背景效果。
- 边框方面，支持border-radius属性来创建圆角边框，使元素看起来更加圆润和美观。例如：

  .box {
       border: 1px solid black;
       border-radius: 10px;
   }

背景方面，可以使用background-size属性来控制背景图像的大小和缩放方式，background-origin属性来指定背景图像的定位区域等。例如：

  .image-background {
       background-image: url('image.jpg');
       background-size: cover;
       background-origin: padding-box;
   }

文本效果
- CSS3 提供了更多的文本样式选项。例如，text-shadow属性可以为文本添加阴影效果，增强文本的立体感和可读性。

   h1 {
       text-shadow: 2px 2px 4px #000000;
   }

还支持text-overflow属性来处理文本溢出的情况，可以选择省略号显示或者其他自定义方式。

多列布局
- CSS3 引入了多列布局的功能，允许将文本内容分成多列显示，类似于报纸的排版效果。可以通过column-count属性设置列数，column-gap属性设置列间距等。
- 示例：

  .article {
       column-count: 2;
       column-gap: 20px;
   }

动画和过渡
- 过渡（Transition）：可以在 CSS 属性值发生变化时实现平滑的过渡效果，而不是瞬间切换。例如，当鼠标悬停在一个按钮上时，按钮的颜色可以从一种颜色平滑地过渡到另一种颜色。

   button {
       background-color: blue;
       transition: background-color 0.5s ease;
   }
   button:hover {
       background-color: green;
   }

动画（Animation）：可以创建更复杂的动画效果，通过定义关键帧（keyframes）来指定动画在不同时间点的状态。例如，创建一个元素从左到右移动的动画。

   @keyframes moveRight {
       from {
           left: 0px;
       }
       to {
           left: 200px;
       }
   }
  .box {
       position: relative;
       animation: moveRight 2s forwards;
   }

媒体查询（Media Queries）
- 媒体查询允许根据不同的设备特性（如屏幕宽度、分辨率等）应用不同的样式，从而实现响应式设计。通过媒体查询，可以创建适应不同设备的网页布局和样式，确保在各种设备上都能提供良好的用户体验。
- 示例：当屏幕宽度小于 768px 时，应用以下样式，将导航栏样式从水平排列改为垂直排列。

   @media screen and (max-width: 768px) {
       nav ul {
           flex-direction: column;
       }
   }

二、优势

增强网页视觉效果
- CSS3 的新特性使得网页能够呈现出更丰富、更具吸引力的视觉效果，提升用户体验。例如，通过圆角边框、阴影效果等可以使网页元素看起来更加精致。
提高开发效率
- 新的选择器和布局功能减少了对 JavaScript 代码的依赖，开发者可以更高效地实现复杂的页面布局和样式效果，加快开发速度。
响应式设计支持
- 媒体查询等特性使得创建响应式网页变得更加容易，能够适应不同设备和屏幕尺寸，满足了现代网页设计对多设备兼容性的需求。
更好的用户体验
- 动画和过渡效果可以为用户提供更流畅、自然的交互体验，引导用户的注意力，提高网页的可用性和趣味性。

总之，CSS3 带来了许多新的功能和改进，为网页设计和开发提供了更强大的工具和更多的可能性，已经成为现代网页开发中不可或缺的一部分。

B. 基础用法

选择器的进一步使用
- 属性选择器：
  - 可以根据元素的属性及属性值来选择元素。
  - 例如，选择所有type属性为text的<input>元素：

     input[type="text"] {
         background-color: lightgray;
     }

伪类选择器的扩展：
- CSS3 增加了一些新的伪类选择器，如:nth-of-type、:last-child等。
- :nth-of-type(n)可以选择父元素下特定类型的第n个元素。例如，选择每个<ul>下的第二个<li>元素：

     ul li:nth-of-type(2) {
         color: blue;
     }

:last-child选择父元素的最后一个子元素。例如，将<div>的最后一个<p>元素设置为红色字体：

     div p:last-child {
         color: red;
     }

边框和背景新属性
- 边框：
  - border-radius用于创建圆角边框。可以分别设置四个角的半径，也可以使用简写形式。例如：

    .box {
         border: 2px solid black;
         border-radius: 15px; /* 四个角都设置为 15 像素半径的圆角 */
     }

或者

    .box {
         border: 2px solid black;
         border-radius: 10px 20px 30px 40px; /* 分别设置四个角的半径 */
     }

背景：
- background-size控制背景图像的大小。可以设置为具体的像素值、百分比或一些关键字。例如：

    .image-background {
         background-image: url('image.jpg');
         background-size: cover; /* 图像会缩放以完全覆盖背景区域，可能会裁剪部分图像 */
     }

或者

    .image-background {
         background-image: url('image.jpg');
         background-size: 50% 100%; /* 宽度为容器的 50%，高度为容器的 100% */
     }

文本新样式
- text-shadow添加文本阴影效果，语法为text-shadow: h-shadow v-shadow blur color;，其中h-shadow是水平阴影的位置（正数向右，负数向左），v-shadow是垂直阴影的位置（正数向下，负数向上），blur是模糊半径（可选），color是阴影的颜色。例如：

     h1 {
         text-shadow: 2px 2px 3px gray;
     }

word-wrap和word-break用于处理文本的换行情况。word-wrap（在 CSS3 中也叫overflow-wrap）可以设置当单词太长时是否允许在单词内换行，word-break设置如何在单词内或在单词之间进行换行。例如：

    .text {
         word-wrap: break-word;
         word-break: break-all;
     }

过渡（Transition）
- 用于在 CSS 属性值发生变化时创建平滑的过渡效果。语法为transition: property duration timing-function delay;。
- 例如，让一个按钮的背景颜色在 0.5 秒内以线性方式从蓝色过渡到绿色：

     button {
         background-color: blue;
         transition: background-color 0.5s linear;
     }
     button:hover {
         background-color: green;
     }

可以同时过渡多个属性，用逗号分隔。例如：

     div {
         width: 100px;
         height: 100px;
         background-color: red;
         transition: width 1s, height 1s, background-color 2s;
     }
     div:hover {
         width: 200px;
         height: 200px;
         background-color: blue;
     }

变形（Transform）
- 可以对元素进行旋转、缩放、平移等操作。
- 例如，将一个元素旋转 45 度：

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

缩放元素：

    .element {
         transform: scale(1.5); /* 放大 1.5 倍 */
     }

平移元素：

    .element {
         transform: translate(50px, 100px); /* 向右平移 50 像素，向下平移 100 像素 */
     }

二、实例

创建一个带有圆角边框和阴影的按钮
- HTML 代码：

   <button class="myButton">点击我</button>

CSS 代码：

  .myButton {
       background-color: #4CAF50; /* 绿色背景 */
       border: none;
       color: white;
       padding: 15px 32px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 16px;
       border-radius: 10px; /* 圆角半径为 10 像素 */
       box-shadow: 5px 5px 10px gray; /* 水平阴影 5 像素，垂直阴影 5 像素，模糊半径 10 像素，灰色阴影 */
   }
  .myButton:hover {
       background-color: #3e8e41; /* 鼠标悬停时颜色变深一些 */
   }

实现一个图片缩放过渡效果
- HTML 代码：

   <img src="image.jpg" class="myImage">

CSS 代码：

  .myImage {
       transition: transform 0.5s ease; /* 0.5 秒内以 ease 缓动函数过渡 transform 属性 */
   }
  .myImage:hover {
       transform: scale(1.2); /* 鼠标悬停时放大 1.2 倍 */
   }

创建一个旋转的动画
- HTML 代码：

   <div class="rotatingBox"></div>

CSS 代码：

  .rotatingBox {
       width: 100px;
       height: 100px;
       background-color: blue;
       animation: rotateAnimation 4s linear infinite; /* 4 秒内以线性方式无限循环旋转动画 */
   }
   @keyframes rotateAnimation {
       from {
           transform: rotate(0deg);
       }
       to {
           transform: rotate(360deg);
       }
   }