css的标签有很多,本篇文章为大家总结以下常用的一些标签以及简单说明这些标签的作用。
(1)css的文字属性标签
文字颜色:color:#ffffff;
文字样式:font-style:oblique;(偏斜体)italic;(斜体)normal;(正常)
字体大小:font-size:16px;文字行高:line-height:30px;
文字粗细:font-weight:bold;(粗体)lighter;(细体)normal;(正常)
文字修饰:text-decoration:line-through;(加删除线)overline;(加顶线)underline;(加下划线)none;(无修饰线)
对齐方式:text-align:right;(文字右对齐)left;(文字左对齐)center;(内部元素居中)justify;(文字分散对齐)
使用练习:我们随机书写一段文字,设置文字的颜色为红色,字体样式为斜体,字体大小为20px,行高为35px,字体加粗,加下划线,并是文字居中对齐;那么我们的代码就如下所示:
在网页中的显示效果就如下图所示:
(2)css背景样式
背景样式:background:#f00;(红色背景)background-image:url(/image/bg.gif);(背景图片)background-repeat:repeat;(重复排列-网页默认)background-repeat:no-repeat;(不重复排列)background-repeat:repeat-x;(在x轴重复排列)background-repeat:repeat-y;(在y轴重复排列)
(3)css边框样式
边框样式:border-top:1pxsolid#f00;(上框线)border-bottom:1pxsolid#f00;(下框线)border-left:1pxsolid#f00;(左框线)border-right:1pxsolid#f00;(右框线)border:1pxsolid#f00;(上下左右边框)
其他框线样式:solid(实线框)dotted(虚线框)double(双线框)groove(立体内凸框)ridge(立体浮雕框)inset(凹框)outset(凸框)
(4)css内边距以及外边距属性
内边距样式:padding-top:10px;(上边框留空白)padding-right:10px;(右边框留空白)padding-bottom:10px;(下边框留空白)padding-left:10px;(左边框留空白)
也可以简写成padding:10px10px10px10px;(分别对应上右下左)padding:10px10px;(上下、左右)padding:10px10px10px;(上、左右、下)
外边距样式:margin-top:10px;(上边界留空白)margin-right:10px;(右边界留空白)margin-bottom:10px;(下边界留空白)margin-left:10px;(左边界留空白)
也可以简写成margin:10px10px10px10px;(分别对应上右下左)margin:10px10px;(上下、左右)margin:10px10px10px;(上、左右、下)
使用练习:我们随机书写一段文字,设置文字的背景为灰色,边框为红色2px实线框,内边距为10px,外边距为10px;那么我们的代码就如下所示:
在网页中的显示效果就如下图所示:
对于css的常用标签今天就先介绍到这里,大家在平时可以自己多加练习练习,熟练一下各个标签的作用。
每日金句:有时候死扛下去总是会有机会的。喜欢我的文章的小伙伴记得