CSS基础（CSS的三大特性、颜色表示法、常用的字体属性、常用的文本属性）

编程语言 2025-04-12 00:18
0 阅读

文章目录


视频教程： 87_CSS_三大特性

1. CSS的三大特性

1.1 层叠性（Cascading）

当样式的优先级和重要性都相同时，位于 CSS 文件后面或在 HTML 文件中后面定义的样式将覆盖前面定义的样式

CSS 的层叠性是指当多个样式规则应用于同一个 HTML 元素时，浏览器如何决定哪些样式应该应用到该元素上

1.2 继承性（Inheritance）

继承性指的是子元素会从父元素继承某些 CSS 属性

1.2.1 常见的可继承的CSS属性

在 CSS 中，有些属性会被子元素继承，而有些则不会。以下是一些常见的可继承的 CSS 属性：

  1. 字体属性：
    • font-family
    • font-size
    • font-style
    • font-variant
    • font-weight
    • font
    • line-height
    • letter-spacing
    • text-align
    • text-indent
    • text-transform
    • white-space
    • word-spacing
  2. 文本属性：
    • color
    • direction
    • text-shadow
    • visibility
    • cursor
  3. 列表属性：
    • list-style
    • list-style-type
    • list-style-position
    • list-style-image
  4. 表格布局属性：
    • border-collapse
    • border-spacing
    • caption-side
    • empty-cells

1.2.2 如何查看某个CSS属性是否可继承

在 VsCode、WebStorm、IDEA 等软件中，将鼠标悬浮在 CSS 属性上，向下滚动找到 developer. mozilla. org 关键字，点击后就会跳转到 MDN 网站

在这里插入图片描述

在这里插入图片描述

在 MDN 网站中可以看到具体的 CSS 元素是否可继承

在这里插入图片描述

扫描二维码关注公众号，回复： 17619612 查看本文章

1.3 优先级（Specificity）

!important > 内联样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器 > 通配选择器 > 继承属性

优先级决定了当多个规则应用于同一个元素时，哪一个规则会被浏览器应用

计算权重时需要注意，并集选择器的每一个部分是分开算的

#header, .nav li {
    
    
  color: blue;
}

上述代码等价于

#header {
    
    
  color: blue;
}

.nav li {
    
    
  color: blue;
}

2. 颜色表示法

2.1 颜色名

CSS 定义了一系列标准的颜色名，可以直接在 CSS 代码中使用。这些颜色名是预定义的，不需要额外的解释或转换

颜色名参考网站：https://developer.mozilla.org/en-US/docs/Web/CSS/named-color

在这里插入图片描述

2.2 rgb和rgba

2.2.1 rgb

RGB代表“红-绿-蓝”（Red-Green-Blue），它是一种加色模型，通过混合不同强度的红色、绿色和蓝色光来创建各种颜色。在RGB模型中，每个颜色通道的值范围从0到255，其中0表示该颜色通道没有光（即最暗），255表示该颜色通道的光是最亮的

  • R（红色）：红色通道的强度，取值范围是0-255
  • G（绿色）：绿色通道的强度，取值范围是0-255
  • B（蓝色）：蓝色通道的强度，取值范围是0-255

RGB示例：#FF6347（十六进制）或 rgb(255, 99, 71)（函数表示法）表示珊瑚色。

2.2.2 rgba

在RGBA颜色模型中，"A"代表Alpha。Alpha是一个术语，用于描述颜色的透明度级别

RGBA是在RGB的基础上增加了一个Alpha通道，代表“红-绿-蓝-Alpha”。Alpha通道用于控制颜色的透明度

  • R（红色）：同RGB
  • G（绿色）：同RGB
  • B（蓝色）：同RGB
  • A（Alpha）：透明度通道，取值范围是0.0到1.0，其中0.0表示完全透明，1.0表示完全不透明

RGB示例：#FF6347（十六进制）或 rgb(255, 99, 71)（函数表示法）表示珊瑚色。

