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、