任务3.1 使用CSS样式表给网页排版 - 副本.pptxVIP

任务3.1使用CSS样式表给网页排版

任务介绍使用CSS层叠样式表给网页中的文字颜色，大小，位置进行设置，效果如图所示。

任务分析文字效果可以使用HTML标签属性修饰，表格可以做布局，但是HTML标签属性不能修改文字颜色。如何给文字添加颜色？如何能够很快的修改同一个效果？当给同一个标签使用不同颜色时，到底显示哪个颜色？文本案例

1初识CSS3◎CSS3简介◎主流浏览器对CSS3的支持情况

相关知识--认识CSS

CSS是层叠样式表（CascadingStyleSheet）的简称，它提供了对网页布局和设计的创造性控制。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。1、CSS定义

CSS将网页设计样式的过程变得简单而高效。只需修改CSS样式表文件就可以改变整个站点的风格，对于较大的网站非常有用。?CSS样式表提供了比HTML多得多的格式化选择。?可以通过引人注目的标题、下标字母及边框来装饰文本。?可以精确地排列图片，创建列和横幅。?可以精确地布局，调整行列位置。?使用动态翻转效果可以高亮突出显示文本链接。?使用CSS样式表，可以简化网页代码，减少代码上传的数量。而使用HTML时则需要更多的代码才能获得几乎相同的视觉效果。?浏览器会在缓存中保存第一次下载的外部样式表，以便重复使用，大大加快了网页的下载和显示速度。2、CSS的作用

CSS与HTML的区别CSS样式只是一种规则，它描述了对网页的特定部分如何设定格式。样式表就是这样一组预先设计好的样式。CSS与HTML共同起作用，但CSS不是HTML：HTML把信息组织到标题、段落、无序列表等元素中，给文档提供结构CSS则与浏览器一起，将HTML变得更加美观。因此，CSS就是用来改变HTML的所有展现效果的。一旦创建好样式，就可以把它应用到标题、文本、图片、或者其它的网页元素上了。

2CSS的使用◎CSS样式设置规则◎CSS样式的调用◎CSS基础选择器

CSS样式设置规则CSS样式设置规则由选择器和声明部分组成。语法：选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}选择器绿色部分为选择器，大括号部分为声明部分，包括属性与属性值。声明由属性和值两部分组成。属性和值用英文冒号“：”链接。多个“键值对”之间用英文分号“；”进行区分，最后一个分号可以省略，为了规范最好保留。举例：P{color:red;font-size:18px;line-height:30px;}声明部分

注意选择器命名统一使用英文、英文简写或者统一使用拼音。选择器命名尽量不缩写，除非是一看就懂得单词。在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释，可以使用/**/（斜杠和星号）或者使用!----进行注释。其中/**/（斜杠和星号）进行多行注释，而!----进行单行注释。CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。多个属性之间必须用英文状态下的分号隔开，最后用的分号可以省略，但是为了便于增加新样式最好保留。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如：p{font-family:microsoftyahei;}

2CSS样式的调用插入样式表的方法：行内样式表、内部样式表、链入外部样式表。语法：标签名称style=样式属性1:属性值1;样式属性2:属性值2;样式属性…举例：pstyle=color:#fff;font-size:24px;注意：行内样式也可以通过标签的属性来控制样式，由于没有做到结构与表现的分离，所以，不建议使用。只有在样式规格较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。1.行内样式表

语法：headstyletype=text/css选择器{样式属性:属性值;…}/style/head内部样式表是将样式表嵌入到HTML文件的文件头head中的方式。注意：行内样式表与内部样式表的引用方法都属于引用内部样式表，即样式表规则的有效范围只限于该HTML文件，在该文件以外将无法使用。但这也具有一定的局限性，对于一个网站的构建，不建议使用这种方式，因为它不能体现CSS代码的重用优势。2..内部样式表

语法：linkhref=*.csstype=text/cssrel=styleshee