4day-背景background-字体及文本样式

背景

背景色 background-color

为元素设置背景颜色,属性值为任何有效的颜色值

background-color:red | #000 | rgb(0~255,0~255,0~255) | rgba(0~255,0~255,0~255,透明度 取值：0～1 1:完全不透明 0：完全透明)

背景图片 background-image

任何元素，不管是块级还是行内元素，都可以有背景图

background-image:url('图片地址')

图片地址可以是相对、绝对路径

背景重复 background-repeat

background-repeat:repeat | no-repeat | repeat-x | repeat-y

• repeat：默认值，背景图像将在垂直和水平方向重复显示，占满整个元素
• no-repeat：背景图像不重复，图像只显示一个
• repeat-x：背景图像只在水平方向重复
• repeat-y：背景图像只在垂直方向重复

背景定位 background-position

通常可以设置两个值，第一个值表示水平方向上的对齐方式，第二个值表示垂直方向上的对齐方式

background-position: % | px | 位置单词（top（上）、left（左）、bottom（下）、right（右）、center（居中）)

• 位置单词：当设置两个值时，第一个表示水平，第二个表示垂直。当只设置一个值时，表示水平方向，第二个值默认为center
• 百分比：当设置两个值时，第一个表示水平，第二个表示垂直。当只设置一个值时，此时第二个值默认为50%,这里的百分比其实相对的不是父元素的宽或者高，也不是自己本身，我们可以理解为，这里的百分比值相对的是当前这个父元素再放入背景图片之后 未被图片所覆盖的区域的宽或高。
• 像素：当设置两个值时，第一个表示水平，第二个表示垂直。当只设置一个值时，表示水平方向，第二个值默认为center

背景关联 background-attachment

用于设置如何固定背景图片（或者说背景图片会不会随着页面滚动而滚动）

background-attachment:scroll ｜ fixed

• scroll：默认值，背景会随着页面滚动而运动
• fixed：当页面其余部分滚动时，背景图像不会滚动
  设置完成后，背景图片就相当于固定在我们可视窗口内我们设定的位置，而不是div盒子的位置，此时无论怎么滚动页面，背景图位置都不会变。但是当背景图位置不在当前元素内，则会看不见。

背景尺寸 background-size

背景尺寸通常可以设置两个值，第一个表示水平的宽度，第二个表示垂直的宽度，也可以理解为宽高

background-size: px ｜ % ｜ cover ｜ contain ｜ auto

• px：具体的尺寸值
• %：相当于当前定义背景图片的盒子宽高，当background-attachment为fixed时，相对的宽高则会变成当前屏幕的可视宽高
• cover:让图像完全占满元素的背景，但是可能会使图片失真
• contain：会将图像缩放为正好放在背景区域的尺寸，允许有部分区域不被图像覆盖
• auto：保证图像的原始比例

复合语法 background

background: pink url("./1.png") no-repeat center/cover fixed;

• background-size必须紧跟在backgrpund-position后面，两者之间以一条/分隔

精灵图（雪碧图）

精灵图也叫雪碧图，是一种网页图片应用处理方式。它允许将一个页面中涉及的所有零星图片合并到一张大图中，当访问该页面时，载入的图片就不会像往常一样一幅幅慢慢显示出来。

精灵图原理

通过ps将零星图片合并在一起，之后通过css的background-position属性进行背景定位。

颜色渐变

css中渐变主要分为两种，分别是线性渐变、径向渐变

了解渐变

渐变泛指从一个颜色慢慢过渡到另一个颜色

线性渐变

background:linear-geadient(角度值（deg），开始时的颜色，也可以添加多个颜色，结束时的颜色)

• 第一个值：可以值具体的角度值，单位为deg或者对应的方向名词：left、right、top、bottom。top left,这种写法，要注意咋写对应方向时，要在前面加上to关键字，具体的角度值则不需要。
• 第二个值：渐变开始的时的颜色，中间可以添加多个颜色
• 第三个值：渐变结束时的颜色。

重复线性渐变 repeating-linear-gradient

background: repeating-linear-gradient(red 0%,green 20%);

需要定义一次颜色渐变的区域才会生效

径向渐变 radial-gradient

background:radial-gradient(shape size at position,开始颜色，结束颜色)

• shape：定义渐变的形状还可以使用具体的px值或%，但要注意使用%时，要书写两个值，否则将失效。
  • ellipse:默认值，椭圆径向渐变
  • circle：指定圆形渐变
• size
  • farthest-corner：默认值，指定径向渐变的半径长度为从圆心到离圆心最远的角
  • closest-corner：指定渐变半径为从圆心到离圆心最近的角
  • farthest-side：指定渐变半径为从圆心到离圆心最远的边
  • closest-side：指定渐变半径为从圆心到离圆心最近的边
• position
  • 默认为center
  • 方向名词
  • 具体的值

重复的径向渐变

background:repeating-radial-gradient()

---

---

字体类样式

字体颜色 color

规定元素的字体颜色，通过color来设置
语法：

color:颜色英文｜十六进制颜色编码｜rgb｜rgba

字体风格 font-style

用于设置字体风格（是否倾斜）
语法：

