CSS 样式学习(2012/7/20) 
<meta http-equiv=”Content-Type” content=”text/html;charset=gb2312”

标识文档的编码语言。

<link href="layout.css" rel="stylesheet" type="text/css" />

在源代码中以link方式连接，可以本页调用，也可其他页调用，是把css文件写在单独的一个css中的。

内部样式表。只针对本页有效，不可用作其他界面使用。

<style type="text/css">
  body
  {
     margin:0px;
      }
#layout { height: 300px;  background: #99FFcc; margin:auto;}
</style>

 

行内样式表，只正对标签内的元素有效，与内容不分离，不推荐使用 

View Code 
1 <table  style="background-color:#eeeddb;" width="100%" height="200px">
2 <tr>
3 <td>
4 </td>
5 </tr>
6 </table>

 

连接样式

@Import url("/styles/site.css");

 此方法是在一个Css样式表内部去链接另一个样式表。比如你可以将全局都要使用到的样式放到site.css样式表中，通过@Import url(“/styles/site.css”)；就可链接全局样式。可以使代码达到很好的重用性。

 

Css优先级

id优先级先于Class

后面的样式覆盖前面的

指定的高于继承的

行内样式高于内部或外部的

总结为一句话：

单一（id）的高于公用的（class），有指定的用指定的，无指定的则继承离它最近的。

 

Css盒子模型

具备属性：

Margin 边界    元素四个边缘的距离

Border  边框   元素所在四个边缘的边框

Padding 填充    元素四个边缘的空白

Content  内容

盒子模型可以很形象的认为是一个打了包装的电视机箱，其中内容Content就是电视机，而填充Padding则是为防震荡而填充的泡沫，Border边框呢就是箱子包装纸的厚度，至于边界Margin这是为方便取出所留有的缝隙了。需要注意的是：在Css样式中，定义的Widht仅仅是内容的宽度而非盒子的宽度

 

当一个盒模型的外边距Margin:auto时，可以让此盒子居中。

 

当一个盒子不设置width属性时，它是默认相对于浏览器显示的

View Code 
1 Body｛
2 
3 Margin：0px；
4 
5 ｝
6 
7 #layout { height: 300px;  background: #99FFcc; margin:auto;}

 

可以把body默认人的边界去掉，如此id为Layout的元素则会在浏览器中无白边显示。负责会在浏览器两边有白边。

Body{}   元素

.button {}  类

#layout{}  元素ID

@import url{“”} 连接别的Css样式表

一般 网站整体可分为上中下三部分。即：头部（header）、中间主题（mainContent）、询问（footer）。

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
 2 TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5 <meta http-equiv ="Content-Type" content="text/html;charset=gb2312" />
 6 <style type="text/css">
 7   body
 8   {
 9      margin:0px;
10      padding:0;
11      
12       }
13       #header
14       {
15          background-color:#333; height:200px; margin:0px;font-size:12px;
16           }
17        #main
18        {
19          background-color:#eeeddb; height:300px; margin:0px;font-size:12px;
20            }
21        #footer
22        {
23          background-color:#ffddbc; height:200px; margin:0px; font-size:12px;
24            }
25       
26 </style>
27 </head>
28 <body>
29 <div  id="header">我¨°是º?头ª¡¤部?</div>
30 <div id="main">我¨°是º?中D间?主¡Â题¬a</div>
31 <div id="footer">我¨°是º?底Ì¡Á部?询¡¥问¨º</div>
32 </table>
33 </body>
34 </html>

 

 当我们拖动浏览器窗口变大变小时，#main的宽度也会跟着改变。这里设置margin-left:120px;正好让出#side占去的120px宽度，如果这里设置为140px的话，中间将出现40px的空隙

View Code 
1 <style>
2 #side { background: #333; height: 300px; width: 120px; float: left; }
3 #main { background: #eeeddb; height: 300px; width: 70%; margin-left: 120px; }
4 </style>
5 </head>
6 <body>
7 <div id="side">此ä?处ä|显?示º? id "side" 的Ì?内¨²容¨Y</div>
8 <div id="main">此ä?处ä|显?示º? id "main" 的Ì?内¨²容¨Y</div>
9 </body>

 

Xhtml的块级元素（div）和内联元素（span）

块级元素：即是一个方块，像段落一样，默认情况下占据一行出现。

每个块级元素都从新的一行开始显示，而其后的元素也是从新的一行显示。

 

常见的块级元素有：段落<p> 、 表单<form> 、 表格<Table> 、DIV<div>、BODY<body> 、 列表<ul><ol><li>

 

内联元素：又叫行内元素，只能放在行内，不能造成前后换行等，其辅助作用。

