HTML/CSS中文字，文本，图片及背景图设置（学习整理）_网页怎么设置图片背景中文字的颜色-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46673313/article/details/108252255

文字样式

-font-family:字体

<style>
        div {
           font-family: '宋体';
        }
    </style>
    设置字体为“宋体”

font-style:字体样式

<style>
        div {
           font-style: italic;
        }
    </style>
    设置字体样式为倾斜

font-weight：字体粗细

<style>
        div {
           font-weight: bold;
        }
    </style>
    设置字体粗细为加粗
    常用：bold（加粗） bolder（比加粗更粗）lighter（更细）
    也可以使用100-900之间的整百值 常用：400,600,900

文本样式

text-align:文本对齐方式

  <style>
        div {
           text-align: center;
        }
    </style>
    设置文本对齐为居中对齐
    常用：left  center   right

text-indent：文本首行缩进

<style>
        div {
           text-indent: 20px;
        }
    </style>
    设置文本首行缩进：20像素

letter-spacing：字间距
text-transform：
uppercase；字母变大写
lowercase；字母变小写
capitalize；首字母大写

line-height：行高

<style>
        div {
          line-height: 30px;
        }
    </style>
    设置div的行高为30px
    重点：设置行高=盒子高度同时设置text-align=center
    可以使文本水平垂直居中

text-decoration：文本装饰

<style>
        div {
          text-decoration: underline;
        }
    </style>
    设置文本有下划线的效果
    如果将属性值编程none 就可以去除文本装饰（一般用在去掉a标
    签默认的下划线）

图片

<body>
    <img src="../20200727/images/peiqi.jpg" alt="">
</body>
src为图片所在的路径

vertical-align:文字相对图片的位置在哪儿

vertical-align：top

vertical-align:top
2. vertical-align:middle

3. vertical-align:bottom
在这里插入图片描述
注意：居中时用middle不用center

背景图

background-img:url(’’) 设置背景图
background-position: 设置背景图的定位（left:* top:* right:* bottom:*）
background-repeat: 背景图的重复方式（默认值为repeat）
background-size: 背景图尺寸（cover:以最长边进行尺寸改变，
cotain：以最短边进行尺寸改变）
background-color: 设置背景颜色
简写: bgckground:颜色链接重复方式定位尺寸~~(按照这个顺序)~~
backgrond-attachment:fixed(设置背景图的定位方式)

除了body标签以外的标签，想要加背景图一定要给宽高