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

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

1.属性分类

• 字体样式的分类根据名字就可以判断出来

①font-size:

字体大小,这个属性后面跟的是标签中包含的字体大小,衡量单位是像素px

代码示例：

效果展示：

②font-family:

• 这个标签改变的是使用哪个版本的字体:幼圆、黑体....

代码示例：

效果展示：

③font-weight: 700;

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

代码示例：

效果展示：

④ font-style: italic;

• 这个属性管的是字体的样式,是否倾斜

    这两个值都可以使字体倾斜,但oblique用于文本倾斜,用的较少

代码示例：

效果展示：

⑤font: italic 700 20px/1px ‘幼圆’

• 字体属性大杂烩,将一个标签所有字体属性写在一块
• 是否倾斜,粗细程度，字体大小行间距,字体样式

代码示例：

效果展示：

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

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

1.常见的背景属性

①background-position: center center;

• 背景图片是如何进行展示的,如果不改这个属性默认从
• 左上角进行对齐,修改会会将*位置放在中间

代码示例：

效果展示：

添加属性前：

添加属性后：

② background-image: url(…/…/5.png);

• 图片的路径,比较简单,在此就不进行代码示例了。

③background-repeat: no-repeat;

• 不加这个属性的话默认图片是重复展示的

代码示例：

效果展示：

添加属性前：

添加属性后：

④background-size: cover;

• 这个修改的是背景的大小,而cover是进行覆盖,也可以使用px设置大小

代码示例：

效果展示：

添加属性前：

添加属性后：

⑤background-attachment: fixed;

• 这个属性设置的是背景图片是否根据字体进行滚动
• fixed是不进行滚动
• scroll是背景图随着字体的滚动而滚动

代码示例：

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

⑥大杂烩 background

代码示例：

效果展示：

总结：

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

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