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网格的三个新特性详解
Apr 04 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 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
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
js加强的经典分页实例
2013/03/15 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
利用Python演示数型数据结构的教程
2015/04/03 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
python if not in 多条件判断代码
2016/09/21 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
城市规划毕业生求职信
2013/10/10 职场文书
写求职信有什么意义
2014/02/17 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
教师个人读书活动总结
2014/07/08 职场文书
开会通知
2015/04/20 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python