这是我参与「第五届青训营 」笔记创作活动的第2天。
本课学习内容
理解和深入CSS
- CSS是什么？
- Cascading Style Sheets
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
- CSS语法
- 选择器 Selector
- 声明 Declaration
- 选择器 Property
- 属性值 Value
- 调试CSS
- 右键点击页面，选择“检查”
- 使用快捷键
- Ctrl+Shift+I（windows）
- Cmd+Opt+I（Mac）
CSS
1、CSS工作流程
2、CSS的编辑
选择器：找出页面的元素，以便给他们设置样式。可以按照标签名、类、id和属性以及按照DOM树中的位置。
示例:
通配选择器（选择页面所有元素）
标签选择器（通过特定的标签来进行改变样式）
id选择器（根据标签里面id属性值来选择）
除此之外还有伪类选择器（paseudo-classes），意思是不基于标签和属性定位元素，有结构性伪类和状态伪类。
例如：
li:first-child {
color: coral
}
input.error {
border-color: red;
}
选择器组合
- 直接组合 例如： input:focus
- 后代选择器 (空格) 例如： nav a
- 子选择器 (>) 例如：section > p
- 相邻兄弟选择器 (+) 例如：h2 + p
- 通用兄弟选择器 (~) 例如：h2 ~ p
一些属性值
- 颜色可以用rgb（，，）或者#000000或者hsl来表示。同时alpha可以更改颜色透明度。
- 字体
- font-family ：建议在字体列表最后写上通用字体族，英文字体放在中文字体前面；
- font-size：长度可用px、em或者%；
- line-height：行高；
- flex：弹性布局
总结
CSS的样式在不断更新，应当养成查文档的好习惯，可以去MDN去参照。
引用资料
-
理解CSS学习资料
