代码改变世界

浅谈CSS:CSS基本(2)

2010-02-03 15:17  huayifu  阅读(220)  评论(0)    收藏  举报

  A 伪类(Pseudo-classes)

1)超链接

:link        设置对象在未被访问前的样式表属性

:hover     设置对象在其鼠标悬停时的样式表属性

:active     设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性

:visited    设置对象在其链接地址已被访问过时的样式表属性

代码 
 1 <html>
 2  <head>
 3 
 4  <style type="text/css">
 5 a:link {color: #FF0000}
 6 a:visited {color: #00FF00}
 7 a:hover {color: #FF00FF}
 8 a:active {color: #0000FF}
 9  </style>
10 
11  </head>
12 
13  <body>
14 
15  <p><b><a href="www.cnblogs.com/linertz" target="_blank">老李</a></b></p>
16  <p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
17  <p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
18 
19  </body>
20  </html>
21  

 

2 focus  设置对象在成为输入焦点（该对象的onfocus事件发生）时css属性

1 input:focus
2  {
3 font-size: 14pt; 
4 text-decoration: underline; 
5 color: blue;
6 background-color:pink;
7 }

 

B DIV+CSS基本结构

代码 
 1 <html>
 2 <head>
 3 <style type="text/css">
 4 div.container
 5 {
 6 width:100%;
 7 margin:0px;
 8 border:1px solid gray;
 9 line-height:150%;
10 }
11 div.header,div.footer
12 {
13 padding:0.5em;
14 color:white;
15 background-color:gray;
16 clear:left;
17 }
18 h1.header
19 {
20 padding:0;
21 margin:0;
22 }
23 div.left
24 {
25 float:left;
26 width:160px;
27 margin:0;
28 padding:1em;
29 }
30 div.content
31 {
32 margin-left:190px;
33 border-left:1px solid gray;
34 padding:1em;
35 }
36 </style>
37 </head>
38 <body>
39 
40 <div class="container">
41 
42 <div class="header"><h1 class="header">Let's have a see</h1></div>
43 
44 <div class="left"><p>yesterday once more</p></div>
45 
46 <div class="content">
47 <h2>begining</h2>
48 <p>everything is begining</p>
49 <p>never give up.</p></div>
50 
51 <div class="footer">ending/div>
52 </div>
53 
54 </body>
55 </html>