常用的内联元素：表单元素<input>、超级连接<a>、图像<img>、<span>

可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。

 

Float浮动属性

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

 

两列自适应宽度

例：左列固定 ，右列自适应。因为div是块状元素，默认情况下占据一行的空间，如果想让下面的Div跑到右侧显示，则需要借助Css的浮动来实现。

View Code 
 1 <style>
 2     body
 3     {
 4        margin:2px auto;
 5        line-height:200%;   //行间距
 6         }
 7     #Header
 8     {
 9         margin:0px auto;  
10         font-size:16px;
11         }
12     #img1
13     {
14        float:left;
15 width:200px;   //当元素浮动后，需要指定一个宽度，否则它会尽可能的窄，当把img1的宽度设置大于图片宽度时
16 ，他们中间就会有了间隙。} 
17 
18     #Title
19 
20     {
21 
22       font-size:14px; 
23 
24       margin-left:202px;  // 如果不设置元素左边缘的边距，当字数过多时就会跑到图片下面，而要想不让Title的文字跑入图片下面则需要设置此。
25 
26         }
27 
28 </style>
29 
30  
31 
32  
33 
34  
35 
36 <body>
37 
38 <h1 id="Header">雏?菊?</h1>
39 
40 <div id="img1"><img src="img/side.jpg" width="191px" height="140px" /></div>
41 
42 <div id="Title">
43 
44 雏?菊?是º?菊?科?植2物?的Ì?一°?种?，ê?别Àe名?长¡è命¨¹菊?、¡é延¨®命¨¹菊?，ê?原-产¨²于®¨²欧¡¤洲T，ê?原-种?被À?视º¨®为a丛ä?生¦¨²的Ì?杂¨®草Y，ê?开a花¡§期¨²在¨²春äo季?。¡ê
45 
46 雏?菊?是º?多¨¤年¨º生¦¨²草Y本À?植2物?，ê?学¡ì名?的Ì?种?加¨®词䨺perennis也°2含?有®D“¡ã多¨¤年¨º生¦¨²的Ì?”¡À的Ì?意°a思?。¡ê雏?菊?深¦?得Ì?意°a大䨮利¤?人¨?的Ì?喜2爱ã?，ê?
47 
48 因°¨°而?推ª?举¨´为a国¨²花¡§。¡ê雏?菊?又®?叫D干¨¦菊?、¡é白ã¡Á菊?，ê?可¨¦以°?作Á¡Â为a药°?用®?植2物?。¡ê 雏?菊?的Ì?种?植2历¤¨²史º¡¤很¨¹悠®?久?，ê?常¡ê秋?播£¤作Á¡Â2年¨º生¦¨²栽?培¨¤，ê?
49 
50 株¨º高?15-20厘¤?米¡Á。¡ê叶°?基¨´部?簇ä?生¦¨²，ê?匙¡Á形?。¡ê头ª¡¤状Á¡ä花¡§序¨°单Ì£¤生¦¨²，ê?花¡§径?3-5厘¤?米¡Á，ê?舌¦¨¤状Á¡ä花¡§为a条¬?形?。¡ê有®D白ã¡Á色¦?、¡é粉¤?色¦?、¡é红¨¬色¦?等̨¨。¡ê
51 
52 花¡§语®?：êo纯ä?洁¨¤的Ì?美¨¤·¡è天¬¨¬真?、¡é和¨ª平?、¡é希¡ê望ª?以°?及¡ã“¡ã深¦?藏?在¨²心?底Ì¡Á的Ì?爱ã?”¡À。¡ê</div>
53 
54 </body>

 

 行自适应宽度

常有结构：左右列固定，中间根据浏览器自适应。

注意布局时候的控件顺序

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
 2 DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6     <style>
 7         body
 8         {
 9             margin: 0;
10         }
11         #leftPart
12         {  
13             background-color:#eeeddb;
14             width: 200px;
15             height: 300px;
16             float: left;
17         }
18         #rightPart
19         {
20             background-color:#99ff99;
21             width: 200px;
22             height: 300px;
23             float: right;
24         }
25         #main
26         {
27             margin: 0;
28             background-color: #333;
29             height:300px;
30         }
31     </style>
32 </head>
33 <body>
34     <div id="leftPart">
35         1</div>
36     <div id="rightPart">
37         2</div>
38     <div id="main">
39         3</div>
40 </body>
41 </html>

 

 三列固定宽度

只需要给三列自适应添加一个父<div>就可以。用父<div>来控制它们的大小和位置了解：

IE6的3像素bug

