这是我参与「第四届青训营 」笔记创作活动的的第2天
一)什么是CSS？
CSS是Cascading Style Sheets（层叠样式表）的首字母简写，主要用来定义页面的样式，比如设置字体和颜色；设置位置和大小，添加动漫效果。可以这么比喻，如果页面是一张画布，那么CSS就是一支画笔，用于修饰和渲染页面。
CSS某些属性会自动继承其父元素的计算值，除非显示指定一个值 而且每个属性都有一个初始值
例：margin-left的初始值为0
二）CSS在页面中引用
- 外链
<link rel="stylesheet" href="/assets/style.css">
- 嵌入
<style>
li{
margin:0;
list-style:none;
}
p{
margin: lem 0;
}
</style>
- 内联
<p style="margin:lem 0">example content</p>
三）CSS样式
- 颜色
颜色-RGB（红色 绿色 蓝色 数值调节范围是0到255，采用十六进制描述颜色）
例：
rgb(0,0,0)
颜色-HSL（色相 饱和度 亮度）
例：
hsl（120，30%，50%）
alpha(透明度)
例：
rgb（，2，1，0.2）
- 字体
font-family 有如下常用
- Sans-Serif(无衬线体)
- Monsapace（等宽体）
- Cursive(手写体)
- Serif(衬线体)
font-size 表示字体大小，有如下关键字 small,medium,large
长度：px，em，%：相对于父元素字体大小
例：
<h2>A web font example</h2>
<p class="note">Notes: Web fonts ...</p>
<p>With this in mind, let's build.../p>
</section>
<style>
section{
font-size:20px;
}
section h1{
font-size:2em;
}
section .note{
font-size:80%;
color:orange;
}
</style>
-
位置
line-height（调节行高：字体大小的多少倍）
text-align（调节宽度格式
word-spacinng（调节字符间距）
text-decoration（文字修饰）
四）调试CSS
-
右键点击页面，选择【检查】
-
使用快捷键
ctrl+shift+I(windows)
cmd+opt+I(mac)
五）布局（Layout）是什么？
- 确定内容的大小和位置的算法
- 依据元素，容器，兄弟节点和内容等信息来计算
- 布局相关技术
- 常规流：行级，块级，表格布局，FlexBox,Grid布局
- 浮动
- 绝对定位