2.3 HEX和HEXA

2.3.1 HEX

HEX颜色表示法是使用六位十六进制数字来定义颜色的一种方式。它不包含透明度信息，只表示颜色的红、绿、蓝三个颜色通道。标准的HEX颜色代码格式如下：

#RRGGBB
  • RR：两位十六进制数，表示红色（Red）通道的强度，范围是 00 到 FF
  • GG：两位十六进制数，表示绿色（Green）通道的强度，范围是 00 到 FF
  • BB：两位十六进制数，表示蓝色（Blue）通道的强度，范围是 00 到 FF

例如，#FF0000 表示纯红色，#00FF00 表示纯绿色，#0000FF 表示纯蓝色

2.3.2 HEXA

IE 浏览器只支持 HEX，不支持 HEXA

HEXA颜色表示法是在HEX的基础上增加了两位十六进制数字来表示透明度（Alpha）通道。HEXA颜色代码的格式如下：

#RRGGBBAA
  • RR、GG、BB：与HEX表示法中的含义相同
  • AA：两位十六进制数，表示透明度（Alpha）通道的强度，范围是 00（完全透明）到 FF（完全不透明）

例如，#FF000080 表示半透明的红色，其中透明度为50%（因为十六进制的80等于十进制的128，而128/255大约等于0.5）

2.4 HSL和HSLA

HSL 和 HSLA 是两种颜色表示法，它们基于人对颜色的感知，而不是像 RGB 或 HEX 那样基于光的物理属性

2.4.1 色相环

在这里插入图片描述

2.4.2 HSL

HSL 代表色调（Hue）、饱和度（Saturation）和亮度（Lightness）。HSL 颜色模型是圆柱坐标中的一个圆锥形色彩空间，它将颜色描述为三个维度：

  • H（色调，Hue）：色调是色彩的基本属性，它决定了颜色的种类，比如红色、黄色或蓝色。在 HSL 中，色调用角度来表示，范围是 0° 到 360°。其中，0° 或 360° 表示红色，120° 表示绿色，240° 表示蓝色
  • S（饱和度，Saturation）：**饱和度是指颜色的纯度，它描述了颜色中灰色成分的多少。**饱和度的范围是 0% 到 100%，其中 0% 表示灰色（没有颜色），100% 表示完全饱和的颜色
  • L（亮度，Lightness）：亮度描述了颜色的明亮程度。亮度的范围也是 0% 到 100%，其中 0% 表示黑色，50% 表示正常亮度，100% 表示白色

HSL 颜色表示法的格式如下：

hsl(H, S%, L%)

例如，hsl(120deg, 100%, 50%) 表示纯绿色

2.4.3 HSLA

HSLA 是 HSL 的扩展，增加了 Alpha 通道，用于表示颜色的透明度。HSLA 颜色模型在 HSL 的基础上增加了一个参数：

  • A（Alpha）：Alpha 通道定义了颜色的透明度。它的值是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的十进制数。

HSLA 颜色表示法的格式如下：

hsla(H, S%, L%, A)

例如，hsla(120deg, 100%, 50%, 0.3) 表示半透明的纯绿色，其中透明度为 30%

HSL 和 HSLA 颜色模型的优势在于它们更符合人类对颜色的感知。调整色调、饱和度和亮度可以让设计师更容易地创建和调整颜色方案。而 Alpha 通道的加入使得 HSLA 能够处理透明度，这在网页设计和图形设计中非常有用

2.4.4 示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HSL和HSLA</title>
  <style>
      .button {
      
      
          padding: 10px 20px;
          margin: 10px;
          border: none;
          border-radius: 5px;
          color: white;
          font-size: 16px;
          cursor: pointer;
      }

      .rgb-button {
      
      
          background-color: #ff6347; /* RGB颜色表示法 */
      }

      .hsl-button {
      
      
          background-color: hsl(120, 100%, 50%); /* HSL颜色表示法，绿色 */
      }

      .hsla-button {
      
      
          background-color: hsla(240, 100%, 50%, 0.8); /* HSLA颜色表示法，半透明的蓝色 */
      }
  </style>
