重学前端003 --- CSS 颜色

文章目录

文档声明
head
颜色模型
div

根据在这里 Freecodecamp 实践，记录笔记总结。

文档声明

复制代码

在文档顶部添加 DOCTYPE html 声明
<!DOCTYPE html>

head

title 元素为搜索引擎提供了有关页面的额外信息。它还通过以下两种方式显示 title 元素的内容：

当页面打开时，在标题栏中；
当你把鼠标悬停在该页面上时，在浏览器标签中。即使该标签未被激活，一旦你将鼠标悬停在该标签上，title 文本就会显示出来。
<head> <meta charset="utf-8"> <title>Colored Markers</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> </head>

颜色模型

主要有两种颜色模型：电子设备中使用的加色RGB（红、绿、蓝）模型和印刷中使用的减色CMYK（青、品红、黄、黑）模型。
RGB 模型。这意味着颜色从黑色开始，色值随着红色、绿色和蓝色数值变化而变化。一个简单的方法是使用 CSS rgb

函数。rgb(red, green, blue);

每个红色、绿色和蓝色值都是一个从 0 到 255 的数字。 0 表示该颜色的 0%，并且是黑色。 255 意味着该颜色的 100%。

复制代码

rgb(255,0,0)  # 纯红色
rgb(0,255,0) #纯绿色
rgb(0,0,255) # 纯蓝色

rgb(0,0,0) # 黑色
rgb(255, 255, 255) # 白色

rgb(255, 255, 0) # 黄色
rgb(0, 255, 255) # 青色，蓝绿色

在加性RGB颜色模型中，原色是组合后产生纯白色的颜色。但要做到这一点，每种颜色都需要达到最高强度。

div

div 元素的 display 属性默认是 block。因此，当两个 block 元素彼此相邻时，它们会像实际的块一样堆叠。要将两个

div 元素放置在同一行上，需要将它们的 display 属性设置为 inline-block。
所有 HTML 元素都有边框，尽管它们通常默认设置为 none。使用

CSS，你可以控制元素边框的所有方面，并在所有边上设置边框，或者一次只设置一侧。要使边框可见，你需要设置其宽度和样式。

box-shadow 属性允许你在元素周围应用一个或多个阴影。这是基本语法：

复制代码

box-shadow: offsetX offsetY color;

下面是 offsetX 和 offsetY 值的作用： both offsetX and offsetY accept number

values in px and other CSS units 正 offsetX 值将阴影向右移动，负值将它向左移动正 offsetY

值将阴影向下移动，负值将它向上移动如果你想要 offsetX 和 offsetY

其中一个值为零，或两个都为零（0），那么你不需要添加单位。每种浏览器都知道零意味着没有变化。

阴影的高度和宽度由应用阴影的元素的高度和宽度决定。你也可以使用可选的 spreadRadius 值来扩大阴影的范围。

如果不设置 blurRadius 的值，则默认为 0，并产生锐利的边缘。 blurRadius 的值越大，模糊效果就越大。