【前端web入门第三天】02 CSS字体和文本

简介: 本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。

文章目录:


image.png

1.字体

1.1 字体大小

  • 属性名: font-size
  • 属性值:文字尺寸,PC端网页最常用的单位px
p {
font-size: 30px;
}

1.2 字体粗细

image.png

/*不加粗*/
font-weight: 400;
/*加粗*/
font-weight: 700;

1.3 字体样式(是否倾斜)

作用:清除文字默认的倾斜效果
属性名:font-style
属性值

  • 正常(不倾斜) : normal
  • 倾斜:italic
    p {
    font-style: normal;
    }
    

    1.4 行高

    作用:设置多行文本的间距属性名:line-height
    属性值
    数字+px
    数字(当前标签font-size属性值的倍数)
line-height: 30px;
/* 当前标签字体大小为16px*/
line-height: 2;

行高的测量方法:从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)。

举例:设置文字垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     div{
    
    
        height: 100px;
        background-color: aqua;
        line-height: 100px;
     }
    </style>
</head>
<body>
<div>文字</div>
</body>
</html>

image.png


1.5 字体族

属性名:font-family
属性值:字体名

font-family:楷体;
font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"15B8B\4F53", sans-serif;

拓展(了解): font-family属性值可以书写多个字体名,各个字体名用逗号隔开,执行顺序是从左向右依次查找.

  • font-family属性最后设置一个字体族名,网页开发建议使用无衬线字体
    image.png

1.6 font 复合属性

font 可以集成多个属性,以简写的形式把多个属性汇总起来

不使用font复合属性

<style>
    div 
    {
    
    
    /*文字倾斜*/
    font-style: italic;
    /*文字加粗*/
    font-weight: 700;
    /*字体大小是30px*/
    font-size: 30px;
    /*行高为字号的2倍*/
    line-height: 2;
    /*字体是楷体*/
    font-family:楷体;
    }
</style>

使用font复合属性

<style>
div {
    
    
/* font:是否倾斜是否加粗字号/行高字体;*/font: italic 700 30px/2 楷体;
</style>

使用场景:设置网页文字公共样式

复合属性:属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开。font:是否倾斜 是否加粗 字号/行高字体(必须按顺序书写)

div {
font: italic 700 30px/2楷体;
}

注意:字号和字体值必须书写,否则font属性不生效

font属性必须写字号和字体,否则属性不生效


2. 文本

2.1 文本缩进

属性名:text-indent属性值:

  • 数字+px
  • 数字+em(推荐:1em =当前标签的字号大小)
p {
text-indent: 2em;
}

2.2 文本对齐方式

作用:控制内容水平对齐方式
属性名:text-align
属性值
image.png

图片居中样例代码:

<style>div{
    
    
text-align: center;
}
</style>

<div>
<img src=" ./images/1.jpg" alt=">
</div>

2.3 文本修饰线

属性名: text-decoration
image.png

a {
text-decoration: none;
}

2.4 color文字颜色

属性名: color
属性值
image.png


调试工具的细节

  • 如果是错误的属性,有黄色叹号
  • CSS属性的前面有多选框,如果勾选:这个属性生效;如果没有勾选:这个属性不生效
相关文章
|
22天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
37 3
|
7天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
12天前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
17 3
|
19天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
17天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
17天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
27 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
23天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
24 3
|
23天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
36 2
|
1月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
1月前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
55 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
下一篇
无影云桌面