CSS文本属性与字体属性

EPSDA2024-04-21 18:02

目录

文本属性

文本颜色

文本对齐

修饰文本

文本缩进

行高

字体属性

字体系列

字体大小

字体粗细

字体样式

字体/文本综合属性写法

Chrome调试工具的使用

文本属性

文本颜色

在CSS中使用color 属性用于定义文本的颜色，使用background-color设置一个盒子背景颜色

基本语法：

css 复制代码 
选择器 {
    color: 颜色值;
    background-color: 颜色值;
}

在CSS中，颜色值有四种表示形式，这四种表示形式都是等价的：

|---------------|--------------------------------------|
| 表示形式 | 属性值 |
| 预定义的颜色值 | red, green,blue... |
| 十六进制（开发时最常用） | #ff000, #ff6600, #29D794... |
| RGB值 | rgb(255, 0, 0)或rgb(100%, 0%, 0%) |
| RGBa值（a表示透明度） | rgba(0, 0, 0, 0.5) |

对于十六进制表示方法需要注意：

如果三组中，每组数字都相同，此时可以每组可以省略只写一个数字，例如：#ffaabb改写成#fab，但是类似于：#ffaabc不能改写成#fabc

常见的十六进制取值：

纯白色：#fff

纯黑色：#000

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本颜色</title>
    <style>
        .red {
            /* color: red; 等价于下面的代码*/
            color: #ff0000;
        }

        .red_transparent {
            color: rgba(255, 0, 0, 0.5);
        }

        .blue {
            /* color: blue; 等价于下面的代码 */
            color: #0000ff;
        }

        .green {
            /* color: green; 等价于下面的代码*/
            color: #008000;
        }
    </style>
</head>

<body>
    <p class="red">这是一个红色的段落</p>
    <p class="red_transparent">这是一个半透明红色的段落</p>
    <p class="blue">这是一个蓝色的段落</p>
    <p class="green">这是一个绿色的段落</p>
</body>

</html>

效果如下：

文本对齐

在CSS中使用text-align 属性用于设置元素内文本内容的水平对齐方式

基本语法：

css 复制代码 
选择器 {
    text-align: 值;
}

在CSS中，text-align属性有三种值：

|----------|----------|
| 属性值 | 描述 |
| left | 左对齐（默认值） |
| center | 居中对齐 |
| right | 右对齐 |

对于占用一整行的标签来说，其区域相当于一个盒子，而文本对齐属性实际改变的是文字在盒子中的位置，但是并不改变盒子本身的大小，对于只占用当前位置的标签来说，居中对齐效果需要text-align属性给文本所在标签（文本的父元素）设置

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对齐属性</title>
    <style>
        .font-align {
            /* 将p标签的文本对齐方式设置为居中 */
            text-align: center;
        }
    </style>
</head>

<body>
    <p class="font-align">这是一个居中对齐的p标签</p>
    <span class="font-align">这是一个居中对齐的span标签</span><br />
    <span>这是一个没有居中对齐的span标签</span>
    <div class="font-align">这是一个居中对齐的div标签</div>

</body>

</html>

效果如下：

修饰文本

在CSS中使用text-decoration属性修改文本是否带有划线

基本语法：

css 复制代码 
选择器 {
    text-decoration: 值;
}

在CSS中，修饰文本有以下四个值：

|----------------|------------------------------|
| 属性值 | 描述 |
| none | 无装饰线（默认值） |
| underline | 下划线（部分标签自带下划线，例如标签<a></a>） |
| overline | 上划线 |
| line-through | 删除线 |

