HTML网页制作中常用的样式属性，学会就离前端开发更近一步

前两篇文章介绍了创建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）和今日头条同名