css字体样式

最新推荐文章于 2025-12-12 11:10:07 发布

原创最新推荐文章于 2025-12-12 11:10:07 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

一、长度单位

像素px

其实就是一个个发光的小点，肉眼是看不到的，这也是我们现阶段最常用的单位,而且是个固定（绝对）单位。

百分比%

它是个相对单位，相对于其父元素的宽度变化而变化，一般情况可以用来做流动式布局。

也是个相对单位，它相对于自身字体大小的变化而变化，如果自身没有设置字体大小，就会继承其父元素或者祖先元素的字体大小，直到继承根标签（html）的字体大小,如果根标签没有设置字体大小，html根标签默认的字体大小是16px

也是个相对单位，它是相对于根标签（html）标签的字体大小变化而变化,如果根标签没有设置字体大小。

二、颜色单位

前言：在CSS可以直接使用颜色的单词来表示不同的颜色

red green yello black等等

但不同的颜色单词种类繁多，也不好拼写，不好描述，所以不推荐使用

1、使用RGB值来表示不同的颜色

语法： rgb(red, green, blue)

分别以红色，绿色，蓝色三种颜色为基本色，根据不同的浓度值来勾兑出不同的颜色

浓度的范围：0-255，0最小的，255最大的

获取颜色：来到截屏的模式，将鼠标箭头对准你要的颜色，然后进行提取即可，

注意提取的颜色格式，不一定是rgb语法，也有可能是16进制的写法

2、RGBA

语法：rgba(red, green, blue, alpha)

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

3、使用十六进制的rgb值来表示颜色

语法：#红色浓度绿色浓度蓝色浓度

浓度值也是0-255，只不过用16进制的写法

十六进制：0-9abcdef

例如：#00ff00,像这种两两重复的写法，可以省略一位，简写#0f0

#0f0f0f,像这种就不可以简写

4、HSL值 HSLA值

语法：hsl(hue, saturation, lightness);

语法：hsla(hue, saturation, lightness, alpha)

三、字体样式

1、字体引入方式

@font-face {

你给字体起的名字

font-family: "name";

自定义字体的路径

src: url(./where); }

p {

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

color: #999;

(2)、font-size 设置字体的大小

font-size: 2rem;

(3)、font-family可以指定文字的字体

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

(4)、@font-face可以自定义使用非电脑自带字体

2、使用步骤

（1）、先自定，设置好字体

（2）、去使用即可

四、字体分类

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

1、 serif （衬线字体）

2、 sans-serif（非衬线字体）

3、 monospace （等宽字体）

4、 cursive（草书字体）

5、 fantasy（虚幻字体）

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

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

一般会将字体的大分类，指定为font-family中的最后一个字体,用来确保样式生效。

五、字体的其他样式

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .p1{
                color: #999;
                /* 设置一个文字大小 */
                font-size: 2em;
                /* 设置一个字体 */
                font-family: sans-serif;
                /*font-style 设置文字斜体  
                可选值：
                   normal  文字正常显示  默认值
                   italic  设置斜体  常用
                   oblique  设置斜体
                
                */
                font-style: normal;
                /*font-weight  设置文字的加粗 
                 可选值：
                      normal  文本正常显示，默认值
                     bold   加粗
                     bolder  加粗
                     100-900  100最细，900最粗
    
                */
                font-weight: 100;
                /*font-variant  设置一个小型大写字母 
                可选值：
                  normal  文本正常显示，默认值
                  small-caps   将字母变成小型大写字母

                  
                */
                font-variant:small-caps;

            }
            .p2{
                color: red;
                /* font简写 
                注意：
                  1、字体相关的样式值设置，需要以空格隔开
                  2、必须要写字体大小和字体
                  3、字体的大小必须在倒数第二位，字体必须在倒数第一位
                */
                font:bolder italic  3em  serif;

            }