当浮动元素与非浮动元素相邻时，它们之间会有3像素的间隙。而在IE7等中则没有。要解决这个bug，只需要在浮动元素中键入_margin-right:-3px;即可。一定要在前面加上一个下划线。

但是它不能通过W3C验证。

当两列固定宽度时候，最好把两列宽度都固定，并且一个向左浮动，一个向右浮动。这样的效果是中间空着两边显示，要想让它们居中显示则可以把它们放在一个父<div>中，只需要让父<div>的margin：0px auto ，同时一定要给予其宽度值

 

纵向列表

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
 2 DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6     <style>
 7         #menu ul
 8         {
 9             list-style: none;
10             margin: opx;
11             padding: 0px;
12         }
13         a
14         {
15             color: #333;
16             text-decoration: underline;
17         }
18         a:hover
19         {
20             color: Yellow;
21         }
22         #menu
23         {
24             width: 100px;
25             border: 1px inset red;
26         }
27         #menu ul li
28         {
29             background: #eeeddb;
30             padding: 0 5px;
31             height: 30px;
32             line-height: 30px;
33             border-bottom: 1px solid #000;
34         }
35     </style>
36 </head>
37 <body>
38     <div id="menu">
39         <ul>
40             <li>首º¡Á页°3</li>
41             <li>布?局?</li>
42             <li>颜?色¦?</li>
43             <li>样¨´式º?</li>
44             <li><a href="List.aspx">链¢¡ä接¨®</a> </li>
45             <li>图ª?片?素?材?</li>
46         </ul>
47     </div>
48 </body>
49 </html>

 

二级菜单弹出：

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
 2 DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6 <style type="text/css">
 7 body
 8 {
 9    font-family:Verdana;
10    font-size:12px;
11    line-height:1.5;  
12     }
13  a
14  {
15    color:none;
16    text-decoration:none;  
17      }
18  a:hover
19  {
20    color: Red;   
21      }
22  #menu
23  {
24    width:100px;
25    border:1px solid #eeeddb;
26    border-bottom:none；ê?  
27      }    
28  #menu ul
29  {
30    list-style:none; margin:0; padding:0;   
31      }
32  #menu ul li
33  {
34    background:#eee; padding:0  8px; height:20px; line-height:20px; border-bottom:1px
35  solid #333; position:relative;   
36      }
37  #menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; 
38 border:1px solid #ccc; border-bottom:none; }
39 
40  #menu ul li:hover ul { display:block;}
41 
42  
43 </style>
44 </head>
45 <body>
46 <div id="menu">
47 <ul>
48 <li><a href="#">首º¡Á页°3</a></li>
49 <li><a href="#">网ª?页°3版ã?式º?布?局?</a>
50 <ul>
51 <li><a href="#">自Á?适º¨º应®|宽¨ª度¨¨</a></li>
52 <li><a href="#">固¨¬定¡§宽¨ª度¨¨</a></li>
53 </ul>
54 </li>
55 <li><a href="#">div+css教¨¬程¨¬</a>
56 <ul>
57 <li><a href="#">新?手º?入¨?门?</a></li>
58 <li><a href="#">视º¨®频¦Ì教¨¬程¨¬</a></li>
59 <li><a href="#">常¡ê见?问¨º题¬a</a></li>
60 </ul>
61 </li>
62 <li><a href="#">div+css实º¦Ì例¤y</a></li>
63 <li><a href="#">常¡ê用®?代䨲码?</a></li>
64 <li><a href="#">站?长¡è杂¨®谈¬?</a></li>
65 <li><a href="#">技?术º?文?档̦Ì</a></li>
66 <li><a href="#">资Á¨º源¡ä下?载?</a></li>
67 <li><a href="#">图ª?片?素?材?</a></li>
68 </ul>
69 </div>
70 </body>
71 </html>

 

标签的默认样式：

去掉标签的默认样式：

View Code 
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }

ul { list-style: none; }

img { border-style: none; }

选择器及其派生选择器已经它们的分组

 

可提高效率，在定义好的父选择器下选择，如此就可以更进一步的定位，而不至于全局定位，节省了大量时间，同时应用到了指定的父选择器下派生的选择器上，而不至于全局定位以至于改变全局的此类派生器的样式。

 

被分组的选择器可以共享相同的声明，他们之间用逗号隔开。   

 

 

 

超链接的四种样式：

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

使用是四种状态的顺序不能颠倒，否则无法使用。

 

伪类：正常的类是以点开始，后面跟一个名称，而超链接的伪类则是以a开始后面跟个冒号，之后加个状态限定字符。

 

 

将链接转换为块级元素

链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。

 

posted on 2012-07-23 08:58  雨 落  阅读(685)  评论(0)    收藏  举报
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3