【html】 CSS.ppt
《【html】 CSS.ppt》由会员分享,可在线阅读,更多相关《【html】 CSS.ppt(72页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、网页设计技术静态网页框架-Html元素定义标签修饰CSS工具DreamweaverFrontPage多媒体网页内容图像视频、flash工具:photoshop,Flash动态网页节点定义DOM访问方法JSVBS交互式网页交互技术AspPhpJspPerl后台数据库SQLMySql目录什么是CSSCSS语法语法CSS 嵌入方法CSS 属性JAVA CSS HTML 关系网页包含三个层次(它们都需要各自分离):HTML结构 HTML结构层是网页最重要的基础。HTML标签给予内容含义。CSS表现 CSS表现层则是定义您的HTML该如何显示。JavaScript行为 JavaScript行为层为页面增
2、加交互。什么是CSSCSS:Cascading Style Sheet可译为“层叠样式表”或“级联样式表”是一组格式设置格式设置规则,用于控制Web页面的外观。通过使用CSS设置,可将web page的内容与表现内容与表现分离。页面内容存放在HTML文档中,而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分。将内容与表现形式分离不仅可使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间。产生CSS的原因HTML 标签原本被设计为用于定义文档内容。通过使用、这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这
3、是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。所有的主流浏览器均支持层叠样式表。万维网联盟万维网联盟万维网联盟是国际著名的标准化组织。该联盟成立于1994年,至今已发布近百项相关万维网的标准,对万维
4、网发展做出了杰出的贡献。目前,万维网联盟拥有来自全世界40个国家的400多个会员组织,已在全世界16个地区设立了办事处。万维网联盟(World Wide Web Consortium,W3C),又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆伯纳斯-李。2006年4月28日,万维网联盟在中国内地设立首个办事处。为解决 Web 应用中不同平台、技术和开发者带来的不兼容问题,保障 Web 信息的顺利和完整流通,万维网联盟制定了一系列标准并督促 Web 应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范,开发中使用的导则和解释引擎的行为等
5、等。W3C也制定了包括XML和CSS等的众多影响深远的标准规范。但是,W3C 制定的 web 标准似乎并非强制而只是推荐标准。因此部分网站仍然不能完全实现这些标准。特别是使用早期所见即所得网页编辑软件设计的网页往往会包含大量非标准代码。CSS 历史1994年哈坤利提出了CSS的最初建议;伯特波斯(Bert Bos)当时正在设计一个叫做Argo的浏览器,他们决定一起合作设计CSS。当时已经有过一些关于样式表语言的建议了,但CSS是第一个含有“层叠”的主意的。在CSS中,一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式,在其他地方去继承,或“层叠”作者的样式,这
6、种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合各人的爱好。1994年,哈坤在芝加哥的一次会议上第一次提出了CSS的建议,1995年他与波斯一起再次提出这个建议。当时W3C刚刚建立,W3C对CSS的发展很感兴趣,它为此组织了一次讨论会。哈坤、波斯和其他一些人(比如微软的托马斯雷尔登)是这个项目的主要技术负责人。1996年底,CSS已经完成。1996 年 12 月 17 日,CSS1 发布。1999 年 1 月 11 日,此推荐被重新修订。1997年初,W3C内组织了专门管CSS的工作组,其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到的问题,1999 年 1 月 11 日,C
7、SS2 发布。CSS2 添加了对媒介(打印机和听觉设备)和可下载字体的支持。CSS3 计划将 CSS 划分为更小的模块。但似乎只有 Safari和Chrome 完全支持。CSS 优点样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的.css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的
8、更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。CSS布局优势采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势:表现和内容相分离将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。同一图片,不同效果,号称看比Flash提高页面浏览速度对于同一个页面视觉效果,采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。易于维护和改版你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。使用CSS布局更符合现在的W3C标准.CSS 总结CSS是
9、Cascading Style Sheets(层叠样式表)的简称 是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).可以看成是预定义格式模板,或重新定义标签预定义格式模板,或重新定义标签CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀 通过更改CSS文件,改变一个网站所有网页的整体表现,可以减少我们的工作量 CSS标准由W3C的CSS工作组产生和维护的。CSS语法语法-1CSS的定义是由三个部分构成:selector property:value选择符属性:属性值 选择符选择符是可以是多种形式,一般是你要定义样式的HT
10、ML标记(可看成重新定义标签重新定义标签),例如BODY、P、TABLE,你可以通过此方法定义它的属性和值,也可以是.XX或#XX,(后面会介绍,可看成模板模板)选择符组 减少样式重复定义,可把相同属性和值的选择符组合起来书写,用逗号逗号将选择符分开,:h1,h2,h3,h4,h5,h6 color:green 这个组里包括所有的标题元素,每个标题元素的文字都为绿色p,table font-size:9pt 段落和表格里的文字尺寸为9号字,效果完全等效于:p font-size:9pt table font-size:9pt CSS语法语法-2属性属性属性和值要用冒号隔开:例子:body co
11、lor:black,效果是使页面中的文字为黑色。如果属性值是多个单词组成,必须在值上加引号加引号,比如字体的名称经常是几个单词的组合:例子:p font-family:sans serif(定义段落字体为sans serif)多重声明:多重声明:如一个选择符有多个属性时,用分号分号将所有的属性和值分开:例子:p text-align:center;color:red(段落居中排列;段落中文字为红色)CSS语法语法-class选择符类选择符可看成预定义模板,可以多次运用预定义模板,可以多次运用在css中应该这样设置样式:.bbb样式列表,在自定类的名称前面加一个点号。使用时采用 class=bb
12、b形式,类选择符定义1把相同的元素分类定义不同的样式相同的元素分类定义不同的样式,假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:p.right text-align:right 这个段落向右对齐的p.center text-align:center 这个段落是居中排列的然后用在不同的段落里,只要在HTML标记里加入你定义的class参数:类选择符定义2,把几个不同元素几个不同元素定义成相同的样式相同的样式:在选择符中省略省略HTML标签名,这种方法是常用的CSS方法,可以方便的在任意元素上套用预先定义的类样式预先定义的类样式。css部分.center text-
13、align:center(定义.center的类选择符为文字居中排列)这样的类可以被应用到任何元素上。Body部分下面我们使h1元素和p元素都归为“center”类,使两个元素的样式都跟随“.center”这个类选择符:这个标题是居中排列的这个标题是居中排列的 这个段落也是居中排列的CSS语法语法-ID选择符 在HTML页面中ID参数参数指定了某个单一元素,ID选择选择符符是用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。ID只能在一个页面中出现一次只能在一个页面中出现一次,而class可以多次运用.形如id=aaa定义的,在css中是这样设置其
14、样式的:#aaa样式列表ID与class区别id是元素的名称,可以供js或其它脚本程序来访问该元素对象,而class是该元素的css类名。id的值在整个当前网页中应该是唯一的,即某一个元素定义了id=aaa,那么这个网页中其它的元素的id就不能定义成aaa,而class则可以。CSS语法语法-包含选择符 可以单独对某种元素包含关系定义的样式表元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义,例如:table afont-size:12px在表格内的链接改变了样式,文字大小为12像素,而表格外的链接的文字仍为默认大小。CSS 嵌入方法可以用以下三种方式将样式表
15、加入您的网页。最接近目标的样式定义优先权越高最接近目标的样式定义优先权越高。高优先权样式继承继承低优先权样式的未重叠定义覆盖覆盖重叠的定义。CSS 嵌入方法1定义内部样式块对象定义内部样式块对象(Embedding a Style Block)在你的HTML文档的和标记之间插入一个.块对象。示例如下:文档标题 注意,这里将style对象的type属性设置为“text/css”,允许不支持这类型的浏览器忽略样式表单。CSS 嵌入方法2内联定义内联定义(Inline Styles)内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:This is a paragra
16、ph 链入外部样式表文件链入外部样式表文件(Linking to a Style Sheet)先建立外部样式表文件(.css),然后使用HTML的link对象或import对象。示例如下:文档标题 import url(styles.css);详解:“rel=stylesheet”指连接的元素是一个样式表(stylesheet)文档。一般不需要改动的。“href=style.css”指的是需要连接的文件地址。只需把编辑好的“.CSS”文件的详细路径名写进去就可以了。这种方法非常适宜同时定义多个文档。它能使多个文档同时使用相同的样式,减少大量的冗余代码。而在XML中,你应该如下例所示在声明区中加
17、入:CSS 嵌入方法Link import区别外链内容link 是属于 HTML 标记的范畴,link 不尽可以外联样式表,还能够设定 RSS 源地址,网页的 favicon.ico 等。import 则是源于 CSS 一种样式导入方式,imort 只支持对 CSS 的导入。支持import 支持高版本浏览器,但不兼容低版本浏览器,IE 5 以上才支持 import 方式,但 link 则没有版本的限制。加载link 与页面同步加载,import 需要在页面加载完毕后才加载,会由于网速等原因,读取缓慢,造成页面闪烁的现象。控制link 是 DOM 对象,可以用 JavaScript 控制样式的
18、呈现,import 则无法控制。模块化小型的网站使用link比较合适 import可以在一个CSS文件中引入其它几个CSS文件,方便CSS进行模块化管理 CSS属性 布局容器容器定义容器定位细节文本属性字体属性颜色和背景属性特效列表属性鼠标属性 滤镜属性“容器”定义-Box Model 网页中的内容肯定是都需要“装”进这个“容器”里。“容器”属性是CSS中非常重要的一种属性。较多情况下与DIV配合使用CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。外边距外边距属性 内边距内边距属性边框属性边距、边框可统一设置可独立设置“容器”属性-外边距外边距属性marginmargin
19、 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。边距顺序是上、右、下、左。在中加入了如下代码:bodymargin:1em 2em 3em 4em/*定义文本的上、右、下、左的边距分别为1、2、3、4em*/CSS 定义了一些规则,允许为外边距指定少于 4 个值。规则如下:如果缺少左外边距的值,则使用右外边距的值。如果缺少下外边距的值,则使用上外边距的值。如果缺少右外边距的值,则使用上外边距的值。下图提供了更直观的方法来了解这一点:h1 margin:0.25em 1em 0.5em;/*等价于 0.25em 1em 0.5em 1em*/h2 margin:0.5e
20、m 1em;/*等价于 0.5em 1em 0.5em 1em*/p margin:1px;/*等价于 1px 1px 1px 1px*/独立独立单边外边距属性单边外边距属性“容器”属性-内边距内边距属性 padding按照上、右、下、左的顺序分别设置各边的内边距,例如,如果您希望所有 h1 元素的各边都有 10 像素的内边距,只需要这样:h1 padding:10px;您还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:h1 padding:10px 0.25em 2ex 20%;独立独立单边内边距属性单边内边距属性填充距指的是文本边框与文本之间的距离。
21、padding:1em 2em 3em 4em“容器”属性-边框属性border每个边框有 3 个方面:宽度:border-width 样式:border-style颜色:border-color 多值采用了 top-right-bottom-left 的顺序 独立独立定义单边定义单边样式样式宽度宽度颜色颜色“容器”属性-边框属性border Pborder:5px double purple/*定义了四条边框为一样的值*/box定位定位Box-定位定位 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,一切皆为框一切皆为框div、h1 或 p 元素常常被称为块级元素。这
22、意味着这些元素显示为一块内容一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。CSS 定位机制定位机制三种基本定位机制:普通流、浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 X(HTML)中的位置决定。块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。CSS position 属性属性relative元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。absolute元素框从文档流完全删除,并相对于其包含块定位。元素原先
23、在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。fixed元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。ie6不支持它。从IE7起,已经开始支持fixed了 CSS 浮动浮动-1Floatfloat 属性定义元素在哪个方向浮动,可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动
24、框不存在一样。当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。形成水平排列的三个浮动元素 CSS 浮动浮动-2如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。因此,创建浮动框可以使文本围绕图像应用1
25、-图文混排img margin css 我公司是一家以软件开发及销售为主业的高新技术企业。位于高科技产业密集的清华大学东门,拥有近4000平米的独立办公楼,全体员工年轻勤奋而富有创造力,极具挑战性和竞争性。不用表格也能实现图文混排的效果,并且减少了大量的代码。应用2-页面布局DIV结构如下:body/*这是一个HTML元素*/#Container/*页面层容器*/#Header/*页面头部*/#PageBody/*页面主体*/#Sidebar/*侧边栏*/#MainBody/*主体内容*/#Footer/*页面底部*/clear 属性规定元素的哪一侧不允许其他浮动元素。or表示框的哪些边不应该
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html 【html】 CSS
限制150内