css字体,文本属性样式

楽楽-

已于 2022-10-09 14:58:13 修改

阅读量186

点赞数 2

文章标签： css css3 前端

于 2022-10-01 16:41:05 首次发布

本文链接：https://blog.csdn.net/m0_71428015/article/details/127133351

版权

一、Font 字体属性

1.CSS Fonts属性用于定义 |字体系列,大小,粗细,样式(如斜体)|

(1)把h2标签跟p标签文字大小粗细显示一样,代码如下（示例）：

2.CSS字体复合属性

!注意:顺序不能改变,各个属性以空格隔开 !不需要设置的属性可以省略,但必须保留size 和 family,代码如下（示例）：

二、Text文本属性

1.CSS Text(文本)属性可以定义文本的|||外观(文本的颜色),对齐,装饰线,缩进,行间距

(1)取消a链接的下划线并且改变颜色,代码如下（示例）：

一、Font 字体属性

1.CSS Fonts属性用于定义 |字体系列,大小,粗细,样式(如斜体)|

p{
    
    font-family:"微软雅黑"                //字体系例

    font-size:20px                        //字体大小

    font-weight:normal(400)               //默认字体不加粗
    font-weight:bold(700)                 //字体加粗  

    font-style:normal                     //默认值,浏览器显示的标准字体
    font-style:italic                     //显示 斜体 字体样式
}

!注意:标题要单独手动指定文字的大小,标题会自动变粗,如果默认不变粗使用font-weight:400

(1)把h2标签跟p标签文字大小粗细显示一样,代码如下（示例）：

<style>

    h2 {

        font-weight: 400;

        font-size: 16px;

    }

</style>

<body>

    <h2>帅哥</h2>

    <p>美女</p>

</body>

2.CSS字体复合属性

为了方便可以把以上文字样式综合来写

    p{

        font: font-style  font-weight     font-size   font-family ;

    }

!注意:顺序不能改变,各个属性以空格隔开 !不需要设置的属性可以省略,但必须保留size 和 family,代码如下（示例）：

<style>

   p {

        font: italic 700 111px '微软雅黑';

    }

</style>

<body>

    <h2>帅哥</h2>

    <p>美女</p>

</body>

二、Text文本属性

1.CSS Text(文本)属性可以定义文本的|||外观(文本的颜色),对齐,装饰线,缩进,行间距

div{

    color : red;                     //文本的颜色
    
    text-align : center/left/right   //水平居中对齐文本,左对齐(默认) ,右对齐

    text-decoration :none/underline  //没有装饰线(默认),下划线(a链接自带下划线)

    text-indent : 20px/2em        //段落首行缩进20px,em是一个相对单位,表示当前元素1个文字的大小        
    (段落首段缩进两个字距离)

    line-height:26px              //行与行之间的距离,行间距=上间距+文字高度+下间距,为了方便可以        
                                  //直接测量两行文字之间的距离(上行文字下间距+下行文字上间距)

}

(1)取消a链接的下划线并且改变颜色,代码如下（示例）：

<!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>

</head>

<style>

    a {

        text-decoration: none;

        color: 333px;

    }

</style>

<body>

    <div>粉色回忆</div>

    <a href="#">粉色回忆</a>

</body>

</html>