爱好其实是一种惩罚
纪念我的放肆-消失的那么快
返回顶部
当前位置：首页 > 无 > 正文

css里怎样设置字体大小和字体颜色

作者：冲灵 发布时间：2024-02-26 10:39 分类： 无 浏览：152 评论：0

导读：在 CSS 中，可以通过以下属性设置字体大小和颜色：1. 设置字体大小（font-size）selector { font-size: 值; }常用单位​：px：像素（绝对单位...

在 CSS 中，可以通过以下属性设置字体大小和颜色：

1. 设置字体大小（font-size）

selector {
  font-size: 值;
}

常用单位​：

  • px：像素（绝对单位，如 16px）
  • em：相对单位（基于父元素字体大小，如 1.5em）
  • rem：相对单位（基于根元素 <html> 的字体大小，如 1.2rem）
  • %：百分比（如 120%）
  • vw/vh：视窗宽度/高度的百分比（如 2vw）

示例：

p {
  font-size: 16px; /* 固定像素 */
}

h1 {
  font-size: 2em; /* 父元素字体大小的2倍 */
}

body {
  font-size: 1.2rem; /* 根元素字体大小的1.2倍 */
}

2. 设置字体颜色（color）

selector {
  color: 颜色值;
}

颜色值的写法​：

  • 颜色名称：如 red, blue, green
  • 十六进制：如 #ff0000（红色），简写 #f00
  • RGB/RGBA：如 rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.5)（带透明度）
  • HSL/HSLA：如 hsl(0, 100%, 50%)（色相、饱和度、亮度）

示例：

h1 {
  color: #333; /* 深灰色 */
}

.highlight {
  color: rgb(255, 0, 0); /* 红色 */
}

.transparent-text {
  color: rgba(0, 0, 255, 0.7); /* 半透明蓝色 */
}

完整示例

<style>
  .title {
    font-size: 24px;
    color: #ff5722; /* 橙色 */
  }

  .subtitle {
    font-size: 1.5rem;
    color: hsl(210, 100%, 50%); /* 亮蓝色 */
  }

  .small-text {
    font-size: 0.8em;
    color: rgba(0, 0, 0, 0.6); /* 半透明黑色 */
  }
</style>

<h1 class="title">这是标题</h1>
<p class="subtitle">这是副标题</p>
<p class="small-text">这是小号文字</p>

注意事项：

  1. ​响应式设计​：建议优先使用 rem 或 em 单位，便于整体调整字体大小。
  2. ​可访问性​：确保颜色对比度足够（如深色文字配浅色背景）。
  3. ​继承性​：color 属性会被子元素继承，但 font-size 的具体表现取决于使用的单位（如 em 基于父元素，rem 基于根元素）。

  4. 如果需要同时设置字体家族，可以结合 font-family 使用：

    body {
  font-family: "Arial", sans-serif;
  font-size: 1rem;
  color: #333;
}
手机扫码阅读

资源下载

暂无下载资源

相关文章

发表评论:

排行

个人资料

冲灵
冲灵
联系博主 网站留言

跳动时间

搜索

最新文章

热门文章

最新评论