带注释的简单样式表

 忽然间,误打误撞的让 容器的内阴影和外阴影都出现了,看上去感觉有点像苹果的风格了。顺道把样式表做一下说明,让不懂样式表的,可以参考一下。熟悉样式表的就不要吐槽了,我也是学习阶段。


<style>


body{
/*网页内的元素距离浏览器的顶部50个像素*/
margin-top:50px;
/*网页内的元素距离浏览器的左边0个像素*/
margin-left:0px;
/*网页内整体背景颜色*/
background-color:#F0F0F0;
/*网页内文字的颜色*/
color:#333333;
/*网页内文字的大小为1个正常字大小*/
font-size:1em;
/*网页内文字字体设置*/
font-family:"微软雅黑", "黑体", sans-serif, Verdana, Georgia;
}


.touying{
/*表格或图层或图片 实现阴影效果,其中不加 inset 就没有内阴影*/
box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
/*表格或图层或图片 实现圆角特效*/
border-radius: 8px;
/*文字距离上下左右边框20像素*/
padding:20px;
/*容器背景颜色*/
background-color:#FFFFFF;
/*文字行间距为1.5个文字大小*/
line-height:1.5em;
/*定义容器内文字的字体样式*/
font-family:"微软雅黑", "黑体", sans-serif, Verdana, Georgia;
/*文字段落开始的时候,自动空出两个字的距离*/
text-indent:2em;
/*以下三个代码是防止表格被撑大,让文字自动换行*/
table-layout: fixed;
word-wrap:break-word;
word-break: break-all;
}


</style>

 

发表评论:

验证码