网页样式表CSS

网页样式表CSS

ID:38289967

大小:385.31 KB

页数:19页

时间:2019-06-07

网页样式表CSS_第1页
网页样式表CSS_第2页
网页样式表CSS_第3页
网页样式表CSS_第4页
网页样式表CSS_第5页
资源描述:

《网页样式表CSS》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、网站规划与网页设计王建平fysfwjp@163.com1吕梁高等专科学校汾阳师范分校5.1CSS的特点和用途5.2在网页中插入CSS5.3class与id类选择符5.4

标记5.5多重CSS的层叠5.6CSS的属性单位第5章网页样式表CSS2CSS(CascadingStyleSheets)中文翻译为层叠样式表单,简称样式表,是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式,在网页中,文字的大小、色彩及图片位置等,都是设置显示内容的样式。层叠是指在

2、HTML文档中引用多个定义样式的样式文件(CSS文件)时,若多个样式文件间所定义的样式发生冲突,将依据层次顺序处理。它的主要用途如下所述。使页面的字体变得更漂亮,更容易编排,使页面效果真正达到赏心悦目。用户可以轻松地控制页面的整体风格和布局。如果站点上所有的页面都使用同一个CSS文件进行控制,那么可以对许多网页的风格格式同时进行更新,不用再一页一页地更新了。只要修改这个CSS文件中相应的代码,整个站点的所有页面都会随之发生变动。5.1CSS的特点和用途3CSS控制网页内容显示格式的方式是通过许多定义好

3、的样式属性(如字号、段落控制等)来实现的,并将多个样式属性定义为一组可供调用的选择符(selector)。其实,选择符就是某一个样式的名称。当HTML文档中某个元素要使用该样式时,必须使用该名称选择样式。在这里使用选择符这个名词的原因,是为了与W3C标准统一,其实可以直接把它当成样式名称,这样会比较好理解。要想在浏览器中显示出样式表的效果,就要让浏览器识别并调用。当浏览器读取样式表时,要依照文本格式来读。这里介绍4种在页面中插入样式表的方法:内部样式、行内样式、链入外部样式和导入外部样式。5.2在网页中插入

4、CSS45.2.1内部样式内部样式(embeddedstyles)是把样式表放到页面的…区内,这些定义的样式就可以应用到页面中了。样式表是用标记对,在其中定义样式。其格式为:5.2在网页中插入CSS【例5-1】55.2.2行内样式行内样式(inlinestyles)也称内嵌样式,是指在HTML标记中插入style属性,再定义要显示的样式,而style属性的内容就是CSS的属性和值。用这种方法,可以很简单地对某个标记单独定义样式。它的特点是——“定义某一个标记的样式风格”,即只对所定义的标记起作用,并非对整个页面起作用。有时候这种方式非常有效,其格式为:<标记style=“属性:属性值;属性:属性值…”>style属性可

6、以应用于除basefont,param和script之外的任意标记(包括本身)。5.2在网页中插入CSS【例5-2】65.2.3链入外部样式链入外部样式(linkedstyles)就是当浏览器读取到HTML文档的样式表链接标记时,将向所链接的外部样式表索取样式。先将样式表保存为一个样式表文件(.css),然后在网页中用标记链接这个样式表文件,这个标记必须放到页面的…区内,其格式为:…

7、"href="外部样式表文件名.css"type="text/css"/>…rel="stylesheet"属性定义在网页中使用外部的样式表,type="text/css"属性定义文件的类型为样式表文本,href属性用于定义.css文件的URL。5.2在网页中插入CSS【例5-3】75.2.4导入外部样式导入外部样式(importedstyles)就是当浏览器读取HTML文件时,复制一份样式表到这个HTML文件中,即在内部样式表的导入外部样式表输入方式上更有优势,实质上它相当于内部样式。5.2在网页中插入CSS【例5-4】85.3.1用类(class)选择符定义样式用类选择符能够把相同的标记分类定义为不同的样式。例如,希望同一种标记(如

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。