1 / 58

网页设计与制作

网页设计与制作. 学时： 60 学时. 第六章 利用 CSS 样式表美化网页. 了解：了解 CSS 样式的作用和 CSS 样式的分类 。 熟练掌握： 掌握CSS样式的创建方式； 掌握CSS样式属性 。 掌握： 能够根据网页的需求创建不同类型的样式； 掌握各种样式的创建方法； 掌握CSS样式属性的编写 。. 第一节 CSS 样式简介. 一、 CSS 的基本语法. 一、 CSS 的基本语法. 基本格式如下： selector {property: value}. 二、注释. 二、注释.

hannah-long
Download Presentation

网页设计与制作

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页设计与制作 学时：60学时

  2. 第六章 利用CSS样式表美化网页 了解：了解CSS样式的作用和CSS样式的分类。 熟练掌握：掌握CSS样式的创建方式； 掌握CSS样式属性。 掌握：能够根据网页的需求创建不同类型的样式； 掌握各种样式的创建方法； 掌握CSS样式属性的编写。

  3. 第一节 CSS样式简介 一、CSS的基本语法

  4. 一、CSS的基本语法 基本格式如下： selector {property: value}

  5. 二、注释

  6. 二、注释 可以在CSS中插入注释来说明代码的意思，注释有利于自己或者其他用户以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以“/*”开头，以“*/” 结尾，用法如下： /*定义段落样式表*/ p { text-align: center; /* 文本居中排列 */ color: black; /* 文字为黑色 */ font-family: arial /* 字体为arial */ }

  7. 第二节 CSS样式的分类 一、嵌入式样式

  8. 一、嵌入式样式 嵌入式样式的创建方式是将样式嵌入HTML标签中，这种样式的作用范围有限，仅对嵌入的HTML标签有效。 添加嵌入式样式只需要在标签中加入“style=”””即可，在“”””中加入需要设置的样式属性。例如，要将两个段落文字大小定义为12像素，另一个段落文字大小定义成14像素，代码如下： <p style=”font-size:12px”>该段文字大小为12像素</p> <p style=” font-size:14px”>该段文字大小为14像素</p>

  9. 二、内联式样式

  10. 二、内联式样式 • 内联式样式是将样式创建在HTML的<head>…</head>之间，其作用的范围是仅对当前的网页文件有效。 • 例如，将当前网页中所有的段落文字大小统一设为14像素，样式代码如下： • <head> • <style type="text/css"> • <!-- • p{ • font-size:14px • } • --> • </style> • </head>

  11. 三、外联式样式

  12. 三、外联式样式 • 外联式样式是指将样式写入到单独的CSS文件中，然后在站点中不同的页面中引用。其作用的范围最大，可以作用于整个网站。 • 创建外联式样式的步骤如下： • （1）在站点中创建一个html文件，将其扩展名*.html改为*.css。 • （2）将需要使用的样式创建在*.css文件中，例如，需要创建一个段落样式，该样式的作用是所有的文字大小设置为14像素。使用记事本打开创建的*.css文件，在其中加入如下代码： • body{font-size:14px} • 然后关闭并保存该CSS文件。 • （3）打开需要引用该样式文件的网页，在<head>…</head>中加入如下代码： • <link href="*.css rel="stylesheet" type="text/css"> • （4）至此，*.css中的样式将链接到当前页面，该样式文件中的所有样式都可以在该网页中使用。

  13. 四、引用样式的优先级别

  14. 四、引用样式的优先级别 根据CSS样式的规则，3种引用方式中，嵌入式的样式优先级别最高，内联式的其次，外联式最低。

  15. 第三节 CSS样式创建方式 一、HTML标签选择符

  16. 一、HTML标签选择符 HTML标签选择符是通过定义HTML标签来完成的样式。如: p{ color: green ;font-size:14px}/*段落文字大小为14像素，文字颜色为绿色*/

  17. 二、选择符组

  18. 二、选择符组 可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义，例如： h1, h2, h3, h4, h5, h6 { color: green }/*这个组里包括所有的标题元素，每个标题元素的文字都为绿色*/

  19. 三、类选择符

  20. 三、类选择符 用类选择符可以把相同的元素分类定义为不同的样式，定义类选择符时，在自定义类的名称前面加一个点号。例如： p.right {text-align: right} p.center {text-align: center}

  21. 四、ID选择符

  22. 四、ID选择符 在HTML页面中ID参数指定了某个元素的ID名称，ID选择符用来对该元素定义单独的样式。例如： #intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent }

  23. 五、伪类选择符

  24. 五、伪类选择符 伪类可以看做是一种特殊的类选择符，它最大的用处就是可以对链接在不同状态下定义不同的样式效果。 默认情况下Dreamweaver提供了定义超链接4种不同的状态效果的伪类，分别是：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。假设把它们分别定义不同的效果： a:link {color: #FF0000; text-decoration: none} /*未访问的链接*/ a:visited {color: #00FF00; text-decoration: none}/*已访问的链接*/ a:hover {color: #FF00FF; text-decoration: underline}/*鼠标在链接上*/ a:active {color: #0000FF; text-decoration: underline}/*激活链接*/

  25. 六、包含选择符

  26. 六、包含选择符 可以单独对某种元素中包含的元素定义的样式。如: table a { font-size: 12px }

  27. 七、样式表的层叠性

  28. 七、样式表的层叠性 层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。当样式表继承遇到冲突时，总是以最后定义的样式为准。

  29. 第四节 CSS属性 一、背景属性

  30. 一、背景属性 （一）背景颜色 背景颜色属性background-color用于设置对象的背景颜色，该属性的值通常使用一个十六进制的颜色值表示。 （二）背景图像 背景图像属性background-images用于设置对象的背景，该属性的值使用一个URL值。 （三）背景重复 背景重复是指应用了背景图像的对象，其背景的重复方式。 （四）背景定位 背景定位属性background-position用于设置背景图像在应用到对象后，与该对象边框的距离。该属性的值有top、bottom、left、right和center。 （五）背景关联 背景关联属性background-attachment用于设置背景的固定方式。

  31. 二、文本属性

  32. 二、文本属性 （一）文本编辑效果 1.font-family 2.font-size 3.color 4.font-style 5.font-weight 6.font-decoration 7.font-transform 8.font-variant （二）文本位置控制 1.缩进文本 2.水平对齐 3.字间距

  33. 三、列表

  34. 三、列表 （二）列表位置 列表位置属性list-style-position用于控制列表的位置，该属性有两个值：outside表示以列表项内容为准对齐；inside表示以列表项标签为准对齐。 （一）列表符号 列表属性用来修改列表的符号外观，它的值有： disc、 circle、square、 decimal、 lower-roman、 upper-roman、 lower-alpha、 none：无列表项标签。 （三）列表图片 有的时候为了使列表更加突出，可以使用list-style-image属性将自定义的图片作为列表的符号。

  35. 四、定位

  36. 四、定位 （1）relative（相对）：不脱离文档内容，参考自身静态位置通过top、bottom、left和right定位，并且可以通过z-index进行层次分级。 （2）absolute（绝对）：脱离文档内容，通过top、bottom、left和right定位。选取其最近的父级定位元素，当父级 定义为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。 （3）static（静态）：没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。 （4）fixed（固定）：这里所固定的对象是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

  37. 五、浮动

  38. 五、浮动 浮动（float）也是元素定位的一种方式，在HTML中任何元素都可以被浮动。段落、div、list、tables以及图像等，但被浮动的元素必须是块级元素，如不是块级元素可以通过添加display: block;将元素显示为块级元素。 （一）左对齐 当为一个元素设置浮动方式为左对齐后，该元素将向左移动。 （二）右对齐 当为一个元素设置浮动方式为左对齐后，该元素将向右移动。

  39. 六、滤镜

  40. 六、滤镜 CSS滤镜用于为页面中的可见元素添加一些特殊的效果。在HTML中添加滤镜效果的CSS样式代码如下： style="filter:filtername(fparameter1,fparameter2…") 其中，filtername为滤镜的名称，fparameter1、fparameter2等是该滤镜的参数。它共有11种常用滤镜。

  41. 第五节 CSS面板的应用 一、CSS样式面板简介

  42. 一、CSS样式面板简介 单击“窗口”→“CSS样式”命令，或是按Shift+F11组合键，即可打开“CSS样式”面板，其显示如下：

  43. 二 新建样式表规则

  44. 二 、新建样式表规则 （一）选择器类型 用于定义要创建的CSS样式的类型。 （二）选择器名称 在“选择器名称”文本框中输入样式的名称。 （三）规则定义 用于选择CSS规则定义的位置，是直接应用于当前HTML文档中，还是要附加到外部的CSS文件中。 如果要创建内部样式表，操作步骤如下： （1）执行“窗口”→“CSS样式”命令，打开“CSS样式”对话框。 （2）执行“新建样式表”按钮，弹出“新建CSS规则”对话框，如图所示。

  45. 三、设置CSS属性

  46. 三、设置CSS属性 使用“CSS规则定义”对话框是用于定义CSS规则的属性，如文本字体、背景图像和颜色、间距和布局属性以及列表元素外观。它主要可设置下列属性。 （一）类型 中的“类型”类别可以定义CSS样式的基本字体和类型设置。“类型”类别规则如图。

  47. 三、设置CSS属性 （二）背景 使用“CSS 规则定义”对话框的“背景”类别可以定义CSS样式的背景设置。可以对网页中的任何元素应用背景属性。

  48. 三、设置CSS属性 （三）区块 使用“CSS 规则定义”对话框的“区块”类别可以定义标签和属性的间距和对齐设置。主要用于对段落、列表等文本块的设置。

  49. 三、设置CSS属性 （四）方框 所谓方框，在现行的Web标准中定义为，成对的HTML标签就构成为了块，即是用于放置内容的容器。

  50. 三、设置CSS属性 （五）边框 使用“CSS 规则定义”对话框的“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）。

More Related