两篇文章介绍了创建html文件及常用的标签，今天我们来了解一下常用的样式属性。

废话不多说，跟着橙先生学起来吧！记得要动手操作试试看哦，不能只是看看，当时记住了，也许实际操作时还是不会。

像你家的房间都有大小、功能之分，标签的样式也是同样的。

这里我不讲行内样式、内部样式和外部样式的区别

直接用行内样式做演示，这样比较清楚，待进一步学习后再了解也不迟！

只是书写的方式不同罢了，样式还是那些样式！

我们直接用最具代表性的div标签来做介绍

<div style="width: 300px; height: 300px;">这是一个div标签</div>

如上，我们直接在div标签中添加样式，书写形式style=""

所有样式都写在引号中，属性加冒号加值并以分号结束（如width: 300px;）

以下面的实例来一一介绍

<div

style="

width: 300px;

height: 300px;

border: 5px solid #000000;

background-color: #ffa500;

color: #0000ff;

font-size: 20px;

text-align: center;

font-weight: 700;

line-height: 300px;

">

这是是一个div标签,以下是橙先生为你做的各个属性介绍

</div>

width:是用来定义标签的宽度，单位常用px（像素）

height:用来定义标签的高度，同样常用px单位

border:用来定义标签的边框，如上的5px代表边框的宽度，solid表示是实线（常用的，其他线型不做介绍，自己百度了解），#000000是颜色的十六进制值（这部分也请自行了解）

background-color:用来定义标签的背景颜色，同样用颜色的十六进制值表示

color:用来定义文字的颜色，也是用颜色的十六进制值表示，默认是黑色字

font-size:用来定义字体的大小，常以px为单位

text-align:用来定义文字的水平对齐方式（居中center、左对齐left、右对齐right）

font-weight:用来定义字体的粗细，默认为normal、bold加粗(常用，或700)、bolder更粗、lighter更细，100、200、300、至900定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

line-height:如果数值和height的值相同时，是垂直居中对齐

以上样式都了解了吗？动动手试试吧！相信你会有更深刻且不一样的认识，今天就介绍到这里，每天进步一点点！下一篇我们进一步介绍其他标签的特殊样式属性！

记得关注哦！微信公众号（HiMrOrange）和同名

绍

介绍

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

标签样式格式

使用标签样式的语法，示例：我们给一个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前端框架就可以高效地设计网站的各种网页了。

https://m.tongfu.net/home/35/blog/512895.html

节我们讲文本样式，像比如设置文本颜色呀，首行缩进、水平对齐等，可以对网页进行排本设置等。

将要学习的文本属性有如下几个：

color

首先我们来讲文本颜色设置，前面我们讲过一节关于如何设置颜色，所以想必大家对如何给文本设置颜色不会。

示例：

例如给下面的 <p> 标签中的 <span> 标签中的文本，颜色设置为粉色：

 <p>盛年不重来，<span>一日难再晨</span>。及时宜自勉，岁月不待人。</p>

CSS 样式代码：

span{
    color: pink;
}

或者使用十六进制颜色值：

span{
    color: #FFC0CB;
}

text-index

一般我们在写作文的时候，所有段落的首行都会首行缩进两个字，而我们如果希望在网页中的段落也能实现首行缩进呢，这就可以通过 CSS 中的 text-index 属性来设置首行文本的缩进。

text-index 属性直接将缩进距离以数字表示，单位为 em 或 px。一般我们使用 em 更多，通常将值设置为 2em，表示缩进两个字符。

em 是相对单位，表示的长度相当于文本中字符的倍数，会根据字符的大小，自动适应，空出设置字符的倍数。

text-index 属性允许使用负值，如果使用负值，那么首行会被缩进到左边。

示例：

实现第一个段落和最后一个段落的首行缩进：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <p class="index">蒹葭苍苍，白露为霜。所谓伊人，在水一方。</p>
        <p>溯洄从之，道阻且长。溯游从之，宛在水中央。</p>
        <p>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</p>
        <p>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</p>
        <p>蒹葭采采，白露未已。所谓伊人，在水之涘。</p>
        <p class="index">溯洄从之，道阻且右。溯游从之，宛在水中沚。</p>
    </body>
</html>

CSS 样式代码：

.index{
    text-indent: 2em;
}

在浏览器中的演示：

text-align

text-align 属性用于设置元素中文本的水平对齐方式。

属性值有下面几种：

示例：

看一下不同属性值能实现的效果：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <p class="text1">内容居中</p>
        <p class="text2">内容居左</p>
        <p class="text3">内容居右</p>
        <p>内容不添加样式</p>
    </body>
</html>

CSS 样式代码：

.text1{
    text-align: center;
}
.text2{
    text-align: left;
}
.text3{
    text-align: right;
}

在浏览器中的演示：

line-height

line-height 用于设置行高，也就是设置行间的距离。

属性值可以是下面几种：

一般我们使用数字来表示，单位为 px，如果不添加单位，则表示按倍数表示，这时行高是字体大小的倍数。

示例：

例如下面第一个 <p> 标签中的内容字体大小为14px，将行高设置为 21px，和将行高设置为 2（字体大小的两倍） 是一样的效果：

 <body>
    <p class="text">鲁迅的成功，有一个重要的秘诀，就是珍惜时间。鲁迅十二岁在绍兴城读私塾的时候，父亲正患着重病，两个弟弟年纪尚幼，鲁迅不仅经常上当铺，跑药店，还得帮助母亲做家务，为免影响学业，他必须作好精确的时间安排。</p>
    <p>此后，鲁迅几乎每天都在挤时间。他说过：「时间，就像海绵里的水，只要你挤，总是有的。」鲁迅读书的兴趣十分广泛，又喜欢写作，他对于民间艺术，特别是传说、绘画，也深切爱好。</p>
</body>

CSS 样式代码：

.text{
    font-size: 14px;
    line-height: 28px;
    /* 相当于 line-height:2; */
}

在浏览器中的演示：

text-decoration

text-decoration 属性用于设置文本的装饰，也就是给文本设置某种效果，例如下划线、删除线等。

属性值可以是下面几种：

示例：

除了给文本添加装饰，我们还可以通过text-decoration 属性去掉链接下面的下划线：

<p>默认文本</p>
<p class="p1">设置下划线</p>
<p class="p2">设置上划线</p>
<p class="p3">设置删除线</p>
<p class="p4">文本闪烁</p>
<a href="#">去掉链接的下划线</a>

CSS 样式代码：

.p1{
    text-decoration: underline;
}
.p2{
    text-decoration: overline;
}
.p3{
    text-decoration: line-through;
}
.p4{
    text-decoration: blink;
}
a{
    text-decoration: none;
}

在浏览器中的演示：

总结：本节所学习的文本样式，在实际应用中我们会经常用到，所以大家要弄清楚这几个属性的使用，以及当赋值不同的属性值时，展示出来的效果是什么。

想看更多可以：https://www.9xkd.com/