CSS基础教程要点笔记
1、CSS：Cascading Style Sheet（层叠样式表）。
2、CSS语法规则：
（1）两个主要部分构成：选择器，以及一条或多条声明。
选择器即是指向了需要定义样式的HTML元素；声明则由一个属性及其对应的值组成。
selector {property: value}
如果声明中不止一个，则需要用分号将每个声明分开。
p { text-align:center; color:red; }
如果多个选择器可有同一个样式描述，则可以分组一起声明，并且用逗号将多个选择器分开。
h1,h2,h3,h4,h5,h6 { color: green; font-family: Verdana; }
3、派生选择器
li span{ color:blue; }
<p><span>我不是蓝色</span></p> <ul> <li>我也不是蓝色</li> <li><span>我是蓝色</span></li> </ul>
样式仅对于li中的span标签生效。
4、id选择器、类选择器、属性选择器
（1）HTML文件中可以为某个标签元素指定id属性，并且这个属性值只属于该元素所有，即在HTML文件中只能有一个同id的元素。CSS中可以通过“#”引用指定该id。
HTML文件中也可以为某个或多个元素指定class属性，CSS中可以通过“.”引用指定该类元素。
#header { font-size:30px; text-align:center; color:#000; } .setred{ color:red; } .setblue{ color:blue; }
<div id="header"> <p>Header</p> </div> <div> <p class="setred">p1</p> <p class="setblue">p2</p> <p class="setred">p3</p> </div>
（2）CSS中也可以为拥有指定属性的HTML元素设置样式，但只有在规定了!DOCTYPE时，对IE7以上的浏览器才可以。
[title]{ color: red; } /*只对带有title属性的元素有效*/
<p title="pppp">CSS有效</p> <a href="http://sina.com>CSS无效</a> <span title="ssss">CSS有效</span>
属性选择器也可以匹配属性值来进行设置样式：
[title=W3School]{ border:1px solid blue; }
也可以匹配多个属性值，下例为title属性中包括了hello的元素设置样式：
[title~=hello]{ color:red; }
<h1>可以应用样式：</h1> <h2 title="hello world">Hello world</h2> <p title="student hello">Hello W3School students!</h1> <hr /> <h1>无法应用样式：</h1> <h2 title="world">Hello world</h2> <p title="student">Hello W3School students!</p>
<!DOCTYPE HTML> <html> <head> <style type="text/css"> [title~=sanwen]{ background-color:#ccc; border:1px solid green; padding:10px; } </style> </head> <body> <p title="hello sanwen">凡是不押韵、不重排偶的散体文章，概称散文。随着文学概念的 演变和文学体裁的发展，散文的概念也时有变化，在某些历史时期又将小说与其他抒情、记事 的文学作品统称为散文，以区别于讲求韵律的诗歌。现代散文是指除小说、诗歌、戏剧等文学 体裁之外的其他文学作品。其本身按其内容和形式的不同，又可分为杂文、小品、随笔等。 </p> </body> </html>
为表单设置样式：
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }
5、CSS创建
（1）外部样式表
建立一个cs文件（扩展名为css），然后在HTML文件中通过头部中link标签引用：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
(2)内部样式表
在HTML头部中通过style标签设置：
<head> <style type="text/css"> p{..} span{..} } </head>
（3）内联样式
在需要设置样式的元素中直接通过style设置：
<p style="text-align:center;color:#ccc"> text </p>
