AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

一文搞懂css常用字体属性与背景属性

2022-11-08 116
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一文搞懂css常用字体属性与背景属性

前言


css可以做出很多使html样式的改变,今天主要说一说字体样式与背景样式


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


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>


效果展示


1c6103e558c045469245bc47a128da5c.png


②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>


效果展示：


9ba7ba655a244d328f29481984f6eb44.png


③font-weight: 700;


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

6af2ffb0555a489eae21cab2f98733e4.png


代码示例：


<!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>


效果展示：


12df85152120486589eea0b8091557f2.png


④ 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>


效果展示：


6eefa711fb394413ab074030ad527fe8.png


⑤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>


效果展示：


bad4496962d6484b8db41a0bee7d4337.png


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

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


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>


效果展示：


添加属性前：


bada19a0eb3e4b2e89739887d1e78005.png


添加属性后：


09029f78897c4789aeca95945035ea2c.png


② 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>


效果展示：


添加属性前：


bae17f9b71a946f1a10061a82b8fbea6.png


添加属性后：


7c670af0b639470cbda6555318ab7e9a.png


④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>

 

效果展示：


添加属性前：


9226567786f44347b4cbb20972e9674d.png


添加属性后：


eb0c3e8b74cd4746ac882abd2aac7d3f.png


⑤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>

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


353aabc4663149349ebdb3d5e241da75.png


⑥大杂烩 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>


效果展示：


9e188faa02b048a183acd2991ab7b5cf.png


总结


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

文章标签：
前端开发
关键词：
CSS字体
CSS属性
CSS字体属性
CSS背景
CSS字体属性背景
aliyun6913902006-15815
目录
相关文章
东方睿赢
|
28天前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论，旨在帮助开发者更好地理解和运用媒体查询，提升移动端用户体验。
东方睿赢
44 4
雨溪-yuxi
|
1月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性，包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流，向左或右排列，周围元素随之调整。文章还详细讲解了清除浮动的方法，如使用clear属性、设置父元素高度、利用overflow属性、伪元素等，以解决因浮动导致的布局问题。最后，强调了浮动在创建复杂布局时的作用，并预告后续内容。
雨溪-yuxi
37 2
雨溪-yuxi
|
1月前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画，通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值，可以精细控制过渡效果。文末提供了HTML示例代码，展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
雨溪-yuxi
53 1
你都不懂
|
1月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
你都不懂
36 1
你都不懂
|
1月前
|
前端开发
css简写属性
css简写属性
你都不懂
36 0
神明木佑
|
2月前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
神明木佑
23 0
邹荣乐
|
2月前
|
前端开发
运用CSS伪类与属性，巧妙实现背景图片旋转效果
运用CSS伪类与属性，巧妙实现背景图片旋转效果
邹荣乐
51 0
小麋鹿666
|
前端开发
CSS3魔法堂：背景渐变（Gradient）
小麋鹿666
1052 0
肥仔john
|
前端开发 数据格式 XML
CSS3魔法堂：背景渐变（Gradient）
肥仔john
1438 0
二二*一一
|
1月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
105 1