CSS02-课堂笔记
1、CSS 是为了解决 HTML 样式和内容混杂而产生的。
CSS 的解释器是内嵌在浏览器内部的，不同的浏览器对同一段 CSS 代码，可能由不同的解释方式，导致目前有些 CSS 样式在不同浏览器中运行效果不同。
CSS 目前运行的版本是 2.0 ，有些浏览器也支持 CSS 3.0 的语法。
2、CSS 盒状模型
在 HTML 中通过 <div> 标签，来包含要修饰样式的内容。
可以通过 CSS 代码，设置 <div> 的内容大小、内间距、边框粗细、外间距
页面上的内容是由一个个的 <div> 块像搭积木一样搭建起来的。
3、CSS 语法
CSS 语法由三部分构成：选择器、属性和值
CSS 对空格和大小写不敏感
selector {property: value;[property: value;]…}
示例:
p { color : red; font-weight : bold; }
#dataCell { text-align : center; }
4、引入CSS的4种方式
行内引入
<p style="样式代码">段落文本</p>
内嵌引入
<style type="text/css" >样式代码</style>
外部导入
<style type="text/css">@import "样式文件url"; </style>
外部链接
<link href="样式文件url " rel="stylesheet" type="text/css" />
5、使用 CSS 样式步骤：
(1)通过一定的方法，找到要添加样式的 html 标签(元素)
(2)添加一定的样式 color : red; font-weight : bold;
(3)有些样式是整个页面都可以使用的，有些只能某一个内容使用，要能够区分开
选择器分类
基本选择器
-------------------------------
<span id="title" }
复合选择器
---------------------------------------------
“交集”选择器
div.divClass {……}
<div >标题<div>Java 编程大赛</div></h1>
</div>
特殊选择器
-------------------------------------
超链接标签<a>拥有特殊类型的选择器
a{}
为所有的超链接标签设置样式
a:link{}
普通状态下的超链接样式
a:visited{}
已经点击过的超链接样式
a:hover{}
鼠标经过该超链接时的样式
a:active{}
鼠标点击超链接时的样式
6、CSS样式的优先级原则
子元素的样式会覆盖父元素定义的相同样式
同一元素不同样式选择器定义相同样式时,优先级为:
style属性样式 > ID选择器样式>类别选择器样式 >标签选择器样式
7、CSS 学习
使用网页设计工具，通过CSS代码提示去逐步熟悉
通过网络资源学习
W3C学校http://www.w3school.com.cn/css/index.asp
网页设计联盟http://htmlhelp.com/zh/reference/css
网页设计师 www.w3cn.org
通过经典的设计案例去学习
CSS禅意花园http://www.csszengarden.com/
资源清单：
1、FireBug
2、rapidcss 编辑器
3、page1.html --CSS禅意花园
4、CSS2.0中文手册.chm
5、5日精通CSS.exe
6、100款网站样式.rar
