CSS_字体属性

最新推荐文章于 2024-09-14 22:18:26 发布

NewBurlaSKing

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量103

点赞数

分类专栏： HTML学习文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_55961861/article/details/126215593

版权

HTML学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一.CSS字体属性

颜色
大小
粗细
文字样式
字体

二.属性详解

color

规定文本的颜色

选择器 {
    color:red;||
    color:#ff0000;||
    color:rgb(255,0,0);||
    color:rgba(255,0,0,.5);
}

font-size

设置文本的大小

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

注：chrome浏览器接受最小字体是12px

选择器 {
    font-size:numpx;
}

font-weight

设置文本的粗细

值	描述
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100-900	定义由细到粗 400是默认大小，而700等同于bold

选择器 {
    font-weight:normal;     /*默认粗细*/
    font-weight:bold;       /*粗*/
    font-weight:lighter;    /*细*/
    font-weight:900;        /*更粗*/
}

font-style

指定文本的字体样式

值	描述
normal	默认值
italic	定义斜体字

font-family

指定一个元素的字体

注：每个值用逗号分开如果字体名称包含空格，它必须加上引号

三.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: aqua;
            font-size: 40px;
            font-weight: 600;   /*字体粗*/
            font-style: italic; /*斜体*/
            font-family:Arial, Helvetica, sans-serif;   /*字体类型*/
        }
    </style>
</head>
<body>
    <p>我是一个段落</p>
</body>
</html>