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

最新文章

  1. MATLAB地图工具箱学习总结(四)自定义投影
  2. fir.im Weekly - 给女朋友的 iOS 开发教程
  3. [转]Mybatis3.x与Spring4.x整合
  4. 【转发】SSH无密码登录的配置
  5. Kettle简介
  6. 系统数据文件和信息之附加组ID
  7. spring beans源码解读之--XmlBeanFactory
  8. hdu GCD and LCM
  9. 跨域访问解决方案:JSONP
  10. ref:linux用户和组管理,/etc/passwd,/etc/shadow和/etc/group 文件内容解释
  11. PHP只显示姓名首尾字符,隐藏中间字符并用*替换
  12. Fix-Dell iDRAC 7 error: RAC0218: The maximum number of user sessions is reached
  13. eclipse导入spring aop xml约束
  14. SSZipArchive解压失败的原因
  15. vue-cli脚手架里如何配置屏幕自适应
  16. 【BZOJ 4031】 4031: [HEOI2015]小Z的房间 (Matrix-Tree Theorem)
  17. *.app 无法打开或已损坏解决办法
  18. LeetCode: Next Greater Element I
  19. uva658(最短路径+隐式图+状态压缩)
  20. jsp smartupload学习

热门文章

  1. 【NOIP2016】天天爱跑步(树上差分)
  2. 【ZJOI2017 Round1练习】D8T2 sequence(DP)
  3. CentOS虚拟机与本机同步时间
  4. yum install tree 出错primary.sqlite.bz2: [Errno -1] Metadata file does not match checks 解决办法
  5. TCP网络库:Acceptor、TcpServer、TcpConnection
  6. yarn 和 npm 的区别
  7. 加入收藏BUG改善
  8. scu oj 4442 Party(2015年四川省acm程序设计竞赛)
  9. C/C++生成可执行文件过程
  10. #pragma pack (n) 惹的祸