CSS3 —— 文本背景列表渐变

Posted 2022-06-07 expedition

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 —— 文本背景列表渐变相关的知识，希望对你有一定的参考价值。

<span>标签

作用 —— 能让某几个文字或者某个词语凸显出来

技术图片

候选字体

p font-family: Times, TimesNR, ‘New Century Schoolbook‘;

font-size属性

单位 px（像素） em、rem、cm、mm、pt、pc

1em 等于当前的字体尺寸

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

16px=1em

实例

h1 font-size:3.75em; /* 60px/16=3.75em */
h2 font-size:2.5em;  /* 40px/16=2.5em */
p font-size:0.875em; /* 14px/16=0.875em */

font-style属性

normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示

italic 和 oblique 的区别

font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样

技术图片

text-indent 缩进属性只能在块元素中使用有效。在行内元素中无效！

color属性

RGB 十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量 rgb(r,g,b) : 正整数的取值为0～255

RGBA在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);

技术图片

text-decoration 有 5 个值：

· none

· underline

· overline

· line-through

· blink

underline 会对元素加下划线。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线。blink 会让文本闪烁。

none 值会关闭原本应用到一个元素上的所有装饰。

a text-decoration: none;

垂直对齐方式

vertical-align属性：middle、top、bottom

只有元素属于inline或是inline-block ，vertical-align属性才会起作用。
例如图片，按钮，单复选框，单行/多行文本框等html控件，只有这些元素默认情况下会对vertical-align属性起作用。

技术图片

实例：

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <style type="text/css">
        div
            background: blue;
        
    </style></head><body>

    <div>   
        <img src="1.png">
    </div>
</body></html>

技术图片可发现在图片下方有个空隙，why?

这就要说到 vertical-align 和 line-height ，vertical-align默认值 baseline。

技术图片

在图旁边写个字

技术图片

能看见，图片是和文字x的下边缘，也就是基线对齐的，并不是和底线对齐。
现在我们调整图片的 vertical-align 属性值为bottom，看看会怎样

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <style type="text/css">
        div
            background: blue;
        
        img
            vertical-align: bottom;
        
        span
            background: white;
        
    </style></head><body>

    <div>   
        <img src="1.png"><span>x</span>
    </div></body></html>