零基础CSS入门教程(8)——CSS设置字体

news2024/12/25 0:44:27

本章目录

    • 1.任务目标
    • 2.css设置字体
    • 3.代码演示
    • 4.小结

1.任务目标

我们前几个小结学习了,css的选择器,和及基本的改变字体颜色。我们这一小结学习一下设置字体的一些功能

2.css设置字体

(1)font-size这个是设置字体大小,浏览器一般默认字体是16px
(2)font-weight 这个是字体加粗和html字体加粗一样效果正常是400或写normal 加粗值是700或写bold
(3)font-style是设置字体倾斜和html字体倾斜一样效果,倾斜写italic,不倾斜写normal
(4)font-family可以设置字体形式 在后面加sans-serif是无衬线字体写这个墓地为了要是电脑没安装字体他就可以随机给你定义一个无衬线字体,还有serif有衬线字体和monosspace等宽字体

3.代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
div{
    /* font-size这个是设置字体大小,浏览器一般默认字体是16px   */
    font-size: 20px;
    /* font-weight 这个是字体加粗和html字体加粗一样效果正常是400或写normal 加粗值是700或写bold*/
    font-weight: 700;
    /*font-style是设置字体倾斜和html字体倾斜一样效果,倾斜写italic,不倾斜写normal*/
    font-style: italic;
    /*font-family可以设置字体形式 在后面加sans-serif是无衬线字体写这个墓地为了要是电脑没安装字体他就可以随机给你定义一个无衬线字体,还有serif有衬线字体和monosspace等宽字体*/
    font-family: 宋体,黑体, sans-serif;
}
    </style>
</head>
<body>
    <div>你好啊</div>
</body>
</html>

效果如下
在这里插入图片描述

4.小结

我们本小结学习了如何设置字体,再css里面设置字体很常用的,我们要熟练使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/71755.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

剪映专业版常用快捷键(Pr 习惯)

剪映专业版提供了两组常用快捷键&#xff0c;一组适应 Final Cut Pro X 用户的习惯&#xff0c;另一组则是为了适应 Adobe Premiere Pro 用户的习惯。本文列出了剪映专业版&#xff08;v3.6&#xff09;的常用快捷键&#xff0c;以让 Pr 用户快速上手剪映。时间线相关快捷键分割…

无接触体征监测的技术和应用

近年来&#xff0c;由于传感器和微电子技术的飞速发展&#xff0c;基于智能传感器的无接触体征监测技术成为研究热点。尤其是近年来传感器技术和人工智能算法的不断创新&#xff0c;使人们在对人体生理、生化参数等进行监测时能够达到实时、精确和智能化的目的。 智能传感器主要…

软件设计师教程(三)计算机系统知识-计算机体系结构

软件设计师教程 软件设计师教程&#xff08;一&#xff09;计算机系统知识-计算机系统基础知识 软件设计师教程&#xff08;二&#xff09;计算机系统知识-计算机体系结构 安全性、可靠性与系统性能评测基础知识软件设计师教程计算机安全概述计算机的安全等级安全威胁影响数据…

Linux进程的创建

fork是一个系统调用&#xff0c;系统调用的流程&#xff0c;流程的最后会在sys_call_table中找到相应的系统调用sys_fork。&#xff0c;sys_fork的定义如下&#xff1a; SYSCALL_DEFINE0(fork) { ......return _do_fork(SIGCHLD, 0, 0, NULL, NULL, 0); }sys_fork会调用_do_fo…

web大作业:基于html+css+javascript+jquery实现智能分控网站

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

c语言数据结构---链表

我喜欢我的懦弱&#xff0c;痛苦和难堪也喜欢。喜欢夏天的光照&#xff0c;风的气息&#xff0c;蝉的鸣叫&#xff0c;喜欢这些&#xff0c;喜欢得不得了。 ——村上春树《寻羊冒险记》 1.对链表的理解 2.链表每个节点的创建 3.输出链表 链表&#xff1a;顾名思义&#xff0c…

Redis-全面详解(学习总结---从入门到深化)

Redis概述_为什么要用NoSQL 单机Mysql的美好年代 在90年代&#xff0c;一个网站的访问量一般都不大&#xff0c;用单个数据库完全可以轻松应付。在那个时候&#xff0c;更多的都是 静态网页&#xff0c;动态交互类型的网站不多。 遇到问题&#xff1a; 随着用户数的增长&#…

centos7搭建DHCP服务器,实现上网

