CSS3学习教程,从入门到精通, CSS3入门介绍的语法知识点及案例(1)
CSS3入门介绍
一、CSS3选择器
1.1 基本选择器
<!DOCTYPE html>
<html>
<head>
<style>
/* 元素选择器 */
p {
color: red;
}
/* 类选择器 */
.myClass {
font-size: 20px;
}
/* ID选择器 */
#myId {
background-color: yellow;
}
/* 通用选择器 */
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>这是一个段落</p>
<p class="myClass">这是一个带有类的段落</p>
<p id="myId">这是一个带有ID的段落</p>
</body>
</html>
1.2 属性选择器
<!DOCTYPE html>
<html>
<head>
<style>
/* 属性选择器 */
[href] {
color: green;
}
/* 属性值选择器 */
[href="https://www.example.com"] {
font-weight: bold;
}
/* 属性值包含选择器 */
[href*="example"] {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.example.com">Example</a>
<a href="https://www.test.com">Test</a>
</body>
</html>
二、CSS3盒模型
2.1 标准盒模型
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
border: 2px solid black;
padding: 10px;
margin: 10px;
/* 标准盒模型 */
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 边框半径
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
border: 2px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
三、CSS3背景和边框
3.1 多背景
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
border: 2px solid black;
background-image: url('image1.jpg'), url('image2.jpg');
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.2 渐变
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background: linear-gradient(to right, red, blue);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
四、CSS3文字和字体
4.1 文字阴影
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 30px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="text">文字阴影示例</div>
</body>
</html>
4.2 字体
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: 'MyFont';
src: url('font.woff') format('woff');
}
.text {
font-family: 'MyFont', sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<div class="text">自定义字体示例</div>
</body>
</html>
五、CSS3 2D/3D变换
5.1 2D变换
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.3s;
}
.box:hover {
transform: rotate(45deg) scale(1.2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
5.2 3D变换
<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 1000px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
transform: rotateY(45deg);
transition: transform 0.3s;
}
.box:hover {
transform: rotateY(0deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
六、CSS3过渡、动画
6.1 过渡
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.3s, width 0.3s;
}
.box:hover {
background-color: blue;
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
6.2 动画
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes myAnimation {
0% { background-color: red; }
50% { background-color: green; }
100% { background-color: blue; }
}
.box {
width: 100px;
height: 100px;
animation: myAnimation 2s infinite;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
七、CSS3多列布局
<!DOCTYPE html>
<html>
<head>
<style>
.columns {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid black;
}
</style>
</head>
<body>
<div class="columns">
<p>这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。这是一个多列布局的示例。</p>
</div>
</body>
</html>
八、CSS3弹性布局
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100px;
}
.item {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
九、CSS3网格布局
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
gap: 10px;
}
.item {
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
十、CSS3媒体查询
<!DOCTYPE html>
<html>
<head>
<style>
/* 大屏幕 */
@media (min-width: 992px) {
.box {
width: 200px;
height: 100px;
background-color: red;
}
}
/* 中等屏幕 */
@media (min-width: 768px) and (max-width: 991px) {
.box {
width: 150px;
height: 75px;
background-color: green;
}
}
/* 小屏幕 */
@media (max-width: 767px) {
.box {
width: 100px;
height: 50px;
background-color: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
以上是CSS3的一些常用知识点及案例代码,希望对你有所帮助!
以下是CSS3在实际开发中的一些具体案例,涵盖了动画、布局、响应式设计等方面:
CSS3动画案例
- 渐变背景动画
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(45deg, red, yellow);
animation: gradient 5s infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
</style>
</head>
<body>
</body>
</html>
该案例实现了页面背景的渐变色循环动画,通过@keyframes
定义动画的关键帧,animation
属性设置动画的持续时间、循环方式等。
- 按钮点击效果
<!DOCTYPE html>
<html>
<head>
<style>
button {
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: darkblue;
}
button:active {
background-color: black;
}
</style>
</head>
<body>
<button>点击我</button>
</body>
</html>
通过transition
属性实现按钮在鼠标悬停和点击时的平滑颜色过渡效果,增强了用户交互体验。
- 文本闪烁效果
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
p {
animation: blink 1s infinite;
}
</style>
</head>
<body>
<p>闪烁的文本</p>
</body>
</html>
利用@keyframes
定义文本的透明度变化,实现闪烁效果,可用于吸引用户注意特定信息。
CSS3布局案例
- 响应式导航菜单
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>响应式导航菜单</title>
<style>
/* 导航菜单样式 */
.nav-menu {
list-style-type: none;
overflow: hidden;
background-color: #333;
}
.nav-menu li {
float: left;
}
.nav-menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 响应式布局 */
@media screen and (max-width: 600px) {
.nav-menu li {
float: none;
}
}
</style>
</head>
<body>
<ul class="nav-menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系</a></li>
</ul>
</body>
</html>
通过媒体查询@media
,在屏幕宽度小于600px时,导航菜单的布局从水平变为垂直,以适应移动端设备。
- 两栏布局
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>两栏布局</title>
<style>
/* 两栏布局样式 */
.container {
width: 80%;
margin: 0 auto;
}
.left {
width: 50%;
float: left;
background-color: #f2f2f2;
padding: 20px;
}
.right {
width: 50%;
float: right;
background-color: #ddd;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
左侧内容
</div>
<div class="right">
右侧内容
</div>
</div>
</body>
</html>
使用浮动float
实现页面的两栏布局,左右两部分各占50%的宽度,适用于简单的页面布局。
- Flexbox布局
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Flexbox布局</title>
<style>
/* Flexbox布局样式 */
.flex-container {
display: flex;
justify-content: space-between;
padding: 20px;
}
.flex-item {
flex: 1;
background-color: #f2f2f2;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">
Flexbox元素1
</div>
<div class="flex-item">
Flexbox元素2
</div>
<div class="flex-item">
Flexbox元素3
</div>
</div>
</body>
</html>
通过display: flex
将容器设置为弹性布局,justify-content
属性控制子元素在主轴上的对齐方式,flex: 1
使子元素自动分配剩余空间,实现等宽布局,适用于需要灵活调整元素位置和大小的场景。
CSS3响应式设计案例
- 图片轮播
<!DOCTYPE html>
<html>
<head>
<style>
.carousel {
width: 300px;
overflow: hidden;
position: relative;
}
.carousel img {
width: 100%;
display: none;
}
.carousel img.active {
display: block;
}
.carousel img:nth-child(1) {
display: block;
}
</style>
</head>
<body>
<div class="carousel">
<img src="image1.jpg" alt="图片1" class="active">
<img src="image2.jpg" alt="图片2">
<img src="image3.jpg" alt="图片3">
</div>
</body>
</html>
通过控制图片的display
属性,在不同的时间显示不同的图片,实现简单的轮播效果,常用于展示多张图片或广告。
- 侧边栏展开效果
<!DOCTYPE html>
<html>
<head>
<style>
.sidebar {
width: 200px;
background: #333;
position: fixed;
top: 0;
bottom: 0;
transition: left 0.3s;
left: -200px;
}
.sidebar.open {
left: 0;
}
.sidebar .toggle {
cursor: pointer;
padding: 10px;
color: white;
background: #555;
}
</style>
</head>
<body>
<div class="sidebar">
<div class="toggle">菜单</div>
<!-- 侧边栏内容 -->
</div>
<script>
document.querySelector('.toggle').addEventListener('click', function() {
document.querySelector('.sidebar').classList.toggle('open');
});
</script>
</body>
</html>
使用transition
属性实现侧边栏展开和收起的平滑过渡效果,通过JavaScript控制类的切换来改变侧边栏的位置,适用于移动端或需要隐藏式导航的页面。