1、最新CSS培训教材CSS培训教材CSS介绍以及培训 CSS 培训教材 目录1. CSS发展历程 . 32. CSS工作原理 . 62.1. 剖析css规则 . 72.1.1. Css规则 . 72.1.2. 样式添加方式 . 92.2. 选择符的分类 . 112.2.1. 上下文选择符 . 112.2.2. ID 和类选择符 . 122.2.3. 属性选择符 . 132.2.4. 伪类 . 132.3. 继承 . 152.4. 层叠 . 162.4.1. 样式来源 . 172.4.2. 层叠规则 . 182.4.3. 计算特指度 . 203. 盒子模型 . 233.1. Css样式简写 . 2
2、43.2. 两种盒子 . 253.3. 浮动和清除 . 283.3.1. 浮动 （float） . 283.3.2. 清除（clear） . 294. 定位 . 304.1. 静态定位 . 304.2. 相对定位 . 314.3. 绝对定位 . 324.4. 固定定位 . 324.5. 定位上下文 . 335. 显示属性 . 366. 基本布局 . 376.1. 两栏布局 . 376.2. 三栏布局 . 386.3. 三栏布局 . 38 1. CSS发展历程CSS就相当于一个网页有了一个美丽的外衣装饰，既然是衣服就是可以随时更换，我们有很多外文网站使用了多个CSS列表，一个首页拥有多个风格也不
3、奇怪，一些我们来介绍一些CSS的发展历程。 从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。 但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。 1994年哈坤利提出了CSS的最初建议。伯特波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。 当时已经有过一些样式表语言的建议了，但CSS是第一
4、个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其它的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。 哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。 1997年初，W3C内组织了专门管CS
5、S的工作组，其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。到2004年为止，第三版还未出版。早在 2001 年 5 月，W3C 就着手开始准备开发 CSS 第三版规范，CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展。CSS庞大而且比较复杂，CSS3把CSS分解为一些小的模块，更多新的模块也被加入进来。CSS3中的模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。CSS3在发展中在以下方面进行了改进，减少了网页中图片的使用，我们作简单介绍：1、2、 圆角，对应属性：bord
6、er-radius。 文字特效，以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。3、 文字样式，丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。4、 重点字，在文字下点几个点或打个圈
7、以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。5、 边框：（1） border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果（2） border-image:控制边框图象border-corner-image:控制边框边角的图象（3） border-corner-image:控制边框边角的图象 6、 文字投影，text-shadow，可能是因为MACOSX的Safari浏览器开始支持投影才特意增加的。7、 文字溢出，text-overflow:当文字溢
8、出时，用“?”提示。包括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。8、 动画属性变形(transform)、转换(transition)和动画(animation)9、 用户界面resize:可以由用户自己调整div的大小，有horizontal（水平）vertical（垂直）或者both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局10、 选择器media
9、queries:感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页。multi-columnlayout:多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值column-width:指定每列宽度column-count:指定列数column-gap:指定每列之间的间距column-rule-color:控制列间的颜色column-rule-style:控制列间的样式column-rule-width:控制列间的宽度column-space-dis
10、tribution:平均分配列间距CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。CSS3 完全向后兼容，因此您不必改变现有的设计，浏览器通常支持 CSS2，W3C 仍然在对 CSS3 规范进行开发。CSS3 规范的全面推广和支持看起来还遥遥无期，但是目前主流浏览器都已迫不及待的开始支持 CSS3 部分特性了。虽然这部分特性还相对较少，但是这些以前很难使用 Javascript 和图片实现的效果依然令程序要兴奋不已。2. CSS工作原理当我们设计出html页面的结构后，html的样式就需
11、要利用css添加。样式是通过何种机制对html元素的表现进行定义的这就需要我们对css的工作原理了解。每个HTML 元素都有样式属性，可以通过CSS 来设定。这些属性涉及元素在屏幕上显示时的不同方面，比如在屏幕上位置、边框的宽度，文本内容的字体、字号和颜色，等等。CSS 就是一种先选择HTML 元素，然后设定选中元素CSS 属性的机制。CSS 选择符和要应用的样式构成了一条CSS 规则。我们来看一个例子：charset=UTF-8 /HTML5 Template/* CSS 规则放在标签中 */标签中 -可以看出css和html注释在个世上的区别。代码里包含一个HTML 的标签。通过这个标签可
12、以把CSS 样式直接写在文档中（即把CSS 样式嵌入到文档中），浏览器会负责把标签中的CSS 样式应用给标签中的HTML 元素（甚至包括标签）。2.1. 剖析css规则2.1.1. Css规则规则实际上就是一条完成的css指令，它规定了将什么样的样式应用到哪个元素。一条css规则由选择符和声明两部分组成，声明又由属性和值两部分组成。书写形式是 选择符属性：值; 。选择符后面是左花括号 ，属性和值用 : 分开，每个声明以 ; 结束，最后是结束规则的右花括号 。例如 pcolor:red中p是选择符，color是属性，red是给属性赋的值。该声明是将段落中的文本变成红色。Html: Css: 展示
13、效果： 样式会在html页面中找到p元素然后将p中的字体颜色变成红色。 对于一个基本结构我们有三种扩展方式1) 多个声明包含在一条规则中Pcolor:red;font-weight:bold;font-size:20px;多个属性:以 ; 分隔2) 多个选择符组合使用同一个声明h1,h2,h3font-weight:bold; 对h1、h2、h3内的文本字体都加粗。3) 多条规则应用到一个选择符p, h1 color:blue;h1font-weight：bold;首先p和h1内的文本颜色设置成蓝色，再将h1内的文本加粗。2.1.2. 样式添加方式给元素添加样式的方式主要有四种：1) 行内样式
14、行内样式的作用范围非常有限，只能作用于所在的标签，但它的优先级是最高的，对同一个标签样式的三种定义最终行内样式会覆盖其余两种。2) 嵌入样式.pcolor:red;.嵌入样式表的作用范围较行内样式大，作用于整个页面，优先级处于中间位置，对同一个标签样式的定义嵌入样式会覆盖链接样式，但是又被行内样式覆盖。只在本页面运用特殊样式不影响其余页面。3) 链接样式 type=”text/css”当创建多个页面的时候我们把样式集中在一个单独的样式文件中，即样式表，扩展名为.css。可以在任意页面通过以上标签引用同一个css文件，作用范围可以是整个网站。只要改变了样式表中的规则，所有运用该样式表的页面表现都
15、会随之发生。这样方便实现全部页面的统一。但优先级最低。4) import在样式表中引用其他样式表import url(css/styles2.css)要注意的是，import 指令必须出现在样式表中其他样式之前，否则import 引用的样式表不会被加载。结论：CSS 样式是通过标签嵌入到页面里的。当浏览器遇到开标签时，就会由解释HTML 代码切换为解释CSS 代码。等遇到闭标签时，它会再切换回解释HTML 代码。 2.2. 选择符的分类2.2.1. 上下文选择符基于祖先或同胞元素选择一个元素。上下文选择符的格式：标签1 标签2 声明其中，标签2 就是我们想要选择目标，而且只有在标签1 是其祖先
16、元素（不一定是父元素）的情况下才会被选中。上下文选择符，严格来讲（也就是CSS 规范里），叫后代组合式选择符（descendant combinator selector），就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。article p font-weight:bold;这个例子中的上下文选择符表明，只有是article 后代的p 元素才会应用后面的样式。换句话说，上面这条规则的目标是位于article 上下文中的p 元素。除了一般的上下文选择符外还有几种比较特殊的上下文选择符，主要有：1、子选择符 运用形式为： 标签1标签2 其中标签1 必须是标签2的父级元素（注意：非祖
17、先元素）；2、紧邻同胞选择符 运用形式：标签1 标签2 其中标签2必须是紧跟在标签1后面的同胞元素；3、一般同胞选择符 运用形式：标签1标签2 其中标签2必须是跟在标签1后面的同胞元素（注意：不用是紧跟）；4、通用选择符 * 运用形式：标签1 * 会作用到标签1 后的所有元素，它有一个比较有趣的用法是构成非子选择符 例如 标签1 * a 会作用到标签1下孙子元素a而非子元素。2.2.2. ID 和类选择符基于id 和class 属性的值（你自己设定）选择元素。ID和类选择符为我们提供了一种不用考虑文档结构的css书写方法，可以直接作用。1、类属性：类属性就是HTML 元素的class 属性，b
18、ody 标签中包含的任何HTML 元素都可以添加这个属性。（1） 类选择符：.类名（.与类名之间无空格）（2） 标签带类选择符：瞄准到带有这个类的标签（3） 多类选择符：可以给元素添加多个类class=specialtext featured”，两个类名放在一个引号里面中间有空格，选择同时含有这两个类名的标签。对属性的定义如下：. specialtext. featured（注意两者之间没有空格）2、ID属性：ID与类的写法一样 #类名，跟表示类选择符相似,ID和类选择符的用法几乎一样，适用于类选择符的（几乎）都适用于ID选择符。两者的区别在于ID可以用于内导航的ID，如href=”#loca
19、te”点击链接会跳转到本网页中id为locate的地方，如果想返回网页的顶部直接书写成。既然类标识符和ID标识符似乎是完全一样的，为什么不合二为一呢？实际上他们的用途大不相同。ID的用途就是在页面中唯一的标识一个元素，同一个页面中每一个ID属性都必须有独一无二的名字。类的使用是为了标识一组具有相同特征的元素。（注意：不要滥用id属性，能重复使用的就重复使用！）2.2.3. 属性选择符基于属性的有无和特征选择元素。1、 属性名选择符：选择任何带有属性名的标签名。书写方式为： 标签名属性名imgtitleborder:1px solid blue;会导致带有title属性的img元素有2像素的边框，至于里面title属性值就无关紧要了，只要有这个属性存在就行。2、 属性值选择符：选择任何带有值为属性值的属性名的标签名书写形式：标签名属性名=属性值 imgtitle=redflower border:4px solid green; 在图片的title 属性值为red flower 的情况下，才会为图片添加边框。2.2.4. 伪类伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上，伪类分两种。1、 UI伪类 会在HTML 元素处于某个状态时（比如鼠标指针位于链接
