中职教育二年级上学期电子与信息《初识CSS》教学课件.pptx

初识CSS

目标TARGET知识目标了解CSS的概念与作用掌握CSS样式设置规则掌握CSS样式的调用方法掌握CSS基础选择器的使用方法技能目标能正确应用CSS规则，合理选择CSS选择器编写CSS样式能根据网页页面效果，编写CSS样式效果

目录认识CSS样式表1创建CSS样式表2添加CSS基础选择器3

一、认识CSS样式表CSS是CascadingStyleSheets(层叠样式表)的缩写。使用CSS技术可以有效地对页面布局、文本、边框、背景以及一些特殊效果实行精确控制，使网页更加美观。

认识CSS样式表1、CSS概述CSS是Cascading?StyleSheet（层叠样式表）的缩写，CSS3是CSS技术的升级版本。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

认识CSS样式表2、CSS样式规则CSS样式设置规则由选择器和声明两部分组成，选择器用于“查找”（或选取）要设置样式的HTML元素，声明由属性和属性值两部分组成。语法：选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}举例：P{color:red;font-size:24px;}选择器声明部分绿色部分为选择器，大括号部分为声明部分，包括属性与属性值。属性和值用英文冒号“：”链接。多个“键值对”之间用英文分号“；”进行区分，最后一个分号可以省略，为了规范最好保留。

认识CSS样式表3、注意选择器命名由字母、数字和下划线组成，不能以数字开头。选择器命名尽量语义化。为了提高代码的可读性，可以为CSS加上注释。CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。多个属性之间必须用英文状态下的分号隔开，最后用的分号可以省略，为了规范最好保留。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如：p{font-family:microsoftyahei;}

二、创建CSS样式表CSS样式表包括行内样式表、内部样式表和链接样式表。

创建CSS样式表1、行内样式表行内样式也可以通过标签的属性来控制样式，由于没有做到结构与表现的分离，所以，不建议使用。只有在样式规格较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。语法：标签名称style=样式属性1:属性值1;样式属性2:属性值2;样式属性…举例：h2style=text-align:center;color:red;中国加油/h2注意：直接在HTML代码行中加入样式规则。适用于指定网页内的某一小段文字的显示规则，效果仅可控制该标签。

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

创建CSS样式表3、链接样式表语法：linkhref=*.csstype=text/cssrel=stylesheethref指定被链接文档的位置。tpye指定文档类型。rel指定当前文档与被链接文档之间的关系，其值为stylesheet。链接样式表将一个外部样式表链接到HTML文档中。注意：链接样式表实现了框架HTML代码和CSS代码的完全分离。同一个CSS文件，根据需要可以链接到网站中所有的HTML页面上，使得网站整体风格统一、协调，并且大大减少了后期维护的工作量。链接样式表很好的体现了CSS代码的重用性，是CSS中使用频率最高、最常使用的方法。

三、添加CSS基础选择器CSS选择器用于“查找”（或选取）要设置样式的HTML元素。

添加CSS基础选择器1、标签选择器语法：标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}举例