前端学习之基础篇——背景、字体与文本

最新推荐文章于 2023-11-15 19:51:08 发布

梨花不负韶

最新推荐文章于 2023-11-15 19:51:08 发布

阅读量178

点赞数

分类专栏：前端学习篇基础篇文章标签： css html css3 html5 前端

本文链接：https://blog.csdn.net/emmmmm__/article/details/111145610

版权

前端学习篇同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

基础篇

7 篇文章 0 订阅

订阅专栏

前端学习之基础篇——背景、字体与文本

一、简介

背景与文本

二、背景

background-color : red
background-image: url(./img/bg.jpg)
background-repeat: no-repeat
background-size: 50% 50%
background-position: 50% 50%
background:red url(./img/bg.jpg) no-repeat top

<head>
    <style>
        .wrap{
            width: 100%;
            height: 500px;
            /* 背景颜色 */
            background-color: lightcoral;
            /* 背景图片 */
            background-image: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1282406071,187117223&fm=26&gp=0.jpg);
            /* 
                是否重复
                默认是repeat重复，可以设置为no-repeat不重复
             */
             background-repeat: no-repeat;
             /* 设置背景图片尺寸：第一个值代表宽度，第二个值代表高度 */
             background-size: 200px 200px;
             /* 
                背景图片定位
                    1.固定的像素值
                    2.百分比
                    3.方向的英文单词（center/left/right/top/bottom）
              */
              /* background-postion:100% 100%; */
              /* background-position: right bottom; */
              background-position: 50%;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="bg"></div>
    </div>
</body>

三、字体

1、font-style

normal 正常显示
italic 斜体显示

2、font-weight（100-900）

lighter 细体 100
normal 默认 400
bold 粗体 700
bolder 粗体 900

3、font-size

默认16px 最小12px

4、line-height

normal 默认合理行高
length 固定行间距
number 数字，此数字与当前字体尺寸相乘的结果
单行文本垂直居中：设置行高与盒子高度一致，单行文本垂直居中

5、font-family

serif 衬线字体（宋体）
sans-serif 无衬线字体（微软雅黑）
monospace 等宽字体
fantasy 梦幻
cursive 草体

6、简写：

font:font-style font-weight font-size/line-height font-family
注意：只有同时具有font-size和font-family的值时，简写才生效

<head>
    <style>
        .box1{
            font-size: 90px;
            font-family: '微软雅黑';
            font-weight: 500;
        }
        .box2{
            font-size: 30px;
            font-family: monospace,'宋体';
            font-style: italic;
        }
    </style>
</head>
<body>
    <!-- 
        font-size 字体大小，默认是16px，最小是12px（1-11px 就是 12px的效果）
        font-famliy 字体系列，字体系列可以写多个，多个字体增加容错率，第一个不生效时会解析第二个
        font-style 字体样式
                normal 默认，正常显示
                italic 斜体
        font-weight 字体粗细
                normal 正常 （400）
                bold 加粗 （700）
                100 - 900 （不同字体，粗细效果不一样）
     -->
     <div class="box1">
         你好，小蓝！
     </div>
     <div class="box2">
         你好，小蓝！
     </div>
     <div>
         <em>haha</em>
         <i>haha</i>
         <b>haha</b>
         <strong>haha</strong>
     </div>
</body>