HTML与CSS前台页面设计许莉第05章使用CSS样式课件教学.pptVIP

PPT研究院 POWERPOINT ACADEMY * * HTML与CSS前台页面设计 第五章 HTML与CSS前台页面设计 使用CSS样式 第五章 使用CSS样式 HTML与CSS前台页面设计 本章要点 对HTML文档应用样式的方法 CSS样式代码编写规则 CSS样式选择器 的种类及使用 第五章 使用CSS样式 HTML与CSS前台页面设计 目录： 5.1对HTML文档应用样式 5.2CSS样式代码编写规则 5.3CSS样式选择器 5.4综合实例 5.1 对HTML文档应用样式 1.应用样式的方法 当设计好样式之后，需要将样式应用到HTML文档中，可以用下 面的三种方式，将CSS应用于HTML页面上。 （1）内联样式 内联样式是将样式写在标记里面的， 它只对己所在的标记起作 用。内联样式表 用到style标记。 5.1 对HTML文档应用样式 （2）内部样式表 内部样式表是写在head/head里面的，它只针对所在的 HTML页 面有效。内部样式表也用到style标记，写法为： style type=text/css /*样式规则*/ /style （3）外部样式表 CSS允许将所有样式放在一个或多个以.css为结尾的外部样式表文件 中。通过将外部样式表附加到HTML文档上的方法可以灵活的应用样 式。附件外部样式表上有两种方法。可以链接它们，也可以导入它 们。 5.1 对HTML文档应用样式 2 .应用样式的优先级 所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，如果遇到不同的样式表的规则有冲突的地方，将按优先级来确定应用哪一个规则,内联样式拥有最高的优先权。 （1）浏览器缺省设置 （2）外部样式表 （3）内部样式表 （4）内联样式 5.2 CSS样式代码编写规则 1.样式代码编写规则 CSS规则由一个选择符（selector）和一个声明（declaration）构成。声明由属性（properties）和属性的取值（value）组成，声明用来设置指定选择符的样式。 selector { property : value } ---如果需要对一个选择符指定多个属性时，使用分号将所有的属性和值分开。 ---为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择器，每个选择器之间用逗号（，）隔开。 5.2 CSS样式代码编写规则 2.规则的注释 在样式表中的规则的比较多时，可以通过注释来管理样式表。 所有的注释都以斜杠和星号（/*）开始，以星号加斜杠结束（*/）。可以在复杂和重要的样式中使用，这样当以后再看以前设计的样式表时，就知道各个规则是的作用了。 5.2 CSS样式代码编写规则 3.规则的标志 注释对于阅读整个样式表很重要，但通过引入了标志的概念可以追踪单个规则，这对复杂的样式表非常有用。标志使用样式表中不常用的字符作为注释的起始，有助于结合文本编辑器的查找工具来检索规则。 5.2 CSS样式代码编写规则 4.规则的排版 缩进主要是为了保证代码的清晰可读。在实际的使用中，可以单击一次Tab键来缩进选择器，而单击两次Tab键来缩进声明和结束大括号。这样的排版规则可以使查询规则非常容易。 这样做可以使得即使在样式表不断增大的情况下，仍然可以避免混乱。 5.2 CSS样式代码编写规则 5.样式命名的通用规则 （1）命名所选用的单词应选择不过于具体表示某一状态（如颜色、字号大小等）的单词，以避免当状态改变时名称失去意义。 （2）样式CLASS名由以字母开头的小写字母（a-z）、数字（0-9）、下划线（_）、减号（-）组成。 （3）样式ID名称由不以数字开头的小写字母（a-z）、数字（0-9）、下划线（_）组成。 （4）模块、类型、状态、位置等的所使用的单词或其缩写，保持上面的顺序，尽量保持用两到三个单词说清用途。 5.3 CSS样式选择器 1. HTML标记选择器 一个HTML页面由很多不同的标记组成，CSS中的HTML标记选择器用来声明哪些标记采用哪种CSS样式。因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称。 5.3 CSS样式选择器 2. CLASS选择器 CLASS（class）选择器是一类最常用的选择器，它用来定义HTML页面中需要特殊表现的样式。class选择器的名称可以由用户自定义，属性和值跟HTML标记选择器一样，也必须符合CSS规范，class选择器的名称前有一个圆点（.）做为前缀。 如果要使用指定的class选择器，需要在相应的HTML标记中，通过