初学html第5天

字体的其他样式

1.设置一个文字大小

font-size: 40px;

2.设置一个字体

font-family: fantasy;

3.设置文字斜体

可选值：

          normal  默认值  文字正常显示

          italic  文字斜体  常用的

          oblique  文字斜体

font-style: oblique;

4.设置一个小型大写字母

font: bold italic 30px fantasy;

5.font简写  必须有设置字体大小（必须倒数第二位）、设置字体（必须在倒数第一位）

font: bold italic 30px fantasy;

---

行间距

1、行高（line height）  文字占有的实际高度

             可选值

                 1、可以直接设置大小   例如50px,100px

                 2、可以写数值，是字体的倍数

                 3、可以写百分比

         2、单行文本在父元素中垂直居中，把行高和高度设置一样的，

               行高=上间距+文字的大小+下间距

         3、font中也可以指定行高

               font: 38px/2 monospace;  

 p {
font: 38px/2 monospace;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
line-height: 200px;
}

---

文本样式（1）

1: text-transform 可以用来设置文本的大小写

   可选值：

      none  默认值  正常显示

      uppercase   字母大写

      lowercase     字母小写

      capitalize   首字母大写

2: text-decoration  [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰

    可选值：

       none       没有任何修饰线

       underline;   加下划线

       overline     加上划线

       line-through  删除线   

3: letter-spacing可以指定字符间距

4: word-spacing可以设置单词之间的距离

5: text-align用于设置文本的对齐方式

    可选值：

      left  默认值  左对齐

      right  右对齐

      center  居中对齐

      justify  两端对齐

6: text-indent 设置首行缩进

   一般用em为单位

7: white-space: ; 设置网页如何处理空白

    可选值：

      normal  默认值  文本正常显示

      nowrap   不换行    

8: text-overflow 文本溢出包含元素时发生的事情

   可选值：

      none   默认值  文本正常显示

     ellipsis  省略号

9: text-shadow: h-shadow v-shadow blur color;

     参数

       1、阴影的水平位移距离   必填

       2、阴影的垂直位移距离   必填

       3、阴影的模糊半径       选填   默认是0px

       4、阴影的颜色         选填   默认跟字体颜色一样

10:vertical-align  设置元素垂直对齐的方式

.p1 {
text-transform: capitalize;
/* text-decoration: line-through; */
/* letter-spacing: 20px; */
/* word-spacing: 20px; */
}
.p2 {
/* text-align:justify; */
/* text-indent:2em; */
background-color: pink;
/* 文本省略号的固定的写法 */
/* 设置固定的宽度 */
width: 500px;
/* 设置不换行 */
white-space: nowrap;
/* 裁剪多余 */
overflow: hidden;
/* 设置多余的内容用省略号代替 */
text-overflow: ellipsis;
}
a {
text-decoration: none;
}
h1 {
color: red;
text-shadow: 15px 15px ;
}

---

文本样式（2）

vertical-align:;  设置文本垂直对齐方式

                 1、设置图文对齐

                     可选值：

                       baseline   默认值  基线对齐

                       bottom     下对齐

                       top        上对齐

                       middle     居中对齐

                只能设置图文，表格的垂直对齐

                 2、解决图片三像素的问题

                    解决方案一：vertical-align:;   属性值不是baseline

                    解决方案二： 给其父元素设置字体大小为0

                    解决方案三：将图片转成块元素

 img {
width: 300px;
/* 讲元素转成块元素 */
/* display: none; */
}
/* display: ; 实现元素间相互转换
可选值：
none 隐藏元素
block 讲元素转成块元素
inline-block 讲元素转成行内块元素
*/
div {
width: 300px;
/* font-size: 0; */
}
</style>

作业展示