这是我参与「第四届青训营 」笔记创作活动的的第二天。 今天学习了第二节课认识CSS，css给我最大的感觉就是对于文章结构的控制，当学到了盒子模型的时候，对于大多数网页布局方式有了一定的认知，自己也可以着手尝试一些简单的网页。
本堂课重点内容
第一节认识CSS的课程主要是对CSS的概述和一些基本的知识点。
- 什么是CSS以及CSS如何在页面中使用
- CSS是如何工作的
- CSS的几种选择器
- CSS的颜色以及字体相关
详细知识点介绍
笔记奉上，在文章最后。
课后个人总结
这次css基础知识学习，我最大的收获就是对页面的样式有了一定的了解，知道该如何去使用一些基础的知识来调整页面布局，并进行一些案例的实现。包括一些CSS的新特性，如果我们只是想要仿造网页写静态网页，那么html+css完全够用，并且也一样能做的很好。
一、了解CSS
1、CSS是什么？
-
Cascading Style Sheets -
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
示例：
h1 {
color: white;
font-size: 14px;
}
h1是选择器（Selector）、color和font-size等叫做选择器（Property）、white叫做属性值（value），我们把选择器和属性值连接起来的一个整体，如`font-size: 14px;`叫做声明（Declaration）。
2、在页面中使用CSS
<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">
<!-- 嵌入 -->
<style>
li { margin: 0; list-style: none; }
</style>
<!-- 内联 -->
<p style="margin:lem 0"></p>
推荐使用的是外链的写法。
现在的话有一种技术叫做组件式开发，就是我们把html、css和js写在一起，作为一个组件来使用，这样的话问题也是不大的，可以这样使用，更重要的是做到了关注点分离。
比较不推荐的是内联写法。
3、CSS是如何工作的？
4、选择器Selector
-
找出页面中的元素，以便给它们设置样式
-
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
（1）通配选择器
<style>
* {
padding: 0;
margin: 0;
}
</style>
（2）id选择器
<style>
#logo {
font-size: 600px;
font-weight: 200px;
}
</style>
<body>
<p id="logo">id选择器</p>
</body>
（3）类选择器
<style>
.logo {
font-size: 600px;
font-weight: 200px;
}
</style>
<body>
<p class="logo">类选择器</p>
</body>
（4）属性选择器
通过元素的属性或者属性值去选择元素。
<style>
[disabled] {
background: #eee;
color: #999;
}
</style>
<body>
<!-- 通过属性去选择元素 -->
<input type="text" value="zhao" disabled>
</body>
<style>
input[type="password"] {
color: red;
}
</style>
<body>
<!-- 通过属性值去选择元素 -->
<input type="password" value="zhao">
</body>
另外，我们也可以对一些属性进行匹配。如下：
<style>
/* 匹配以#开头的a标签元素 */
a[href^="#"] {
color: #f54767;
}
/* 匹配以.jpg结尾的a标签元素 */
a[href$=".jpg"] {
color: deepskyblue;
}
</style>
<body>
<!-- 通过属性值匹配去选择元素 -->
<a href="#top">返回顶部</a>
<a href="a.jpg">查看图片</a>
</body>
（5）伪类（pseudo-classes）
-
不基于标签和属性定位元素
-
几种伪类
-
状态性伪类
<style> /* 默认状态下的链接状态 */ a:link { color: black; } /* 访问过后的链接状态 */ a:visited { color: gray; } /* 鼠标悬浮的链接状态 */ a:hover { color: orange; } /* 鼠标点击时的链接状态 */ a:active { color: red; } </style> <body> <a href="http://baidu.com"></a> </body> -
结构性伪类
根据节点在DOM树中出现的位置来选择元素。
<style> /* 选中第一个li */ li:first-child { color: coral; } /* 选中最后一个li */ li:last-child { border-bottom: none; } </style> <body> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </body>
-
（6）组合（Combinators）
元素标签组合：
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合na | 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 |
选择器组：
body,h1,h2,h3 {
margin: 0;
padding: 0;
}
5、颜色
（1）颜色-RGB
rgb(143, 172, 135);
#8fac87
（2）颜色-HSL
- Hue：色相（H）是色彩的基本属性，如红色、黄色等；取值的范围时0-360。
- Saturation：饱和度（S）是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%。
- Lightness：亮度（L）指颜色的明亮程序；越高颜色越亮；取值范围是0-100%。
（3）指定颜色名称
（4）alpha透明度
#ff000078
rgba(255, 0, 0, 0.5)
hsla(0, 100%, 50%, 1)
6、字体font-family
通用字体
- Serif 衬线体
Georgia、宋体
- Sans-Serif 无衬线体
Arial、Helvetica、黑体、微软雅黑
- Cursive 手写体
Caflisch Script、楷体
- Fantasy
Comic Sans MS、Papyrus
- Monospace 等宽字体
Consolas、Courier、中文字体
使用Web Fonts
Web 字体是一种 CSS 功能，允许指定的字体文件被下载到本地。 这是一种非常有效的方式，这样字体就不受限于本地是否安装了字体，而且大部分浏览器都支持Web 字体。
@font-face{
font-family: "myFont";
src: url("myFont.ttf");
}
font-size
-
关键字
- small、medium、large
-
长度
- px、em
-
百分数
- 相对于父元素字体大小
