第1课：CSS是什么？
CSS跟HTML的区别在哪里？
HTML用于结构化内容；CSS用于格式化结构化的内容。
嗯，这听上去有点技术性并令人疑惑。不过没关系，我们继续学习。过会儿你就明白了。
在Tim Berners-Lee发明万维网（World Wide Web）的那个年代，HTML语言是唯一用于给文本添加结构的语言。作者可以通过声明“这是一个标题”（利用h1标签）或“这是一个段落”（利用p标签）的方式来标记文本。
随着Web逐渐流行起来，网页设计者们开始寻求为网页增添布局的可能性。为此，当时的浏览器厂商们（网景公司和微软公司）发明了一些新的HTML标签（比如<font>等），以引入了新的布局——而非新的结构。
这也导致了原本用于进行文本的结构化的标签（比如<table>等）越来越多地被误用于进行页面的布局。许多新的布局标签（比如<blink>）只有一种浏览器支持。“您需要使用某某浏览器来浏览本页面”成为当时常见于许多网站的声明。
采用CSS有哪些好处？
CSS是Web设计界的一次革命。CSS的具体优点包括：
-
通过单个样式表控制多个文档的布局；（Swing：通过托管所有控件，来统一控制样式，已实现）
-
更精确的布局控制；（Swing：将要实现）
-
为不同的媒体类型（屏幕、打印等）采取不同的布局；
-
无数高级、先进的技巧。
第2课：CSS的工作原理
用CSS的话，我们可以这样获得同样的效果：
body {background-color: #FF0000;}
你会注意到，HTML和CSS的代码颇有几分相似。上例也向你展示了基本的CSS模型：
一、基本选择器
|
序号 |
选择器 |
含义 |
|
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在组织元素方面相差无几。
两者最明显的区别在于DIV是块元素，而SPAN是行内元素。
1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，测试一下下面的代码你会有更形象的理解：测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div>
2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：
测试<divstyle="display:inline">紧跟前面的"测试"显示</div><spanstyle="display:block">这里会另起一行显示</span>
提示：如果不对DIV元素定义任何CSS属性，其显示效果将行将于P元素。
第9课：盒状模型
CSS中的盒状模型
外边距 Margin，边框 Border，内边距Padding，内容大小Content
这个例子包含了两个元素：h1和p。这两个元素的盒状模型如下图所示：
为元素设置外边距
满足上述要求的CSS代码如下：
body { margin-top:100px; margin-right:40px; margin-bottom:10px; margin-left:70px; }
或者你也可以采用一种较优雅的缩写形式：
body { margin: 100px 40px 10px 70px; }
为元素设置内边距
内边距（padding）也可以被理解成“填充物”。这样理解是合理的，因为内边距并不影响元素间的距离，它只定义元素的内容与元素边框之间的距离。
通过为标题设置内边距，你可以控制在标题文本周围填充多少空白：
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;
}
就像你所看到的，盒状模型为你提供了许多新的选择。之前，可能你一直在用HTML表格（table）来进行页面布局；但是现在，你应该已经具备采用CSS和盒状模型来进行更加精确而优雅、并且符合W3C标准的页面布局的能力了。
第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定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动，你将能够创建多种高级而精确的布局。
CSS定位的原理
把浏览器窗口想象成一个坐标系统：
CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。
position属性常见的值有三种：
-
static: 不使用定位（默认值）。
-
absolute: 使用绝对定位。
-
relative: 使用相对定位。
在解释定位方式之前，首先要阐明文档流(document flow)的概念。 浏览器在解释HTML文档时，它会将各个元素按照在HTML文档中出现的次序， 从上到下依次排列。例如下面的代码将产生如下的效果：
绝对定位
将元素设置为 position:absolute 可以使其变为绝对定位。绝对定位的元素将不再包含于文档流之中，也就是说，浏览器在从上到下显示HTML文档的各个元素时会“忽略”掉绝对定位的元素，好像它根本不存在一样。如下图：
指定绝对定位之后，就可以通过left和top属性来指定该元素的位置。一般来说，left和top以浏览器内容区域的左上角为原点(0,0)。但有一个特例，即''当一个绝对定位的元素的父元素也被绝对定位，那么该元素的位置将以其父元素区域的左上角为原点''。
绝对定位由于可以直接指定左上角位置，因此页面布局会很容易。但是它无法处理带有页脚的页面布局，因为你无法确定正文内容的量，所以无法将页脚元素精确地定位到正文的下方。
相对定位
相对定位使得元素在原有位置的基础上移动top和left指定的距离。相对定位不会将元素从文档流中剔除，因此浏览器在显示相对定位的元素时，会当作它还在原有位置一样进行处理。如下面的代码，可以看到div1和div3之间留出了div2的位置，而实际上div2已经向右下方偏移了一定的距离。
相对定位可以很好地解决绝对定位无法做到的页脚布局问题。
例子：
<div 0/> 如果您没有注册。。。
<div 1/> <div 2/> <div 3/> 标签；输入框；隐藏提示框
<div 4/> 按钮
注意：
首先总体布局，height: div0=20%, div1,2,3=70%, div4=10%
之后布局div1,2,3中各个空间位置
1. 设置div1,2,3的width=33%,float=left后，还要设置div4的clear属性为both防止div4上移到div3右侧去填空。
2. div宽度是指盒式模型中内容的宽度，而不是整个div的宽度。整个div宽度还要加上margin和padding。
3. 设置span高度无效
有的时候我们会发现! <span style="width:100px; height:100px; background-color:Red;">这里是块内容 </span>
给span属性设置这样的高度不管用!
其实span是行内元素，只有把它转化为块级元素才可以设置它的宽和高。
正确的写法是这样的!<style>span{display:block;width:100px;height:100px;}</style>
4. <div class=... />在css中设置height,margin后出错，写成<div class=...></div>
分享到：
相关推荐
HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 ...
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
Java相关课程系列笔记之七CSS学习笔记 Java相关课程系列笔记之八JavaScript学习笔记 Java相关课程系列笔记之九Servlet学习笔记 Java相关课程系列笔记之十JSP学习笔记 Java相关课程系列笔记之十一Ajax学习笔记 Java...
Java相关课程系列笔记之七CSS学习笔记（建议用WPS打开） Java相关课程系列笔记之三PLSQL学习笔记（建议用WPS打开） Java相关课程系列笔记之十JSP学习笔记（建议用WPS打开） Java相关课程系列笔记之十二jQuery学习...
适用于前端初学者,没有任何代码基础就能学的 此内容是我学习前端从入门到学完前端三件套的所有笔记和实例使用 此笔记是我跟随尚硅谷课程学习一路所记
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
包含html和css最基础的学习内容 前端最基础的内容
这个笔记都是我在看Mosh的web前端Html和css课程，自学时记下的笔记。总共不到2w字，前面在讲一些基础的时候记录的文字较多，但是后面基本上都是敲代码了，所以，笔记就很少了，基本全是代码。 还有一点，就是我用的...
较为重要的css知识点总结,如有漏掉联系增加.互相学习
java学习笔记大全：java内容介绍 java编程可以分成三个方向： 1、java se (j2se)桌面开发 java中的基础中的基础 2、java ee (j2ee)web开发 3、java me (j2me)手机开发 java se课程介绍 java面向对象编程(基础) java...
Head+First+HTML与CSS、XHTML读书笔记，笔记建立了索引，把课程的干货总结了一下。适合初学者学习！
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
渡一前端HTML、CSS、JS笔记及学习规划，文件共30多m，下载解压即可使用。
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
慕课，讲师：TooBug，讲授的《全面系统讲解CSS 工作应用+面试一步搞定》（在线可观看地址：https://www.bilibili.com/video/av58761546/?p=1）全套课程的全套word笔记。里面的每一个字都是亲手敲的，每一张图都是...
Java/JavaEE 学习笔记 作者在杰普学习时的学习笔记，是J2ee初学者必备手册，是大家学习J2EE开发的很好的参考笔记。 Java/JavaEE 学习笔记 内容目录: Unix 学习笔记..........7 一、Unix前言............7 二、...
资料包含关于CSS学习过程中各部分知识像：布局、浮动、背景、变换、东画等功能实现。希望可以对小伙伴有所帮助！！！！
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
渡一前端html、css、js笔记及学习规划规划。了解前端概念，掌握编程规 范，学会HTML必用标签并且能 自定义标签，精通css底层原理 熟练使用达成精准化布局，为后 续课程打下坚实的基础；深入浅出ECMASCRIPT 部分，...