</head>
<body>
<h1>HSL和HSLA</h1>
<button class="button rgb-button">RGB按钮</button>
<button class="button hsl-button">HSL按钮</button>
<button class="button hsla-button">HSLA按钮</button>
</body>
</html>

3. 常用的字体属性

3.1 字体大小

  • Chrome 浏览器默认支持的最小文字为 12px，默认的文字大小为 16px ，当文字大小为 0px 时文字将会消失
  • 不同浏览器默认支持的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小
  • 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了

3.2 字体族

3.2.1 衬线字体和非衬线字体

  • 衬线字体是指在字母笔画末端有小的装饰性线条的字体。这些装饰线条称为“衬线”。衬线字体通常被认为更易于阅读长篇文章，因为衬线可以帮助引导视线从一个字母移动到下一个字母
  • 非衬线字体是指没有这些装饰性衬线的字体。它们的特点是简洁、现代，通常用于标题和小段文本，因为它们在屏幕上更容易阅读

在这里插入图片描述

3.2.2 sans-serif

在CSS中，如果你指定sans-serif作为font-family的值，浏览器会使用它所预装的一个默认的sans-serif字体。例如：

body {
    
    
  font-family: sans-serif;
}

这行代码告诉浏览器，对于body元素中的文本，使用默认的sans-serif字体。如果用户系统中安装了特定的sans-serif字体，浏览器可能会选择那个字体；如果没有，它会回退到系统默认的sans-serif字体

3.2.3 注意事项

  1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找（如果字体名包含空格，必须使用引号包裹起来）
  2. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上 serif（衬线字体）或 sans-serif（非衬线字体）
  3. windows 系统中默认的字体是微软雅黑

3.2.4 示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>字体族</title>
  <style>
      /* 设置衬线字体，这里使用的是楷体，如果楷体不可用，则回退到衬线字体族 */
      .serif-font {
      
      
          font-family: 'KaiTi', '楷体', serif;
      }

      /* 设置非衬线字体，这里使用的是微软雅黑，如果微软雅黑不可用，则回退到非衬线字体族 */
      .sans-serif-font {
      
      
          font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
      }
  </style>
</head>
<body>
<h1>字体族</h1>
<p class="serif-font">这是一段使用衬线字体的文本。衬线字体在字母笔画末端有装饰性线条，通常被认为更易于阅读长篇文章。</p>
<p class="sans-serif-font">
  这是一段使用非衬线字体的文本。非衬线字体没有装饰性衬线，看起来更简洁现代，适合标题和小段文本。</p>
</body>
</html>

3.3 字体风格

在CSS中，字体风格（font-style）是一个常用的属性，用于指定文本的字体样式。以下是font-style属性的一些常见值：

  1. normal：这是默认值，表示文本使用正常字体样式，没有倾斜

    p {
      
      
  font-style: normal;
}

  2. italic：这个值会使文本倾斜，表示斜体。如果当前字体没有设计斜体版本，浏览器可能会使用倾斜（oblique）样式作为替代

    em {
      
      
  font-style: italic;
}

  3. oblique：这个值也会使文本倾斜，但它与italic有所不同。oblique是通过倾斜正常字体来模拟斜体效果，而不是使用专门设计的斜体字体。如果当前字体没有斜体版本，使用oblique和italic通常看起来效果相似

    .oblique-text {
      
      
  font-style: oblique;
}

在实际使用中，italic通常用于强调或引用文本，而oblique则较少使用，更多作为italic的替代方案。大多数时候，开发者会使用normal和italic这两个值来控制文本的字体风格

3.4 字体粗细

