css常用字体属性与背景属性介绍


Posted in HTML / CSS onFebruary 28, 2022

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

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>

效果展示:

 css常用字体属性与背景属性介绍

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

效果展示:

 css常用字体属性与背景属性介绍

③font-weight: 700;

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

 css常用字体属性与背景属性介绍

代码示例:

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

效果展示:

 css常用字体属性与背景属性介绍

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

效果展示:

 css常用字体属性与背景属性介绍

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

效果展示:

 css常用字体属性与背景属性介绍

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

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

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>

效果展示:

添加属性前:

 css常用字体属性与背景属性介绍

添加属性后:

 css常用字体属性与背景属性介绍

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

效果展示:

添加属性前:

 css常用字体属性与背景属性介绍

添加属性后:

 css常用字体属性与背景属性介绍

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

效果展示:

添加属性前:

 css常用字体属性与背景属性介绍

添加属性后:

 css常用字体属性与背景属性介绍

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

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

 css常用字体属性与背景属性介绍

⑥大杂烩 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>

效果展示:

 css常用字体属性与背景属性介绍

总结:

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

到此这篇关于 css常用字体属性与背景属性介绍的文章就介绍到这了,更多相关 css常用字体属性与背景属性内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
使用 css3 transform 属性来变换背景图的方法
May 07 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 #HTML / CSS
CSS中实现动画效果-附案例
css filter和getUserMedia的联合使用
Feb 24 #HTML / CSS
css3中2D转换之有趣的transform形变效果
css3带你实现3D转换效果
bootstrapv4轮播图去除两侧阴影及线框的方法
企业开发CSS命名BEM代码规范实践
You might like
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
Python实现方便使用的级联进度信息实例
2015/05/05 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
python plotly画柱状图代码实例
2019/12/13 Python
django 多数据库及分库实现方式
2020/04/01 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
python中yield的用法详解
2021/01/13 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
岗位职责的定义
2013/11/10 职场文书
跳蚤市场口号
2014/06/13 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
教师思想工作总结2015
2015/05/13 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
python实现简单反弹球游戏
2021/04/12 Python
Python中Selenium对Cookie的操作方法
2021/07/09 Python
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
Ruby处理CSV数据方法详解
2022/04/18 Ruby