02-CSS字体文本属性

1.字体种类性

font-family

（不知道字体可以百度！！！）（谷歌浏览器默认字体为微软雅黑！！！）

2.字体大小

font-size:20px; （if你改body的像素，但是标题不会变，标题是特殊的，要自己手动改）

3.字体粗细

font-weight

bold加粗（大胆的，显著的）等价于700

normal正常 等价于400

在实际开发中，使用数字是更加常见的情况

代码：

    <style>

        /* 字体种类 */

        h2{

            font-family: "微软雅黑";

        }

        body{

            font-size: 15px;

        }

        .bold{

            font-weight: bold;

        }

        .normal{

            font-weight: normal;

        }

    </style>

4.文字样式

font-style (normal 正常字体） （italic 倾斜的字体）

5.复合属性

字体样式-字体粗细-字体大小/行高-字体种类（顺序必须一样）

   <style>

        div{

            font:italic 700 16px "微软雅黑";

        }

    </style>

6.文本颜色

color

7.文本对齐

text-align

left左对齐 right右对齐 center居中对齐

8.装饰文本

text-decoration

underline下划线 overline上划线 line-through删除线 none默认

9.文本缩进

text-indent(indent 缩进)

应用于段落开头空两个字。（写作文的时候）

其中em是一个相对单位，相当于当前文本一个文字大小！

10.行间距

line-height

应用于行与行之间的间距。

代码：

    <style>

        div{

            color: rgba(212, 6, 6, 0.616);

            text-align: center;

        }

        h4{

            text-decoration: line-through;

            text-indent: 2em;

            line-height: 16px;

        }

    </style>

CSS引用方式（行内式，嵌入式，链接式）

1.内部样式

在标签的内部写。<div style="color:pink">我草</div>

2.嵌入式

放在HTML中，放在style标签中，此种方式可以控制整个页面的样式。

3.链接式

在外部建立一个CSS文件。html引用该文件！

使用<link>标签引用CSS

<link rel="stylesheet" href="css路径"> stylesheet（风格床单-样式表）

 

Chrome调试工具

打开Chrome浏览器，按下F12->检查。

1.Ctrl+滚轮 放大大小

2.Ctrl+0 恢复代码大小