<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; 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>