本文详细介绍了CSS样式的三种类型：行内样式、内嵌样式和外联样式，并通过实例展示了如何使用这些样式来实现网页布局和外观设计。此外，还介绍了伪选择器及其在超链接上的应用。
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 点击后执行的动作
{
}
扫一扫
448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
