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 相关文章推荐
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 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
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
Python列表推导式的使用方法
2013/11/21 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
利用python实现数据分析
2017/01/11 Python
用python实现刷点击率的示例代码
2019/02/21 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
一文读懂Python 枚举
2020/08/25 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
如何进行Linux分区优化
2013/02/12 面试题
中式餐厅创业计划书范文
2014/01/23 职场文书
环境卫生标语
2014/06/09 职场文书
上课不认真检讨书
2014/09/17 职场文书
2015年采购员工作总结
2015/04/27 职场文书
项目备案申请报告
2015/05/15 职场文书
环保证明
2015/06/23 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书