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 相关文章推荐
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 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
怎么使 Mysql 数据同步
2006/10/09 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
php curl的深入解析
2013/06/02 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
React组件的三种写法总结
2017/01/12 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
python正则分析nginx的访问日志
2017/01/17 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
机械专业应届生求职信
2013/12/12 职场文书
韩国商务邀请函
2014/01/14 职场文书
大学应届生的自我评价
2014/03/06 职场文书
会计试用期自我评价
2014/09/19 职场文书
2014年教学工作总结
2014/11/13 职场文书
三国演义读书笔记
2015/06/25 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS