css基础—字体那些事

news/2024/2/29 4:16:18

css基础—字体那些事

1. 首先讲字的大小样式等

  • 字体大小 font-size: 40px;
  • 文字字体 font-family: "宋体",Arial;
  • 文字样式 font-style:normal;

        -normal:正常字体-italic,oblique:斜体
  • 字体加粗 font-weight: bold;
  • 每行所占高度(行高) line-height: 50px;

疑问一: 文字字体怎么会同时写两个值?
解答:
是首选和备选的关系,不只可以写两个,还可以写多个。放在第一个位置的是首选,后面的是备选。因为网页中可能存在中英文,中英文的字体样式不同。
font-family:首选,备选1,备选2.....

注意:当网页上存在中文和英文的时候。要首先写英文字体,在写中文字体。因为中文字体库包含英文,英文字体库不包含中文。

疑问二:行高是什么?用来干什么的?
解答:转答案在这里,别人的博文和再看一篇会更懂,也是别人的博客
line-height用来控制文字垂直方向上的位置。


2. 字体相关属性

  • 字体颜色 color:red;
  • 首行缩进 text-indent: 2em;或者 text-indent: 32px;
  • 文本水平方向对齐 text-align:文本对齐

    - 属性值有3个:left,center,right。
    - 只能靠左,居中,靠右。
    - 上下移动目前可以使用line-height.
  • text-decoration:文本修饰

    • underline 下划线
    • line-through 删除线
    • overline 上划线
    • none 无
  • 字间距:letter-spacing:10px;
  • 词间距:word-spacing:10px;
  • 字间距+词间距:
    letter-spacing:10px;和word-spacing:10px;共同使用
  • 强制换行:word-break:break-all;
    由于中文会强制换行,但是因为英文和数字不会强制换行。

    英文和数字不会自动换行

    <!--强制换行--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;border: 1px solid red;}#box1{width: 300px;height: 300px;border: 1px solid red;word-break:break-all;}</style></head><body><div id="box">dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111</div><div id="box1">dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111</div></body><!--英文和数字不能强制换行强制换行word-break:break-all;--></html>
    
  • 强制不换行:white-space:nowrap;
    点击查看强制不换行

注意:词间距的使用

eg:
1.我爱学习
2.我 爱 学习

对这两个写样式词间距的样式。只有2起作用。因为浏览器无法自动识别那些是词,给了空格才知道。

查看词间距使用效果

 <!--词间距--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#box1, #box{width:800px;height:50px;border: 1px solid pink;color:red;font: 16px "宋体";word-spacing: 10px;}</style></head><body><div id="box">我 爱 学习</div><div id="box1">我 爱 学习</div></body><!--word-spacing: 表示词间距;使用词间距前:我空格-爱空格-学习使用词间距后:我空格-10px-爱空格-10px-学习--></html>

词间距和字间距同时使用时,注意实际效果:
eg:我 爱 学 习。设置字间距为20px,词间距为50px。
实际效果为:
我-20px-空格-20px-50px-爱

词间距和字间距共同使用的效果

<!--字+词间距-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width:800px;height:50px;border: 1px solid pink;color:red;font: 16px "宋体";letter-spacing: 50px;}#box1{width:800px;height:50px;border: 1px solid pink;color:red;font: 16px "宋体";word-spacing: 50px;}#box2{width:800px;height:50px;border: 1px solid pink;color:red;font: 16px "宋体";word-spacing: 50px;letter-spacing: 20px;}</style>
</head>
<body>
<!--只使用字间距-->
<div id="box">我爱学习</div>
<!--只使用词间距-->
<div id="box1">我 爱 学 习</div>
<!--同时使用字间距和词间距-->
<div id="box2">我 爱 学 习</div>
<!--box2:字+词间距我-20px-空格-20px-50px-爱
-->
</body>
</html>

https://www.jiucaihua.cn/news/show-1587147.html

相关文章

Java DES 加密和解密源码

2019独角兽企业重金招聘Python工程师标准>>> Java密码学结构设计遵循两个原则: 1) 算法的独立性和可靠性。 2) 实现的独立性和相互作用性。 算法的独立性是通过定义密码服务类来获得。用户只需了解密码算法的概念,而不用去关心如何实现这些概念。实现的独立性和相互…

Python-Matplotlib 1 Introduce ENV

Python-Matplotlib 1 Introduce & ENV 转载于:https://www.cnblogs.com/zsr0401/p/6404510.html

常用Maven仓库建设

2019独角兽企业重金招聘Python工程师标准>>> 1、设计原理图 1.1、局域网电脑需要maven构件时&#xff0c;发现本地仓库无此稳定版本构件时到局域网私服下载&#xff08;开发版本的构件&#xff0c;无论何时都到私服上检验时间戳&#xff0c;使用最新的开发版本&…

【问一问】消息队列

为什么使用消息队列&#xff1f; 1. 异步 有些业务场景对实时性要求没有那么高&#xff0c;可以通过消息队列实现业务处理上的异步化&#xff0c;提高系统的并发处理能力。 2. 解耦 如果A、B、C均关注D的数据变动&#xff0c;如果采用推送的方式&#xff0c;我们需要逐个推送…

Hibernate 注解(Annotations 二)一对一双向注解

注解&#xff08;Annotation&#xff09;&#xff0c;也叫元数据。一种代码级别的说明。它是JDK1.5及以后版本引入的一个特性&#xff0c;与类、接口、枚举是在同一个层次。它可以声明在包、类、字段、方法、局部变量、方法参数等的前面&#xff0c;用来对这些元素进行说明&…

osgi应用使用桥接的方式打成war包部署在websphere上时遇到的与cxf相关的问题

原来我们的程序都是基于Equinox架构的&#xff0c;可是后面由于要实现打成war包在中间件中部署的需求&#xff0c;使用了eclipse官方提供的桥接方式实现。 桥接的部分后面有时间了我专门写一个文章来说&#xff0c;不明确的临时请參考eclipse官方文档。这里主要说一下已经桥接成…

mySQL 教程 第2章 安装和介绍mySQL

第2章 安装和介绍mySQL 设置mySQL字符集 支持中文的字符集是utf8&#xff0c;该设置可以更改mySQL配置文件进行全局设置&#xff0c;也可以针对数据库设置&#xff0c;也可以针对表设置&#xff0c;也可以针对列设置。字符集更改后新插入的数据生效&#xff0c;对以前不生效。 …

【青藤之恋】高斯模糊之毛玻璃效果

有人比较好奇青藤之恋毛玻璃是怎么实现的&#xff1a; <p>原生图像</p> <img src"https://gimg2.baidu.com/image_search/srchttp%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F042421135351%2F210424135351-1-1200.jpg&referhttp%3A%2F%2Fimg.jj20.…

Android------分享45个android实例源码,很好很强大(转发)

分享45个android实例源码&#xff0c;很好很强大&#xff08;转发&#xff09; [复制链接]铁雪1 主题 0 好友 216 积分Android男爵 该用户从未签到 下载豆5发消息 电梯直达楼主 发表于 2012-3-29 17:25:15|只看该作者|倒序浏览http://www.apkbus.com/android-20978-1-1.htmlan…

oracle job定时执行存储过程

JOB定时跑插入语句1、建插入数据的存储过程create or replace procedure report_web asV_START_DATE DATE;V_END_DATE DATE;beginV_START_DATE : TRUNC(SYSDATE) - 1;V_END_DATE : TRUNC(SYSDATE);begininsert into report_web_doctorHMPselect * from report_web_doctor a…
最新文章