CSS文字样式

notice：文字样式会被继承

一、常用的文字样式

1、设置文字的颜色   

color:red;

2、设置文字的大小 

font-size:30px;

3、设置文字的粗细，bold为加粗字体

font-weight:bold;

4、设置文字的样式：normal 为默认样式，italic 为倾斜样式

font-style: normal;

5、设置文字的字体

font-family:"楷体";

6、字体对齐

text-align:center;

设置字体对齐方式：center 居中；left 左边；right 右边；justify 两端对齐

7、字体缩进

text-indent:2em;

设置首行的字体缩进，单位可以是em、px

em为一个字的大小

8、文字换行

white-space: nowrap;

设置文字是否换行，normal 为默认换行；nowrap 为强制不换行

当文字超出并强制不换行时：

overflow: hidden;

超出元素隐藏

overflow: scroll;

超出元素设置滚动条

overflow: auto;

内容大于元素就出现滚动条，小于元素就不出现滚动条

text-overflow:ellipsis;

超出元素转换为...（与nowrap和hidden一起使用）

9、行内垂直样式

可以使用像素值px直接设置，也可以使用样式

vertical-align:100px ;

vertical-align:middle;

top：顶部对齐

bottom：底部对齐

middle：垂直水平居中

baseline：默认样式，垂直基线对齐（下端对齐）

自定义字体

@font-face{

    font-family:"字体名称";

    src:url("字体的路径");

}

某个元素要使用这种字体

元素名{

font-family:"字体名称";

}

整个网页要使用这种字体

body{

font-family:"字体名称";

}

设置自定义模板，方便开发

vscode 文件 > 首选项 > 用户代码片段 > html.json

没有html.json，就自己新建一个

prefix ：前缀代号，输出代号，就可以快速输出自定义模板

a标签

<a href="">文字默认换行</a>

去除a标签（下）划线

a{
    text-decoration:none;
}

设置下划线

a{
    text-decoration:underline;
}

设置上划线

a{
    text-decoration:overline;
}

设置贯穿线

a{
    text-decoration:line-through;
}

鼠标样式

cursor:pointer;

pointer：鼠标悬浮时，变为小手

default：鼠标悬浮时，变为默认样式（多数为箭头）

help等等

行内样式 垂直对齐 

可以使用像素值，默认为 baseline ，向下对齐

vertical-align: 10px;

vertical-align: middle;

vertical-align: top;

vertical-align: bottom;

vertical-align: baseline;