当前位置:网站首页 > 常识 > 正文

html字体样式代码的完整集合(网页制作的css代码)。

编辑:dtxinpuda 时间:2022-09-22 21:31:17 阅读量:633

前两篇文章介绍了创建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的值相同时,是垂直居中对齐

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

  • 本文暂时没有评论,来添加一个吧(●'◡'●)

    欢迎 发表评论:

    热文排行
    评论互动
    TAGS