提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

一文搞懂css常用字体属性与背景属性

属性CSS 常用 一文 字体 背景 搞懂
2023-09-27 14:20:14 时间

文章目录

前言

css可以做出很多使html样式的改变,今天主要说一说字体样式与背景样式

一、常用的字体属性都有什么？

1.属性分类

	字体样式的分类根据名字就可以判断出来

①font-size:

字体大小,这个属性后面跟的是标签中包含的字体大小,衡量单位是像素px

代码示例：

<!-- 字体的属性一般有样式,大小,倾斜度,粗细,行高(行与行之间的间隔) -->
<!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>
    <!-- 字体的大小 可以拿body作为选择器,改变body内的文字大小-->
    <style>
     /* body {
        font-size: 70px;
    }        */
    p {
        font-size: 70px;
    }
    </style>
</head>
<body>
    <p>Hello World</p>
</body>
</html>

效果展示

在这里插入图片描述

②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>
        /* 设置字体的样式,可以是网上有的各种类型的样式,但一般选择微软雅黑 */
        body {
            /* font-family: 'Microsoft yahei'; */
            font-family: '黑体' ;
        }
    </style>
</head>
<body>
    <div>Hello Walord</div>
</body>
</html>

效果展示：

在这里插入图片描述

③font-weight: 700;

这个属性改变的是字体的粗细程度数值越大代表越粗,一般来说有以下几种值

在这里插入图片描述

代码示例：

<!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>
        /* 设置字体的粗细,一般700表示加粗,400表示正常 */
        p {
            /* font-weight: 700; 粗*/
            /* font-weight: 100; 细*/
            font-weight: 700;
        }
    </style>
</head>
<body>
    <p>Hello world</p>
</body>
</html>

效果展示：

在这里插入图片描述

④ font-style: italic;

这个属性管的是字体的样式,是否倾斜
    p {
        font-style: oblique;
    }
    div {
        font-style: italic;
    }
    这两个值都可以使字体倾斜,但oblique用于文本倾斜,用的较少

代码示例：

<!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">
    <!-- 设置字体是否倾斜,默认是不倾斜 -->
    <style>
        p {
            font-style: oblique;
        }
        div {
            font-style: italic;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <p>Hello World</p>
    <div>Hello world</div>
</body>
</html>

效果展示：

在这里插入图片描述

⑤font: italic 700 20px/1px ‘幼圆’

字体属性大杂烩,将一个标签所有字体属性写在一块
是否倾斜,粗细程度，字体大小行间距,字体样式

代码示例：

<!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>
    <!-- 字体的样式可以分开写也可以写在一起 -->
    <!-- 注意：写在一起的话size与family不可以省略 -->
    <style>
        p {
            /* font: 70px '微软雅黑' 可以这么写*/
            font: italic 700 20px/1px '幼圆'
        }

        /* p标签的字体限定与div标签的字体限定有相同的结果,只有写的形式上有所不同 */
        /* 注意区分weight与size的区别,weight不带px，而size带px */
        div {
            font-size: 20px;
            font-family: '幼圆';
            font-weight: 700;
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
</body>

</html>

效果展示：

在这里插入图片描述

二、常用的背景属性都有什么？

一个好看的页面会让人看起来更舒服,所以熟悉常用的背景属性尤为重要。

1.常见的背景属性

①background-position: center center;

背景图片是如何进行展示的,如果不改这个属性默认从
左上角进行对齐,修改会会将中央位置放在中间

代码示例：

<!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>
        div {
            width: 300px;
            height: 200px;
            background-image: url(../../e.jpg);
            background-size: 400px 300px;
            background-position: center;
        }
    </style>
</head>
<body>
    <div>

    </div>
    
</body>
</html>

效果展示：

添加属性前：
在这里插入图片描述

添加属性后：
在这里插入图片描述

② background-image: url(…/…/5.png);

图片的路径,比较简单,在此就不进行代码示例了。

③background-repeat: no-repeat;

不加这个属性的话默认图片是重复展示的

代码示例：

<!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>
        div {
            width: 2000px;
            height: 800px;
            background-image: url(../../e.jpg);
            background-size: 400px 300px;
            /* background-position: center; */
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div>

    </div>
    
</body>
</html>

效果展示：

添加属性前：
在这里插入图片描述

添加属性后：
在这里插入图片描述

④background-size: cover;

	这个修改的是背景的大小,而cover是进行覆盖,也可以使用px设置大小

代码示例：

<!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>
        div {
            width: 2000px;
            height: 800px;
            background-image: url(../../e.jpg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div>

    </div>
    
</body>
</html>

效果展示：

添加属性前：
在这里插入图片描述

添加属性后：
在这里插入图片描述

⑤background-attachment: fixed;

	这个属性设置的是背景图片是否根据字体进行滚动
	fixed是不进行滚动
	scroll是背景图随着字体的滚动而滚动

代码示例：

<!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: chartreuse;
        }

        /* 将整个图片铺满整个屏幕 */
        body {
            /* 精确给出图片的位置 */
            background-position: 0px 0px;
            background-image: url(../../1.png);
            background-repeat: no-repeat;
            background-size: cover;
            /* 设置背景图片是滚动的还是固定的 */
            /* scroll是将图片设为滚动,如果图片滚动那么图片会随图片上的东西拉伸,直至显示完所有的东西 */
            /* background-attachment: scroll; */
            /* 图片固定不会拉伸图片以适应图片上的文字,图片会保持原比 */
            background-attachment: fixed;
        }
    </style>
</head>

<body>

    <div class="firstdiv">Hello World</div>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>

</body>

</html>

效果展示：（由于作者不会做动图,大家可以赋值代码自己体会一下）

在这里插入图片描述

⑥大杂烩 background

代码示例：

<!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>
        /* 简写方式 */
        /* 颜色  路径  滚动方式 平铺方式  图片位置 */
        body {
            background: chartreuse url(../../1.jpg) fixed no-repeat 0px 0px;
        }

        p {
            color: springgreen;
        }
    </style>
</head>

<body>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>
    <p>Hello World</p>



 
</body>

</html>

效果展示：

在这里插入图片描述

总结

为什么将这两个看似毫不相关的属性放在一起进行介绍呢,作者意在让大家体会对比学习,字体属性与背景属性两者都有很多属性，拿出来几个常用的属性他们功能很多都类似,这是共同点,字体与背景又有许多不同的属性,这样区分学习会更利于我们进行理解。

相关文章