首页 > 代码库 > CSS之选择符、链接、盒子模型、显示隐藏元素

CSS之选择符、链接、盒子模型、显示隐藏元素

2024-08-20 16:34:16   220人阅读

 <html>
<head>
  <meta charset="utf-8">
  <title>选择符、链接、盒子模型、显示隐藏元素</title>

<style>
a:link{
    color:red;
}    
a:visited{
    color:black;
}
a:hover{
    color:blue;
}                
a:active{
    color:green;
}        
</style>  

</head>
<body>
<!--链接设置-->                            
<ul style="list-style:none">
<li>
<a href="#" id="link">
a:link 
链接未访问前的样式red
</a>
</li><li>
<a href="http://www.baidu.com" id="visited">
a:visited
链接已访问的样式black
</a>
</li><li>
<a href="#">
a:hover
鼠标悬停到链接的样式blue
</a>
</li><li>
<a href="#"    style="text-decoration:none">
a:active
活动的链接，即是获得焦点的链接（比如点击鼠标左键不放）green
</a>
</li>
</ul>
<hr/>
<!--选择符-->                                 
CSS选择符------六种选择符
通配选择符（*）
* {  color: red;  }
<br/>
类型选择符（HTML标签）
a
{
    text-decoration: none;
}
<br/>
包含选择符（空格）
li span
{
    color: red;
    font-weight: bold;
}    
<br/>
ID选择符（#）
#p1
{
    color: red;
}
<br/>
Class选择符（.）
.center {
            text-align: center;
            width: 200px;
            border: solid 1px #ccc;
}
<br/>
伪类选择符（:）
a:link
a:visited
a:hover
a:active
<br/>
<hr/>
<!--盒子模型-->                            
盒子模型<br/>
描述一个HTML元素形成的矩形盒子。<br/>
外边距（margin）&nbsp;&nbsp;margin: 20px 15px 10px 5px;<br/>
边框（border）&nbsp;&nbsp;border: [border-style] [border-width] [border-color]&nbsp;&nbsp;border: solid 5px #ccc;<br/>
如果需要精确控制每个边框的样式，可以设置如下属性：
border-left-style/border-left-width/border-left-color<br/>
border-style值有：none、dashed、dotted、double、groove、inset、outset、ridge、solid
<br/>
内边距（padding）&nbsp;&nbsp;padding: 10px 20px;<br/>
宽度和高度（width/height）&nbsp;&nbsp;<br/>
<br/>
偏移量<br>
--------------------------------------------<br/>
|外边距______________________________      |<br/>
|       |边框______________________   |     |<br/>
|      |    |内边距__________     |  |     |<br/>
|      |    |      |         |    |  |     |<br/>
|      |    |      |         |    |  |     |<br/>
|      |    |      |         |    |  |     |<br/>
|      |    |      |_________|    |  |     |<br/>
|      |    |_____________________|  |     |<br/>
|      |_____________________________|     |<br/>
|                                          |<br/> 
--------------------------------------------<br/>
<hr/>
<!--显示隐藏元素-->                     
display<br/>
--block <br/>
--块对象的默认值。对象之后添加新行。 <br/>
--none<br/>
--隐藏对象。隐藏的对象不占据物理空间。<br/>
--inline<br/>
--内联对象的默认值。对象后不添加行。<br/><br/>

visibility<br/>
--visible<br/>
--对象可视 <br/>
--hidden<br/>
--对象隐藏，隐藏的对象占据物理空间<br/><br/>

display:none; 与 visibility:hidden 的区别？<br/>
display:none;不占据页面空间<br/>
visibility:hidden; 占据页面空间<br/><br/>

</body>
</html>

 

CSS之选择符、链接、盒子模型、显示隐藏元素


联系
我们