这是我参与「第四届青训营」笔记创作活动的的第1天

前段时间已经学习过CSS啦，但因为没有及时地复习和有效地输出，记忆效果不是很好，现在通过青训营的学习之旅，重新学习、查漏补缺，顺便做了一些我觉得对我有益的笔记，如有不足之处，请指正！

CSS（Cascading Style Sheets层叠样式表）

作用：用来定义页面元素的样式如：设置字体、颜色、位置和大小，添加动画效果

最基础的代码

h1{
color:white;
font-size:14px;
}

选择器声明块

在页面中使用CSS的方法

1.外链（推荐使用）

<link rel="stylesheet" href="/assets/style.css">

2.嵌入

<style>
p{margin:1em 0;}
</style>

3.内联（不推荐）

<p style="margin:1em 0">Example Content</p>

CSS的工作方式

选择器

通配
标签
id 类
属性
伪类
组合

字体font-family

记得在最后加上一个通用字体族 中英文推荐：英文字体写在中文字体前面

使用Web Fonts

@font-face{
font-family: ;
src(" ") format(" ");
}

font-size

指定方法：

关键字：small、medium、large
长度：px、em
百分数：相对于父元素字体大小

font-style

斜体：italic

font-weight

字重

line-height

数字（相对于字体大小的倍数）

易混淆

html里对于空白符的处理规则：

默认情况下，多个连续的空格、换行会被合并成一个空格

white-space

normal 默认
nowrap 强制不换行
pre 保留所有的（包括空格和换行）
pre-wrap 保留空格，该换行还是会换行
pre-line 合并空格，保留换行

调试CSS

右键点击页面，选择检查
使用快捷键
- Ctrl+Shift+I（Windows）
- Cmd+Opt+I（Mac）

学习CSS比较好的一点是：看到别人网站上比较好的效果，想去看直接点开调试工具就可以直接去看、去改啦！

好啦，CSS的基础学习就到这里了，这相当于是我前面所学CSS基础的一个小小的补充吧，想要学习更多的知识，还请参照MDN 上的 HTML 参考（developer.mozilla.org/en-US/docs/…里面包含每个标签和属性的详细说明）和最新版的 W3C HTML5 规范（html.spec.whatwg.org/multipage/）有一些简单的内容我没有列出来，是因为我前面的笔记已经做过并且掌握啦，想要系统地学习的话翻前面的笔记更全哦！

前端 | 青训营笔记