CSS 字体样式文本样式

最新推荐文章于 2022-11-22 07:45:00 发布

eerieShadow

最新推荐文章于 2022-11-22 07:45:00 发布

阅读量241

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42265536/article/details/85223301

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

字体样式

字体类型：font-family

语法：font-family:字体1 , 字体2 , 字体3;

优先使用字体1，假设电脑不支持字体1，会使用后面的

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        #p1 {font-family: 微软雅黑,Arial, Helvetica, sans-serif;}
        #p2 {font-family: 宋体;}
    </style>

</head>
<body>

    <p id="p1">python</p>
    <p id="p2">python</p>
    
</body>
</html>

字体大小：

语法：font-size: 关键字 / 像素值;

也可以用 px（像素）作为单位

font-size 属性取值

xx-small   最小
x-small    较小
small    小
mendium     默认值，正常
large 大
x-large 较大
xx-large 最大

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        #p1 {
            font-family: 微软雅黑,Arial, Helvetica, sans-serif;
            font-size: x-large;
        }

        #p2 {
            font-family: 宋体;
            font-size: x-small;
        }
    </style>

</head>
<body>

    <p id="p1">python</p>
    <p id="p2">python</p>
    
</body>
</html>

字体颜色：

color : 颜色 ;

一个关键字或者一个 16进制的 RGB 值

字体粗细：

语法：

font-weight: 粗细值 ;

粗细值取值有两种：关键字、100~900的数值

关键字如下：

normal 默认体，正常体
lighter 较细
bold 较粗
bolder 很粗

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        #p1 {
            font-weight: 600;
        }

        #p2 {
            font-weight: lighter;
        }
    </style>

</head>
<body>

    <p id="p1">python</p>
    <p id="p2">python</p>
    
</body>
</html>

字体斜体:

语法：   font-style : 取值 ;
属性如下：
   normal    默认值，正常体
   italic 斜体，这是一个属性
   oblique 将字体倾斜，将没有斜体属性的字体拥有斜体属性，并斜体

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        #p1 {
            font-weight: 600;
            font-style: oblique;
        }

        #p2 {
            font-weight: lighter;
            font-style: italic;
        }
    </style>

</head>
<body>

    <p id="p1">python</p>
    <p id="p2">python</p>
    
</body>
</html>

CSS注释：

/* 注释内容 */

文本样式

下划线、删除线、顶划线

语法： text-decoration : 属性值 ;

属性值：

none           默认值，去除已有的下划线、删除线、顶划线
underline       下划线
line-through   删除线
overline       顶划线

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        #p1 {
            text-decoration: underline;
        }

        #p2 {
            text-decoration: line-through;
        }
        
        #p3 {
            text-decoration: overline;
        }
    </style>

</head>
<body>

    <p id="p1">下划线</p>
    <p id="p2">删除线</p>
    <p id="p3">顶划线</p>
    
</body>
</html>

文本大小写

语法： text-transform: 属性值;

属性：

onoe        默认值，无转换发生
uppercase   转换成大写
lowercase   转换成小写
capitalize   将英文首字母大写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        #p1 {
            text-transform: uppercase;
        }

        #p2 {
            text-transform: lowercase;
        }

        #p3 {
            text-transform: capitalize;
        }
    </style>

</head>
<body>

    <p id="p1">python</p>
    <p id="p2">JAVA</p>
    <p id="p3">python</p>
    
</body>
</html>

首行缩进

语法： text-indent: 像素值;

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        #p1 {
            font-size: 14px;
            /* 缩进28像素点 */
            text-indent: 28px;
        }

        #p2 {
            font-size: 14px;
            /* 缩进28像素点 */
            text-indent: 28px;
        }

        #p3 {
            text-transform: capitalize;
        } 
    </style>

</head>
<body>
    
    <p id="p3">python</p>
    <p id="p1">Python是一种计算机程序设计语言。</p>
    <p id="p2">是一种动态的、面向对象的脚本语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。</p>
    
</body>
</html>

文本水平对其：

只能针对文本文字和 img 标签

属性如下：

left 左对其（默认）

center 居中对齐

right 右对齐

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        #p1 {
            text-align: right;
        }

        #p2 {
            text-align: center;
        }

        #p3 {
            text-align: left;
        } 
    </style>

</head>
<body>
    
    <p id="p3">python</p>
    <p id="p1">Python是一种计算机程序设计语言。</p>
    <p id="p2">是一种动态的、面向对象的脚本语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。</p>
    
</body>
</html>

行高：