font-style: normal | italic ｜ oblique ｜ inherit；

• normal:指定文本字体样式为正常的字体
• italic：指定文本字体样式为斜体。即选择当前字体族中的斜体字，对于没有设计斜体的字体，如果要使用斜体外观将应用oblique
• oblique：指定文本字体样式为倾斜字体。认为的使字体倾斜，而不是去选取字体中的斜体字
• inherit：继承父元素的属性

字体粗细 font-weight

语法：

font-weight:normal | bold | bolder ｜ lighter ｜ integer

• normal：正常的字体，相当于数值400
• bold：粗体，相当于数值700
• bolder：定义比继承值更重的值
• lighter：定义比继承更轻的值
• integer：用数字表示字体的粗细：取值范围100～900

字体大小 font-size

语法：

font-size: px | % | em | inherit

• px：具体的像素值
• %：相对于父元素的百分比值
• em：相当于当前父元素的字体大小
• rem：相当于当前页面的根元素（html元素）的字体大小做计算。

扩展知识

• px和%两种单位，是平时开发中使用最多的
• 网页的最小字体12px
• 浏览器默认字体大小为16px

字体族 font-family

规定元素的字体系列，可同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，如果都没有，则以我们电脑的默认字体为准。
语法：

font-family:字体的中文或英文；

自定义字体样式 @font-face

为了防止用户的系统不存在某个特殊字体，我们可以从网上下载我们需要的字体然后引入到页面中。
下载字体的网站：https://www.cnziti.cn/

首先第一步，通过@font-face将下载好的字体引入到页面中并重命名
    @font-face {
      /* 为你的自定义字体定义一个名称 */
      font-family: kern;
      src: url('./font/鸿雷板书简体.ttf');
    }
第二步，通过font-family属性后面跟上我们自定义字体名称，应用字体。

注意事项

• 常用的中文和英文字体：中文页面建议以宋体、微软雅黑为首选；英文字体建议使用Arial、Tahoma等字体
• 定义字体时，建议采用英文写法。只要防止某些电脑中的字体无法正常解读：黑体—SimHei、宋体—SimSun、微软雅黑—Microsoft-YaHei；
• 设置多个字体时，对于中英结合的网站，通常要将英文字体写在中文字体前面。

复合语法 font

font熟悉过可作为一个复合语法，让以上的属性值通过font来设置。

font:font-style font-weight font-size/line-height font-family;

使用font属性参数需按照以上的顺序书写，且font-size和font-family是不可忽略的。每个参数仅允许有一个值。忽略的将使用其参数对应独立属性的默认值。

文本类样式

行高 line-height

设置元素当中每行文本的行高（行间距）

line-height:normal ｜ px ｜ % ｜ number

• normal：默认，大概为当前文字大小的1.4倍左右
• px：设置固定行间距
• %：其百分比是基于当前文本的字体大小进行计算。不允许负值。
• number：设置数字，此数字会与当前的字体尺寸相承来设置行间距
  当line-height属性取值小于字体大小时，多行文本情况下，会发生上下行文本重叠的现象。

单行文本垂直居中

对于单行文本，行高有着春之居中的特殊作用。可以将文本的行高设置成父元素高度的大小，当文本行高等于盒子高度时，这段文本就在当前元素中垂直居中显示

幽灵空白节点：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”。这个节点永远透明、不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确实存在，表现如同文本节点一样。

文本装饰 text-decoration

改属性是一个复合语法，由三个属性组成，分别表示线的类型、线的样式、线的颜色
语法：

text-decoration:text-decoration-line | text-decoration-style | text-decoration-color;

线的类型 text-decoration-line

text-decoration-line:none ｜ underline ｜ overline ｜ line-through

• none：指定文本无装饰线
• underline：指定文字的下划线
• overline：指定文字的上划线
• line-through：指定文字的贯穿线

线的样式 text-decoration-style

text-decoration-style:solid | dashed ｜ double ｜ dotted ｜ wavy

• solid：实线
• dashed：虚线
• double：双线
• dotted：点线
• wavy：波浪线

text-decoration-color

text-decoration-color:颜色英文 ｜ 十六进制 ｜ rgb ｜ rgba

虽然有这么多属性，单一般开发中只需要用到text-decoration这一属性

首行缩进 text-indent

设置元素的首行文本缩进

text-indent:2em;

em是相对单位，基准点是父级节点字体的大小，如果自身定义了font-size则按自身来计算。

水平文本对齐（常用）

设置元素在水平上的对齐方式

text-align:center | left | right | start | end | justify

• center：内容居中对齐
• left：居左对齐
• right：居右对齐
• start：内容对齐开始边界
• end：内容对齐结束边界
• justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理

word-spacing 单词间的间距

语法：

word-spacing:normal | px | %

• normal：默认间隔，计算值为0
• px：固定间距，可以为负值
• %：可以为负值

letter-spacing

设置元素文本字符间的间距

letter-spacing:normal | px;

• normal:默认，规定字符间没有额外的空间
• px：定义固定的间距值

简单来说，letter-spacing添加的是每个字符间的间距，word-spacing是添加在每个单词（空格）之间的间距。