【CSS】基础属性使用

一颗不甘坠落的流星

已于 2022-07-18 18:31:17 修改

阅读量480

点赞数 2

分类专栏： CSS 笔记文章标签： css css3

于 2020-12-24 13:19:42 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/111615063

版权

CSS 笔记专栏收录该内容

23 篇文章 2 订阅

订阅专栏

本文详细介绍了CSS中如何设置元素的宽高（width和height），包括使用auto、长度单位和百分比。同时，文章深入探讨了颜色的多种表示方式，如颜色名、HEX、RGB、RGBA和HSL/HSLA，提供了丰富的示例来展示不同颜色值的效果。通过这些知识，读者可以更好地掌握网页元素的视觉呈现。

摘要由CSDN通过智能技术生成

文章目录

宽高（width 和 height）

height 和 width 属性用于设置元素的高度和宽度。
height 和 width 属性不包括内边距、边框或外边距。
它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

属性：

属性值	说明
auto	默认。浏览器计算高度和宽度。
length	以 px、cm 等定义高度/宽度
%	以包含块的百分比定义高度/宽度

示例：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  border: 1px red solid;
}
div {
  height: 200px;
  width: 50%;

  background-color: powderblue;
}
</style>
</head>
<body>

<h1>设置元素的高度和宽度</h1>

<p>这个 div 元素的高度为 200 像素，宽度为 50%：</p>

<div></div>

</body>
</html>

结果：
宽高的最值

属性	说明
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。

颜色（color）

指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。

3.1、颜色名

示例：

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">番茄色</h1>
<h1 style="background-color:Orange;">橙色</h1>
<h1 style="background-color:DodgerBlue;">道奇蓝</h1>
<h1 style="background-color:MediumSeaGreen;">中海绿色</h1>
<h1 style="background-color:Gray;">灰色</h1>
<h1 style="background-color:SlateBlue;">板岩蓝</h1>
<h1 style="background-color:Violet;">紫色</h1>
<h1 style="background-color:LightGray;">浅灰</h1>

</body>
</html>

结果：

3.2、HEX 颜色（#）

在 CSS 中，可以使用以下格式的十六进制值指定颜色：

'#rrggbb'

1.其中 'rr'（红色）、'gg'（绿色）和 'bb'（蓝色）是介于 '00' 和 'ff' 之间的十六进制值（与十进制 0-255 相同）。
2.例如，'#ff0000' 显示为红色，因为红色设置为最大值（'ff'），其他设置为最小值（'00'）

示例：

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#000000;">#000000</h1>
<h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
<h1 style="background-color:#787878;">#787878</h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
<h1 style="background-color:#ffffff;">#ffffff</h1>

<p>通过对红色，绿色和蓝色使用相等的值，您将获得不同的灰阶。</p>

</body>
</html>

结果：

3.3、RGB 颜色（rgb）

在 CSS 中，可以使用下面的公式将颜色指定为 RGB 值：

'rgb(red, green, blue)'

1. 每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。
2. 例如，rgb(255, 0, 0) 显示为红色，因为红色设置为最大值（255），其他设置为 0。
3. 要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。
4. 要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。

示例：

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

<p>通过使用相等的红绿蓝色值，您会得到不同的灰阶。</p>

</body>
</html>

结果：

3.4、RGBA 值（rgba）

RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度。
RGBA 颜色值指定为：

'rgba(red, green, blue, alpha)'
1. 'alpha' 参数是介于 '0.0'（完全透明）和 '1.0'（完全不透明）之间的数字

示例：

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

<p>您可通过使用 RGBA 颜色值来生成透明色。</p>

</body>
</html>

结果：

在这里插入图片描述

3.5、HSL 颜色（hsla）

在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：

'hsla(hue, saturation, lightness)'

1. 色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
2. 饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
3. 亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。

示例：

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

<p>在 HTML 中，您可以使用 HSL 值来设置颜色。</p>

</body>
</html>

结果：
HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。

'hsla(hue, saturation, lightness, alpha)'

1. alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字
2. 用法类似于 rgba

一颗不甘坠落的流星

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录