web开发-文字

1.文字大小单位

（1）px        像素大小，元素大小的基础单位，设置后为固定值；

（2）em        浏览器页面设置的最小单位（例如谷歌浏览器1em=16px），比例可以在html中修改，设置后为固定值；

（3）n%        百分比，文字设置后实质为em比例，即在100%=1em基础上变化，设置后为固定值；

（4）vw        视口（窗口）宽度百分比，即1vw=1%窗口宽度，随窗口大小变化；

（5）vh        视口高度百分比，即1vh=1%窗口高度，随窗口大小变化，不推荐使用。

特点总结：

（1）文字可视为镂空的方块元素，宽高锁比例变化；

（2）文字大小设置超过承载盒子时，均会脱标

2.文字标签样式

2.1 带样式标签

（1）加粗

      <strong>加粗</strong>

      <b>加粗</b>

（2）倾斜

    <em>倾斜</em>

    <i>倾斜</i>

（3）删除线

    <del>删除</del>

    <s>删除</s>

（4）下划线

    <ins>下划线</ins>

    <u>下划线</u>

2.2 特殊标签

（1）标题：带固定粗细、大小

        <h1>标题</h1>

        <h2>标题</h2>

        <h3>标题</h3>

        <h4>标题</h4>

        <h5>标题</h5>

        <h6>标题</h6>

（2）超链接：带固定颜色、下划线样式

        <a href="#"></a>

3.CSS样式

（1）文本样式：text-decoration

/* 删除线 */

            text-decoration:line-through

/* 上划线 */

            text-decoration:overline;

/* 下划线 */

            text-decoration:underline;

*a标签固定样式可以用: text-decoration:none 清除

（2）文字位置（相对于承载盒子）

水平方向：text-align:center（居中）left（靠左）right（靠右）

垂直居中：line-height=承载盒子高度

*或者使用padding（内边距）顶到指定位置

（3）文字样式：font

大小：font-size

粗细：font-wight

字体样式：font-family

*斜体：font-style: italic;

（4）文字颜色

在承载盒子上定义color

（5）文字阴影

text-shadow：水平延伸 垂直延伸 模糊度 阴影颜色（以及透明度）

水平延伸：以左上为起点，正值往右，负值往左

垂直延伸：以左上为起点，正值往下，负值往上

模糊度：颜色分散程度，取正值

透明度：0（全透明）~ 1（全不透明）

示例：

            color: chartreuse;

            text-shadow: 20px 30px 10px rgba(17, 107, 180,0.8);

！阴影小练习：凹凸文字

CSS代码:

.tu{

            text-shadow: -2px -2px 0px #fff,2px 2px 0px #000;

        }

.ao{

            text-shadow: 2px 2px 0px #fff,-2px -2px 0px #000;

        }