css 层叠样式表解释

发布网友发布时间：2022-04-06 11:39

共1个回答

热心网友时间：2022-04-06 13:08

* 整个文件
{
border: 0;没有边框
margin: 0;外间距为0
padding: 0;内间距为0
}

a
{
text-decoration: none; 所有默认超链接没有下划线
}

body 所有内容
{
background: #000000; 背景色为黑色
color: #777; 文字颜色为#777
margin: 0 auto; 样式左右局中上下顶头
padding: 50px; 内间距50像素
position: relative; 对象不可层叠
width: 620px; 样式宽度为620px
}

h1
{
background: inherit; 背景色继承父本
/*
border-bottom: 1px dashed #ccc; 被注视掉了
*/
color: #933; 文字颜色#933
font: 17px Georgia, serif; 文字属性
margin: 0 0 10px; 外间距上左右0像素下10像素
padding: 0 0 5px; 内间距上左右0像素下5像素
text-align: center; 文字水平局中
}

p
{
clear: both; 清除浮动
font: 10px Verdana, sans-serif; 文字样式
padding: 10px 0; 内间距上下10像素左右0像素
text-align: center; 文字水平局中
}

p a
{
background: inherit; 段落背景色继承父色
color: #777; 超链接文字颜色为#777
}

p a:hover
{
background: inherit;
color: #000; 段落超链接鼠标经过时颜色为黑色
}

/* =Hoverbox Code
----------------------------------------------------------------------*/ 被注视掉

.hoverbox
{
cursor: default; 鼠标样式不显示
list-style: none; 清除样式
}

.hoverbox a
{
cursor: default; 鼠标样式不显示
}

.hoverbox a .preview
{
display: none; 鼠标样式不显示
}

.hoverbox a:hover .preview 鼠标经过
{
display: block; 鼠标样式显示
position: absolute; 对象不可层叠
top: -33px; 据顶端-33个像素
left: -45px; 据左边-45个像素
z-index: 1; 纵坐标为1
}

.hoverbox img boverbox里的图片
{
background: #fff; 背景色白色
border-color: #aaa #ccc #ddd #bbb; 边框上右下左的颜色
border-style: solid; 边框为实线
border-width: 1px; 边框1个像素
color: inherit; 文字颜色继承父色
padding: 2px; 内间距2个像素
vertical-align: top; 竖直顶端对齐
width: 100px; 宽度100像素
height: 75px; 高度75像素
}

.hoverbox li hoverbox里的li标记
{
background: #eee; 背景色 #eee
border-color: #ddd #bbb #aaa #ccc;边框上右下左的颜色
border-style: solid;边框为实线
border-width: 1px;边框1个像素
color: inherit;文字颜色继承父色
display: inline;内联对象
float: left;左浮动
margin: 3px;外间距3像素
padding: 5px;内间距5像素
position: relative;对象不可层叠
}

.hoverbox .preview
{
border-color: #000; 边框颜色#000
width: 200px; 宽度200像素
height: 150px; 高度150像素
}

给分吧很辛苦的哦

css 层叠样式表 解释

css 层叠样式表解释