前端进阶之——CSS背景、字体和文本样式

---

目录

目录

一、CSS背景

二、字体和文本样式

三、每日面试题

---

一、CSS背景

background-color

background-image：url(地址)，便于控制位置

background-repeat：背景平铺

    <style>
        div {
            /* 可自定义颜色 */
            background-color: transparent;
            /* 设置背景图片 */
            background-image: url(图片地址);
            /* 背景平铺 no-repeat:不平铺，repeat：平铺，repeat-x：横向平铺，repeat-y：纵向平铺*/
            background-repeat: no-repeat;
        }
    </style>

background-position：背景图片位置

可以改变图片在背景中的位置

有x和y两个坐标，可以使用方位名词或精确单位

参数说明：

• length：百分数，由浮点数和单位标志符组成的长度值
• position：top/center/bottom/left/center/right  方位名词
• 参数是方位名词：如果两个值都是方位名词，则前后顺序无关
• 指定了一个，另一个默认居中
• 参数如果是精确坐标，则按x,y顺序写
• 如果精确单位和方位名词混用，第一个是x坐标，第二个是y坐标

background-attachment：背景图像固定，设置背景图像是否固定或随页面滚动，制作视差滚动效果

scroll：默认值，滚动

fixed：背景图像固定

背景复合写法：写在background中，没有特定顺序，
一般为：背景颜色、图片地址、平铺、滚动、图片位置   用空格隔开

背景半透明：background：rgba(0,0,0,0.3)，最后一个参数是alpha透明度，取值范围在0-1

---

二、字体和文本样式

1.字体属性： 

    <style>
        div {
        /* 可写多个字体，字体间用逗号隔开；多单词组成的字体用引号，尽量用系统字体 */
         font-family: '微软雅黑';
         /* 单位：px, 尽量给明确大小，谷歌默认16px,
         标题标签较特殊，需单独指定大小,可以给body指定整个页面字体大小*/
         font-size: 16px;
         /* 若字体大小为具体值，值后面不加单位 */
         font-weight:400;
        }
    </style>

字体复合属性：将以上属性综合来写，节约代码

语法：

标签名 { 
    font-style font-weight font-size font-family
 }  注意顺序不能乱，size和family必须有

2.文本属性：外观

   <style>
        div {
            /* 十六进制（最常用）、rgb、预制色都可以 */
            color: yellow;

            /* text-align:文本水平对齐方式，center：居中对齐，left：左对齐，right：右对齐 */
            text-align: center;

            /* 
            text-decoration:装饰文本 
            none:默认（最常用）
            underline：下划线（常用）
            overline：上划线
            line-through:删除线
            */
            text-decoration: none;

            /* text-indent:文本缩进 指定文本第一行的缩进，通常将段落的首行缩进
            em:相对当前元素1个文字大小缩进*/
            text-indent: 2em;

            /* line-height:行间距,行间距：上间距+文本高度+下间距 */
            line-height: 20px;
        }
        /* 取消a默认的下划线： */
        a {
            text-decoration: none;
        }
    </style>

---

三、每日面试题

一、如何实现元素水平居中

行内元素：text-align：center
块元素: margin: 0 auto
position: left: 50%; transform: translate(-50%)

二、如何实现元素垂直居中

height = line-height
verticle-align: middle
position: top: 50%;

transform: translate(0,-50%)

---

人生无根蒂，飘如陌上尘。分散逐风转，此已非常身。---陶渊明

---

本期到这里就结束了，感谢阅读！有问题留言，及时回复

---

• 下期：元素显示模式、CSS三大特性
•  点赞加关注，持续更新实用技巧、热门资源、软件教程等
•  有任何 软件 影视 教程资源 考证资料等需求留言即可