一.长度单位

1.像素 px

像素是屏幕上一个个的小正方形,我们正常看不到，需要放到最大，才能看到

px是固定的单位，px也是非常常用的单位。

2.百分比 %

相对于其父元素的宽高比，是相对单位，一般用来相应式的布局。

3.em

相对当前元素的字体大小来改变长度,如果当前元素没有设置字体大小，那么浏览器继承

祖先元素的字体大小，最终heml根标签元素的默认字体大小是16px。

4.rem

相对于根标签元素改变字体的大小，一般用来相应式的布局。

二.颜色单位

1.在css可以直接使用颜色的单位来表示不同的颜色

这种单位不推荐使用单词比较多，不好描述

2.使用RGB来表示不同的颜色

R red

G green

B blue

浓度值 0-255

3.RGBA

a 透明度 0-1之间数值

1 不透明 0 完全透明

4.使用十六进制的rgb来表示颜色，原理和上边rgb原理一样

十六进制 0-9 abcdfe

如果数值俩俩重复可以截取一位表示

常用颜色

#ccc 灰色 #eee 深灰色

#foo 红色 #0f0 绿色

#f60 棕黄色

rgb（233，97，64）

5.HSL值 HSLA值

颜色浓度

色相

亮度

透明度

三.字体的样式

1.color 设置字体颜色，也可以设置其他颜色

2.font—size 设置字体大小单位 px，

3.font-family 可以指定文字的字体

4.@font-face 自定义字体

四.字体的分类

在网页中将字体分成5大类：

serif ['serif]（衬线字体）

sans-serif（非衬线字体）

monospace （等宽字体）

cursive ['kə:siv]（草书字体）

fantasy ['fæntəsi]（虚幻字体）

可以将字体设置为这些大的分类,当设置为大的分类以后，

浏览器会自动选择指定的字体并应用样式

一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底

五.字体的其他样式

1.设置一个文字大小

 font-size: 40px;

2.设置一个字体

font-family: fantasy;

可选值：

normal 默认值文字正常显示

italic 文字斜体常用的

oblique 文字斜体

3.设置文字斜体

font-style: oblique;

可选值：

normal 默认值文字正常显示

italic 文字斜体常用的

oblique 文字斜体

4.设置文字的加粗

  font-weight: 900

可选值

normal 默认值文字正常显示

bold 加粗

100-900数值 100最细 900最粗

5.设置一个小型大写字母

font-variant: small-caps;

6. font简写

 font: bold italic 30px fantasy;

font简写必须有设置字体大小（必须倒数第二位）、设置字体（必须在倒数第一位）

六.行间距

1、行高（line height）文字占有的实际高度

可选值

1、可以直接设置大小例如50px,100px

2、可以写数值，是字体的倍数

3、可以写百分比

2、单行文本在父元素中垂直居中，把行高和高度设置一样的，

行高=上间距+文字的大小+下间距

3、font中也可以指定行高

font: 38px/2 monospace;

七.文本样式

1: text-transform 可以用来设置文本的大小写

可选值：

none 默认值正常显示

uppercase 字母大写

lowercase 字母小写

capitalize 首字母大写

2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰

可选值：

none 没有任何修饰线

underline; 加下划线

overline 加上划线

line-through 删除线

3: letter-spacing可以指定字符间距

4: word-spacing可以设置单词之间的距离

5: text-align用于设置文本的对齐方式

可选值：

left 默认值左对齐

right 右对齐

center 居中对齐

justify 两端对齐

6: text-indent 设置首行缩进

一般用em为单位

7: white-space: ; 设置网页如何处理空白

可选值：

normal 默认值文本正常显示

nowrap 不换行

8: text-overflow 文本溢出包含元素时发生的事情

ellipsis 省略号

none 默认值文本正常显示

9: text-shadow: h-shadow v-shadow blur color;

参数

1.阴影的水平位移距离必填

2.阴影的垂直位移距离必填

3.阴影的模糊半径选填默认是0px

4.阴影的颜色选填默认是根字体的颜色一样

10:vertical-align 设置元素垂直对齐的方式

1.设置图文对齐

可选值：

baseline 默认值基线对齐

bottom 下对齐

top 上对齐

middle 居中对齐

只针对图文，表格的垂直对齐

2.解决图片三像素的问题

html中的字体样式相关推荐

html中设置字体字型,html中如何在font中设置字体样式（粗体斜体等）
html> 字体加粗用<b>加粗字体:加粗用<strong>加粗字体:加粗用CSS font-weight 加粗 normal(400), bold(700) ...
java中如何设置字体样式_如何在JAVA中设置字体样式和大小？
我是新来的Java和无法弄清楚如何格式化我的代码是这样的: 字体"宋体"字体大小"9"大胆如何在JAVA中设置字体样式和大小? 我想整个段落的格式化文本.我真的 ...
【转帖】详解CSS网页布局中默认字体样式
转自:http://www.52css.com/article.asp?id=1174 浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样 ...
【黑科技】在alv中设置字体样式
使用Function Module:REUSE_ALV_GRID_DISPLAY_LVC ,设置alv中字体样式程序代码: * Include for all style values INCLUD ...
干货素材|UI设计中的字体样式的应用
无论你是做网页还是App设计,文字内容总是能占到整个版面将近80%的区域.因此理解字体与排版对UI设计师来说非常关键.你需要始终把内容的可读性放在首位去考虑和权衡你对字体与排版的选择. 字体样式字体 ...
全局vue中修改字体样式苹方字体微软雅黑亲测可用
1.下载所需要的字体,.ttf格式本文以(PingFang.ttf 为例) 底下将会附加苹果方体-简易黑体 PINGFANG MEDIUM.tff 可自行下载其他字体样式,全局引用,方便快捷. 2.在 ...
CSS中设置字体样式
CSS设置字体样式: 1.字体大小设置字体大小设置,常见的有四种不同的方法: body{ font-size:14px; } h1{ font-size:150%; } h2{ font-size: ...
HTML列表的简单使用以及在我们网页编程中的单位你了解多少？？CSS中的字体样式你又了解多少，进来康康！！HTML、CSS（三）
文章目录列表无序列表有序列表列表嵌套定义列表单位长度单位像素 px 百分比 em 颜色单位颜色名为单位 RGB值字体样式字体分类衬线字体非衬线字体(无衬线字体) 字体的其他样 ...
unity 发光字体_Unity3D 设置OnGUI中的字体样式、字体颜色、字体大小等
1:字体样式从系统盘,如C:\Windows\Fonts找一个.ttf格式的字体库,放到Assets目录下. 此时选中该字体库,在Inspector面板可以修改字体的大小,试了一下修改字体的颜色(F ...
kkfileview在docker部署后预览出现预览中的字体样式与源文件不同的解决办法
由于在docker中每个容器都是独立的,存在此问题是因为部署docker后在容器中并没有对应的字体样式,因此会出现此问题,解决此问题的办法是将系统中的字体目录映射到kkfileview启动容器中的目录 ...

html中的字体样式

一.长度单位

二.颜色单位

三.字体的样式

四.字体的分类

五.字体的其他样式

六.行间距

七.文本样式

html中的字体样式相关推荐

最新文章

热门文章