在CSS中，字体粗细（font-weight）属性用于指定字体的相对粗细程度。以下是一些常用的font-weight属性值：

  1. normal：这是默认值，通常等同于400的粗细值

    p {
      
      
  font-weight: normal;
}

  2. bold：这个值会使字体加粗，通常等同于700的粗细值

    strong {
      
      
  font-weight: bold;
}

  3. bolder：这个值会使字体比其父元素的字体更粗。如果父元素的字体粗细是400，那么bolder通常会变成700

    .bolder-text {
      
      
  font-weight: bolder;
}

  4. lighter：这个值会使字体比其父元素的字体更细。如果父元素的字体粗细是400，那么lighter通常会变成300

    .lighter-text {
      
      
  font-weight: lighter;
}

  5. 100 - 900：这些是数值，用于指定字体的具体粗细。其中，400是正常粗细，700是加粗

    .weight-100 {
      
      
  font-weight: 100;
}
.weight-200 {
      
      
  font-weight: 200;
}
/* ... */
.weight-900 {
      
      
  font-weight: 900;
}

    在实际使用中，normal和bold是最常用的两个值，用于控制文本的正常和加粗显示。数值100到900提供了更细致的控制，但并非所有字体都支持这些粗细级别。当使用数值时，最好确保所选字体支持这些特定的粗细

3.5 字体复合属性

在CSS中，字体复合属性（font）允许你在一个声明中设置所有字体属性。这个属性是一个简写属性，可以包含以下子属性的值：

  • font-style
  • font-weight
  • font-size
  • line-height
  • font-family

以下是一个使用字体复合属性的例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>字体复合属性</title>
  <style>
      .复合字体样式 {
      
      
          /* 使用字体复合属性 */
          font: italic bold 16px/1.5 '微软雅黑', sans-serif;
      }
  </style>
</head>
<body>
<p class="复合字体样式">这是一个使用字体复合属性的文本示例。</p>
</body>
</html>

在这个例子中，.复合字体样式 类的 font 属性设置了以下值：

  • italic：字体样式为斜体
  • bold：字体粗细为粗体
  • 16px：字体大小为16像素
  • 1.5：行高为字体大小的1.5倍
  • '微软雅黑', sans-serif：字体族，首选字体为“微软雅黑”，如果不可用，则使用任何sans-serif字体

需要注意的是，在使用字体复合属性时，font-size 和 font-family 是必须的，其他属性如果没有指定，则会使用默认值。而且，除了 font-size 和 line-height 之外，其他属性的顺序可以随意调整。如果省略了 line-height，但提供了 font-size，则 line-height 会使用默认值

4. 常用的文本属性

4.1 文本颜色

在CSS中，字体颜色是通过 color 属性来设置的。这个属性可以接受多种颜色值，包括颜色名、十六进制代码、RGB、RGBA、HSL 和 HSLA 值

4.2 文本间距

在CSS中，文本间距可以通过以下属性来设置：

  1. letter-spacing：用于设置字符之间的间距
  2. word-spacing：用于设置单词之间的间距
  3. line-height：用于设置行与行之间的间距

以下是一个HTML示例，展示了如何使用这些属性来设置文本间距：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本间距</title>
  <style>
      .normal-spacing {
      
      
          /* 默认的字符间距和单词间距 */
          letter-spacing: normal;
          word-spacing: normal;
          line-height: normal;
      }

      .increased-letter-spacing {
      
      
          /* 增加字符间距 */
          letter-spacing: 2px;
      }

      .increased-word-spacing {
      
      
          /* 增加单词间距 */
          word-spacing: 4px;
      }

      .increased-line-height {
      
      
          /* 增加行间距 */
          line-height: 1.8;
      }
  </style>
</head>
<body>
<p class="normal-spacing">这是默认间距的文本。</p>
<p class="increased-letter-spacing">这是增加了字符间距的文本。</p>
<p class="increased-word-spacing">这是增加了单词间距的文本。</p>
<p class="increased-line-height">这是增加了行间距的文本。</p>
</body>
</html>

