CSS小笔记
Posted Grace_Zhong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS小笔记相关的知识，希望对你有一定的参考价值。
记录个人 css3 学习…
CSS小笔记
Tips
- 学习 CSS Layout
- 添加 Page Icon
<header>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</header>
- 初始化：Normalize.css 或 Reset.css
- 如果没有使用 Normalize 或 Reset, 在 .css 文件最开始设置
:root
font-size: 62.5% // 默认字体改为 10px，剩下的单位可以使用 rem，相对于 10px的大小
- CSS Library：Bootstrap Bootstrap 小笔记 / Tailwind Tailwind 小笔记
Bootstrap 是别人写好的 component, 可以直接用
Tailwind 是别人写好的样式，相比 Bootstrap 自由度更高 - 响应式布局：@media / Flex Flex 阮一峰教程 Flex 小笔记 / Grid System
Grid System: 每个元素宽度定死，并可以随着页面变小而变小，常用于页面整体布局
Flex Box: 元素可以随着页面变小换行，元素大小不变 - 预编译工具：sass sass 小笔记 / less - 提供一个更方便的方式编写 css
- 设置大小/宽高：calc()，容器百分比
- CSS Variables
// 变量以 `--` 开头
//`:root` 表示文档树的根元素，即 `<html>`
:root
--main-color： red;
--card-height: 50px;
--link: "www.baidu.com";
使用：var(变量名，如果变量不存在则使用这个)
div
color: var(--main-color);
color: var(--main-color, green);
颜色渐变
背景颜色渐变
方式一： linear-gradient
linear-gradient(方向, 起始颜色, 目标颜色);
linear-gradient(方向, 起始颜色, 中间色 颜色改变时高度, ...多个中间色..., 目标颜色);
不写 方向 默认为从上到下
background: linear-gradient(to right top, red, blue);
background: linear-gradient(0deg, blue, green 40%, yellow 50%, red);
字体颜色渐变
方式一： linear-gradient
linear-gradient(方向, 起始颜色, 目标颜色);
不写 方向 默认为从上到下
// 颜色渐变以及渐变方向
background: linear-gradient(rgb(146, 146, 146), rgb(255, 255, 255));
// 渐变蒙版覆盖的内容
background-clip: text;
text-fill-color: transparent;
背景图片
background-image: url("./img/1.png");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
简写
顺序：image -> repeat -> position
background: url('images/bg-3.png') no-repeat center;
以上是关于CSS小笔记的主要内容，如果未能解决你的问题，请参考以下文章