CSS那些事

1
程序生涯的前半阶段，对于CSS一直处于：读得懂，但是写不出效果，这样子的阶段。直到某天觉得现在前端越来越有意思，所以研究了下CSS，有一点心得。
2
首先是注释，没啥好说的，/*中间是注释*/
3
对一个页面，首先统一风格的背景很重要

background-color:#ffffff;/*最外层应该统一背景色*/background-image:url('back.jpg');/*然后中间部分应该设置背景图，或者整个网页背景设置一张背景图*/background-repeat:repeat-x;/*背景图可以选择水平平铺*/background-repeat:no-repeat;/*或者不平铺*/background-position:right top;/*可以在右上角显示背景*/

4
对于文本和字体，主要考虑文字颜色、字体和文字大小

color:red;/*字体颜色是红色*/font-family:"Times New Roman";/*字体类型*/font-size:24px;/*字体大小*/font-size:1.5em;/*字体大小可以采用em，更加直观，因为1em表示当前字体大小，那1.5em就是当前大小的1.5倍*/

5
网页元素的尺寸大小问题，主要注意height和line-height

width:100%;/*可以设置为占用父元素内容的比例*/height:120px;/*可以设置绝对值*/line-height:120px;/*line-height是指元素内部一行文字的高度，注意如果height和line-height相等，说明元素高度正好可以是一行文字的高度，所以显示效果就是文字上下方向居中显示*/

6
关于对齐，主要注意margin:auto;在元素具备宽度的情况下才能实现居中效果，而且必须是块级元素。

text-align:center;/*元素内部文字对齐方向*/text-align:justify;/*元素内部文字每一行宽度相等，且每行左右两边均对齐*/margin:auto;/*可实现居中，注意设置宽度哦，不然宽度是100%，居中就没有意义了*/

7
边距，需要注意元素的边距是占用元素空间的，所以在计算时，一个元素占用宽度实际上是元素width加上内边距的左右宽度，再加上外边距的左右宽度，高度同理。

margin:1px 2px 3px 4px;/*外边距*/padding:1px;/*内边距*/

8
关于浮动

float:left;float:right;clear:both;/*清除浮动*/

9
关于超级链接

a:link {color:#000000;}/* 未访问链接*/a:visited {color:#000000;}/* 已访问链接 */a:hover {color:#0000FF;}/* 鼠标移动到链接上 */a:active {color:#0000FF;}/* 鼠标点击时 */a {text-decoration:none;}/*因为自带下划线太丑，所以可以去除超级链接的下划线*/

10
关于列表，实在是受够了自带的列表左侧图标，其实可以自定义：

list-style-image:url('list_logo.gif');/*自定义列表的图表*/

11
关于表格，常用定义如下，先使边框线变为一条（默认的两条太难看），然后定义边框样式。

table {border-collapse: collapse;/*边框线一条，这样美观*/}table, th, td/*单元格样式*/{border: 1px solid black;border-width:5px;border-sytle:solid;border-color:blue;}

12
CSS的选择器

/*元素选择器*/.xx按class="xx"选#xx按id="xx"选xx,yy,zz表示选择xx和yy和zzxx yy表示选择xx中的yy元素xx>yy选择xx的子元素yyxx+yy选择xx的后面兄弟元素yyxx~yy选择xx的相邻兄弟元素yyxx:first-child选择xx第一个子元素/*属性选择*/[title]包含title属性[title=hello]筛选title属性值为hello的元素

13
隐藏元素有讲究，如果一个元素采用了display:none;来隐藏导致占用空间消失，则有可能会影响布局。

/*visibility:hidden;不可见但是占空间display:none;不可见，也不占空间了*/