第5章 CSS技术基础ppt课件.ppt

第5章 CSS技术基础ppt课件.ppt

ID:58700309

大小:4.27 MB

页数:84页

时间:2020-10-04

第5章 CSS技术基础ppt课件.ppt_第1页
第5章 CSS技术基础ppt课件.ppt_第2页
第5章 CSS技术基础ppt课件.ppt_第3页
第5章 CSS技术基础ppt课件.ppt_第4页
第5章 CSS技术基础ppt课件.ppt_第5页
资源描述:

《第5章 CSS技术基础ppt课件.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、第5章CSS技术基础本章知识技能要点:CSS在网页制作中的作用如何在HTML文件中使用CSSCSS常用的属性及其取值利用CSS进行版面设计5.1CSS概述CSS(CascadingStyleSheets)即层叠样式表,简称样式表。CSS是一系列格式设置规则,它们控制Web页面内容的外观。样式是对网页中的元素(字体、段落等)属性的整体概括。层叠是指当HTML文件引用多个CSS文件时,若CSS文件之间所定义的样式发生了冲突,将依据层次的先后来处理其样式对内容的控制。使用CSS设置页面格式时,应将内容与表现形式分开。5.1.1C

2、SS的基本概念例5-1-15.1CSS概述CSS具有如下的特点:可以将格式和内容分开,使得网页设计趋于明了、简洁。可一次性管理多个页面,使得许多网页可同时更新。减少代码的下载,提高浏览器的浏览速度。可以制作体积更小、下载更快的网页。精确控制网页布局,实现严密设计。5.1.2CSS的特征5.1CSS概述CSS的特性:继承性层叠性(采用最近最优先原则)继承性P继承了body的样式该文字的字体为“隶书”例5-1-2-15.1CSS概述层叠性(采用最近最优先原则)应用了后定义的规则该文字的字体为“隶书”例5-1-2-25.2CSS

3、的使用CSS格式设置规则由两部分组成:选择器是标识格式元素的术语声明用于定义元素样式,由属性和值组成。例:h1{font-size:16pixels;font-family:Helvetica;font-weight:bold;}5.2.1CSS的基本语法选择器声明5.2CSS的使用说明:①如果属性的值是由多个单词组成,并且单词间有空格,那么必须给值加上引号,如字体的名称经常是几个单词的组合。例:定义段落字体为TimesNewRomanp{font-family:"TimesNewRoman"}②如果需要对一个选择符指定多

4、个属性时,用分号将属性分开。例:段落居中排列,并且段落中的文字为红色,字体为宋体.p{text-align:center;color:red;font-family:宋体}5.2CSS的使用③相同属性和值的选择符组合起来称为选择符组。如果需要给选择符组定义属性和值,只要用逗号将选择符分开即可。例:段落和表格里文字的尺寸大小均为10号字。p,table{font-size:10pt}相当于:p{font-size:10pt}table{font-size:10pt}④属性和值要用冒号隔开。5.2CSS的使用CSS的每一条定义

5、都有如下的形式:selector{property1:value1;property2:value2;...}其中:selector是选择器property:value是属性和属性的取值5.2.2CSS选择器的类型5.2CSS的使用选择器selector有三种类型:1、为某个具体标签定义样式为HTML的标签定义样式,比如p、body、a等等。语法:标签名{样式属性:取值;样式属性:取值;...}例:h1{background-color:#336699;color:red}在html文件中应用时的形式为:

大家好

6、1>显示的效果是“大家好”使用了背景颜色“#336699”和文字颜色“red”。5.2CSS的使用2、Class选择器(也称级别选择器、类选择器)作用用来对HTML文档中的多个元素进行样式指定。语法标签名.类名{样式属性:取值;样式属性:取值;...}应用方法在HTML标签中加入已经定义的class参数即可。说明标签名可省略,即在定义class的时候,省略元素名称,此时,可不管是什么元素,都可应用这种类的样式。5.2CSS的使用例:要设置两个不同文字颜色的段落,一个为红色,一个为蓝色p.style1{color:red}p

7、.style2{color:blue}在html文件中应用时的形式为:接上例:或是例5-2-15.2CSS的使用3、ID选择器作用ID选择器用来针对HTML文档中的某一元素设定特殊的样式。语法#标识名{样式属性:取值;样式属性:取值;...}应用方法在HTML标签中加入已经定义的id参数即可。例:#tdcolor{color:red},定义了ID为“tdcolor”的样式。在html文件中应用时的形式为:大家好5.2CSS的使

8、用注:由于“ID”选择器局限性很大,只能在单独定义某个元素的样式,一般只在特殊情况下使用。网页中ID选择器经常使用的名称和用途ID选择器用途wrapper用于指定网页的横幅或者进行中央对齐,也常被编写成containerheader用于进行网页首部的设计content用于进行网页主题部分的设计foote

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

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

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