HTML+CSS:css的常用标签总结,了解各个标签的作用

Posted gangdankeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML+CSS:css的常用标签总结,了解各个标签的作用相关的知识,希望对你有一定的参考价值。

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 : 1px solid #f00; (上框线)border-bottom : 1px solid #f00; (下框线)border-left : 1px solid #f00; (左框线)border-right : 1px solid #f00; (右框线)border:1px solid #f00;(上下左右边框)

其他框线样式:solid(实线框)dotted(虚线框)double(双线框)groove(立体内凸框)ridge(立体浮雕框)inset(凹框)outset(凸框)

(4)css内边距以及外边距属性

内边距样式:padding-top:10px; (上边框留空白)padding-right:10px;(右边框留空白)padding-bottom:10px; (下边框留空白)padding-left:10px;(左边框留空白)

也可以简写成padding:10px 10px 10px 10px;(分别对应上右下左)padding:10px 10px;(上下、左右)padding:10px 10px 10px;(上、左右、下)

外边距样式:margin-top:10px; (上边界留空白)margin-right:10px;(右边界留空白)margin-bottom:10px; (下边界留空白)margin-left:10px;(左边界留空白)

也可以简写成margin:10px 10px 10px 10px;(分别对应上右下左)margin:10px 10px;(上下、左右)margin:10px 10px 10px;(上、左右、下)

于css的常用标签今天就先介绍到这里,大家在平时可以自己多加练习练习,熟练一下各个标签的作用。

以上是关于HTML+CSS:css的常用标签总结,了解各个标签的作用的主要内容,如果未能解决你的问题,请参考以下文章

写给自己的web总结——css篇

HTML常用标签汇总CSS常用属性汇总

FE前端学习第二阶段任务

CSS各类选择器总结

前端html+css面试题个人总结

HTML常用标记属性CSS代码JS代码(速查)