CSS初级教程

一.CSS简介•什么是CSS？CSS是CascadingStyleSheet的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS布局的优点：采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势：1：表现和内容相分离将设计部分剥离出来放在一个独立样式文件中，一.CSS简介•HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。•2：提高页面浏览速度•对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。•3：易于维护和改版•你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。一.CSS简介•CSS历史1994年哈坤·利提出了CSS的最初建议；伯特·波斯（BertBos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。当时已经有过一些关于样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方去继承，或“层叠”作者的样式,这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。一.CSS简介哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年他与波斯一起再次提出这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。一.CSS简介•1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，于是1998年5月出版了CSS的第二版。到2007年为止，第三版还未完备。二.CSS的发展•1998年5月发布了CSS2.0版本，CSS2.0是一套全新的样式表结构，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一样，CSS2.0推荐的是一套内容和表现效果分离的方式，HTML元素可以通过CSS2.0的样式控制显示效果，可完全不使用以往HTML中的table和td来定位表单的外观和样式，只需使用div和Li此类HTML标签来分割元素，之后即可通过CSS2.0样式来定义表单界面的外观。•二.CSS的发展CSS2.0提供给我们了一个机制，让程序员开发时可以不考虑显示和界面就可以制作表单和界面，显示问题可由美工或是程序员后期再来编写相应的CSS2.0样式来解决。不过由于CSS2.0目前尚未见过很好的编辑软件，所以无法做到所见即所得，编写起来不易。最新的CSS3.0完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和二.CSS的发展属性，这些会允许你实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。三.如何将样式表加入您的网页1.链入外部样式表文件(LinkingtoaStyleSheet)你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：headtitle文档标题/titlelinkrel=stylesheethref==text/css/head而在XML中，你应该如下例所示在声明区中加入：?xml-stylesheettype=text/csshref=定义内部样式块对象(EmbeddingaStyleBlock)你可以在你的HTML文档的HTML和BODY标记之间插入一个STYLE.../STYLE块对象。示例如下：htmlheadtitle文档标题/titlestyletype=text/css!--body{font:10ptArial}h1{font:15pt/17ptArial;font-weight:bold;color:maroon}•h2{font:13pt/15ptArial;font-weight:bold;color:blue}p{font:10pt/12ptArial;color:black}--/style/headbody注意：这里将style对象的type属性设置为“text/css”，是允许不支持这类型的浏览器忽略样式表单。3.内联定义(InlineStyles)内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：•pstyle=margin-left:0.5in;margin-right:0.5in这一行被增加了左右的外补丁p4.样式表语法(CSSSyntax)Selector{property:value}参数说明：Selector–选择符property:value--样式表定义。属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开四.CSS语法•CSS的定义是由三个部分构成:•选择符(selector)，属性(properties)和属性的取值(value)。1.语法:selector{property:value}(选择符{属性:值})四.CSS语法•说明:•·选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开:•例子:body{color:black}，此例的效果是使页面中的文字为黑色。•·如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合:•例子:p{font-family:sansserif}(定义段落字体为sansserif)•·如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开:•例子:p{text-align:center;color:red}(段落居中排列;并且段落中的文字为红色)四.CSS语法•2.选择符组•你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义:•p,table{font-size:9pt}(段落和表格里的文字尺寸为9号字)效果完全等效于:•p{font-size:9pt}•table{font-size:9pt}•3.类选择符四.CSS语法•用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类:•p.right{text-align:right}•p.center{text-align:center}•然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数:•pclass=right这个段落向右对齐的/p•pclass=center这个段落是居中排列的/p四.CSS语法•类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式:•.center{text-align:center}(定义.center的类选择符为文字居中排列)•这样的类可以被应用到任何元素上。下面我们使h1元素(标题1)和p元素(段落)都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符:•h1class=center这个标题是居中排列的/h1•pclass=center这个段落也是居中排列的/p四.CSS语法•注意:这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。•4.ID选择符•在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。•ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代,ID只能在一个页面中出现一次,而class可以多次运用.四.CSS语法•这个段落向右对齐•定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=intro的元素:•#intro•{•font-size:110%;•font-weight:bold;•color:#0000ff;•background-color:transparent}四.CSS语法•(字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明)•下面这个例子，ID属性只匹配id=intro的段落元素:•p#intro•{•font-size:110%;•font-weight:bold;•color:#0000ff;•background-color:transparent•}四.CSS语法•注意:ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。•5.包含选择符•可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如:•tablea•{•font-size:12px•}•在表格内的链接改变了样式，文字大小为12像素，而表格外的链接的文字仍为默认大小。四.CSS语法•6.样式表的层叠性•层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。•例如在DIV标记中嵌套P标记:•div{color:red;font-size:9pt}•……•这个段落的文字为红色9号字(P元素里的内容会继承DIV定义的属性)四.CSS语法•当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色:•div{color:red;font-size:9pt}•p{color:blue}•……•这个段落的文字为蓝色9号字•我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。•注意：四.CSS语法•不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。•7.注释:/*...*/•你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以/*开头，以*/结尾，如下:•p{text-align:center;/*文本居中排列*/}五.CSS构造块1．Div部分（division）——div元素，经常以div形式引用——是(X)HTML的元素，用于定义(X)HTML文件中的区域。你可以让div包含任何在页面body部分的一些额外元素，如文本、图形等——实际上，这些元素可以是任何元素，甚至十一些不同区域中的特殊元素，如页眉、页脚、导航栏等。示例：在HTML中构造一个div元素：divid=”container”p这是我们的内容区域/p/div•为id为container的div元素添加CSS样式代码如下例：•#container{•padding:20px;•border:1pxsolid#000;•background:#CCC;•}•效果图：2.维度：宽度和高度设定值可以使长度、百分比或auto。所有这些值会受到样式表里其他规则的负面影响，也受到(X)HTML中它们包含的元素的影响。例如，margin、pad