一般使用text-decoration属性是为了将带有下划线的标签改为无下划线

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改文本</title>
    <style>
        /* 将a标签的文本修饰设置为无修饰 */
        .non-decorate {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com">百度一下</a>
    <a href="https://www.baidu.com" class="non-decorate">百度一下</a>
</body>

</html>

效果如下：

文本缩进

在CSS中使用text-indent属性对文本缩进进行控制

基本语法：

css 复制代码 
选择器 {
    text-indent: 值em/值px;
}

在设置文本缩进值时，可以考虑采用em作为单位，也可以采用px作为单位，em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本缩进</title>
    <style>
        .indent {
            /* 将p标签的文本缩进设置为2em（2个字符） */
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p class="indent">这是一个缩进2个字符的段落</p>
    <p>这是一个没有缩进的段落</p>
</body>

</html>

效果如下：

行高

在CSS中可以使用line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

所谓行高，即行与行之间的间距，具体包括的范围如下：

📌

注意段落间距并不是由行高来决定的，改变行高不会改变段落间距

基本语法：

css 复制代码 
选择器 {
    line-height: 值em/值px;
}
  1. 让单行文本垂直居中可以设置line-height:文字父元素高度
  2. 网页精准布局时，会设置Iine-height: 1（不要带单位）可以取消上下间距

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高</title>
    <style>
        * {
            font-family: 'Microsoft YaHei';
        }

        .height_line {
            line-height: 60px;
        }
    </style>
</head>

<body>
    <!-- 段落行高 -->
    <p class="height_line">这是一个段落，并且设置了行高为60px <br />这是第二行</p>
    <p>这是一个段落，但是没有设置行高 <br />这是第二行 </p>
</body>

</html>

效果如下：

字体属性

字体系列

在CSS中 使用 font-family 属性定义文本的字体系列

基本语法如下：

css 复制代码 
标签 {
    font-family: 字体, 字体;
}

注意：

  1. 各种字体之间必须使用英文状态下的逗号隔开
  2. 一般情况下,如果有空格隔开的多个单词组成的字体,加单引号或双引号，例如"``Microsoft YaHei``"
  3. 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
  4. 如果字体系列中有多个字体时，将会从左向右依次匹配，直到匹配到当前设备存在的字体
  5. 常见字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体集属性</title>
    <style>
        .fontStyle{
            font-family:'Microsoft YaHei', 'Times New Roman', Times, serif;
        }
    </style>
</head>
<body>
    <p>这是一个段落，观察字体</p>
    <p class="fontStyle">这是一个段落，观察字体</p>
</body>
</html>

效果如下：

字体大小

在CSS中使用 font-size 属性定义字体大小

基本语法如下：

css 复制代码 
标签 {
    font-size: 大小px;
}
  1. px（像素）大小是我们网页的最常用的单位，给大小时一定要带px
  2. 谷歌浏览器默认的文字大小为16px
  3. 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
  4. 使用<body></body>可以指定整个页面文字的大小

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体大小属性设置</title>
    <style>
    .fontsize {
        font-size: 20px;
    }
    </style>
</head>
<body>
    <h1 class="fontsize">字体大小属性设置</h1>
    <h1>字体大小属性设置</h1>
    <p class="fontsize">这是一个20px的字体大小</p>
    <p>这是一个默认的字体大小</p>
</body>
</html>

效果如下：

字体粗细

在CSS中使用font-weight 属性设置文本字体的粗细

基本语法如下：

css 复制代码 
选择器 {
    font-weight: 值;
}

在CSS中，有下面三种值：

|----------|-------------------------------------------------|
| 属性值 | 描述 |
| normal | 默认值（不加粗） |
| bold | 定义粗体（加粗） |
| 常数值 | 在CSS中，一共有100-900九个值，400等同于normal，700等同于bold |

一般考虑将粗体改为非粗体，例如将粗体的标题改为非粗体

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将标题改为非粗体</title>
    <style>
        h1 {
            font-family: 'Microsoft YaHei';
        }

        /* 将h1标签的字体粗细设置为非粗体 */
        .non-bold {
            font-weight: 400;
        }
    </style>
</head>

<body>
    <h1>
        这是一个正常标题
    </h1>
    <h1 class="non-bold">
        这是非粗体标题
    </h1>
</body>

</html>

效果如下：

字体样式

在CSS中 使用 font-style 属性设置文本的风格

基本语法：

css 复制代码 
选择器 {
    font-style: 值;
}

|----------|---------------------|
| 属性值 | 描述 |
| normal | 默认值，浏览器会显示每一个标签的默认值 |
| italic | 浏览器会显示斜体 |

示例代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        /* 将p标签的字体样式设置为斜体 */
        .italic {
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>
        这是一个段落，但是没有被修饰为斜体
    </p>
    <p class="italic">
        这是一个段落，并且被修饰为斜体
    </p>
</body>

</html>

效果如下：

字体/文本综合属性写法

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

基本语法：

css 复制代码 
选择器 {   
    font: font-style  font-weight  font-size/line-height  font-family;
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（浏览器取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式综合</title>
    <style>
        .fontStyle {
            /* 按照下面的顺序进行书写：font-style font-weight font-size font-family */
            font: italic bold 20px 'Microsoft YaHei';
        }
    </style>
</head>

<body>
    <p class="fontStyle">
        这是一个段落，并且被修饰为斜体，粗体，20px，Microsoft YaHei
    </p>
    <p>
        这是一个段落，但是没有被修饰
    </p>
</body>

</html>

效果如下：

Chrome调试工具的使用

  1. Ctrl+滚轮 可以放大开发者工具代码大小
  2. 一般左边是 HTML 元素结构，右边是 CSS 样式
  3. 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色
  4. Ctrl + 0 复原浏览器大小
  5. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
  6. 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误
相关推荐
码客前端3 分钟前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
Komorebi゛4 分钟前
【CSS】圆锥渐变流光效果边框样式实现
前端·css
工藤学编程17 分钟前
零基础学AI大模型之CoT思维链和ReAct推理行动
前端·人工智能·react.js
徐同保17 分钟前
上传文件，在前端用 pdf.js 提取 上传的pdf文件中的图片
前端·javascript·pdf
怕浪猫18 分钟前
React从入门到出门第四章 组件通讯与全局状态管理
前端·javascript·react.js
欧阳天风25 分钟前
用setTimeout代替setInterval
开发语言·前端·javascript
EndingCoder29 分钟前
箭头函数和 this 绑定
linux·前端·javascript·typescript
郑州光合科技余经理29 分钟前
架构解析：同城本地生活服务o2o平台海外版
大数据·开发语言·前端·人工智能·架构·php·生活
沐墨染31 分钟前
大型数据分析组件前端实践：多维度检索与实时交互设计
前端·elementui·数据挖掘·数据分析·vue·交互
xkxnq35 分钟前
第一阶段：Vue 基础入门（第 11 天）
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）03Linux下V2Ray安装配置指南04Labelme从安装到标注：零基础完整指南05jdk21下载、安装（Windows、Linux、macOS）06手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！07【踩坑笔记】50系显卡适配的 PyTorch 安装08GitLab 零基础入门指南：从安装到项目管理全流程09Opencode CLI 安装成功,但是启动失败10UV安装并设置国内源