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

简介: 一文搞懂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


总结


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

目录
相关文章
|
18天前
|
前端开发 开发者
「提高你的CSS技能」:15个重要的CSS属性详解
这篇文章介绍了15个重要的CSS属性,旨在提高读者的CSS知识和技能。文章以清晰的方式解释了每个属性的作用和用法,并提供了相应的示例代码。通过这篇文章,读者可以了解到一些有趣且实用的CSS属性。
|
20天前
|
Web App开发 编解码 前端开发
告别固定字体大小:CSS使用相对单位提升网页可访问性和兼容性
在 Web 开发领域中,有很多误解流传,即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释(简而言之:大多数情况下是错误的),但它似乎仍然在某些角落中存在。
|
24天前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
10 0
|
24天前
|
前端开发
使用CSS实现网格+渐变背景色的Web页面背景
使用CSS实现网格+渐变背景色的Web页面背景
16 0
|
27天前
|
Web App开发 移动开发 前端开发
【CSS】<Cascading Style Sheets>CSS3常用样式属性
【1月更文挑战第22天】【CSS】<Cascading Style Sheets>CSS3常用样式属性
|
30天前
|
前端开发
CSS常用属性理解
CSS常用属性理解
15 0
|
30天前
|
前端开发
让页面里的字体变清晰,变细用CSS怎么做?
让页面里的字体变清晰,变细用CSS怎么做?
19 2
|
1月前
|
前端开发 容器
CSS:元素显示模式与背景
CSS:元素显示模式与背景
25 0
|
1月前
|
Web App开发 前端开发
CSS:字体和文本样式
CSS:字体和文本样式
31 0
|
1月前
|
前端开发

相关产品

  • 云迁移中心