3.字体样式-CSS基础
一、字体样式
1.常用的字体样式属性
属性 |
说明 |
---|---|
font-family |
字体类型 |
font-size |
字体大小 |
font-weight |
字体粗细 |
font-style |
字体风格 |
color |
字体颜色 |
可以看到,大部分字体样式属性是以
font
为前缀,font
意思就是字体。
二、font-family(字体类型)
我们常说的宋体、楷体等就是字体类型。 在
CSS
中,使用font-family
属性定义字体类型。
1.语法格式
<style type="text/css">
font-family: 字体1,字体2,字体3,...,字体N;
</style>
(1)说明
可以看大,
font-family
可以有多个属性值,也就是指定了多种字体,使用字体时按从左到右的顺序排列,以英文逗号隔开。
① font-family的默认值
若不指定
font-family
,则浏览器通常默认使用宋体。
(2)属性值与双引号
若字体类型的属性值只有一个英文单词时,则不需要加上双引号;若是多个英文单词或中文,则需要加上双引号。
(3)多个属性值
电脑上安装的字体不尽相同,可能有些字体安装了,有些字体没有安装。 通过指定多个属性值,来优先使用第一个属性值,若是第一个属性值没有安装,则使用第二个属性值,依此类推,若是指定的多个属性值都没有安装,则会使用默认字体类型。
(4)实际开发
在实际开发中,美观的中文字体通常使用
宋体、微软雅黑
;美观的英文字体有Times New Roman、Arial、Verdana
。
三、font-size(字体大小)
在
CSS
中,使用font-size属性
来定义字体大小。
1.语法格式
<style type="text/css">
font-size: 像素值;
</style>
(1)说明
font-size属性
取值有2种:
- 关键字:如small、medium、large等。
- 像素值:如16px等。
① 实际开发
在实际开发中,关键字这种方式基本不会用,所以我们掌握像素值即可。
(2)px像素值
关于px是什么,请看我的另一篇文章
01-CSS基础
。
四、font-weight(字体粗细)
在
CSS
中,使用font-weight属性
来定义字体粗细。 注意,字体粗细跟字体大小是完全不一样的,可千万不要弄混了,粗细指“肥瘦”,大小指“宽高”。
1.语法格式
<style type="text/css">
font-weight: 取值;
</style>
(1)说明
font-weight属性
取值有2种:
- 一种是
100~900
的数值。 - 另一种是关键字。
(2)属性值
属性值 |
说明 |
---|---|
normal |
正常(默认值) |
lighter |
较细 |
bold |
较粗 |
bolder |
很粗 |
① 实际开发
在实际开发中,一般只会使用到
bold
这一个属性值,其它的基本用不上。
② 属性值为数值
font-weight属性
的值可以是100~900
的数值。 其中,100相当于lighter,400相当于normal,700相当于bold,900相当于bolder。
Ⅰ.实际开发
在实际开发中,不建议使用数值作为
font-weight属性
的值。
五、font-style(字体风格)
在
CSS
中,可以使用font-style属性
来定义斜体效果。
1.语法格式
<style type="text/css">
font-style: 取值;
</style>
(1)说明
font-style属性
取值有2种:
- 关键字:如small、medium、large等。
- 像素值:如16px等。
(2)属性值
属性值 |
说明 |
---|---|
normal |
正常(默认值) |
italic |
斜体 |
oblique |
斜体 |
(3)示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>字体样式</title>
<style type="text/css">
#p1{
font-style: normal;
}
#p2{
font-style: italic;
}
#p3{
font-style: oblique;
}
</style>
</head>
<body>
<p id="p1">font-style取值为normal</p>
<p id="p2">font-style取值为italic</p>
<p id="p3">font-style取值为oblique</p>
</body>
</html>
font-style示例1.png
① italic与oblique的区别
从上图可看到,italic与oblique的效果是一样的。 其实,
italic
是字体的一个属性,但并不是所有的字体都有italic属性
。 对于有italic属性
的字体,我们可使用font-style: italic;
,但对于没有italic属性
的字体,只能使用font-style: oblique;
来实现。
(4)实际开发
在实际开发中,
font-style属性
很少用到。
六、color(字体颜色)
在
CSS
中,可以使用color属性
来定义字体颜色。
1.语法格式
<style type="text/css">
font-style: 颜色值;
</style>
(1)说明
color属性
取值有2种:
- 关键字:如small、medium、large等。
- 16进制RGB值:如16px等。
① 关键字
关键字就是颜色的英文名称。
② 16进制RGB值
在开发中,单纯靠关键字满足不了实际开发需求,因此引入了
16进制RGB值
。16进制RGB值
类似于#00FFFF形式的值。
Ⅰ.获取16进制RGB值
常用的有2种方法:
- 在线工具。
- Color Picker。
Ⅱ.2个重点色值
对于
16进制RGB值
有2个重点色值需要重点记忆:
- 000000:黑色
- FFFFFF:白色
- 实现WebSocket和WAMP协议的开源库WampSharp
- Centos下部署DRBD+NFS+Keepalived高可用环境记录
- jQuery方法position()与offset()区别
- 温故而知新:设计模式之桥接模式(Bridge)
- 温故而知新:设计模式之装饰模式(Decorator)
- 域名“宝贝”baby.cn以71万元价格结拍
- 温故而知新:设计模式之组合模式(Composite)
- ruby学习笔记(7)-闭包
- ruby学习笔记(6)-Array的使用
- centos7下部署iptables环境纪录(关闭默认的firewalle)
- ruby学习笔记(5)-模块module的运用
- linux系统root密码遗忘的情况下的解决办法
- ruby学习笔记(4)-动态修改类的属性
- 如果技术是一种生命
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 一致性哈希的golang实现
- Array - 75. Sort Colors
- Array - 309. Best Time to Buy and Sell Stock with Cooldown
- Array - 55. Jump Game
- 【技术创作101训练营】超简单的公司Git+个人Git共存方式
- css高度坍塌与清除浮动
- 无缝切换在线升级的终极探索
- promise详解
- Vuex是怎样进行状态管理的
- Matplotlib玩转动态可视化
- JavaScript类型判断的四种方法
- Markdown基础语法
- 仿bilibili弹幕样式的404页面
- JS中的原型和原型链
- 一文看懂 Pandas 中的透视表