css学习笔记

CSS学习笔记：
1-CSS 语法
CSS 语法由三部分构成：选择器、属性和值：
selector {property: value}

2-记得写引号
提示：如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}

3-声明的末尾都加上分号；：大多数有经验的设计师会在每条声明的末尾都加上分号；
提示：如果要定义不止一个声明，则需要用分号将每个声明分开。
下面的例子展示出如何定义一个红色文字的居中段落。
最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。
然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你
从现有的规则中增减声明时，会尽可能的减少出错的可能性。

4-空格和大小写敏感
与 XHTML 不同，CSS 对大小写不敏感
但是class 和 id 名称对大小写是敏感的。

5-选择器的分组：用逗号将需要分组的选择器分开
h1,h2,h2,h3,h5,h6 {
  color: green;
  }

6-导入css文件import 的使用
@import url("2.css");
/*
 * 导入css文件
 * @import url("2.css");
 */

<link rel="stylesheet" href="url" type="text/css"/>
<style type="text/css">
</style>

7-css选择器
	1-标签选择器：针对html标签 p{font-family:'XX'}
	2-id选择器 ：主要定义重复的样式 格式：用.点号
		<p class="warning"></p>
		.warning{}
	同一个元素定义多个类的时候。
	类名和类名之间用空格分割
	<p class="warning bigger"></p>
	3-id选择器 针对某一个id，只能出现一次 
	用# id和类名不要以数字开头
	
8-初始化css
   /* 初始化CSS */
        html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
        fieldset, img { border:none; }
        img{display: block;}
        address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
        ul, ol { list-style:none; }
        input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
        input::-moz-focus-inner { border:none; padding:0; }
        select, input { vertical-align:middle; }
        select, input, textarea { font-size:12px; margin:0; }
        input[type="text"], input[type="password"], textarea { outline-style:none; -webkit-appearance:none; }
        textarea { resize:none; }
        table { border-collapse:collapse; }
        body { color:#333; padding:5px 0; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;/* overflow-y:scroll;*/ }
        .clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }
        .clearfix { zoom:1; }
        .clearit { clear:both; height:0; font-size:0; overflow:hidden; }
        a { color:#666; text-decoration:none; }
        a:visited { color:#666; }
        a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }