这是我参与「第五届青训营」伴学笔记创作活动的第1天
css基础样式
CSS(Cascading Style Sheets):用来定义页面样式
h1{
color: white;
font-size: 14px;
}
"h1"选择器：页面所有h1的样式
声明：属性（"color"）+属性值（"white"）
每条声明用分号隔开
页面中使用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工作方式
选择器Selector
统配选择器：匹配页面所有元素
*{
color:red;
font-size: 20px;
}
标签选择器：匹配所有对应标签
h1{
color: white;
font-size: 14px;
}
id选择器：给特定元素设置了id属性，就可以通过id来匹配对应元素，id是唯一的
<style>
#logo {
font-size: 60px;
font-weight: 200;
}
</style>
类选择器：给多个元素设置class属性，可以通过clasa来匹配所有属于同一个class的元素
<li class="done">...</li>
<li class="done">...</li>
.
.
<style>
.done{
color:gray;
text-decoration: line-through;
}
</style>
属性选择器：通过属性或者属性值来匹配元素
<style>
[disabled]{
...
}
</style>
^="#" ：#开头
$=".jpg ：.jpg结尾
状态伪类：用户与页面交互的状态
链接状态:
输入框:
focus{...}
结构伪类:
伪类还有很多玩法，查文档
多种方法能组合使用
颜色
RGB/rgba
#.... 井号后面为6位16进制数，三原色各占两位；a再多两位，表示透明度
HSL
hue色相[0-360] (度)
saturation 饱和度 [0-100%]
Lightness 亮度 [0-100%]
字体font
font-family:字体族，指定多个字体，方便各种不同的设备显示，会从前往后匹配设备具备的字体。
serif衬线体：字符尖端有修饰
sans-serif无衬线体
cursive手写体：仿手写
fantasy：花里胡哨
Monospace等宽字体
一般情况建议先英文字体，再中文字体
使用web font:
font-family:"Megrim";
src:url(http://....)
font-size
关键字：small、medium、large
长度：px像素、em倍数（相对父级的设置）
百分数：%（相对父级的设置）
font-style：eg.斜体
font-weight：粗细，400=normal 700=bold
line-height：eg. 1.6，字体本身大小的1.6倍行高
white-space
normal：多个连续空格和换行会合并成一个
nowrap：超出大小也不换行
pre：保留所有空格和换行
pre-wrap：pre+自动换行
pre-line：合并空格，但保留换行
调试
使用浏览器的检查工具能很方便的观察html和css
