css字体样式

最新推荐文章于 2024-11-05 14:55:19 发布

Rlyya

最新推荐文章于 2024-11-05 14:55:19 发布

阅读量1.8k

点赞数 41

文章标签： html 前端

本文链接：https://blog.csdn.net/Rlyya/article/details/136511526

版权

长度单位

1:像素 px

就是屏幕中一个个发光的小点，正常情况下，是看不到，当我们将屏幕放大，就可以看到

像素是绝对单位，在pc端它是比较常用

2:百分比 %

相对单位，相对于其父元素的大小变化而变化，可以用作流式布局

3、em

相对单位，相对于当前元素的字体大小的变化而变化，

当前元素没有设置字体大小，会继承其祖先元素的字体大小,最后继承根标签的字体大小

根标签的默认字体大小是16px

4、rem

r root 根

rem 相对单位，相对于根标签的字体大小变化而变化

5、vw vh 视口的大小变化而变化

颜色的单位

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

red green,yellow,blue,black,white,pink ，gray ·····

一方面不好记，另一方面不好描述，所以这种方式简单实用

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

rgb（red,green,blue）,用红绿蓝三种颜色不同的浓度比值勾兑新的颜色

浓度值：0-255之间，0表示最小，255表示最大

3:RGBA

rgba（red,green,blue,alpha）

alpha :透明度 0-1之间，0表示透明，1表示不透明

其他跟rgb一样

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

通过十六进制的表示方式，去表示红色，绿色，蓝色的颜色浓度比值，比值也在0-255之间

0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

255 == ff

0 == 0

125 == ??

语法：#红色绿色蓝色

rgb（255，0，0） ==#ff0000 ==#f00

rgb(0,255,0)== #00ff00 == #0f0

rgb(0,0,255)== #0000ff ==#00f

像上述两两重复，可以省略一位

字体的样式

1:color 设置字体颜色,也可以设置其他颜色

2:font-size

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

4:@font-face 自定义字体

  <style>
    /* 自定义字体 */
    @font-face {
      /* 给自定义字体起名字 */
      font-family:'yiyi' ;
      /* 自定义字体的路径 */
      src: url(./字体/ZCOOLKuaiLe-Regular.ttf);
    }

    p{
      color: #00f;
      font-size: 30px;
      /* 应用自定义字体 */
      font-family:'yiyi';
    }
  </style>

字体的分类

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

serif ['serif]（衬线字体）

sans-serif（非衬线字体）

monospace （等宽字体）

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

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

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

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

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

字体的其他样式

font-family:;设置字体

font-style:;设置文字斜体

可选值：

normal 文字正常显示默认值

italic 文字斜体

oblique 文字斜体

font-weight: ;设置文字的加粗

可选值：

normal 文字正常显示默认值

bold 文字加粗

bolder 文字加粗

100-900 100最细，900最粗

字体简体

注意：

1、必须要设置字体大小，和字体

font：字体大小字体；

2、字体大小必须在倒数第二位，字体必须在倒数第一位

font: italic bold 40px sansif;

行间距

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

行高=上间距+字体大小+下间距

上间距 = 下间距

line-height:; 设置行高

可选值：

大小 100px

数值是当前字体大小的倍数，如果当前字体没设置字体大小，会继承其祖先元素的字体大小，直到继承html默认的字体大小

百分比是当前字体大小的百分比

2、单行文本在父元素中垂直居中

可以设置文本的行高跟父元素的高度一致

行高也是可以被继承的样式

3、font中也可以指定行高

font:字体大小/行高字体；

文本样式

去除默认样式

内边距设置为0

padding: 0;

外边距设置为0

margin: 0;

去除列表项符号

list-style: none;

布局要点：先整体后局部，先大后小，先上后下，再从左往右

去除下划线

text-decoration: none ；

下划线

text-decoration:underline;

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

可选值：

none 文本正常显示默认值

uppercase 字母变大写

lowercase 字母变小写

capitalize 单词首字母大写

2: text-decoration 可以用来设置文本的修饰

可选值：

none 文本正常显示默认值

underline 加下划线

overline 加上划线

line-through 删除线

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

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

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

可选值：

left 文本靠左对齐默认值

center 文本居中对齐

right 文本靠右对齐

注意：文字要有可以活动的空间，否则设置没有效果

6: text-indent 设置首行缩进

text-indent :;

可配合隐藏元素

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

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

 /* 单行文本省略号 */
        width: 400px;
        background-color: #bfa;
        /* 文本不换行 */
        white-space: nowrap;
        /* 超出文本以省略号的形式存在 */
        text-overflow: ellipsis;
        /* 裁剪多余文本 */
        overflow: hidden;

查一下多行文本省略号如何写

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

参数

h-shadow 控制阴影水平位移距离正值，向右；负值，向左必写

v-shadow 控制阴影垂直位移距离正值，向下；负值，向上必写

blur 模糊半径，值越大，越模糊可选默认是0px

color 一般可用rgba 可选，默认是字体的颜色