CSS初步专用课件.ppt

CSS初步 第一节 CSS的基本概念 第二节 CSS对文字的控制 第三节 背景的设置 第四节 美化网页 第五节 区域与层的概念 第六节 CSS与HTML的结合方式 第七节 CSS中的滤镜 第一节 CSS的基本概念 什么是CSS? CSS, 全称Cascading Style Sheet,通常称为层叠样式表。 CSS可以让网页的内容和样式分离开来，让HTML标记只控制网页的内容，至于网页的样式则交由CSS来控制。 CSS的优点 CSS可以更加精细的控制网页的内容形式。 CSS样式比HTML更加丰富多彩，如滚动样式的定义、鼠标光标样式的定义等。 CSS的定义样式灵活多样，可以根据不同的情况，选用不同的定义方法，如可以在HTML文件内部定义，可以分标记定义，也可以在HTML文件外部定义，基本上能满足使用。 CSS 格式设置规则由两部分组成：选择器和声明。选择器是标识已设置格式元素（如 P、H1、类名称或 ID）的术语，而声明则用于定义样式元素。声明由两部分组成：属性和值 。 H1 {font-size:16 pixels;font-family:Helvetica;font-weight:bold;} CSS样式有三种类型： （1）自定义样式：可以将样式属性应用到任何文本范围或文本块。所有类样式均以句点 (.) 开头。 例如，您可以创建称为 .red 的类样式，设置规则的 color 属性为红色，然后将该样式应用到一部分已定义样式的段落文本中。 （2）HTML标记样式：重定义特定标签（如 p 或 h1）的格式。创建或更改 h1 标签的 CSS 规则时，所有用 h1 标签设置了格式的文本都会立即更新。 （3）样式选择器：重定义特定元素组合的格式，或其它 CSS 允许的选择器形式的格式（例如，每当 h2 标题出现在表格单元格内时，就应用选择器 td h2）。 CSS 规则可以位于以下位置： 外部 CSS 样式表是存储在一个单独的外部 .css 文件（并非 HTML 文件）中的一系列 CSS 规则。利用文档 head 部分中的链接，该 .css 文件被链接到 Web 站点中的一个或多个页面。 内部（或嵌入式）CSS 样式表是包含在 HTML 文档 head 部分的 style 标签内的一系列 CSS 规则。 head style ??? p{ font-size:60px } /style /head 内联样式是在 HTML 文档中的特定标签实例中定义的。 实例1.1 CSS的样式声明 源代码 html head titleCSS的使用一/title style type=text/css !-- h1 {font-style:italic} h2 {color:red} -- /* 以上是CSS的定义 */ /style /head body h1这是斜体的标题文字/h1 h2这是红色的标题文字/h2 /body /html 网页效果 实例解析 以红字表明部分是一个CSS的应用，直接在HTML文件中插入style标记，style标记的语法结构为 style type=“text/css” !-- 标记1{样式属性：属性值；样式属性：属性值；…} 标记2{样式属性：属性值；样式属性：属性值；…} …… -- /style style标记用来说明定义哪类语法的样式，该标记通常放在head /head标记之间。 Type属性则指定使用css语法来定义网页的内容样式。 !-- --标记称为越过标记，即在浏览器不支持css语法时，会自动越过定义的样式，以默认方式方式显示。 /* */标记为注释标记。浏览器不会显示包含在这个标记里的内容。 实例1.2 CSS样式的选择性使用 源代码 html head titleCSS的使用二/title style type=text/css !-- #f1 {font-style:italic} h2 {color:red} -- /* 以上是CSS的定义 */ /style /head body h1这是正常的标题文字/h1 h1 id=f1这是斜体的标题文字/h1 h2这是红色的标题文字/h2 h2 id=f1这是红色的斜体标题文字/h2 /body /html 网页效果 实例解析 这里使用了ID属性的选择功能，其语法结构为 style type=“text/css” !-- #样式名1{样式属性：属性值；样式属性：属性值；…} #样式名2{样式属性：属性值；样式属性：属性值；…} …… -- /style 注意：样式名前面的”#”符号不能省略。 第二节 CSS对文字的控制 2.1 文字的字体设置 在HTML中，设置文字的字体需要通过