环境如下&#xff1a; 三台主机&#xff0c;一台centos7&#xff0c;当DNS服务器&#xff0c;一台centos7测试&#xff0c;一台window10测试。 版本centos7.6 三者都是在vmnet8环境下 centos7&#xff08;dns服务器&#xff09;&#xff1a;192.168.139.200 centos&#x…

2小时开发《点球射门游戏》,动画演示思路(下),代码已开源

前沿 首选感谢各位对我这边文章(2小时开发《点球射门游戏》&#xff0c;动画演示思路&#xff08;上&#xff09;&#xff0c;代码已开源&#xff09;的点赞、收藏与支持&#xff0c;今天在这里主要是接上一篇文章&#xff0c;讲一讲游戏界面中的一些动画与逻辑的实现&#xf…

SpringBoot + Elasticsearch 实现模糊查询,批量CRUD,排序,分页,高亮!

一、引入依赖 当前Elasticsearch服务端的版本为8.5.1,此处Spring Data Elasticsearch的版本为2.6.1 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId><version&…

Java中不能在foreach中进行元素的remove和add操作

参考文献&#xff1a;https://juejin.im/post/6844903794795347981 在阿里巴巴Java开发手册中&#xff0c;有这样一条规定&#xff1a; 但是手册中并没有给出具体原因&#xff0c;本文就来深入分析一下该规定背后的思考。 foreach循环 以下实例演示了 普通for循环 和 foreach…

安卓APP源码和设计报告——健身系统

一、设计背景 1.需求分析 对于很多人来说拥有一副好身材能让自己增添不少魅力;对于爱吃而又担心自己发胖的人来说适当的运动健身是最好的选择。移动互联网时代&#xff0c;市场上“约跑”“约健身”健身APP软件成为新时代闺蜜朋友的互动模式&#xff0c;健身热潮的来临&#…

客快物流大数据项目(九十三):ClickHouse的ReplacingMergeTree深入了解

文章目录 ClickHouse的ReplacingMergeTree深入了解 一、创建ReplacingMergeTree表的说明 二、创建ReplacingMergeTree引擎的表

主成分分析 (PCA) 和独立成分分析 (ICA)附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步进步&#xff0c;matlab项目目标合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信息&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算…

某乎x-zse-96

看到有读者咨询知乎x-zse-96,简单做一下分析和记录。 版本:“x-api-version”:“3.0.91”,“x-zse-93”:“101_3_3.0” 随便找了一个搜视频接口 /api/v4/search_v3 经测试发现,目前请求必带的参数有headers 中的x-zse-96、x-zse-93、x-api-version 和 cookie中的d_c0。 …

聊一聊责任链模式

将一堆“事情”串联在一起&#xff0c;有序执行&#xff0c;就叫责任链 一、概述 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是将链中每一个节点看作是一个对象&#xff0c;每个节点处理的请求均不同&#xff0c;且内部自动维护一个下一节点对象。当…

【数据结构】图算法和LRUCache

文章目录最小生成树1.最小生成树概念2.Kruskal算法3.Prim算法最短路径算法单源最短路径--Dijkstra算法单源最短路径--Bellman-Ford算法多源最短路径--Floyd-Warshall算法LRUCacheLRUCache实现源码地址最小生成树 1.最小生成树概念 连通图中的每一棵生成树&#xff0c;都是原图…

软硬协同:基于倚天的视频云编码性能升级

算力时代&#xff0c;靠吃「硬件红利」便能搞定新应用场景的「甜蜜期」已经过去。人类社会的每一次科技跃迁&#xff0c;其本质都是计算力的突破与演进。 算盘拨出农耕文明的繁荣&#xff0c;机械计算机催生出第一次工业革命的袅袅蒸汽&#xff0c;而云计算的发展让万物互联成…

Spark零基础入门实战(二)Scala基础之数据类型

在Scala中,所有的值都有一个类型,包括数值和函数。如图1-4所示,说明了Scala的类型层次结构。 Any是Scala类层次结构的根,也被称为超类或顶级类。Scala执行环境中的每个类都直接或间接地从该类继承。该类中定义了一些通用的方法,例如equals()、hashCode()和toString()。…

【畅购商城】微信支付之支付模块

目录 支付页面 接口 后端实现 ​​​​​​​前端实现​​​​​​​ ​​​​​​​支付页面 步骤一&#xff1a;创建 flow3.vue组件 步骤二&#xff1a;引入第三方资源&#xff08;js、css&#xff09; <script> import TopNav from ../components/TopNav impor…