html css 显示数值_CSS

一、什么是CSS

• CSS 指层叠样式表 (Cascading Style Sheets)

二、三种方式添加CSS

示例：

段落标签<p></p>中的内容 Lorem 改为 红色：

注意：在一个html文件中，id必须要保证是唯一的，而class不用，它可以相同。

简单介绍一下HSL：

H： Hue 色相

S：Saturation 饱和度

L ：Lightness 亮度

HSL色彩模式使用HSL模型为图像中每一个像素的HSL分量分配一个0~255范围内的强度值。HSL图像只使用三种通道，就可以使它们按照不同的比例混合，在屏幕上重现16777216种颜色。

在 HSL 模式下，每种 HSL 成分都可使用从 0到 255的值。（其中L是从黑（0）到白（255）渐变）

HSL的H(hue)分量，代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是0°到360°的圆心角，每个角度可以代表一种颜色。色相值的意义在于，我们可以在不改变光感的情况下，通过旋转色相环来改变颜色。在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照60°圆心角的间隔排列。
HSL的S(saturation)分量，指的是色彩的饱和度，它用0%至100%的值描述了相同色相、亮度下色彩纯度的变化。数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从理性(灰度)到感性(纯色)的变化。
HSL的L(lightness)分量，指的是色彩的亮度，作用是控制色彩的亮暗变化。它同样使用了0%至100%的取值范围。数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。

CSS盒子模型

外边距合并：当多个盒子在一起时：margin(外边距)取其中较大的一个的外边距

外边距指定：

还可以更简便些：

第一种：参数分别表示：（上、右、下、左）

第二种：当上下边距一样，左右边距一样时，这样使用，参数分别表示（上下、左右）

第三种：当上下边距不一样，左右边距一样时使用，参数分别表示（上、左右、下）

<button>button</button>

起始样式（默认样式）：

设置CSS样式：

hover 鼠标放上去的样式

active 鼠标点击的样式

假如你需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

给每个部分加上border后：

显示：（不能并排显示了）

这时候我们加上：box-sizing:border-box;

可以正常并排显示了