DIV+css样式详解
1
:行内样式 <body style="background-color:black" >111</body>
2: 内嵌样式<stylr type="text/css">
table td
{
width=150px;
height=200px;
border:solid 1px red;
}
</style>
3:外联样式<link type="text/css" rel="stylesheet" href="css/2.css">
对于内嵌样式详解:
<stylr type="text/css">
ul //运行后的效果截图
{ list-style-type:none;
}
li //标签选择器
{ float:left;
background-color:Yellow;
margin:10px;
}
{ float:left;
background-color:Yellow;
margin:10px;
}
</style>
<ul>
<li class="ml">5454</li>
<li class="ml">5454</li>
<li class="ll">5454</li>
</ul>
<li class="ml">5454</li>
<li class="ml">5454</li>
<li class="ll">5454</li>
</ul>
<style type="text/css">
ol,ul 组合选择器
{
list-style-type:none;
}
.ml //类选择器
{ float:left;
background-color:Yellow;
margin:10px;
}
#ll //id选择器
{
float:left;
background-color:blue;
margin:10px;
}
</style>
ol,ul 组合选择器
{
list-style-type:none;
}
.ml //类选择器
{ float:left;
background-color:Yellow;
margin:10px;
}
#ll //id选择器
{
float:left;
background-color:blue;
margin:10px;
}
</style>
<ul>
<li class="ml">5454</li>
<li class="ml">5454</li>
<li class="ll">5454</li>
</ul>
<br/><br/> <br/>
<ol >
<li class="ml">5454</li>
<li class="ml">5454</li>
<li id="ll">5454</li>
</ol>
<li class="ml">5454</li>
<li class="ml">5454</li>
<li class="ll">5454</li>
</ul>
<br/><br/> <br/>
<ol >
<li class="ml">5454</li>
<li class="ml">5454</li>
<li id="ll">5454</li>
</ol>
运行后的图片:
而对于外联样式与内嵌样式用的时候是一样的只不过一个单独的写在了一个文件里!
最后还一个伪选择器就是常用在超链接上的
a:link 未点击时执行的动作
{
}
a:hover 鼠标移入时执行的动作
{
}
a:active 点击时执行的动作
{
}
a:visited 点击后执行的动作
{
}