[工学]CSS基础.pptVIP

第一章 CSS基础 本节课的内容： 三位一体的网页 样式表简介 使用样式 样式表基本语法 选择器 标签选择器 类选择器 ID选择器 行内样式表 内部样式表 外部样式表 链接外部样式表 导入样式表 样式表的优先级 CSS的优点 本节课目标： 掌握样式表的语法 学会使用样式表 重点难点： 理解选择器 各种样式表的使用 三位一体的网页 三位一体的网页 我们在浏览器里看到的网页其实是由以下三层信息构成的一个共同体 结构层 表示层 行为层 结构层 网页的结构层由HTML之类的标记语言负责创建。标签对网页内容的含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，p标签表达了这样一个意思：“这是一个文本段。“如下所示： 表示层 网页的表示层由CSS负责创建。CSS对“如何显示有关内容”的问题做出了回答。我们可以定义这样一个CSS：“文本段应该使用红色的Arial字体和另外几种 scan-serif字体来显示。” 如下所示： 行为层 网页的行为层负责回答“内容应该如何对事件做出反应”这一个问题。这是由JavaScript语言主宰的领域。例如，我们可以利用JavaScript实现这样一种行为：“当用户点击一个文本时，显示一个对话框。”如下所示： 在所有的产品设计活动中，选择最适合的工具去解决问题是最基本的原则，具体到网页设计工作，这意味着： 使用HTML去搭建文档的结构 使用CSS去设置文档的呈现效果 使用JavaScript脚本去实现文档的行为 样式表简介 什么是样式表 ? 样式表，英文名称叫做Style Sheet,也有的人称之为Cascading Style Sheet，把这3个单词的首字母连起来，就是样式表的英文简称CSS。 利用CSS技术，可以有效的对网页的布局、字体、颜色、背景和其他效果实现更加精确的控制 使用样式 使用元素标签的style属性 使用style标签 样式表的基本语法 CSS语法由三部分组成：选择器、属性和值 格式如： body{color:blue;} body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。 每个选择器都有属性以及对应的属性值。一个选择器可以有多个属性，他们可以写在一起，用分号隔开 P{ text-align: center; color: black; font-family: arial; } 选择器 选择器分为标签选择器、类选择器、ID选择器 选择器的作用就是在HTML中找到我们要进行样式设置的那些标签 如果样式直接在元素的style属性中定义则不用书写选择器,直接写属性和值 标签选择器 标签选择器使用HTML标签的名称来标识 如： h2{ background-color:red; } p{ background-color:green; } 有这样一段文档,要求所有标签内的文字都为绿色 也可以这样写，用逗号把将选择器分开。这些选择器具有相同的声明。2种方式的显示结果是一样的 类选择器 类选择器的定义格式 注意类名前面有一个“.”号，类名可以随意命名，最好根据元素的用途来定义一个有意义的名称。 如某个标签希望采用该类选择器的样式，语法格式为 p class=”类名”…/p 示例：不同的标签使用同一个类选择器而具有相同的样式 ID选择器 ID选择器语法格式 ID选择器以“#”来定义 ID名可以随意命名，但在整个网页中必须唯一，不能重名。ID选择器的名称必须是页面中存在的ID名，且“大小写敏感”，一定要和元素属性中定义的ID一致 行内样式表 使用标签的style属性定义的样式则为行内样式 如下： 内部样式表 使用style标签定义的样式则是内部样式表，顾名思义其是嵌在网页内的 外部样式表 把样式从head标签中提取出来，放在一个单独的文件，就形成了外部样式表 链接外部样式表 链接外部样式表是指通过HTML的 link /标签，把样式文件和网页建立关联，格式如下： 导入样式表 在网页中，还可以使用@import 方法导入样式表，格式如下 其中，@import代表导入文件，前面规定有一个“@”符号 下面总结一下3种样式表的特点 样式表的优先级 样式表的优先级规则如下： 某个标签最优先考虑行内样式表显示，如果没有，再考虑内部样式表显示，如果还没有，最后用外部样式表显示，否则就按HTML的默认样式显示。 CSS的优点 改变浏览器的默认显示风格 页面内容和显示样