目录
一、CSS语法
二、CSS选择器
三、CSS样式表
1.外部样式表
2.内部样式表
3.内联样式
四、CSS背景
1.背景颜色：background-color
2.背景图片：background-image
3.背景大小：background-size
4.背景图片是否重复：background-repeat
5.背景图像起始位置：background-position
6.背景图像是否固定：background-attachment
7.背景图像相对于什么定位：background-origin
8.背景绘制区域：background-clip
五、CSS文本格式
六、CSS链接
七、CSS盒子模型
1.margin-外边距
2.border-边框
3.padding-内边距
八、CSS定位-Position
九、CSS布局-Overflow
十、代码示例
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
一、CSS语法
CSS语法构成：选择器+1条或多条声明。每条声明由一个属性和一个值构成。
p {color:red;text-align:center;
}二、CSS选择器
CSS选择器包含：id选择器和class选择器。
id选择器以 # 显示。
# demo {color:#0fff;display:flex;}
/*调用时*/
<div id="demo"></div>class选择器以 . 点号显示。
.img {background-color:#0fff;}
/*调用时*/
<div class="img"></div>三、CSS样式表
1.外部样式表
通过<link>标签链接到样式表。
<head><link rel="stylesheet" type="text/css" href="style.css">
</head>2.内部样式表
通过<style>标签在文档头部定义。
<head><style>p {margin-left:20px;padding:10px 20px;text-align:center;}</style>
</head>3.内联样式
<p style="color:AliceBlue;margin:10px 20px">这是一个段落。</p>四、CSS背景
1.背景颜色：background-color
.image {background-color:transparent /*透明*/
}2.背景图片：background-image
通过url设置相对或绝对位置。
.image {background-image:url("相对或绝对位置");
}3.背景大小：background-size
| 属性值 | 描述 |
| cover | 使背景图片始终铺满整个背景区域，但如果图片比背景区域小，会自动拉伸或放大图片，使其铺满整个背景区域。 |
| contain | 使背景图片在不拉伸的情况下，尽可能地在背景区域中居中显示，同时保留其原始大小。 |
| px | 直接指定背景图片的大小，可以是固定值、百分比或关键字auto，其中auto表示原始大小。 |
4.背景图片是否重复：background-repeat
| 属性值 | 描述 |
| repeat | 默认值，表示背景图像在水平和垂直方向都重复出现。 |
| repeat-x | 表示背景图像只在水平方向重复出现，而不在垂直方向上出现 。 |
| repeat-y | 表示背景图像只在垂直方向上重复出现，而不在水平方向上出现。 |
| no-repeat | 表示背景图像不重复出现。 |
5.背景图像起始位置：background-position
（1）属性值为“长度单位”
当background-position取值为长度单位时，要设置水平方向数值（x轴）和垂直方向数值（y轴）。通过px，百分比%来设置。
| 属性值 | 描述 |
| x（数值） | 设置网页的横向位置 |
| y（数值） | 设置网页的纵向位置 |
（2）属性值为“关键字”
当background-position取值为关键字时，也需要设置水平方向和垂直方向的值，使用关键字。
| 属性值 | 描述 |
|---|---|
| top left | 左上 |
| top center | 靠上居中 |
| top right | 右上 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
6.背景图像是否固定：background-attachment
| 属性值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置 |
7.背景图像相对于什么定位：background-origin
| 属性值 | 描述 |
| padding-box | 背景图像相对于内边距框来定位。 |
| border-box | 背景图像相对于边框盒来定位。 |
| content-box | 背景图像相对于内容框来定位。 |
8.背景绘制区域：background-clip
| 属性值 | 描述 |
| border-box | 默认值。背景绘制在边框方框内（剪切成边框方框）。 |
| padding-box | 背景绘制在衬距方框内（剪切成衬距方框）。 |
| content-box | 背景绘制在内容方框内（剪切成内容方框）。 |
五、CSS文本格式
| 属性值 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
六、CSS链接
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
注意：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
七、CSS盒子模型
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
1.margin-外边距
margin属性可以有1-4个值：
- margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
- margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
- margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
- margin:25px;
- 所有的4个边距都是25px
2.border-边框
border-style属性可以有1-4个值：
- border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
- border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
- border-style:dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
- border-style:dotted;
- 四面边框是 dotted
3.padding-内边距
padding属性可以有1-4个值：
padding:25px 50px 75px 100px;
- 上填充为25px
- 右填充为50px
- 下填充为75px
- 左填充为100px
padding:25px 50px 75px;
- 上填充为25px
- 左右填充为50px
- 下填充为75px
padding:25px 50px;
- 上下填充为25px
- 左右填充为50px
padding:25px;
- 所有的填充都是25px
八、CSS定位-Position
| 属性值 | 描述 |
| static | 默认值，静态定位。 |
| relative | 相对定位元素的定位是相对其正常位置。 |
| fixed | 元素的位置相对于浏览器窗口是固定位置。 |
| absolute | 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。 |
| sticky | 粘性定位，基于用户的滚动位置来定位。 |
九、CSS布局-Overflow
| 属性值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
十、代码示例
下面结合上面学到的知识代码，将会简单编写代码实现：发送新年祝福~
<html><head><meta charset="utf-8"><title>2024新年祝福</title><style type="text/css">.deng-box {position: fixed;top: -40px;right: 150px;z-index: 9999;pointer-events: none;}.deng-box1 {position: fixed;top: -30px;right: 10px;z-index: 9999;pointer-events: none;}.deng-box2{position: fixed;top: -40px;left: 150px;z-index: 9999;pointer-events: none;}.deng-box3 {position: fixed;top: -30px;left: 10px;z-index: 9999;pointer-events: none;}.deng-box1 .deng,.deng-box3 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216,0,15,0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px #fc903d}.deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216,0,15,0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 3s infinite ease-in-out;box-shadow: -5px 5px 50px 4px #fa6c00;}.deng-a {width: 100px;height: 90px;background: #d8000f;background: rgba(216,0,15,0.1);margin: 12px 8px 8px 8px;border-radius: 50% 50%;border: 2px solid #dc8f03;}.deng-b {width: 45px;height: 90px;background: #d8000f;background: rgba(216,0,15,0.1);margin: -4px 8px 8px 26px;border-radius: 50% 50%;border: 2px solid #dc8f03;}.xian {position: absolute;top: -20px;left: 60px;width: 2px;height: 20px;background: #dc8f03;}.shui-a { position: relative;width: 5px;height: 20px;margin: -5px 0 0 59px;-webkit-animation: swing 4s infinite ease-in-out;-webkit-transform-origin: 50% -45px;background: orange;border-radius: 0 0 5px 5px;}.shui-b {position: absolute;top: 14px;left: -2px;width: 10px;height: 10px;background: #dc8f03:border-radius: 50%;}.shui-c {position: absolute;top: 18px;left: -2px;width: 10px;height: 35px;background: orange;border-radius: 0 0 0 5px;}.deng:before {position: absolute;top: -7px;left: 29px;height: 12px;width: 60px;content: " ";display: block;z-index: 999;border-radius: 5px 5px 0 0;border: solid 1px #dc8f03;background: orange;background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);}.deng:after {position: absolute;bottom: -7px;left: 10px;height: 12px;width: 60px;content: " ";display: block;margin-left: 20px;border-radius: 0 0 5px 5px;border: solid 1px #dc8f03;background: orange;background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);}.deng-t {font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;font-size: 3.2rem;color: #dc8f03;font-weight: 700;line-height: 85px;text-align: center;}.night .deng-box,.night .deng-box1,.night .deng-t {background:transparent !important;}@-moz-keyframes swing {0% {-moz-transform: rotate(-10deg);}50% {-moz-transform: rotate(10deg);}100% {-moz-transform: rotate(-10deg);}}@-webkit-keyframes swing {0% {-webkit-transform: rotate(-10deg);}50% {-webkit-transform: rotate(10deg);}100% {-webkit-transform: rotate(-10deg);}}</style> <style>h1 {text-align:center;color:#B8860B;font-size:40px;margin:10px;padding:10px;}body {background-image:url('https://img.tukuppt.com/bg_grid/00/13/34/ieRv1gTX6x.jpg!/fh/350'); background-repeat:no-repeat;background-size:cover;}.image-container {display:flex;}img {width:33%;height:25%;margin-right:10px;}</style><style>.fade-in-out {opacity: 0;animation: fade-in-out-animation 3s ease-in-out infinite;}@keyframes fade-in-out-animation {0% {opacity:0;}50% {opacity:1;}100% {opacity:0;}}</style><style>/* 应用动画到目标元素 */.shake {text-align:center;color:#4B0082;font-size:30px;padding:10px;position:relative;-webkit-box-reflect: below -12px linear-gradient(transparent,rgba(0,0,0,0.2));}.shake span{position: relative;display: inline-block;font-size: 30px;text-transform: uppercase;letter-spacing: 2px;/* 执行动画：动画名 时长 加速后减速 无限次播放 */animation: shake 1s ease-in-out infinite;/* 通过var函数调用自定义属性--i，再计算出动画延迟时间 */animation-delay: calc(0.1s * var(--i));}/* 定义动画 */@keyframes shake {0%{transform: translateY(0);}20%{transform: translateY(-20px);}40%,100%{transform: translateY(0);}}</style></head><body><div class="deng-box2"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">年</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box3"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">新</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">乐</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">快</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><br><h1>新年快乐</h1><h1>龙年大吉</h1><br><div class="image-container"><img src="images/yanhua1.gif"><img src="images/2024.jpg" alt="HappyNewYear"><img src="images/yanhua.gif"></div> <strong><div class="shake"><span style="--i:1;">小</span><span style="--i:2;">哪</span><span style="--i:3;">吒</span><span style="--i:4;">祝</span><span style="--i:5;">各</span><span style="--i:6;">位</span><span style="--i:7;">在</span><span style="--i:8;">新</span><span style="--i:9;">的</span><span style="--i:10;">一</span><span style="--i:11;">年</span><span style="--i:12;">里</span><span style="--i:13;">，</span><span style="--i:14;">心</span><span style="--i:15;">想</span><span style="--i:16;">事</span><span style="--i:17;">成</span><span style="--i:18;">，</span><span style="--i:19;">财</span><span style="--i:20;">运</span><span style="--i:21;">亨</span><span style="--i:22;">通</span><span style="--i:23;">！</span></div></strong></body></html>具体实现如下：
新年祝福
本文主要分享了CSS的基础知识，通过学习这篇文章，相信大家会对CSS有一个初步认识，下篇将会介绍：CSS3的基础知识，大家尽请期待~
