目录
CSS3 是现代网页设计的核心技术之一,为开发者提供了丰富的视觉效果和强大的布局能力。本文将详细介绍 CSS3 的基本用法、核心特性、高级技巧以及实战应用,帮助你从基础到进阶,全面掌握 CSS3 的开发技能。
一、CSS3 简介
CSS3 是 CSS2 的升级版本,引入了许多新特性,如选择器、颜色、字体、动画、过渡、媒体查询等。这些特性不仅提升了网页的视觉效果,还极大地提高了开发效率。
二、CSS3 基础知识点
(一)选择器
CSS3 提供了多种选择器,包括基本选择器、伪类选择器和伪元素选择器。
1. 基本选择器
-
标签选择器:选择特定标签的元素。
p { color: blue; }
-
类选择器:选择具有特定类名的元素。
.red-text { color: red; }
-
ID 选择器:选择具有特定 ID 的元素。
#main-heading { font-size: 24px; }
2. 伪类选择器
-
:hover
:鼠标悬停时的样式。a:hover { color: green; }
-
:active
:元素被激活时的样式。button:active { background-color: gray; }
3. 伪元素选择器
-
::before
和::after
:在元素前后插入内容。p::before { content: "• "; color: red; }
(二)颜色和字体
CSS3 支持更多的颜色格式,如 RGBA 和 HSLA,还增加了对 Web 字体的支持。
1. 颜色格式
-
RGBA:支持透明度。
body { background-color: rgba(255, 255, 255, 0.8); }
-
HSLA:基于色相、饱和度和亮度的颜色表示。
div { color: hsla(120, 100%, 50%, 0.5); }
2. Web 字体
使用 @font-face
引入自定义字体。
@font-face {
font-family: 'MyFont';
src: url('path/to/font.woff') format('woff');
}
body {
font-family: 'MyFont', sans-serif;
}
(三)边框和背景
CSS3 提供了更丰富的边框样式,如圆角边框和渐变背景。
1. 圆角边框
div {
border: 2px solid blue;
border-radius: 10px;
}
2. 渐变背景
body {
background-image: linear-gradient(to right, red, yellow);
}
三、CSS3 高级知识点
(一)动画和过渡
CSS3 提供了 @keyframes
和 <