html字体相关知识
一、长度单位
1:像素 px
实际上是屏幕上的一个个小点，100px，100个小点，这个点，正常情况我们是看不到，
如果我们把一个内容放大很多倍，就可以看到了，
在pc端（电脑端），一般情况下1px=1个发光点。
也是我们最常用的长度单位，它是固定单位
2:百分比 %
相对单位，它是相对于其父元素内容区（width/height）宽高
子元素的大小会随着父元素的大小变化而变化，我们管这种大小布局，叫流式布局
3:em
相对单位，它是相对于其父元素内字体大小而设置的，也就是1em=父元素1个font-fize，
如果父元素没有字体大小，它就会继承祖先元素的字体大小，如果祖先元素没有设置，
就会继承根标签（html）的默认的字体大小，也就是16px
4:rem
r root
相对单位，它是只相对于根标签（html）的字体大小而设置，也是1rem=1个html的font-size
html的默认字体大小是16px，有些浏览器有最小的字体大小，一般是10-12px
5:vw
viewport width 视口的宽度
6:vh
viewport heigth 视口的高度
二、颜色的单位
1:在CSS可以直接使用颜色的单词来表示不同的颜色
red,green,yellow等，一些简单的颜色，可以用英文单词
但它不是很方便，一则单词太多，二则颜色也不好描述,三则：太low
2:使用RGB值来表示不同的颜色
rgb（red，green，blue） 浓度0-255
这个比值不需要记，一般是设计师设计好，或者直接吸取颜色
3:RGBA
rgba(red, green, blue, alpha)
alpha 透明度 0-1之间
0是透明，1是不透明
4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样,只不过表示的方式不一样
rgb（200，100，80）
0-9abcdef 16个数字
语法：#红色的浓度绿色浓度蓝色的浓度
#7f2eaa
00 表示最小 0
ff 表示最大 255
红色、绿色、蓝色用两位十六进制表示，如果两位十六进制是一样的，可以省略一位
#ff0000 可简写#f00
#f0f0f0 不可简写
常用的16进制颜色：#f00,#0f0,#00f,#ccc灰色，#f60 橘色，#000 ,#fff
5:HSL值 HSLA值（了解）
HSLA值（色度，饱和度，亮度，透明度）
三、字体的样式
1:color 设置字体颜色,也可以设置其他颜色,例如边框的颜色等
2:font-size 设置字体的大小,注意不同的单位px，em，rem
3:font-family 可以指定文字的字体 设计师也会提前设计好
4:@font-face 自定义字体
四、字体的分类
在网页中将字体分成5大类：
serif ['serif]（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive ['kə:siv]（草书字体）
fantasy ['fæntəsi]（虚幻字体）
可以将字体设置为这些大的分类,当设置为大的分类以后，
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底
五、字体的其他样式
设置一个文字大小
font-size: 30px;
设置一个字体
font-family: Arial, Helvetica, sans-serif;
设置文字斜体
font-style
可选值：normal 文字正常显示
italic 文字斜体 比较常用
oblique 文字斜体
font-style:oblique;
.p2{
color: red;
设置文字的加粗
font-weight
可选值:
normal 文字正常显示 默认值
bold/bolder 文字加粗
100-900之间的数值 100是最细，900最粗
font-weight:700;
设置一个小型大写字母
font-variant: ;
可选值：
normal 文字正常显示 默认值
small-caps 字母小型大写字母
font 可以同时设置以上所有的字体相关的样式，颜色不可以
注意：
1、必须有字体大小和字体
2、字体必须在倒数第一位，字体大小必须在倒数第二位
html字体相关知识相关推荐
- 「css基础」关于字体相关的基础知识（一）
常言道网页设计的好坏,95%取决于字体的排版.尽管现在抖音.小视频和游戏的盛行,其占据了我们大部分的业余时间,但是还是有大部分人在网络上进行阅读,比如查阅资料,阅读小说.看新闻.知识学习之类. 舒适的 ...
- [css] 举例说明跟字体相关的属性有哪些
[css] 举例说明跟字体相关的属性有哪些 font-size:字体大小 font-weight:字体粗细 font-family:字体类型 color:字体颜色 等等 个人简介 我是歌谣,欢迎和大家 ...
- [项目过程中所遇到的各种问题记录]编辑器篇——FCKeditor相关知识及各种常见使用问题...
马上2010年就要结束了,所以这几天准备花点时间把这一年中在开发过程中遇到的问题及解决方案记录下来,以备日后使用,目前先规划了:编辑器篇(仅针对asp.net开发中的fckeditor).图表篇(wi ...
- 工业视觉系统相关知识和选型介绍（一）：相机篇
工业视觉系统相关知识和选型介绍(一):相机篇 一.工业视觉系统 二.工业相机 三.关键名词解释 四.工业相机选型 五.工业相机品牌 六.相机选型实例 一.工业视觉系统 1.机器视觉就是用机器代替人眼来 ...
- 北大青鸟培训第一天：HTML初级代码介绍和相关知识（持续更新）
代码解释 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
- HTML入门基础教程相关知识
HTML入门基础教程 html是什么,什么是html通俗解答: html是hypertext markup language的缩写,即超文本标记语言.html是用于创建可从一个平台移植到另一平台的超文 ...
- matplotlib中关于画布的相关知识总结
[前言]: 1.在上一篇文章中,我们讲述了如果画一些简单的图表,比如:柱状图.条形图.饼图等等. 2.这篇文章就来一些干货,总结一下关于画布的相关知识,以及如何创建多个子图. fihure() 函数 ...
- 复习Java第二个项目仿QQ聊天系统 03（两种通信类、登录以及注册功能完善） Java面试题并发编程相关知识生活【记录一个咸鱼大学生三个月的奋进生活】025
记录一个咸鱼大学生三个月的奋进生活025 复习Java(仿QQ聊天系统03两种通信类.登录以及注册功能完善) TcpSocket类(与服务器进行通信) Server类(服务器类) TcpMessage ...
- HTML 中表格table 的相关知识
<table>标签中比较少见的属性和子标签: summary 属性:用于概括整个表格的内容.它对于搜索引擎的机器人记录信息十分重要. bordercolor 属性:用来设置表格边框的颜色. ...
最新文章
- android textview改变部分文字的颜色和string.xml中文字的替换及部分内容设置颜色、字体、超链接、图片...
- PHPStorm+XDebug进行调试
- C++ Primer 5th笔记（7）chapter7 类：编译相关
- CentOS下python-mysqldb安装
- linux关闭时间戳是否有影响,linux – 如何让sec正确忽略时间戳
- Handler（2）
- dj鲜生-通过邮箱发送加密的激活链接
- 贪心——无重叠区间(Leetcode 435)
- Puppet基础篇7-编写第一个完整测试模块puppet
- Mysql8.0.12解压版安装亲测（步骤超级简单）
- Labview学习笔记（一）
- day22 正则表达式 re
- 将.class文件反编译为.java文件
- 回顾2017、展望2018
- socket:read: Connection reset by peer
- 曾经大肆其道的电商返利APP，其运营策略你真的清楚吗，一文带你读懂返利APP的竞品分析
- 电压和电流的参考方向
- str.substring(0,str.length() -1)用法
- 认认真真几个高质量人工智能方向的原创公众号
- 啊哈C——学习4.4一起来找茬