一、 HTML
1.HTML简介
HTML是Hyper Text Markup Language的缩写,即:超文本标记语言。
HTML是一门标记语言,不是一门编程语言。
1.超文本:就是指页面内可以包含图片、链接,音乐,程序等非文字元素。
2.标记语言:是一种将文本及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的电脑文字编辑。
2、HTML版本发展历程
1.超文本标记语言(第一版)
2.HTML 2.0
3.HTML 3.2
4.HTML 4.0 ——1997年12月24日。W3C推荐标准
5.HTML5的第一份正式草案已于2008年1月22日公布,正式版本发布于2014年12月29日。
3、HTML结构
<!DOCTYPE html>
<html >
<head>
</head>
<body>
</body>
</html>
1.HTML文档文件的后缀名为html 和 htm ,两种后缀名是一样的。
2.HTML文档也被称为网页。
3.HTML文档包含HTML标签和纯文本。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XtLdnxMV-1596640212277)(C:\Users\acer\Desktop\me\0315启嘉html笔记截图\html结构.png)]
4.<!DOCTYPE>声明
声明有助于浏览器正确显示网页。因为网络上有很多不同的文件,所以正确声明HTML的版本后,浏览器就能正确显示网页内容。- 声明的位置:在文档中的最前面,处于HTML标签之前。
- 声明的作用:告诉Web浏览器页面使用了哪种HTML版本。不是一个HTML元素
给HTML文档添加<!DOCTYPE>声明后,浏览器可以预先知道文档类型。
5、HTML元素(HTML标签)
1、html标签是由尖括号(< >)包围的关键字
2、html标签的几种类型
-
双标签:有开始标签(开放标签)和结束标签(闭合标签);结束标签中一般有" / "
-
单标签:只有开始标签,没有结束标签。
-
空元素:不包含任何文本内容,没有结束标签。
-
闭合元素:具有开始标签和结束标签,可以包含文本内容。
注意:在HTML中标签通常是成对出现的,不要忘记结束标签。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QmBzMf8Q-1596640212305)(C:\Users\acer\Desktop\A_`Q0M@LY77}GJY9SBDCLTQ.png)]
(在XHTML 、XML以及未来版本的HTML中,所有元素都必须被关闭。)
6.HTML标签不区分大小写,
6、HTML头部
元素包含了所有的头部标签元素。 可以添加在头部区域的元素标为: <!DOCTYPE html>
<html lang="en">
<head>
<!-- 指定当前HTML页面的编码格式 -->
<meta charset="UTF-8">
<!-- 指定当前HTML页面的视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<meta name="keywords" content="HTML,CSS,">
</body>
</html>
7、HTML的属性
1.HTML属性的概念:
属性:HTML元素的附加信息
2.属性的分类
(1)通用属性:几乎所有元素都可以使用的属性,例如:id,name,style等
(2)私有属性:某一个/类元素 自己的属性
(3)事件属性:为某个元素绑定事件
(4)自定义属性:开发者为某个元素设置的属性,一般都是在前端框架中使用
3.HTML属性
(1)HTML元素可以设置属性
(2)属性可以为元素添加附加信息
(3)属性一般添加在开始标签中
(4)属性总是以 名称/值 的形式出现
二、CSS入门
1.什么是CSS
CSS全称为Cascading Style Sheets , 译为 层叠样式表
样式通常存储在样式表中,定义如何显示HTML元素。CSS是能够真正做到网页表现与内容分离的一种样式设计语言。
相对于传统HTML的表现而言,CSS能够网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
2.CSS发展历程
1994年内哈坤.利提出了CSS的最初建议。
1997年,W3C组织专门管理CSS的工作组,其负责人是克里斯.里雷。
目前,CSS的最新版本已经更新到了第三版,CSS被融入在HTML5的新版本特性中。
3.CSS版本发展历程
CSS1——作为一项W3C推荐,CSS1发布于1996年12月17日。1999年1月1日,此推荐被重新修订。
CSS2——作为一项W3C推荐,发布于1999年1月11日。CSS2添加了对媒介(打印机和听觉设备)和可下载字体的支持。
CSS3——计划将CSS划分为更小的模块。
4.如何使用CSS
(1) CSS的三种样式
1)内联样式
通过HTML元素的style属性来设置CSS样式
语法结构:
style=“CSS属性:CSS属性值”
缺点:只对当前元素有效,CSS代码出现冗余
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联样式</title>
</head>
<body>
<div style="color:red">启嘉班</div>
</body>
</html>
2)内嵌样式表
通过HTML元素的style元素来设置CSS样式
旧版本:设置type属性值为 “text/css”
语法结构:
<style type="text/css">
选择器 {
属性名:属性值;
}
</style>
优点:(相对于内联样式表)通过CSS选择器定位HTML页面中一个或一类元素
缺点:将CSS代码嵌入到HTML页面中,只能对当前HTML页面有效
编码的风格不符合编码原则中的低耦合
导致代码可能出现冗余
[^低耦合:这部分代码的使用和修改影响到其他部分的代码 尽可能的少]:
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内嵌样式</title>
<style>
p {
color:blueviolet;
}
</style>
</head>
<body>
<p>启嘉班</p>
</body>
</html>
3) 外联样式表
通过HTML元素的元素来引入外部CSS样式表(后缀名为.CSS的文件)
元素:- 作用:用来引入HTML页面外部的资源
- 属性:
rel属性:用来设置外部资源与当前HTML页面的关系
href属性:用来设置引入外部资源的路径
语法结构:
<link rel="stylesheet" type="text/css" href="CSS文件路径">
步骤:
1.创建一个CSS文件,用来存储CSS样式内容
2.在HTML页面中通过元素引入外部指定的CSS文件
优点:相对于内联样式和内嵌样式表
将CSS样式与HTML页面进行分离(低耦合)
不会出现内联样式或内嵌样式表产生的代码冗余
缺点:可能对HTML页面的加载造成负担,导致性能下降
示例:
style.css文件
h1 {
color:blue;
}
外联样式.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外联样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>启嘉班</h1>
</body>
</html>
注意:
在一个HTML页面中同时使用内联样式、内嵌样式表和外联样式表:
1.内联样式的优先级别是最高的
2.内嵌样式表和外联样式表的优先级与编写顺序有关:最后的是优先级别更高的。
(2)语法格式
选择器 {
属性名称:属性值;
属性名称:属性值;
···
}
语法特点:
- CSS声明总是以键值对(key\value)形式存在
- CSS声明总是以分号(;)结束
- 声明组用大括号( {} )括起来
- 每行只描述一个属性,目的:提高CSS的可读性
(3)CSS注释
<style type="text/css">
/* 这是一个注释 */
div {
/* 这是另一个注释 */
color:red;
}
</style>
5、CSS选择器
(1)什么是CSS选择器
CSS选择器的作用是按照CSS规则定位HTML页面的一个或多个元素。
浏览器在解析HTML页面时,会根据CSS规则中的选择定位器定位HTML页面的元素,并为对应的元素设置样式。
通过CSS选择器可以实现对HTML元素的
一对一(一个选择器对应一个元素)、
一对多(一个选择器对一个对应多个元素)、
多对一(多个选择器对应一个元素) 的定位。
(2)CSS选择器的分类
基本选择器、层级选择器、组合选择器、伪类选择器、伪元素选择器
<1>基本选择器
1)元素选择器
通过HTML页面的元素名称设置CSS样式
语法结构:
元素名称 {
属性名:属性值;
}
示例代码:
div {
color: red;
}
2)类选择器
通过HTML元素的 class 属性值 来设置CSS样式
class属于通用属性
class属性的值与类选择器是一一对应的。
命名规则:
. className 不要忘了" . "
语法结构:
.className {
属性名:属性值;
}
示例代码:
.myDiv {
color: red;
}
3)ID选择器
语法结构:
# className {
属性名:属性值;
}
示例代码:
#p1 {
color:aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* ID选择器,语法规则: #ID*/
#p1{
color:cyan;
}
#p2{
color:red;
}
</style>
</head>
<body>
<p id="p1">启嘉班</p>
<!-- id属性,唯一,不可以重复 -->
<p id="p2">启嘉班123</p>
</body>
</html>
ID是通用属性
当有两个相同的ID 属性时,也不报错。
原因:HTML不是一个严格语言。
原则:页面开发不能以最终的效果为准。
4)通配符选择器
可以与任何元素匹配,定位当前HTML页面中的所有元素,显示为一个星号( * )。
应用:用来设置当前HTML页面的默样式
注意:通配符选择器的性能不好
语法规则:
* {
属性名:属性值;
}
示例代码:
* {
color: red;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIHyy6Ls-1596640212310)(C:\Users\acer\Desktop\me\0315启嘉html笔记截图\通配符选择器.png)]
5)属性选择器 (HTML元素的属性)
根据元素的属性及属性值来选择元素。
语法规则:
[标题]
{
属性名:属性值
}
示例代码
[title]
{
color:blue;
}
6)基本选择器的优先级
CSS分配给每一种选择器类型的权重分值
1.通配符选择器的优先级为0
2.类型(元素)选择器的优先级为1
3.类选择器和属性选择器的优先级为10
4.ID选择器的优先级为100
5.内联样式的优先级为1000
结论:内联样式总会覆盖内嵌样式表和外联样式表的任何样式。
当选择器的优先级相同时,谁在后面谁的优先级就更高。
id选择器>类选择器>元素选择器
规则:选择器的权重值表述为4个部分,用0,0,0,0表示。
通配符*的权重为0,0,0,0
标签选择器、伪元素选择器的权重为0,0,0,1
类选择器、属性选择器、伪类选择器的权重为0,0,1,0
id选择器的权重为0,1,0,0
行内样式的权重为1,0,0,0
!imporatant的权重为∞
权重大的选择器覆盖权重小的选择器
同样权重的选择器,后面的覆盖前面的
层叠选择器按照权重相加的结果,大的覆盖小的
!imporatant的权重最大,没得抢了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 通配符选择器 */
*{
color:red;
}
/* 元素选择器 */
h1 {
color:yellow;
}
/* 类选择器和属性选择器的优先级别相同,谁在后面谁有效 */
/* 类选择器 */
.cls{
color:chartreuse;
}
/* 属性选择器 */
[stu] {
color:darkgray;
}
</style>
</head>
<body>
<!-- 内联样式优先级别最高 -->
<h1 id="h1" class="cls" style=color:deeppink>启嘉班</h1>
</body>
</html>
<2>层级选择器
(1)后代选择器
在祖先元素的所有后代(子孙)中,定位指定元素。
标志是一个空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器</title>
<style>
.ancestor div{ /* 启嘉2 和 启嘉3 都会变红*/
color:red;
}
</style>
</head>
<body>
<div class="ancestor">
启嘉1
<div class="parent">
启嘉2
<div class="child">启嘉3</div>
</div>
</div>
</body>
</html>
(2)子代选择器
对父元素的所有子元素中进行定位
标志是大于号 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子代选择器</title>
<style>
.ancestor>div{ /*应该是启嘉2变红,但是因为color是继承性的,所以启嘉2和启嘉3都会变红*/
color:red;
}
</style>
</head>
<body>
<div class="ancestor">
启嘉1
<div class="parent">
启嘉2
<div class="child">启嘉3</div>
</div>
</div>
</body>
</html>
(3)相邻选择器
定位当前元素的直接同级相邻元素
标志是加号+
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相邻选择器</title>
<style>
.child1+div{ /*处于同一级的与child1相邻的child2会变红*/
color:red;
}
</style>
</head>
<body>
<div class="ancestor">
启嘉1
<div class="parent">
启嘉2
<div class="child0">this is child0</div>
<div class="child1">this is child1</div>
<div class="child2">this is child2</div>
<div class="child3">this is child2</div>
</div>
</div>
</body>
</html>
(4)兄弟选择器
定位当前元素后面的所有同级相邻元素。
标志是 ~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兄弟选择器</title>
<style>
.child0~div{ /*同一级的child1、child2、child3都会变红*/
color:red;
}
</style>
</head>
<body>
<div class="ancestor">
启嘉1
<div class="parent">
启嘉2
<div class="child0">this is child0</div>
<div class="child1">this is child1</div>
<div class="child2">this is child2</div>
<div class="child3">this is child3</div>
</div>
</div>
</body>
</html>
<3>组合选择器
(1)并集选择器
定位所有满足条件的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style>
h1,h2,h3,h4,h5,h6{ /*h1,h2,h3,h4,h5,h6标签里的内容都会变色*/
color:deeppink;
}
</style>
</head>
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
</body>
</html>
(2)交集选择器
定位同时满足多个条件的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器</title>
<style>
p.cls {
color:red; /* p标签的cls类,即 19级启嘉班 会变红*/
}
</style>
</head>
<body>
<p>18级启嘉班</p>
<p class="cls">19级启嘉班</p>
<p>20级启嘉班</p>
<div class="cls">启嘉班</div>
</body>
</html>
(3) ! important
在CSS中,通过对某一样式声明 ! important ,可以更改默认的CSS样式优先级规则,
作用:使该条样式属性声明具有最高优先级。
<4>伪类选择器
(1)否定伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>否定伪类选择器</title>
<style>
.cls { /* 使cls类的内容(world)变绿 */
color:green;
}
p:not(.cls) { /* 使p标签中不是cls类的内容(hello)的背景色变蓝 */
background-color:blue;
}
body :not(p) { /* 使body中不是div标签的内容(good)的加下划线 */
text-decoration: underline;
}
</style>
</head>
<body>
<p>hello</p>
<p class="cls">world</p>
<div>good</div>
</body>
</html>
(2)伪类选择器
选择鼠标指针浮动在其上的元素,并设置其样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
/* 伪类选择器:
概念:用来表示定位元素的某种状态所显示的样式
语法: :关键字 例如:hover
*/
button:hover{
background-color:aqua;
}
</style>
</head>
<body>
<button>按钮</button>
<!-- 当鼠标碰到按钮的时候,按钮会变色 -->
</body>
</html>
<5>伪元素选择器
(1)after 和 before伪元素
after在文本的后面加上指定的内容
before在文本的前面加上指定的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>after</title>
<style>
P::before {
content:"##" /* 在启嘉班前面加上## */
}
p::after { /* 在启嘉班后面加上** */
content:"**"
}
</style>
</head>
<body>
<p>启嘉班</p>
</body>
</html>
结果:##启嘉班**
(2)first-line伪元素
修饰定位内容的第一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first-line选择器</title>
<style>
p::first-line {
color:brown; /* 把文本的第一行变颜色*/
}
</style>
</head>
<body>
<p>终于到第四棒了,只见陆一凡弯着腰,身体微微前倾,右手接过接力棒,
以迅雷不及掩耳之势拔腿就跑,“一凡,加油!一凡,加油!”啦啦队在后方拼命地呐喊
。只见她迈开步伐,双臂前后甩动,脸涨得通红,被汗水浸湿的前刘海沾在了额头上。
此时此刻,跑道便是她精彩的舞台;声声加油声便是她最高的奖项;湿透的衣衫、满头的
大汗便是她精神和毅力的体现。虽然我们班只得了第六名,但是我们丝毫没有气馁,因为我
们都尽力了,没有得名次也没有关系,享受过程才是最重要的。
滴滴汗水洒遍了红色的塑胶跑道,声声呐喊响彻操场的上空,所有选手在比赛中赛出了水平
,赛出了风格,展现了青春的活力。</p>
</body>
</html>
(3)first-letter伪元素
修饰定位文本的第一个字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first-letter</title>
<style>
p::first-letter { /* 使“启”变色*/
color:hotpink;
}
</style>
</head>
<body>
<p>启嘉班</p>
</body>
</html>
(4)selection伪元素
-
::selection选择器匹配元素中被用户选中或处于高亮状态的部分。
-
::selection只可以应用于少数的CSS属性:
color 设置颜色
background-color 设置背景颜色
cursor:定义了鼠标指针放在一个元素边界范围内时所用的光标形状
outline:设置元素周围的轮廓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>selection伪元素选择器</title>
<style>
p::selection { /* 选中文本后,字体颜色变为绿色,背景色变为粉色 */
color:hotpink;
background-color:olivedrab;
}
</style>
</head>
<body>
<p>启嘉班happyhappyhappyhappyhappyhappyhappy</p>
</body>
</html>
三、CSS的颜色
1.色调
指图像的相对明亮程度,接近通意义上的颜色
2.饱和度
颜色中灰色的含量
3.亮度
颜色中黑色的含量
4.对比度
前景色与背景色之间的差异
5.Web安全色
不需要担心颜色在不同硬件环境、操作系统和浏览器之间的差异。
Web安全色目前基本有216中颜色,非色彩有6中,开发时会用到210种Web安全色。
Web安全色:https://www.bootcss.com/p/websafecolors/
6.前景色与背景色
前景色和背景色就是color和background-color两个属性。
(1)前景色
前景色就是html文本内容的颜色color属性
(2)背景色
CSS的background-color属性用来设置HTML元素的颜色,
该属性的默认值是transparent(透明)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>为页面设置背景色</title>
<style>
/* 改变浏览器窗口的整体背景色 */
body {
background-color: lightcoral;
}
</style>
</head>
<body>
</body>
</html>
7.颜色值的类型
颜色值可以通过如下3种类型进行定义
- 色彩关键字
- RGB色彩模式
- HSL色彩模式
(1)色彩关键字
色彩关键字是一个不区分大小写的标识符,表示一个具体的颜色。
CSS3版本时增加了很多颜色:具体参考MDN网站的色彩关键字文章。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#%E8%89%B2%E5%BD%A9%E5%85%B3%E9%94%AE%E5%AD%97
transparent关键字表示一个完全透明的颜色,并且transparent也是background-color属性的默认值。
(2)RGB模式
全称为 Red-Green-Blue,即 红-绿-蓝。
CSS中使用RGB色彩模式的2种方式
1)16进制符号
#RRGGBB:是 # 符号后面缩写6个十六进制字符(0-9,A-F)每两位表示一个颜色值,颜色值最大是ff,最小是00
#RGB:是 # 符号后面编写3个十六进制字符(0-9,A-F)
[^说明:当#RRGGBB 格式中的两个R 或 G 或 B 值相同时,可以改写为 #RGB模式,例如:#ff0033就可以改写为 #f03]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGB颜色表示法</title>
<style>
.p1 {
color: #ff0000;
}
.p2 {
color: #f00;
}
</style>
</head>
<body>
<p class="p1">启嘉班1</p>
<p class="p2">启嘉班2</p>
</body>
</html>
2)函数符 rgb(R,G,B)
这里的R、G、B的值可以使用0 ~ 255之间的值
这里的R、G、B的值可使用0% ~ 100%之间的值
[^说明:rgb(R,G,B) 的 255 和 100% 是一致的相当有十六进制符号中的FF]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGB颜色表示法</title>
<style>
.p1 {
color: rgb(255,255,66);
}
.p2 {
color: rgb(05,255,90);
}
</style>
</head>
<body>
<p class="p1">启嘉班1</p>
<p class="p2">启嘉班2</p>
</body>
</html>
3)HSL模式
全称 Hue-Saturation-Lightness 即 色调-饱和度-亮度。
H : 表示色调,值范围是 0~360之间的一个角度。
S :表示饱和度,值范围是 0% ~ 100% 之间的百分值。
L : 表示亮度,值使用百分值表示。0%表示黑色,50%表示标准色,100%表示白色。
3.透明度
在CSS3版本中新增了opacity属性用来设置HTML元素的透明度,该属性的值范围介于0 ~ 1之间。
如果值为 0 或 0.0 表示完全透明
如果值为 0.5 表示半透明
如果值为 1 或 1.0 表示不透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>透明度opacity</title>
<style>
div {
background-color:blue;
}
.a1 {
opacity: 0.2
}
.a2 {
opacity: 0.5
}
.a3 {
opacity: 0.9
}
</style>
</head>
<body>
<div class='a1'>这是第一个测试内容</div>
<div class='a2'>这是第二个测试内容</div>
<div class='a3'>这是第三个测试内容</div>
</body>
</html>
CSS中的透明度除了提供opacity属性用法之外,还可以结合RGB模式和HSL模式共同使用
RGB模式增加了 rgba(R,G,B,A) 函数 ,其中 A 为 alpha 表示透明度。
HSL模式增加了 hsla(R,G,B,A) 函数 ,其中 A 为 alpha 表示透明度。
四、值和单位
1.什么是CSS的值
CSS中的值是一种定义允许子值集合的方法。
例如:色彩关键字、RGB色彩模式 或 HSL色彩模式来描述颜色的值;长度值:10px或50%等。
2.什么是CSS的单位
在使用不同类型描述长度时,需要附加单位。
在CSS中具有2中不同类型的单位长度:
1)像素值(px)
像素的英文是Pixel ,简写为px , 像素是指由一个数字序列表示的图像中的一个最小单位。构成影像的最小单位就是像素。像素与分辨率有关。
2)百分比(%)
百分比(%)总是将某个值作为参考,设置这个参考值的百分比。
3)em 和 rem
em 相对于父元素的字体大小
rem 相对于根元素的字体大小