CSS入门基础----css的文字属性

最新推荐文章于 2024-07-11 21:11:19 发布

B.Bz

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量108

点赞数

分类专栏： html5和css基础文章标签： css html html5

本文链接：https://blog.csdn.net/bjsyc123456/article/details/120530923

版权

html5和css基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

font-size属性

px（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给 body 指定整个页面文字的大小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            font-size: 20px;
        }
        
        .p2 {
            font-size: 10px;
        }
    </style>
</head>

<body>
    <p class="p1">1</p>
    <p class="p2">2</p>
</body>

</html>

在这里插入图片描述

font-weight属性

控制文字的粗细

属性值	描述
normal	默认值(不加粗的)
bold	定义粗体
100-900	400 等同于normal, 而700等同于bold 注意这个数字后面不跟单位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <p class="p1">1</p>
    <p class="p2">2</p>
</body>

</html>

在这里插入图片描述

font-family属性

改变文字的字体

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            font-family: "微软雅黑";
        }
        
        .p2 {
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }
    </style>
</head>

<body>
    <p class="p1">我是第一段文字</p>
    <p class="p2">我是第二段文字</p>
</body>

</html>

在这里插入图片描述

font-style属性

设置文字的风格

属性值	作用
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1 {
            font-style: italic;
        }
    </style>
</head>

<body>
    <p class="p1">我是第一段文字</p>
    <p class="p2">我是第二段文字</p>
</body>

</html>

在这里插入图片描述

font复合属性

字体属性可以把以上文字样式综合来写, 这样可以更节约代码

`注意：`

1. 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
2. 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

CSS的文本外观属性

color属性

color 属性用于定义文本的颜色。

<style>
    div {
        color: red;
    }
</style>


<body>
    <div>文字11111111</div>
</body>

在这里插入图片描述

text-align属性

text-align 属性用于设置元素内文本内容的水平对齐方式。

属性值	解释
left	左对齐(默认值)
right	右对齐
center	居中对齐

    <style>
        div {
            /* 设置盒子宽度 */
            width: 500px;
            /* 设置盒子高度 */
            height: 500px;
            /* 给盒子添加边框实线1像素 */
            border: black solid 1px;
            /* 把文字放到中间 */
            text-align: center;
            /* 把文字放到左侧 */
            /* text-align: left; */
            /* 把文字放到右侧 */
            /* text-align: right; */
        }
    </style>


<body>
    <div>文字11111111</div>
</body>

在这里插入图片描述

text-decoration属性

text-decoration 属性规定添加到文本的修饰。
可以给文本添加下划线、删除线、上划线等。

属性值	描述
none	默认。没有装饰线(最常用)
underline	下划线。a标签自带下划线(常用)
overline	上划线。(几乎不用)
line-through	删除线。(不常用)

    <style>
        a {
            /* 去掉下划线 */
            text-decoration: none;
        }
    </style>


<body>
    <a href="#">百度</a>
</body>

在这里插入图片描述

line-height属性

line-height 属性用于设置行间的距离（行高）。可以控制文字
行与行之间的距离

.

最主要的作用还是让文字垂直居中


    <style>
        div {
            /* 设置宽高和添加边框 */
            width: 200px;
            height: 200px;
            border: black solid 1px;
            /* 文字水平居中 */
            text-align: center;
            /* 当行高等于盒子高度的像素时就会垂直居中 */
            line-height: 200px;
        }
    </style>



<body>
    <div>
        文字2222222
    </div>
</body>

在这里插入图片描述

text-indent属性

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

    <style>
        div {
            width: 200px;
            height: 200px;
        }
        
        p {
            text-indent: 50px;
        }
    </style>


<body>
    <div>
        <p>的夫人过热个人个人个人和个人个人和人体二verge让哥哥人格人格上的赴日个人根深蒂固</p>
    </div>
</body>

在这里插入图片描述

<style>
	p {
	    text-indent: 2em;
	}
</style>

在这里插入图片描述

B.Bz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门基础----css的文字属性

font-size属性px（像素）大小是我们网页的最常用的单位谷歌浏览器默认的文字大小为16px不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小可以给 body 指定整个页面文字的大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic.
复制链接

扫一扫