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+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 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验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php实现分页显示
2015/11/03 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
python实现大文件分割与合并
2019/07/22 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
python使用minimax算法实现五子棋
2019/07/29 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
python pycharm的安装及其使用
2019/10/11 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
写演讲稿要注意的六件事
2014/01/14 职场文书
小学音乐教学反思
2014/02/05 职场文书
通报表扬范文
2015/01/17 职场文书