【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>

  • 结果:
    【CSS】基础属性使用_第1张图片

  • 宽高的最值

属性 说明
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>
  • 结果:
    【CSS】基础属性使用_第2张图片

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>
  • 结果:
    【CSS】基础属性使用_第3张图片

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>
  • 结果:
    【CSS】基础属性使用_第4张图片

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>
  • 结果:

【CSS】基础属性使用_第5张图片

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>

  • 结果:
    【CSS】基础属性使用_第6张图片
  • HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。
'hsla(hue, saturation, lightness, alpha)'

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

你可能感兴趣的:(CSS,笔记,css,css3)