在这个例子中：

  • .normal-spacing 类应用了默认的字符间距、单词间距和行间距
  • .increased-letter-spacing 类将字符间距设置为2像素
  • .increased-word-spacing 类将单词间距设置为4像素
  • .increased-line-height 类将行间距设置为当前字体大小的1.8倍

这些属性可以单独使用，也可以组合使用，以实现不同的文本排版效果

4.3 文本修饰

4.3.1 常见的文本修饰属性

在CSS中，文本修饰可以通过以下属性来设置：

  1. text-decoration：用于设置文本的下划线、上划线、删除线等装饰效果
  2. text-decoration-color：用于设置文本装饰线的颜色
  3. text-decoration-style：用于设置文本装饰线的样式（如实线、虚线、波浪线等）

以下是一个HTML示例，展示了如何使用这些属性来设置文本修饰：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本修饰示例</title>
<style>
  .underline {
      
      
    /* 设置下划线 */
    text-decoration: underline;
  }
  .overline {
      
      
    /* 设置上划线 */
    text-decoration: overline;
  }
  .line-through {
      
      
    /* 设置删除线 */
    text-decoration: line-through;
  }
  .complex-decoration {
      
      
    /* 设置复合装饰（同时有下划线和上划线） */
    text-decoration: underline overline;
    /* 设置装饰线的颜色 */
    text-decoration-color: red;
    /* 设置装饰线的样式 */
    text-decoration-style: wavy;
  }
</style>
</head>
<body>
  <p class="underline">这是带下划线的文本。</p>
  <p class="overline">这是带上划线的文本。</p>
  <p class="line-through">这是带删除线的文本。</p>
  <p class="complex-decoration">这是带有复合装饰的文本。</p>
</body>
</html>

在这个例子中：

  • .underline 类为文本添加了下划线。
  • .overline 类为文本添加了上划线。
  • .line-through 类为文本添加了删除线。
  • .complex-decoration 类为文本同时添加了下划线和上划线，并设置了装饰线的颜色为红色，样式为波浪线

这些属性可以灵活组合使用，以实现不同的文本修饰效果

4.3.2 如何去掉超链接的下划线

text-decoration: none;

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本修饰</title>
  <style>
      /* 去掉所有超链接的下划线 */
      a {
      
      
          text-decoration: none;
      }
  </style>
</head>
<body>
<p>点击以下链接将跳转到百度，但链接没有下划线：</p>
<!-- 超链接，去掉下划线 -->
<a href="https://www.baidu.com">百度一下</a>
</body>
</html>

4.4 文本缩进

在CSS中，文本缩进可以通过text-indent属性来设置。以下是一个HTML示例，展示了如何使用text-indent属性来缩进段落文本：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本缩进</title>
  <style>
      .indented {
      
      
          /* 设置文本缩进为2em */
          text-indent: 2em;
      }
  </style>
</head>
<body>
<h1>文本缩进</h1>
<p class="indented">这是一个缩进的段落。首行缩进了2em的距离，通常用于文章或章节的开始，以增加可读性。</p>
<p>这是一个没有缩进的普通段落，用于对比。</p>
</body>
</html>

在这个例子中，.indented 类通过text-indent: 2em;属性设置了文本缩进。2em意味着首行缩进是当前字体大小的两倍。通常，em是相对于当前字体大小的单位，因此这是一个相对单位，可以保持缩进与字体大小的一致性

当应用于段落或其他块级元素时，text-indent属性将首行文本向内缩进指定的距离。这个属性常用于文章或文档的开始，以区分章节或段落的开头

4.5 文本水平对齐

在CSS中，文本的水平对齐主要使用text-align属性来控制。以下是一些常用的text-align属性值，用于设置文本的水平对齐方式：

  • left: 左对齐，使文本靠左排列

  • right: 右对齐，使文本靠右排列

  • center: 居中对齐，使文本在水平方向上居中

  • justify: 两端对齐，使文本在左右边界之间均匀分布，除非最后一行

