CSS在线课程学习笔记
第1课：CSS是什么？
HTML用于结构化内容；CSS用于格式化结构化的内容。
嗯，这听上去有点技术性并令人疑惑。不过没关系，我们继续学习。过会儿你就明白了。
在Tim Berners-Lee发明万维网（World Wide Web）的那个年代，HTML语言是唯一用于给文本添加结构的语言。作者可以通过声明“这是一个标题”（利用h1标签）或“这是一个段落”（利用p标签）的方式来标记文本。
随着Web逐渐流行起来，网页设计者们开始寻求为网页增添布局的可能性。为此，当时的浏览器厂商们（网景公司和微软公司）发明了一些新的HTML标签（比如<font>等），以引入了新的布局——而非新的结构。
<table>等）越来越多地被误用于进行页面的布局。许多新的布局标签（比如<blink>）只有一种浏览器支持。“您需要使用某某浏览器来浏览本页面”成为当时常见于许多网站的声明。CSS是Web设计界的一次革命。CSS的具体优点包括：
- 通过单个样式表控制多个文档的布局；（Swing：通过托管所有控件，来统一控制样式，已实现）
- 更精确的布局控制；（Swing：将要实现）
- 为不同的媒体类型（屏幕、打印等）采取不同的布局；
- 无数高级、先进的技巧。
第2课：CSS的工作原理
用HTML的话，我们可以这样：
<body bgcolor="#FF0000">
body {background-color: #FF0000;}
一、基本选择器
| 序号 | 选择器 | 含义 |
| 1. | * | 通用元素选择器，匹配任何元素 |
| 2. | E | 标签选择器，匹配所有使用E标签的元素 |
| 3. | .info | class选择器，匹配所有class属性中包含info的元素 |
| 4. | #footer | id选择器，匹配所有id属性等于footer的元素 |
实例：
* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
p.info { background:#ff0; }
p.info.error { color:#900; font-weight:bold; }
#info { background:#ff0; }
p#info { background:#ff0; }
为一个HTML文档应用CSS
为HTML文档应用CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样式表）予以关注。
方法1：行内样式表（STYLE属性）
为HTML应用CSS的一种方法是使用HTML属性style。我们在上例的基础之上，通过行内样式表将页面背景设为红色：
<html><head><title>例子</title></head><body style="background-color: #FF0000;"><p>这个页面是红色的</p></body></html>
方法2：内部样式表（STYLE元素）
为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样：
<html><head><title>例子</title><style type="text/css">body {background-color: #FF0000;}</style></head><body><p>这个页面是红色的</p></body></html>
方法3：外部样式表（引用一个样式表文件）
我们推荐采用这种引用外部样式表的方法。在本教程之后的例子中，我们将全部采用该方法。
外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。
例如，比方说你的样式表文件名为style.css，它通常被存放于名为style的目录中。就像下面这样：
现在的问题是：如何在一个HTML文档里引用一个外部样式表文件（style.css）呢？答案是：在HTML文档里创建一个指向外部样式表文件的链接（link）即可，就像下面这样：
<link rel="stylesheet" type="text/css" href="style/style.css" />
注意要在href属性里给出样式表文件的地址。
这行代码必须被插入HTML代码的头部（header），即放在标签<head>和标签</head>之间。就像这样：
<html><head><title>我的文档</title><link rel="stylesheet" type="text/css" href="style/style.css" /></head><body>...
这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。
这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。
这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这100个HTML文档的工作。采用外部样式表，这样的修改只需几秒钟即可搞定——修改外部样式表文件里的代码即可。
第8课：组织元素（span和div）
<p>早睡早起 使人<span>健康</span>、 <span>富裕</span> 和<span>聪颖</span>。</p> 相应的CSS代码如下：
span.benefit { color:red; }
我们将历届美国总统按其所属的政营分别组织为两个列表：
<div id="democrats">
<ul>
<li>富兰克林·D·罗斯福</li>
<li>哈利·S·杜鲁门</li>
<li>约翰·F·肯尼迪</li>
<li>林登·B·约翰逊</li>
<li>吉米·卡特</li>
<li>比尔·克林顿</li>
</ul>
</div>
在这里，我们可以采用跟上例同样的方法来处理样式表：
#democrats { background:blue; }
如前面例子所示，span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。
div和span在组织元素方面相差无几。2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：
测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</span>
第9课：盒状模型
CSS中的盒状模型
这个例子包含了两个元素：h1和p。这两个元素的盒状模型如下图所示：
为元素设置外边距
body { margin-top:100px; margin-right:40px; margin-bottom:10px; margin-left:70px; }
或者你也可以采用一种较优雅的缩写形式：
body { margin: 100px 40px 10px 70px; }
为元素设置内边距
通过为标题设置内边距，你可以控制在标题文本周围填充多少空白：
h1 {
background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; } 边框
h1 {
border-width:1px; border-style:solid; border-color:gold; } div.box {
height: 500px; width: 200px; border: 1px solid black; background: orange; } 第13课：浮动元素（float）
float属性的值可以是left、right或者none。
我们可以通过CSS属性float令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边（参见第9课关于盒状模型的描述）。下图阐明了其原理：
举个例子，假如我们想让一张图片被一段文字围绕着，那么其显示效果将如下所示：
如何实现这个效果？
上例的HTML代码如下所示：
<div id="picture">
<img src="bill.jpg" alt="Bill Gates"> </div> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>
要实现图片向左浮动、而且被文字环绕的效果，你只需先设定图片所在盒子的宽度，然后再把CSS属性float设为left即可：
#picture { float:left; width: 100px; }
另一个例子：列
浮动也可以用于实现在文档中分列。要创建多个列，你需要在HTML代码里用div来结构化想要的各个列：
<div id="column1">
<p>Haec disserens qua de re agatur...</p> </div> <div id="column2"> <p>causas naturales et antecedentes...</p> </div> <div id="column3"> <p>nam nihil esset in nostra...</p> </div>
下面，我们把各列的宽度设定为“33%”，并通过定义float属性令各列向左浮动：
#column1 { float:left; width: 33%; }
#column2 { float:left; width: 33%; } #column3 { float:left; width: 33%; } clear属性
CSS属性clear用于控制浮动元素的后继元素的行为。
缺省地，后继元素将向上移动，以填补由于前面元素的浮动而空出的可用空间。
clear属性的值可以是left、right、both或none。原则是这样的：如果一个盒子的clear属性被设为“both”，那么该盒子的上边距将始终处于前面的浮动盒子（如果存在的话）的下边距之下。
<div id="picture">
<img src="bill.jpg" alt="Bill Gates"> </div> <h1>Bill Gates</h1> <p class="floatstop">causas naturales et antecedentes..</p> 要避免文本上移到图片旁，我们可以在CSS中添加以下代码：
#picture {
float:left; width: 160px; } .floatstop { clear:both; } 第14课：元素的定位
CSS定位的原理
把浏览器窗口想象成一个坐标系统：
position属性常见的值有三种：
- static: 不使用定位（默认值）。
- absolute: 使用绝对定位。
- relative: 使用相对定位。
绝对定位
将元素设置为 position:absolute 可以使其变为绝对定位。绝对定位的元素将不再包含于文档流之中，也就是说，浏览器在从上到下显示HTML文档的各个元素时会“忽略”掉绝对定位的元素，好像它根本不存在一样。如下图：
指定绝对定位之后，就可以通过left和top属性来指定该元素的位置。一般来说，left和top以浏览器内容区域的左上角为原点(0,0)。但有一个特例，即''当一个绝对定位的元素的父元素也被绝对定位，那么该元素的位置将以其父元素区域的左上角为原点''。
绝对定位由于可以直接指定左上角位置，因此页面布局会很容易。但是它无法处理带有页脚的页面布局，因为你无法确定正文内容的量，所以无法将页脚元素精确地定位到正文的下方。
相对定位
相对定位使得元素在原有位置的基础上移动top和left指定的距离。相对定位不会将元素从文档流中剔除，因此浏览器在显示相对定位的元素时，会当作它还在原有位置一样进行处理。如下面的代码，可以看到div1和div3之间留出了div2的位置，而实际上div2已经向右下方偏移了一定的距离。
相对定位可以很好地解决绝对定位无法做到的页脚布局问题。
有的时候我们会发现! <span style="width:100px; height:100px; background-color:Red;">这里是块内容 </span>
给span属性设置这样的高度不管用!
其实span是行内元素，只有把它转化为块级元素才可以设置它的宽和高。
正确的写法是这样的!<style> span{display:block;width:100px;height:100px;} </style>
浙公网安备 33010602011771号