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" class="myClass">author</span>

Html标记选择器
span { font-size : 20px; }

类别选择器
. myClass { color : #4499ee ; }

ID选择器
#title { font-family : "幼圆" }



复合选择器
---------------------------------------------
“交集”选择器
div.divClass {……}
      <div class="divClass">afasdfasd</div>
div#divId {……}
      <div id="divId">afasdfasd</div>

“并集”选择器
div, h1#htitle, p.pClass {……}
      

    后代选择器
    div h1#htitle div, h1#htitle, p.pClass {……}
     html 标签可以嵌套，CSS 选择器可以从外层标签开始，一直选择到最内层的标签。
<div>
   <h1 id="htitle" >标题<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