以下是一个HTML示例，演示了如何使用这些属性值来设置文本的水平对齐：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本水平对齐</title>
  <style>
      .text-left {
      
      
          text-align: left; /* 左对齐 */
      }

      .text-right {
      
      
          text-align: right; /* 右对齐 */
      }

      .text-center {
      
      
          text-align: center; /* 居中对齐 */
      }

      .text-justify {
      
      
          text-align: justify; /* 两端对齐 */
      }
  </style>
</head>
<body>
<h2>文本水平对齐</h2>
<p class="text-left">左对齐：这是一个左对齐的文本段落。</p>
<p class="text-right">右对齐：这是一个右对齐的文本段落。</p>
<p class="text-center">居中对齐：这是一个居中对齐的文本段落。</p>
<p class="text-justify">
  两端对齐：这是一个两端对齐的文本段落。请注意，两端对齐通常适用于多行文本，使文本的左边缘和右边缘都对齐。</p>
</body>
</html>

在这个示例中，我们定义了四个类，每个类分别应用不同的text-align属性值。然后，我们将这些类应用到不同的段落上，以展示不同的文本对齐效果

4.6 细说font-size属性

  • 由于字体设计的原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能偏大，也可能偏小。例如:font-size 设为 40px 时，最终呈现的文字可能比40px 大，也可能比 40px 小
  • 通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些

视频教程：103_CSS_细说font-size

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4.7 行高

视频教程：104_CSS_常用文本属性_行高_概念

4.7.1 行高的定义

行高指的是两行文本基线之间的垂直距离。它不仅包括文字本身的高度，还包括文字上下的空白区域

4.7.2 行高的设置方法

  • 像素值：直接使用像素值来设置行高，例如 line-height: 20px;
  • 无单位数值：使用一个无单位的数值，这个数值会与元素的font-size相乘来得到行高，例如 line-height: 1.5;，如果font-size是16px，则行高将是24px（16px * 1.5）
  • 百分比：使用百分比值，这个百分比值是基于元素的font-size来计算的，例如 line-height: 150%;
  • 数值：使用数值，这个数值会被解释为元素的font-size的倍数，例如 line-height: 1.5;

4.7.3 示例代码

/* 设置行高为20像素 */
p {
    
    
    line-height: 20px;
}

/* 设置行高为字体大小的1.5倍 */
h1 {
    
    
    line-height: 1.5;
}

/* 设置行高为150% */
.small-text {
    
    
    font-size: 12px;
    line-height: 150%;
}

4.7.4 行高的应用场景

行高（line-height）在CSS中的应用场景非常广泛，以下是一些常见的使用场景：

  1. 增强文本可读性

    • 段落文本：在文章或博客的段落中，适当的行高可以确保文本不会显得过于拥挤，从而提高可读性

    • 长篇文章：对于包含大量文本的页面，设置合适的行高可以帮助读者更容易地跟踪阅读

  2. 垂直居中

    • 单行标题：在单行标题或按钮文本中，将line-height设置为与容器高度相同的值可以实现文本的垂直居中

    • 导航菜单：导航菜单中的文字通常需要垂直居中，通过调整行高可以轻松实现这一点

4.8 vertical-align

视频教程：107_CSS_常用文本属性_vertical-align

vertical-align 对块级元素（div、h1 - h6、p、ul、ol、li）不起作用

vertical-align 是CSS中的一个属性，用于指定行内元素（inline elements）或表格单元格（table cells）的垂直对齐方式。这个属性对于调整文本、图像和其他行内元素在行框内的垂直位置非常有用

以下是一些 vertical-align 属性的常见值：

  • baseline：默认值，使元素的基线与父元素的基线对齐
  • top：使元素的顶部与行框的顶部对齐
  • middle：使元素的中部与父元素的基线加上父元素字母 X 的一半对齐（参考本文的 细说font-size 部分）
  • bottom：使元素的底部与行框的底部对齐

猜你喜欢

目录

热门文章