CSS之选择符、链接、盒子模型、显示隐藏元素
<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) margin: 20px 15px 10px 5px;<br/> 边框(border) border: [border-style] [border-width] [border-color] 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) padding: 10px 20px;<br/> 宽度和高度(width/height) <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>