1、CSS样式,1 概述CSS是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。CSS的英文是Cascading Style Sheets，中文可以翻译成层叠样式表。,xhtml css基础知识,html常用代码标签释义大全文件类型 文件主题 文头 文体 标题 （从1到6，有六层选择）标题的对齐 区分 创建一个有序列表 设置每个表单项的内容 段落 创建一个无序列表大字 小字 加粗 斜体 底线 删除线 下标 上标 表格 预定格式 （保留文件中空格的大小）向中看齐 （文字与图片都可以）
2、字体大小 （从1到7）字体颜色 ,网页设计中CSS样式表的作用,格式和结构分离： HTML从来没打算控制网页的格式或外观。这种语言定义了网页的结构和个要素的功能，而让浏览器自己决定应该让各要素以何种模样显示。CSS代码独立出来控制页面外观。 控制页面的布局： 能使我们调整字号，标签帮助我们生成边距，但是，我们对HTML总体上的控制却很有限。 我们不可能精确地生成80象素的高度， 不可能控制行间距或字间距，我们不能在屏幕上精确定位图象的位置。样式表使这一切都成为可能。高效维护及更新网页：使用串接样式表可以减少表格标签及其它加大HTML体积的代码,减少图象用量从而减少文件尺寸。 样式表的主旨就是将
3、格式和结构分离。对于样式表，可以将站点上所有的网页都指向单一的一个CSS文件，只要修改CSS文件即可，整个站点都会随之发生变动。要想学好css，首先要转变观念，需要抛弃传统的表格(Table)布局方式，采用层(DIV)布局，并且使用层叠样式表(CSS)来实现页面的外观。,htmlfilter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);,常见加载css样式方法,内嵌样式(Inline Style) 内部样式表(Internal Style Sheet) 外部样式表(External Style Sheet),内嵌样式(In
4、line Style),Inline Style是写在Tag里面的。 内嵌样式只对所在的Tag有效。 示例： 这个Style定义里面的文字是20pt字体，字体颜色是红色。这种在标签内以style标记的为内嵌样式，内嵌样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。,内嵌式样式(Inline Style)这个内嵌样式(Inline Style)定义段落里面的文字是20pt字体，字体颜色是红色。这段文字没有使用内嵌样式。,完整示例：,内部样式表(Internal Style Sheet),内部样式表是写在HTML的里面的。内部样式表只对所在的网页有效。它以和结尾，这样的样式表只能
5、针对本页有效。不能作用于其它页面。示例1：H2 font-size:20pt;font-style:italic;color:blue;text-align:center;margin-left:10%;Background:#ffccccPcolor:red;text-indent:6cm情有独钟写冰雪沁园春.雪凤凰学院数字媒体,示例2,H1.mylayout border-width:1; border:solid; text-align:center; color:redH2.mylayout 这个标题使用了Style。这个标题没有使用Style。,当多个网页需要用到同样的样式(Styl
6、es)，用什么方法呢？将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件即可。外部样式表的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。,外部样式表(External Style Sheet),示例步骤：1.先用文本编辑器(记事本)建立一个叫home的文件，文件后缀不要用.txt，改成.css。文件内容如下：H1#mylayout border-width: 1; border: solid; text-align: center;color:red,2.然后再建立一个网页，代码如下：, 这个标题
7、使用了Style。这个标题没有使用Style。,使用外部(Extenal)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点：样式代码可以复用。一个外部CSS文件，可以被很多网页共用。 便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。 提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度比较快。,css优先级,ID和CLASS选择器Id（#）优先级高于class（.） id只能在页面中对应一个元素，就像我们的身份证号一样，每个人的都不一样
8、；class为类，可以对应多个元素，比如说一年级三班的学生，它所对应的可能是10个20个学生。id的优先级高于class，比如说今天三班的学生上体育课，小明留下来打扫卫生。那么三班的学生上体育课这是一个类，而小明打扫卫生这是个id，虽然小明也是三班的学生，但id高于class，所以小明执行打扫卫生的任务。,Cascading的顺序是：浏览器缺省(browser default)(优先级最低) 外部样式表(Extenal Style Sheet) 内部样式表(Internal Style Sheet) 内嵌样式表(Inline Style)(优先级最高)样式(Styles)的优先级依次是内嵌(i
9、nline), 内部(internal), 外部(external), 浏览器缺省(browser default)。,示例：假设内嵌(Inline)样式中有font-size:30pt, 而内部(Internal)样式中有font-size:12pt，那么内嵌(Inline)式样式就会覆盖内部(Internal)样式。,Cascading Orderp font-size:12pt这个段落的内嵌样式(Inline Style)覆盖(overwrite)了内部样式表(Internal Style Sheet)，显示的字体大小是30pt，而不是12pt。,单列结构网站,两列结构网站,三列结构网站
10、,一列布局是所有布局的基础，只需要一个div即可。一列固定宽度css样式代码如下：#layout height: 480px; width: 720px; margin-top: 20px; margin-left: 150px; border: thick double #F79A94; font-family: 宋体; font-size: 9pt; color: #993300;,margin,margin : auto | length设置对象上、右、下、左四边的外边距。 如果只提供一个，将用于全部的四边。 如果提供两个，第一个用于上下，第二个用于左右。 如果提供三个，第一个用于上，第
11、二个用于左右，第三个用于下。,一列居中,关键CSS样式代码#layout height: 480px; width: 720px; border: thick double #F79A94; font-family: “宋体”; font-size: 9pt; color: #993300; margin:0px auto；,一列多行居中自适用,无标题文档!-#header font-family: 新宋体;color: #FFFFFF;background-color: #33FFCC;height: 80px;width: 500px;margin-top: 5px;margin-righ
12、t: auto;margin-bottom: 5px;margin-left: auto;text-align: center;line-height: 80px;#content font-family: 新宋体;color: #FFFFFF;background-color: #CC00CC;background-position: center;height: 400px;width: 500px;margin: 5px auto; text-align: center;line-height: 80px;,#footer font-family: 新宋体;color: #FFFFFF;
13、background-color: #33FFCC;background-position: center;height:50px;width: 500px;margin: 5px auto; text-align: center;line-height: 80px;此处显示 id header 的内容此处显示 id content 的内容此处显示 id footer 的内容,这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.0中的标签，但必须符合XHTML的语法。许多同学在制作页面时，往往喜欢把这句删除掉，在
14、这里建议保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。,二列固定宽度,Xhtml代码：左列右列CSS代码：#left background-color: #ccc; border: 5px solid #666; width: 300px; height: 600px; margin-right:10px;float: left;,#right background-color: #ccc; border: 5px solid #666; width: 300px; height: 600px; float: left;,floatCSS布局中非常重要的属性。控制对象的浮动布
15、局。float : none | left | right 使用none时表示对象不浮动使用left时对象向左浮动使用right时对象浮动网页右侧。,示例二：两列自适应,无标题文档此处显示 id side 的内容此处显示 id main 的内容,当我们拖动浏览器窗口变大变小时，#main的宽度也会跟着改变。这里设置margin-left:120px;正好让出#side占去的120px宽度，如果这里设置为122px的话，中间将出现2px的空隙，同学们可以试一下。,思考：两列居中如何实现？,参考答案,#content width:470px; margin:0 auto;#side background: #99FF99; height: 300px; width: 120px; float: left; #main background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; 此处显示 id side 的内容 此处显示 id main 的内容,上例中用float让元素向左浮动，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。,
