码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-11-13 22:19:37      阅读:292      评论:0      收藏:0      [点我收藏+]

标签:display   显示   text   visible   char   visit   点击   black   height   

 <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之选择符、链接、盒子模型、显示隐藏元素

标签:display   显示   text   visible   char   visit   点击   black   height   

原文地址:http://www.cnblogs.com/1020182600HENG/p/6059752.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!