1 CSS基础知识
1.1基本概念
CSS指层叠样式表（Cascading Style Sheets）
使用样式的三种方式：
（1）内联样式
<p style="font-size: 24px; color: plum">内联样式</p>将样式定义在style属性中，内容和表现形式高度耦合，维护困难，不利于分工合作。
只能应用于当前标签
（2）内部样式
</head>
<style>
p{
font-size: 24px;
color: blue;
}
</style>
<body>
<p>内部样式1</p>
</body>在<head>标签中通过<style>标签来定义
内容和表现形式的耦合程度降低了，但还是都在html文件中，没有实现完全分离。
定义的样式只能在当前页面中使用
（3）外部样式表
首先需要定义一个样式表文件（.css）
/*
定义了应用于段落的样式
字体：36
颜色：红色
*/
p{
font-size: 36px;
color: red;
}CSS中也可以使用注释，形式为/* ..........*/
然后在需要使用这些样式的HTML文件中引入该样式表文件。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/E102-01-02.css">
</head>外部样式表使得内容和表现形式彻底分离，有利于分工合作及维护。可在多个HTML文件中引用。
推荐尽量使用外部样式。但后面的案例为了方便，还会大量使用内部样式甚至是内联样式。
1.2颜色
自然界的颜色数量是无穷的，但是计算机只能表示有限的信息。
需要将连续的量（无穷）转化为离散的量（有限）的。
所有的颜色都可以由红色（red）、绿色（green）、蓝色（blue）三种颜色调配而成，这三种颜色俗称三原色。
CSS中用8位表示一个颜色，那么可以表示28种颜色，即256种颜色。那么每个颜色值有24位来表示，总共可以表示256*256*256种颜色（真彩色）。
CSS中有多种颜色表现形式：
（1）十六进制形式：
<p style="color: #ff0000">十六进制颜色</p>（2）RGB颜色
<p style="color: RGB(255,0,0)">RGB颜色</p>（3）RGBA颜色
在RGB颜色基础上增加了透明度分量（Alpha），该分量的取值范围为0（完全透明）~1（完全不透明）。
<p style="color: RGBA(255,0,0,0.5)">RGBA颜色</p>（4）HSL颜色
颜色也可以由另外三个分量来表示，即色调、饱和度和明度。
<p style="color:HSL(100,50%,50%)">HSL颜色表示形式</p>（5）HSLA颜色
在HSL颜色基础上增加了Alpha分量
<p style="color:HSLA(100,50%,50%,0.5)">HSLA颜色表示形式</p>（6）预定义颜色
CSS提供了一些常用的预定义颜色，比如red、green等
<p style="color:pink)">预定义颜色</p>1.3尺寸单位
1. mm:毫米
2. cm:厘米
3. in:英寸（inch）
4. px:像素（pixel）
5. %:百分比
6. em:1em 等于当前的字体尺寸。
2em 等于当前字体尺寸的两倍。
例如，如果某元素以 12pt 显示，那么 2em 是24pt。
在 CSS 中，em是非常有用的单位，因为它可以自动适应用户所使用的字体。
7. vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
8. vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
相对单位有：em、%、vh、vw
絶対単位有：cm 、mm、in、px、
3488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
