这是我参与「第五届青训营」伴学笔记创作活动的第 1 天 我看了[前端与 HTML],以及[走进前端技术栈-CSS]这两节的视频，鉴于[前端与HTML]已经有人发出了非常详细的笔记（我实在是自愧不如），我就只发[走进前端技术栈-CSS]这一节视频的笔记了。
2走进前端技术栈-CSS
2.1CSS是什么?
JavaScript (行为)
CSS (样式)
HTML (内容)
-
Cascading Style Sheets
-
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
2.2CSS是如何工作的？
2.3在页面中使用css
- 外链（推荐）
- 嵌入
- 内联（不推荐）
2.4选择器Selector
●找出页面中的元素，以便给他们设置样式
●使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
2.5选择器类别
2.5.1通配选择器
<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style>
*{
color: red;
font-size: 20px;
}
</style>
2.5.2标签选择器
<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style>
h1 {
color: orange;
}
p{
color: gray;
font-size: 20px;
}
</style>
2.5.3ID选择器
<h1 id=" logo">
<img srcs"https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48"/>HTML5 文档
<h1>
<style>
#logo{
font-size: 60px;
font-weight: 200;
}
</style>
2.5.4类选择器
<h2>Todo List</h2>
<ul>
<li class=" done">Learn HTML</li>
<li class-"done">Learn CSS</li>
<li>Learn JavaScript</li>
</ul>
<style>
.done {
color: gray;
text-decoration: line-through;
}
</style>
2.5.4.1伪类(pseudo-classes)
不基于标签和属性定位元素几种伪类
- 状态伪类
- 结构性伪类
自己的一点补充
动态伪类选择器:link :visited :hover :active :focus
:link 链接未被访问的时候
:visited 链接被访问过的时候
:hover 当鼠标悬停在链接上方的时候
:active 鼠标按下链接的那一刻
:focus
UI伪类选择器user interface pseudo-class selectors(人机界面/负责用户和系统进行交互的界面)
:enabled :disabled 设置表单元素的可用&禁用
:checked 适用于单选框，复选框和下拉列表中的选项
:required :optional 必选与可选元素
:default 选中默认的元素
:valid :invalid 合法与不合法
:in-range :out-of-range 设置用户输入的数值在范围内和不在范围内时的样式
:read-only :read-write 只读，只写。如果使用Firefox浏览器，需在样式前面加前缀-moz- -moz-read-only
:indeterminate
2.5.5属性选择器
<label>用户名: </label>
<input value="zhao" disabled />
<label>密码: </label>
<input value="123456" type=" password"/>
<style>
[disabled]{
background: #eee;
color: #999;
}
</style>
2.6组合(Combinators)
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A> B | 选中B，如果它是A的子元素 | section> p |
| 兄弟选择器 | A~ B | 选中B,如果它在A后且和A同级 | h2 ~p |
| 相邻选择器 | A+ B | 选中B，如果它紧跟在A后面 | h2+p |
2.6.1选择器组
2.7颜色
2.7.1 RGB
三原色 r：red g：green b：blue
2.7.2 HSL
2.7.3 RGBA
alpha透明度
2.7.4 总结
css3支持RGB,HEX,HSL,RGBA,HSLA这五种格式表示颜色
RGB三原色配色，red，green，blue，最多255，全0为黑，全255为白;
HEX色相hue，饱和度saturation，亮度lightness；
rgba&hsla中的a表示阿尔法通道，是表示透明度的值
2.8字体
2.8.1字体font-family
2.8.2 通用字体族
2.8.3使用Web Fonts
2.8.4 font-size
2.8.5行高line-height
2.8.6 white-space
控制空白的符
有以下属性：
- normal
- nowrap
- pre
- pre-wrap
- pre-line
