<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>
时间： 2024-10-11 01:06:13