介绍

介绍

今天福哥要跟跟大家说一说标签的样式，上一课我们学习的标签的样子就是它们的“默认”样子，实话实说这简直太难看了！为了让它们看起来更漂亮，为了可以使用这些标签勾勒出互联网上我们看到的那些美轮美奂的网页，我们需要通过标签样式对它们进行换装、进行美化。

标签样式格式

使用标签样式的语法，示例：我们给一个div设置边框和背景颜色。

<div style="border: 1px solid #000; background: #ccc;"></div>

标签样式

尺寸

可以使用width和height控制对象的宽度和高度，可以使用百分比也可以使用具体的数值。

• width

• height

<div style="
        display: block;
        width: 100px;
        height: 100px;
        background: #fff;
">

    </div>

边框

边框指的是标签在网页显示的对象的边框，控制边框可以使用border这个样式。还可以控制对象边框的圆角。还可以单独控制对象的上下左右四个方向的边框的样式。

• border

• border-radius

<div style="
        display: block;
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #c85e7c;
        border-radius: 15%;
">

    </div>

边距

对象边距分为内边距和外边距。

内边距

内边距指对象里面的子元素距离对象边框的距离，使用padding样式控制对象的内边距。

• padding

外边距

外边距指对象边框距离父元素边框的距离，使用margin样式控制对象的外边距。

• margin

<div style="
        display: block;
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #c85e7c;
        border-radius: 15%;
        padding: 12px;
        margin: 12px;
">
        福哥教我学HTML样式
    </div>

背景

背景是指对象区域内的样式，背景可以是一种颜色的填充，也可以是一张图片的渲染。

• background

• background-color

• background-image

<div style="
        display: block;
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #c85e7c;
        border-radius: 15%;
        padding: 12px;
        margin: 12px;
        background: #c6b4f0;
">
        福哥教我学HTML样式
    </div>

字体

字体是用来控制文字的样式的，可以控制文字的字体和字号。但是要注意一点，给文字设置字体一定要客户端的电脑上有这种字体才可以正常显示。

• font

• font-family

• font-size

• color

<div style="
        display: block;
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #c85e7c;
        border-radius: 15%;
        padding: 12px;
        margin: 12px;
        background: #c6b4f0;
        font-family: 黑体;
        font-size: 22px;
        color: #c85e7c;
">
        福哥教我学HTML样式
    </div>

显示

对象的显示方式也有很多种，有独占一行的，也有只占一小块的，还有非快状的。显示方式使用display属性控制。

display: block

独占一行

display: inline-block

独占一小块

display: inline

非块状

display: none

隐藏对象，就是对象状态不可见也不占位置了

总结

今天福哥给大家秀出了常用的标签样式，同时给出了这个样式的实际显示效果。接下来我们就要使用这些知识来设计我们自己的页面了。

把网页上的基本元素都套上了漂亮的皮肤，可以使用这些漂亮的标签快速搭建好看的网页，也是有捷径可寻的。我们开发网站程序可以使用web框架辅助，那么设计漂亮的网页也可以借助前端框架来完成。

下一课我们会跟大家介绍一款非常好用的前端框架——bootstrap，借助bootstrap前端框架就可以高效地设计网站的各种网页了。