重学前端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 的值越大，模糊效果就越大。