最新CSS培训教材.docx
- 文档编号:20356626
- 上传时间:2023-04-25
- 格式:DOCX
- 页数:33
- 大小:34.46KB
最新CSS培训教材.docx
《最新CSS培训教材.docx》由会员分享,可在线阅读,更多相关《最新CSS培训教材.docx(33页珍藏版)》请在冰豆网上搜索。
最新CSS培训教材
CSS培训教材
CSS介绍以及培训
CSS培训教材
目录
1.CSS发展历程............................................................................................................................3
2.CSS工作原理............................................................................................................................6
2.1.剖析css规则................................................................................................................7
2.1.1.Css规则............................................................................................................7
2.1.2.样式添加方式...................................................................................................9
2.2.选择符的分类.............................................................................................................11
2.2.1.上下文选择符.................................................................................................11
2.2.2.ID和类选择符...............................................................................................12
2.2.3.属性选择符.....................................................................................................13
2.2.4.伪类.................................................................................................................13
2.3.继承.............................................................................................................................15
2.4.层叠.............................................................................................................................16
2.4.1.样式来源.........................................................................................................17
2.4.2.层叠规则........................................................................................................18
2.4.3.计算特指度.....................................................................................................20
3.盒子模型.................................................................................................................................23
3.1.Css样式简写..........................................................................................................24
3.2.两种盒子.................................................................................................................25
3.3.浮动和清除.............................................................................................................28
3.3.1.浮动(float)...............................................................................................28
3.3.2.清除(clear).................................................................................................29
4.定位.................................................................................................................................30
4.1.静态定位.................................................................................................................30
4.2.相对定位.................................................................................................................31
4.3.绝对定位.................................................................................................................32
4.4.固定定位.....................................................................................................................32
4.5.定位上下文.................................................................................................................33
5.显示属性..............................................................................................................................36
6.基本布局.................................................................................................................................37
6.1.两栏布局.................................................................................................................37
6.2.三栏布局.................................................................................................................38
6.3.三栏布局.....................................................................................................................38
1.CSS发展历程
CSS就相当于一个网页有了一个美丽的外衣装饰,既然是衣服就是可以随时更换,我们有很多外文网站使用了多个CSS列表,一个首页拥有多个风格也不奇怪,一些我们来介绍一些CSS的发展历程。
从1990年代初HTML被发明开始样式表就以各种形式出现了,不同的浏览器结合了它们各自的样式语言,读者可以使用这些样式语言来调节网页的显示方式。
一开始样式表是给读者用的,最初的HTML版本只含有很少的显示属性,读者来决定网页应该怎样被显示。
但随着HTML的成长,为了满足设计师的要求,HTML获得了很多显示功能。
随着这些功能的增加外来定义样式的语言越来越没有意义了。
1994年哈坤·利提出了CSS的最初建议。
伯特·波斯(BertBos)当时正在设计一个叫做Argo的浏览器,他们决定一起合作设计CSS。
当时已经有过一些样式表语言的建议了,但CSS是第一个含有“层叠”的主意的。
在CSS中,一个文件的样式可以从其它的样式表中继承下来。
读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承,或“层叠”作者的样式。
这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合各人的爱好。
哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议,1995年他与波斯一起再次展示这个建议。
当时W3C刚刚建立,W3C对CSS的发展很感兴趣,它为此组织了一次讨论会。
哈坤、波斯和其他一些人(比如微软的托马斯·雷尔登)是这个项目的主要技术负责人。
1996年底,CSS已经完
成。
1996年12月CSS要求的第一版本被出版。
1997年初,W3C内组织了专门管CSS的工作组,其负责人是克里斯·里雷。
这个工作组开始讨论第一版中没有涉及到的问题,其结果是1998年5月出版的第二版要求。
到2004年为止,第三版还未出版。
早在2001年5月,W3C就着手开始准备开发CSS第三版规范,
CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展。
CSS庞大而且比较复杂,CSS3把CSS分解为一些小的模块,更多新的模块也被加入进来。
CSS3中的模块包括:
盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。
CSS3在发展中在以下方面进行了改进,减少了网页中图片的使
用,我们作简单介绍:
1、
2、圆角,对应属性:
border-radius。
文字特效,以往对网页上的文字加特效只能用filter这个属性,这
次CSS3中专门制订了一个加文字特效的属性,而且不止加阴影这种
效果。
对应属性:
font-effect。
3、文字样式,丰富了对链接下划线的样式,以往的下划线都是直线,这次可不一样了,有波浪线、点线、虚线等等,更可对下划线的颜色和
位置进行任意改变。
(还有对应顶线和中横线的样式,效果与下划线
类似)对应属性:
text-underline-style,text-underline-color,
text-underline-mode,text-underline-position。
4、重点字,在文字下点几个点或打个圈以示重点,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:
当文字溢出时,用“?
”提示。
包括
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、选择器
mediaqueries:
感觉叫媒体选择比较合适,可以为网页中不同的对象
设置不同的浏览设备。
比如可以为某一块分别设置屏幕浏览样式和手
机浏览样式,以前则只能设置整个网页。
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-distribution:
平均分配列间距
CSS3主要的影响是将可以使用新的可用的选择器和属性,这些
会允许实现新的设计效果(譬如动态和渐变),而且可以很简单的设计出现在的设计效果(比如说使用分栏)。
CSS3完全向后兼容,因此您不必改变现有的设计,浏览器通常支持CSS2,W3C仍然在对CSS3规范进行开发。
CSS3规范的全面推广和支持看起来还遥遥无期,但是目前主流浏览器都已迫不及待的开始支持CSS3部分特性了。
虽然这部分特性还相对较少,但是这些以前很难使用Javascript和图片实现的效果依然令程序要兴奋不已。
2.CSS工作原理
当我们设计出html页面的结构后,html的样式就需要利用css添加。
样式是通过何种机制对html元素的表现进行定义的这就需要我们对css的工作原理了解。
每个HTML元素都有样式属性,可以通过CSS来设定。
这些属性涉及元素在屏幕上显示时的不同方面,比如在屏幕上位置、边框的宽度,文本内容的字体、字号和颜色,等等。
CSS就是一种先选择HTML元素,然后设定选中元素CSS属性的机制。
CSS选择符和要应用的样式构成了一条CSS规则。
我们来看一个例子:
charset=UTF-8"/>
HTML5Template
/*CSS规则放在标签中*/
标签中-->
可以看出css和html注释在个世上的区别。
代码里包含一个HTML的
标签。
通过这个标签可以把CSS样式直接写在文档中(即把
CSS样式嵌入到文档中),浏览器会负责把标签中的CSS样
式应用给标签中的HTML元素(甚至包括标签)。
2.1.剖析css规则
2.1.1.Css规则
规则实际上就是一条完成的css指令,它规定了将什么样的样式
应用到哪个元素。
一条css规则由选择符和声明两部分组成,声明又
由属性和值两部分组成。
书写形式是选择符属性:
值;。
选择符
后面是左花括号,属性和值用:
分开,每个声明以;结束,最后
是结束规则的右花括号。
例如pcolor:
red中p是选择符,color是属性,red是给属性赋
的值。
该声明是将段落中的文本变成红色。
Html:
Css:
展示效果:
样式会在html页面中找到p元素然后将p中的字体颜色变成红色。
对于一个基本结构我们有三种扩展方式
1)多个声明包含在一条规则中
Pcolor:
red;font-weight:
bold;font-size:
20px;多个属性:
以;分隔
2)多个选择符组合使用同一个声明
h1,h2,h3font-weight:
bold;对h1、h2、h3内的文本字体
都加粗。
3)多条规则应用到一个选择符
p,h1color:
blue;
h1font-weight:
bold;
首先p和h1内的文本颜色设置成蓝色,再将h1内的文本加粗。
2.1.2.样式添加方式
给元素添加样式的方式主要有四种:
1)行内样式
行内样式的作用范围非常有限,只能作用于所在的标签,但它
的优先级是最高的,对同一个标签样式的三种定义最终行内样
式会覆盖其余两种。
2)嵌入样式
…..
…..
pcolor:
red;
…..
…..
嵌入样式表的作用范围较行内样式大,作用于整个页面,优先
级处于中间位置,对同一个标签样式的定义嵌入样式会覆盖链
接样式,但是又被行内样式覆盖。
只在本页面运用特殊样式不
影响其余页面。
3)链接样式
type=”text/css”>
当创建多个页面的时候我们把样式集中在一个单独的样式文
件中,即样式表,扩展名为.css。
可以在任意页面通过以上标签引
用同一个css文件,作用范围可以是整个网站。
只要改变了样式
表中的规则,所有运用该样式表的页面表现都会随之发生。
这样
方便实现全部页面的统一。
但优先级最低。
4)@import在样式表中引用其他样式表
@importurl(css/styles2.css)
要注意的是,@import指令必须出现在样式表中其他样式之前,
否则@import引用的样式表不会被加载。
结论:
CSS样式是通过标签嵌入到页面里的。
当浏览器遇到开标签时,就会由解释HTML代码切换为解释CSS代码。
等遇到闭标签时,它会再切换回解释HTML代码。
2.2.选择符的分类
2.2.1.上下文选择符
基于祖先或同胞元素选择一个元素。
上下文选择符的格式:
标签1标签2声明
其中,标签2就是我们想要选择目标,而且只有在标签1是其祖
先元素(不一定是父元素)的情况下才会被选中。
上下文选择符,严格来讲(也就是CSS规范里),叫后代组合式选择符(descendantcombinatorselector),就是一组以空格分隔的标签名。
用于选择作为指定祖先元素后代的标签。
articlepfont-weight:
bold;
这个例子中的上下文选择符表明,只有是article后代的p元素
才会应用后面的样式。
换句话说,上面这条规则的目标是位于
article上下文中的p元素。
除了一般的上下文选择符外还有几
种比较特殊的上下文选择符,主要有:
1、子选择符>运用形式为:
标签1>标签2其中标签1必须是标签2的父级元素(注意:
非祖先元素);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属性,body标签中包
含的任何HTML元素都可以添加这个属性。
(1)类选择符:
.类名(.与类名之间无空格)
(2)标签带类选择符:
瞄准到带有这个类的标签
(3)多类选择符:
可以给元素添加多个类
class="specialtextfeatured”,两个类名放在一个引
号里面中间有空格,选择同时含有这两个类名的标签。
对
属性的定义如下:
.specialtext.featured(注意两者之
间没有空格)
2、ID属性:
ID与类的写法一样#类名,跟表示类选择符相似,ID
和类选择符的用法几乎一样,适用于类选择符的(几乎)都适用
于ID选择符。
两者的区别在于ID可以用于内导航的ID,如
href=”#locate”>点击链接会跳转到本网页中id为locate
的地方,如果想返回网页的顶部直接书写成。
既然类标识符和ID标识符似乎是完全一样的,为什么不合二为
一呢?
实际上他们的用途大不相同。
ID的用途就是在页面中唯一
的标识一个元素,同一个页面中每一个ID属性都必须有独一无二
的名字。
类的使用是为了标识一组具有相同特征的元素。
(注意:
不要滥用id属性,能重复使用的就重复使用!
)
2.2.3.属性选择符
基于属性的有无和特征选择元素。
1、属性名选择符:
选择任何带有属性名的标签名。
书写方式为:
标签名[属性名]
img[title]border:
1pxsolidblue;会导致带有title
属性的img元素有2像素的边框,至于里面title属性值
就无关紧要了,只要有这个属性存在就行。
2、属性值选择符:
选择任何带有值为属性值的属性名的标
签名
书写形式:
标签名[属性名="属性值"]img[title="red
flower"]border:
4pxsolidgreen;在图片的title属
性值为redflower的情况下,才会为图片添加边框。
2.2.4.伪类
伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标
记中的标签上,伪类分两种。
1、UI伪类会在HTML元素处于某个状态时(比如鼠标指针
位于链接
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 最新 CSS 培训教材
![提示](https://static.bdocx.com/images/bang_tan.gif)