【CSS】基础属性使用
文章目录
-
- 宽高（width 和 height）
- 颜色（color）
-
- 3.1、颜色名
- 3.2、HEX 颜色（#）
- 3.3、RGB 颜色（rgb）
- 3.4、RGBA 值（rgba）
- 3.5、HSL 颜色（hsla）
宽高（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;">#000000h1>
<h1 style="background-color:#3c3c3c;">#3c3c3ch1>
<h1 style="background-color:#787878;">#787878h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0h1>
<h1 style="background-color:#ffffff;">#ffffffh1>
<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