关于css字体样式的重要知识点

qq_47651772

于 2022-11-23 18:20:42 发布

阅读量219

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_47651772/article/details/127993260

版权

一、长度单位

1:像素 px

就是电脑屏幕上的一个个发光的小点，我们眼睛是看不出来,

像素是我们pc端最常用的一个单位，它是一个固定单位

2:百分比 %

是父元素的宽高的百分比，是一个相对单位，会随着父元素宽高的变化而变化

一般情况下，做流式布局比较多

3、em

也是一个相对单位，相对于当前元素的字体大小来计算最终大小，

也就是1em=1个font-size。如果当前的元素没有设置字体大小，那么会继承祖先元素的字体大小，最终继承到html默认的字体大小，是16px。

4、rem

r root 根

也是一个相对单位，相对于根标签html的字体大小来计算最终大小

也就是1rem=1个html的font-size

二、颜色的单位

1:在CSS可以直接使用颜色的单词来表示不同的颜色

red、green、yellow、blank等

缺点：颜色单词太多了，不好描述

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

rgb(红色，绿色，蓝色)

颜色的值 0-255之间 0最小，255最大

直接用电脑或插件可以吸取颜色的比值，ctrl+alt+a

3:RGBA

rgba(red, green, blue, alpha)

alpha 透明度 0-1之间设置透明度 0是透明，1是不透明

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

十六进制：0-9abcdef，

00表示最小，代替0-255的0，ff表示最大，代替0-255的255

用十六进制的值来表示0-255之间的数值，表示红色，绿色，蓝色的浓度

语法：#ff0000，像这样两两重复的表示，可以省略一位，简写成#f00

#f0f0f0 这样的是不可以省略

例子：#f00 #0f0 #00f #ccc #eee #333

5:HSL值（H - 色相 0-360,S - 饱和度 0-100%,L - 亮度 0-100%）

HSLA值 A - alpha 透明度 0-1之间

三、字体的样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  <!--
	1:color      设置字体颜色,也可以设置其他颜色
	2:font-size    设置字体大小
	3:font-family  可以指定文字的字体
	4:@font-face   自定义字体
	-->
  <style>
    /* 第一步：自定义字体 */
    @font-face {
      /* 你给字体起的名字 */
      font-family:'xiyangyang' ;
      /* 字体引入路径 */
      src: url(./字体/MeowScript-Regular.ttf);
    }
    p

最低0.47元/天解锁文章

qq_47651772

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css字体样式的重要知识点

可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式，一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底。00表示最小，代替0-255的0，ff表示最大，代替0-255的255。5:HSL值（H - 色相 0-360,S - 饱和度 0-100%,L - 亮度 0-100%）（2）、直接写倍数，1/2/3/4/5····，是当前字体大小的倍数。用十六进制的值来表示0-255之间的数值，表示红色，绿色，蓝色的浓度。
复制链接

扫一扫