1、浏览器内核介绍
浏览器内核主要分成两部分:渲染引擎和JavaScript引擎。
1)渲染引擎负责获取网页内容(HTML、XML、图像等)、整理信息(如加入CSS等)以及计算网页的显示方式,然后输出至显示器或打印机。所有网页浏览器、电子邮件客户端及其他需要编辑、显示网络内容的应用程序都需要内核。浏览器内核的不同对于网页的语法解释也会有不同,所以渲染的效果也不同。
2)JavaScript引擎负责解析和执行JavaScript来实现网页的动态效果。
根据浏览器内核的不同,浏览器前缀的设置也有不同,常见的浏览器前缀如下所示。
浏览器内核分类 | 常见浏览器 | 备注 | 前缀 |
---|---|---|---|
Trident(IE内核) | IE浏览器、360安全浏览器、猎豹安全浏览器、傲游浏览器、百度浏览器、世界之窗浏览器、2345浏览器、搜狗高速浏览器等 | 其中部分浏览器的新版本是“双核”,甚至是“多核”,其中一个内核是Trident,然后增加一个其他内核 | -ms- |
Gecko(Firefox内核) | Netscape6及以上版本,Mozilla Firefox、Mozilla SeaMonkey等 | Gecko的特点是代码完全公开 | -moz- |
Presto(Opera前内核)(已废弃) | Opera12.17及更早版本曾经采用的内核 | Presto内核现已停止开发并废弃。Opera现已改用Google Chrome的Blink内核 | -o- |
Webkit(Safari内核,Chrome内核原型,开源) | Chrome、Apple Safari(Windows/Mac/iPhone/iPad)、Android默认浏览器等 | Blink内核是一个由Google和Opera Software开发的浏览器排版引擎,作为Webkit的分支 | -webkit- |
2、CSS3选择器
1)属性选择器
属性选择器是通过属性来选择元素的一种方式,在下述代码中type和value都是input元素的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
input[value] {
background: red;
color: white;
}
</style>
</head>
<body>
<input type="text">
<input type="text" value="HTML">
<input type="text">
<script>
</script>
</body>
</html>
属性选择器的写法是通过中括号的方式进行选择的,也可以在中括号内把属性和属性值写完整。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
input[value=HTML] {
background: red;
color: white;
}
</style>
</head>
<body>
<input type="text" value="HTML">
<input type="text" value="HTML">
<input type="text">
<script>
</script>
</body>
</html>
除了具体的属性选择器外,CSS3还提供了三种模糊匹配的属性选择器,下面将分别讲解三种模糊匹配的属性选择器。
(1)[attr^=value]匹配的是起始位置包含value值形式的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
input[value^=HTML] {
background: red;
color: white;
}
</style>
</head>
<body>
<input type="text" value="HTML Language">
<input type="text" value="HELLO HTML">
<input type="text" value="CSS HTML JS">
<script>
</script>
</body>
</html>
(2)[attr$=value]匹配的是结束位置包含value值形式的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
input[value$=HTML] {
background: red;
color: white;
}
</style>
</head>
<body>
<input type="text" value="HTML Language">
<input type="text" value="HELLO HTML">
<input type="text" value="CSS HTML JS">
<script>
</script>
</body>
</html>
(3)[attr*=value]匹配的是任意位置包含value值形式的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
input[value*=HTML] {
background: red;
color: white;
}
</style>
</head>
<body>
<input type="text" value="HTML Language">
<input type="text" value="HELLO HTML">
<input type="text" value="CSS HTML JS">
<script>
</script>
</body>
</html>
2)结构伪类选择器
结构伪类选择器是针对HTML层次“结构”的伪类选择器。如想要某一个父元素下面的第n个子元素,则可以通过以下几种结构伪类选择器实现。
(1)第一类结构伪类选择器*-child方式。
选择器 | 含义 |
---|---|
E:first-child选择器 | 选择父元素的第一个子元素 |
E:last-child选择器 | 选择父元素的最后一个子元素 |
E:nth-child(n)选择器 | 选择父元素下的第n个子元素 |
E:only-child选择器 | 选择父元素中唯一的子元素(该父元素只有一个子元素时才可以选择) |
E:nth-child(n)选择器,可以设置一组元素中指定子项的样式,其参数可以设置为数字行,也可以设置为odd奇数行和even偶数行,另外还可以将参数设置为n值(从零累加的值)。注意,E:nth-child(n)选择器的参数是从1开始,而不是0。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
li:nth-child(3n) {
background: red;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
</script>
</body>
</html>
(2)第二类结构伪类选择器*-of-type方式。
选择器 | 含义 |
---|---|
E:first-of-type选择器 | 选择同元素类型的第一个同级兄弟元素 |
E:last-of-type选择器 | 选择同元素类型的最后一个同级兄弟元素 |
E:nth-of-type(n)选择器 | 选择同元素类型的第n个同级兄弟元素 |
E:only-of-type选择器 | 选择同元素类型中唯一的同级兄弟元素 |
E:first-of-type、E:last-of-type、E:nth-of-type(n)、E:only-of-type与第一类*-child效果相同。*-of-type选择器与*-child选择器不同的是*-of-type表示选择同元素类型同级兄弟元素,而*-child表示选择父元素的子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
p:nth-of-type(3) {
background: red;
}
p:nth-child(3) {
background: blue;
}
</style>
</head>
<body>
<p>HTML</p>
<div>CSS</div>
<p>JavaScript</p>
<p>PHP</p>
<script>
</script>
</body>
</html>
可以看到会选择同级中同元素类型的第三个<p>标签。而*-child是父元素中的第三个元素,因此要选择到<p>JavaScript</p>标签。*-child选择器是选择父元素下的子元素(不区分元素类型),而*-of-type选择器是选择父元素下某个同元素类型的子元素(区分元素类型)。
3)状态伪类选择器
状态伪类选择器是一种针对HTML当前操作状态而进行选择的选择器,如标签是否获取焦点、标签是否被选中等。
选择器 | 含义 | 用途 |
---|---|---|
:focus选择器 | 用于指定“表单元素”获得光标焦点时使用的样式 | 主要在单行文本框text、多行文本框textarea等表单元素获取焦点并输入文本时使用 |
:checked选择器 | 用于指定“表单元素”被选中时使用的样式 | 主要在单选按钮radio和复选框checkbox中使用 |
::selection选择器 | 用于改变被选择的网页文本的显示效果 | 主要在段落标签中使用 |
:first-letter选择器 | 用于对一段文本的第一个字符进行样式设置 | 主要在段落标签中使用 |
:first-line选择器 | 用于对一段文本的第一段字符进行样式设置 | 主要在段落标签中使用 |
:enabled选择器 | 用于设置“表单元素”中可用元素的样式 | 主要在单行文本框text、多行文本框textarea等表单元素中使用 |
:disabled选择器 | 用于对“表单元素”中不可用元素进行样式设置 | 主要在单行文本框text、多行文本框textarea等表单元素中使用 |
:read-write选择器 | 用于对“表单元素”中可读写的元素进行添加样式设置 | 主要在单行文本框text、多行文本框textarea等表单元素中使用 |
:read-only选择器 | 用于对“表单元素”中只读的元素进行添加样式设置 | 主要在单行文本框text、多行文本框textarea等表单元素中使用 |
4)其他选择器
CSS选择器除属性选择器、结构伪类选择器、状态伪类选择器外,还提供其他三个的选择器。
选择器 | 含义 |
---|---|
~选择器 | 选择元素后的所有兄弟元素 |
+选择器 | 选择元素后最近的兄弟元素 |
>选择器 | 只选择子元素,对于深层嵌套的子元素不会选择 |
~选择器、+选择器、>选择器示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
div ~p {
background: red;
}
span +p {
background: blue;
}
#box > li {
border: 1px red solid;
}
</style>
</head>
<body>
<span>PHP</span>
<p>HTML</p>
<div>CSS</div>
<p>HTML</p>
<p>HTML</p>
<ul id="box">
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
<script>
</script>
</body>
</html>
3、CSS3文本属性
CSS3增加了丰富的文本修饰效果,使网页看起来更加美观舒服。
1)text-shadow属性
text-shadow属性可设置的样式值有x-offset、y-offset、blur、color这四个值,其值含义及用法如下所示。
属性值 | 含义 | 单位 | 用法 |
---|---|---|---|
x-offset | 阴影的水平偏移距离 | px、em或百分比等 | 值为正,阴影向右偏移 值为负,阴影向左偏移 |
y-offset | 阴影的垂直偏移距离 | px、em或百分比等 | 值为正,阴影向下偏移 值为负,阴影向上偏移 |
blur | 阴影的模糊程度 | px、em或百分比等 | 值不能为负,值为0,无阴影模糊效果 值越大,阴影越模糊 值越小,阴影越清晰 |
color | 阴影的颜色 | 三种颜色表示方法 |
text-shadow属性同时还支持多阴影的设置。通过多阴影设置可以设计出很多炫酷的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3火焰字效果</title>
<style>
div {
font-size: 30px;
margin: 20px;
text-shadow: 0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
</style>
</head>
<body>
<div>Hello CSS3</div>
<script>
</script>
</body>
</html>
2)text-stroke属性
text-stroke属性用于设置文字的描边,可设置的样式值有w和color这两个值。w表示描边的宽度,color表示描边的颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
div {
font-size: 50px;
-webkit-text-stroke: 1px red;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: transparent;
}
</style>
</head>
<body>
<div>Hello CSS3</div>
<script>
</script>
</body>
</html>
3)direction属性
属性用于设置文字的排列方向,可设置的样式值有rtl和ltr两个值。rtl表示文字从右向左排列,ltr表示文字从左向右排列。需要配合表示排版方式的CSS语法unicode-bidi:bidi-override属性和属性值实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
div {
font-size: 30px;
margin: 20px;
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<div>Hello CSS3</div>
<script>
</script>
</body>
</html>
4)@font-face属性
@font-face属性表示字体图标,主要实现网页中图标的展示效果。字体图标可以提高网页的性能以及方便地控制图标大小和颜色变化。
@font-face属性主要可设置font-family和src两个值。font-family属性用来设置字体名称,src属性用来设置字体文件路径。
4、CSS3背景属性
1)background-size属性
background-size属性用于设置背景图片大小。
属性取值 | 设置背景图片方式 |
---|---|
number | 可分别设置背景图片的宽高的大小 |
cover(覆盖方式) | 将背景图片以等比缩放来填充整个容器元素 |
contain(包含方式) | 将背景图片等比例缩放至某一边紧贴容器边缘为止 |
2)background-origin属性
background-origin属性用于设置元素背景图片平铺的最开始位置。
属性取值 | 平铺方式 |
---|---|
padding-box(默认值) | 背景图片从内边距开始平铺 |
border-box | 背景图片从边框开始平铺 |
content-box | 背景图片从内容区域开始平铺 |
3)background-clip属性
background-clip属性用于设置元素背景图片平铺后剪切的位置。
属性取值 | 剪切方式 |
---|---|
border-box(默认值) | 平铺的背景图片从边框开始剪切 |
padding-box | 平铺的背景图片从内边距开始剪切 |
content-box | 平铺的背景图片从内容区域开始剪切 |
5、CSS3颜色属性
1)linear-gradient属性
linear-gradient属性表示线性渐变,是指在一条直线上进行渐变。linear-gradient属性需要通过background-image属性进行设置,可设置渐变方向、起始颜色、结束颜色这三个值。其具体设置方式如下:
- 起始颜色会渐变到结束颜色,也可以通过设置多个颜色值进行线性渐变。
- 渐变方向在第一个参数设置。可选择to left、to right、to top、to bottom等值。也可以设置方向的一个组合使用,如to left top方向值。渐变方向还可以设置一个旋转的角度。正值为顺时针旋转,负值为逆时针旋转。
- 线性渐变的颜色位置,可通过百分比划分渐变的区域大小。
2)radial-gradient属性
radial-gradient属性表示径向渐变,是一种颜色从起点到终点由内至外进行圆形渐变(从中间向外拉,像圆一样),其基本用法与线性渐变类似。起始颜色会渐变到结束颜色,也可以设置多个颜色值进行径向渐变,但径向渐变的方向设置尚不完善,需要添加浏览器前缀才可以实现,并且不支持to的方式,只支持方向的设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
#div1 {
width: 200px;
height: 150px;
background-image: radial-gradient(red, yellow, blue);
}
#div2 {
width: 200px;
height: 150px;
background-image: -webkit-radial-gradient(left, red, yellow, blue);
}
</style>
</head>
<body>
<div id="div1"></div><br>
<div id="div2"></div>
<script>
</script>
</body>
</html>
6、CSS3边框属性
1)border-radius属性
border-radius属性为元素添加圆角效果。长度值可以是px、百分比、em等。当设置的值越大时,圆角就越明显。border-radius属性中的数值代表这一个圆形的半径,这个圆形与元素相切就形成了圆角的大小。
border-radius属性与margin、padding属性类似,可通过一个值设置四个方法,也支持两个值和四个值的写法,还可以使用下面的属性定义指定的圆角。
- border-top-right-radius:定义右上角的圆角半径。
- border-bottom-right-radius:定义右下角的圆角半径。
- border-bottom-left-radius:定义左下角的圆角半径。
- border-top-left-radius:定义左上角的圆角半径。
2)border-image属性
border-image属性用于为边框添加背景图片,主要可以设置图片路径、切割图片的宽度、图片平铺方式这三个值。
通过url值来添加图片地址。通过数值来设置填充图片的大小,数值填充的是边框的四个方向,从图片边缘向图片内层截取相应数值进行填充。
默认边框中间部分被拉伸,可通过图片平铺来改变边框添加的方式,repeat值表示重复;round值表示平铺;stretch值表示拉伸(默认值)。
3)box-shadow属性
box-shadow属性是给一个容器添加阴影的样式属性。可选择设置x-shadow、y-shadow、blur、spread、color、inset等值。x-shadow、y-shadow值为阴影的偏移量,blur值为模糊值,color值为阴影的颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
div {
width: 150px;
height: 150px;
border: 5px black solid;
box-shadow: 10px 10px 5px red;
}
</style>
</head>
<body>
<div></div>
<script>
</script>
</body>
</html>
spread值为阴影的范围,可以对设置好的阴影进行局部放大。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
div {
width: 150px;
height: 150px;
border: 5px black solid;
box-shadow: 10px 10px 5px 10px red;
}
</style>
</head>
<body>
<div></div>
<script>
</script>
</body>
</html>
inset值可用于设置内阴影。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3</title>
<style>
div {
width: 150px;
height: 150px;
border: 5px black solid;
box-shadow: 10px 10px 5px 10px red inset;
}
</style>
</head>
<body>
<div></div>
<script>
</script>
</body>
</html>
4)多彩的边框颜色
在传统CSS中,只能设置简单的边框颜色。而在CSS3中可以使用多个颜色值设置边框颜色,从而实现过渡颜色的效果。在CSS3中,设置边框颜色的属性如下所示。
- border-bottom-colors:定义下边框的颜色。
- border-top-colors:定义上边框的颜色。
- border-left-colors:定义左边框的颜色。
- border-right-colors:定义右边框的颜色。
使用这些属性的语法如下所示。
- border-bottom-colors: 颜色值1 颜色值2 …… 颜色值n
- border-top-colors: 颜色值1 颜色值2 …… 颜色值n
- border-left-colors: 颜色值1 颜色值2 …… 颜色值n
- border-right-colors: 颜色值1 颜色值2 …… 颜色值n
每个颜色值代表边框中的一行(列)像素的颜色。
例如,如果边框的宽度为10px,则颜色值1指定第1行(列)像素的颜色;颜色值2指定第2行(列)像素的颜色;以此类推。如果指定的颜色值小于10,则其余边框行(列)像素的颜色使用颜色值n。
但是该属性并不是标准属性,不建议使用。
CSS轮廓
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可以起到突出元素的作用。
属性 | 说明 |
---|---|
outline | 在一个声明中设置所有的轮廓属性,轮廓属性的顺序为颜色、样式和宽度。(outline: red dotted thick;) |
outline-color | 设置轮廓的颜色。 |
outline-style | 设置轮廓的样式。 |
outline-width | 设置轮廓的宽度。 |
可选值 | 说明 |
---|---|
none | 表示无轮廓,默认值 |
dotted | 点状的轮廓 |
dashed | 虚线轮廓 |
solid | 实线轮廓 |
double | 双线轮廓。双线的宽度等同于outline-width属性的值。 |
groove | 3D凹槽轮廓。此效果取决于outline-color属性的值。 |
ridge | 3D凸槽轮廓。此效果取决于outline-color属性的值。 |
inset | 3D凹边轮廓。此效果取决于outline-color属性的值。 |
outset | 3D凸边轮廓。此效果取决于outline-color属性的值。 |
inherit | 规定从父元素继承轮廓样式的设置 |
可选值 | 说明 |
---|---|
thin | 细轮廓 |
medium | 中等的轮廓,默认值 |
thick | 粗的轮廓 |
length | 规定轮廓粗细的数值 |
inherit | 规定从父元素继承轮廓宽度的设置 |
CSS多列
在很多报纸中,将文章以多列的形式表现。在CSS3中,可以使用 column-count 属性设置文章显示的列数,语法如下。
column-count: auto | 整数
如果取值为auto,则由浏览器自动计算列数。
不同浏览器引擎实现column-count 属性的方法略有不同。在webkit引擎中为 -webkit-column-count ,在Gecko引擎中为 -moz-column-count 。出于兼容性的考虑,建议同时使用 -webkit-column-count 和 -moz-column-count 属性设置列数。
嵌入字体
为了使页面更美观、更独特,网页设计人员经常需要在网页中使用特殊的字体。但是如果客户端没有安装这个字体,就无法达到预期的效果,因此很多时候只能使用图片代替文字。但是,图片文件会增加网页的大小,影响浏览的速度。
在CSS3中,可以使用@font-face属性使用嵌入字体,语法如下。
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]];
[font-weight: <weight>];
[font-style: <style>];
}
参数说明如下。
- YourWebFontName:自定义的字体名,在网页元素的font-family中引用定义的嵌入字体。
- source:指定自定义字体文件的存放路径。
- format:指定自定义字体的格式,用来帮助浏览器识别,可以是truetype、opentype、truetype-aat、embedded-opentype和avg等类型。
- weight:定义字体是否为粗体。
- style:定义字体样式,如斜体。
在CSS3中实现嵌入字体,代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
@font-face {
font-family: 'Andriko';
src: url('Andriko.ttf');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'Andriko';
}
</style>
</head>
<body>
<h1>font-family: 'Andriko'</h1>
<script>
</script>
</body>
</html>
HSL和HSLA颜色表示方法
CSS3支持以HSL声明的形式表现颜色。HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)3个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。HSL声明的定义形式如下。
hsl(色调值,饱和度值,亮度值)
参数说明如下。
- 色调值:用于定义色盘,0和360是红色,接近120的是绿色,240是蓝色。
- 饱和度值:百分比,0%是灰度,100%饱和度最高。
- 亮度值:单位为百分比,0%最暗,50%均值,100%最亮。
HSLA声明在HSL颜色的基础上增加了一个A参数,设置该颜色的透明度。与RGBA一样,A参数的取值范围也为0~1,0表示完全透明(即不可见),1表示完全不透明。
使用HSL声明实现不同颜色的层,代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
.hslL1 {
background: hsl(120, 100%, 50%);
height: 20px;
}
.hslL2 {
background: hsl(120, 50%, 50%);
height: 20px;
}
.hslL3 {
background: hsl(120, 100%, 75%);
height: 20px;
}
.hslL4 {
background: hsl(240, 100%, 50%);
height: 20px;
}
.hslL5 {
background: hsl(240, 50%, 50%);
height: 20px;
}
.hslL6 {
background: hsl(240, 100%, 75%);
height: 20px;
}
</style>
</head>
<body>
<div class="hslL1"></div>
<div class="hslL2"></div>
<div class="hslL3"></div>
<div class="hslL4"></div>
<div class="hslL5"></div>
<div class="hslL6"></div>
<script>
</script>
</body>
</html>