CSS入门学习笔记[1]

昨天花了4个小时左右又参考着番茄的blog上的css文章学习了下css,发现以前花的6小时左右的学习时间算是白学了,很多要点昨天才有所了解,看来不动手不复习是不行的,其它技术的学习也是这样的吧,呵呵,又想起了"唯手熟尔" .

有些时候不是没有时间学,而是仅仅担心时间不够而没有去学,比如eclipse的熟悉只花了4个小时不到...原以为需要惊天动地的学一段时间...  其实不需要什么口号计划,想好后动手去做就好.

CSS要点摘录

17:00－17：40  CSS学习 番茄
21：20－01:00

1.margin和padding用法一样，margin是和外部某层的距离，而padding则是和内部某层的距离。

2.margin:0px 0px 0px 0px
该部分对“上右下左”边距为0像素

3.margin:0px auto；
说明上下边距为0px，左右为自动调整；

4.font:12px 宋体;

5.width:143px;height:72px;color:#316637;
margin:0px 2px 0px 1px;
background:url(xiazai.jpg) no-repeat;
border:1px solid #7a8571;

6.a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}

7.对层的margin属性的左右边距设置为auto可以让层居中显示

8.还有一点需要大家一定要分清楚的，当在HTML中定义为id="divID"时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为class="divID"时，则在CSS中对应的设置语法是.divID。

9.首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在<td></td>中加入这么一段就可以了，你可以试试：
　　<div style="border-bottom:1px dashed #ccc"></div>
　　大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。

10.#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
display:block;line-height:28px 能够让div中定义的文字垂直居中

11.clear:both，表示清除左、右所有的浮动

12.#banner {
    background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
    width:730px; /*设定层的宽度*/
    margin:auto; /*层居中*/
    height:240px; /*设定高度*/
    border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
    clear:both /*清除浮动*/
}

13.overflow:hidden可以使内容太长（例如图片）的部份自动被隐藏。通常我们会看到一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加overflow:hidden就可以解决这个问题。

14.在这里我们有到ID和CLASS，那么有的朋友就要问了，究竟什么情况下用ID，什么情况下用CLASS呢？
答：ID，表示的是唯一性，并且在这个页面中只会出现一次，我们用它来表示布局的结构；
CLASS，表示一组（类）或一个具有同样性质的元素，它们可以共用样式，并且在页面中将会出现多次。

15.有的时候，我们需要给这些层中的元素设置不同的样式时，我们要如何做呢？例如会员登录这几个文字使用14px加粗，其他是使用12px加粗，我们要怎么写CSS呢，看下面的代码？
 程序代码
　.bar_title {font-size:12px;font-weight:bold}
　　#login .bar_title {font-size:14px}
#login .bar_title 表示的是在ID为login的层下的CLASS为bar_title的元素的样式，这样表示的就可以有针对性的对某些元素定制样式。#login .bar_title 在单独设置了font-size:14px的样式时，同时也继承了.bar_title这一组（类）的样式，那就是font-weight:bold，加粗。

16.先看页面中的层
<div class="title">
    <a>title1</a>
</div>
<span class="title">
    <a>title2</a>
</div>
这里，我要将title1的文字样式设置为14px,红色，将title2的文字样式为10px，绿色，title1和title2都需要加粗，DIV加一个红色的1px的边框，SPAN加一个绿色的1px的边框，样式可以这样写：
程序代码
　　.title {border:1px solid #f00} /*并不是div可以省略,而是"默认"为1px的红色边框*/
　　span.title {border-color:#0f0} /*span层的title的边框是绿色,不是默认的红色 */
　　.title a {font-weight:bold}  /* 默认的a标记的加粗*/
　　div.title a {font-size:14px;color:#f00} /*div层title的特殊属性*/
　　span.title a {font-size:12px;color:#0f0} /*span层title的特殊属性*/