网页设计与制作项目式教程（HTML+CSS）课件05.为“中国民俗”网站页面设置外观_第1页
网页设计与制作项目式教程（HTML+CSS）课件05.为“中国民俗”网站页面设置外观_第2页
网页设计与制作项目式教程（HTML+CSS）课件05.为“中国民俗”网站页面设置外观_第3页
网页设计与制作项目式教程（HTML+CSS）课件05.为“中国民俗”网站页面设置外观_第4页
网页设计与制作项目式教程（HTML+CSS）课件05.为“中国民俗”网站页面设置外观_第5页
已阅读5页，还剩49页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与制作项目式教程（HTML+CSS）项目二

简单展示类网页开发项目——为“中国民俗”网站页面设置外观任务2.4为“中国民俗”网站页面设置外观项目实施任务分析小丁使用HTML制作了“中国民俗”网站页面的内容后，发现最终效果跟网站设计需求的效果不一样，老师告诉小丁，他只完成了网站页面的html内容的设置，还需要为网站页面设置CSS外观样式，设置了外观样式的网页最终效果如图2-1和图2-2所示。图2-1

“中国民俗”网站网页图2-2传统节日详情页任务2.4为“中国民俗”网站页面设置外观知识储备知识导图本任务涉及的主要知识点如图所示。任务2.4为“中国民俗”网站页面设置外观知识储备新知学习1：CSS基本概念、功能特点和引入方式1.CSS基本概念CSS（CascadingStyleSheets），即串联样式表，CSS的出现是为了改造HTML标签在浏览器中所展示的外观，使其变得更加好看，就像盖房子，HTML是把房子结构建好，而CSS是给房子装修，刷油漆和装饰。任务2.4为“中国民俗”网站页面设置外观知识储备新知学习1：CSS基本概念、功能特点和引入方式2.CSS功能特点（1）丰富的样式定义CSS提供了丰富的文档样式外观，样式定义如何显示HTML元素，如字体样式、文本样式、边框样式、背景样式、超链接样式、图片样式、列表样式、表格样式等一些系列页面效果。（2）易于使用和修改CSS有多种定义方式供HTML页面使用，如果要修改样式，只需要在样式列表中找到相应的样式声明进行修改。任务2.4为“中国民俗”网站页面设置外观知识储备新知学习1：CSS基本概念、功能特点和引入方式（3）多页面应用CSS样式表可以单独存放在一个CSS文件中，这样我们可以在多个页面中使用同一个CSS样式表，可以同时控制多张网页的布局，极大地提高工作效率。（4）层叠层叠就是多个样式定义可层叠为一个，对一个元素多次设置同一个样式，将使用最后一次设置的属性值。例如对多个页面同时应用了一套CSS样式表，而某一个页面中的某些元素想要使用其他的样式，就可以针对这些样式单独定义到页面中，这些后来的样式将覆盖掉前面的样式设置，在浏览器中看到的将会是最后面设置的样式效果。任务2.4为“中国民俗”网站页面设置外观知识储备3.CSS引入方式在HTML中，共有3种CSS引入方式，分别是内联样式表，内部样式表，外部样式表，这3种引入方式的优先级为：内联样式表>内部样式表>外部样式表。新知学习1：CSS基本概念、功能特点和引入方式任务2.4为“中国民俗”网站页面设置外观知识储备（1）内联样式表内联样式表，也是将HTML代码和CSS代码放在同一个文件中，但是它和内部样式表不同，CSS样式不是在<style></style>标签中定义，而是将CSS样式写在元素的通用属性style中，这种方式只对单个元素有效，不会影响整个文件，可以精准地控制HTML文档的显示效果，对于一些规模较小的项目，或者只需要设置少量样式的情况下，可是适当使用内联样式，示例代码如下：新知学习1：CSS基本概念、功能特点和引入方式代码运行效果：任务2.4为“中国民俗”网站页面设置外观知识储备（2）内部样式表内部样式表是将HTML代码和CSS代码放在同一个文件中，直接将CSS样式写在<style></style>标签中作为内容，这种写法重用性较差，有时还会导致HTML文档过大，当重复的CSS代码在不同的HTML文档中存在时会导致大量的重复下载，在希望某些CSS样式效果仅对某个页面有效时，通常采用这种形式，示例代码如下：引入CSS样式后页面预览效果同内联样式表。新知学习1：CSS基本概念、功能特点和引入方式任务2.4为“中国民俗”网站页面设置外观知识储备（3）外部样式表外部样式表是最理想的CSS引入方式，在实际开发中，为了提高网页的性能和维护性，一般都使用外部样式表，外部样式表就是将HTML页面和CSS页面单独放在不同文件中，然后在HTML文档的<head></head>标签中通过link标签来引入CSS样式表，基本格式如下：<linktype=”text/css”rel=”stylesheet”href=”CSS样式文件的URL”/>在CSS文件夹中新建CSS文件，如下图所示。新知学习1：CSS基本概念、功能特点和引入方式任务2.4为“中国民俗”网站页面设置外观知识储备给CSS文件命名，如下图所示。项目布局如下图所示新知学习1：CSS基本概念、功能特点和引入方式任务2.4为“中国民俗”网站页面设置外观知识储备在HTML页面使用<link>标签引入CSS文件，需注意CSS文件名必须一致，示例代码如下：新知学习1：CSS基本概念、功能特点和引入方式CSS文件中书写样式代码和引入CSS样式后页面预览效果同内部样式表。任务2.4为“中国民俗”网站页面设置外观知识储备在css中，可以对文本的显示效果进行设置，常用设置文本样式的属性如下表所示。新知学习2：CSS文本样式属性描述color定义文本颜色text-align定义文本的水平对齐方式vertical-align定义元素的垂直对齐方式text-decoration定义文本装饰text-transform定义文本转换text-indent定义文本缩进letter-spacing定义文本中字符之间的间距line-height定义行之间的间距任务2.4为“中国民俗”网站页面设置外观知识储备1.文本颜色颜色属性Color用于设置文本颜色，颜色取值有以下三种方法：（1）颜色名。如”red”(红色)、”blue”(蓝色)、”yellow”(黄色)。（2）十六进制值。如”#FF0000”(红色)、”#000FFF”(蓝色)、”#FFFF00”(黄色)。（3）RGB值。如”RGB(255,0,0)”(红色)、”RGB(0,0,255)”(蓝色)、”RGB(255,255,0)”(黄色)。新知学习2：CSS文本样式任务2.4为“中国民俗”网站页面设置外观知识储备示例代码如下：新知学习2：CSS文本样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备2.文本水平对齐方式文本水平对齐text-align属性取值如下表所示。新知学习2：CSS文本样式text-align属性值功能left文本左对齐center文本居中right文本右对齐text-align属性用于设置文本的水平对齐方式，文本可以左对齐或右对齐，或居中对齐。任务2.4为“中国民俗”网站页面设置外观知识储备示例代码如下：新知学习2：CSS文本样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备3.文本垂直对齐方式文本垂直对齐方式vertical-align属性取值如下表所示。新知学习2：CSS文本样式vertical-align属性值功能top把元素顶端与行中最高元素顶端对齐middle把此元素放置在父元素的中部bottom底端对齐vertical-align属性设置一个元素的垂直对齐方式。该属性常用于表格单元格框中单元格内容的对齐方式或内联元素中，但不适用于块元素，在使用块元素时使用此属性会无效。任务2.4为“中国民俗”网站页面设置外观知识储备示例代码如下：新知学习2：CSS文本样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备4.文本装饰

文本装饰text-decoration属性取值如下表所示。新知学习2：CSS文本样式text-decoration属性值功能none用于超链接去掉下划线overline上划线line-through删除线underline下划线text-decoration属性用于设置或删除文本装饰，值为none时用于从链接上删除下划线，值为overline时是上划线，值为line-through时是删除线,值为underline时是下划线。任务2.4为“中国民俗”网站页面设置外观知识储备示例代码如下：新知学习2：CSS文本样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备5.文本转换文本转换text-transform属性取值如下表所示。新知学习2：CSS文本样式text-transform属性值功能uppercase将所有内容转换为大写lowercase将所有内容转换为小写capitalize将每个单词的首字母大写text-transform属性用于指定文本中的大写和小写字母，它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写。任务2.4为“中国民俗”网站页面设置外观知识储备示例代码如下：新知学习2：CSS文本样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备6.文本缩进text-indent属性用于指定文本第一行的缩进。新知学习2：CSS文本样式text-transform属性值功能uppercase将所有内容转换为大写lowercase将所有内容转换为小写capitalize将每个单词的首字母大写text-transform属性用于指定文本中的大写和小写字母，它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写。任务2.4为“中国民俗”网站页面设置外观知识储备示例代码如下：新知学习2：CSS文本样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备7.字符间距letter-spacing

属性用于指定文本中字符之间的间距。示例代码如下：新知学习2：CSS文本样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备8.行高line-height

属性用于指定行之间的间距。示例代码如下：新知学习2：CSS文本样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备行高属性也常用在块元素内部垂直居中，垂直居中行高的值必须等于元素高度的值。示例代码如下：新知学习2：CSS文本样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备在CSS样式中，使用font属性可以设置丰富多彩的字体样式。该属性是一个复合属性，常用于设置字体样式的属性如下表所示。新知学习3：CSS字体样式属性描述font-style定义字体斜体样式font-weight定义字体粗细font-size定义字体大小font-variant定义字体变体任务2.4为“中国民俗”网站页面设置外观知识储备1.字体斜体样式font-style

属性主要用于指定斜体文本。font-style属性值如下表所示。新知学习3：CSS字体样式font-style属性值功能normal字体正常显示italic字体以斜体显示oblique字体为倾斜，和斜体非常相似，但浏览器支持较少任务2.4为“中国民俗”网站页面设置外观知识储备示例代码如下：新知学习3：CSS字体样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备2.字体粗细font-weight属性指定字体的粗细。font-weight属性值如下表所示。新知学习3：CSS字体样式font-weight属性值功能normal标准字符bold粗体字符bolder更粗的字符lighter更细的字符具体值值的区间在100-900，表示由细到粗的字符。400等同于normal，700等同于bold。任务2.4为“中国民俗”网站页面设置外观知识储备示例代码如下：新知学习3：CSS字体样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备3.字体大小font-size

属性设置文本的大小。在网页设计中，字体大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落，应使用正确的HTML元素，例如<h1>-<h6>用于标题，<p>用于段落。font-size属性值如下表所示。新知学习3：CSS字体样式任务2.4为“中国民俗”网站页面设置外观知识储备新知学习3：CSS字体样式font-size属性的值功能xx-smallx-smallsmallmediumlargex-largexx-large把字体的大小设置为不同的尺寸，从xx-small到xx-large默认值为mediumsmaller把字体设置为比父辈文本字体更小的尺寸larger把字体设置为比父辈文本字体更大的尺寸length把字体大小设置为一个固定值%把字体大小设置为基于父元素文本字体大小的一个百分比值任务2.4为“中国民俗”网站页面设置外观知识储备实际开发中，一般将font-size属性值设置为一个“像素值”。实例代码如下：新知学习3：CSS字体样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备4.字体变体font-variant

属性指定是否以small-caps字体（小型大写字母）显示文本。在small-caps字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。示例代码如下：新知学习3：CSS字体样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备CSS尺寸属性允许控制元素的高度和宽度。height属性设置元素的高度，width属性设置元素的宽度，要注意的是

width属性不包括填充，边框和页边距！新知学习4：CSS宽高样式width属性值或height属性值功能auto默认值。浏览器可计算出实际的宽高。length使用

px、cm等单位定义宽高。单位%使用百分比设置百分比宽高。任务2.4为“中国民俗”网站页面设置外观知识储备示例代码如下：新知学习4：CSS宽高样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备在CSS中，对背景的设置比较丰富，背景用background属性来设置，它是一个复合属性，常用于设置背景的属性如下表所示。新知学习5：CSS背景样式属性描述background-color定义背景颜色background-image定义背景图像background-repeat定义背景图像重复background-position定义背景图像的位置任务2.4为“中国民俗”网站页面设置外观知识储备1.背景颜色background-color

属性指定元素的背景颜色，颜色的指定方式同文字颜色，可搭配opacity属性使用，示例代码如下：新知学习5：CSS背景样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备2.背景图像background-image属性指定用作元素背景的图像。默认情况下，图像会重复，以覆盖整个元素。示例代码如下：新知学习5：CSS背景样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备3.背景重复background-repeat属性指定背景图像的平铺方式，默认情况下，background-image属性在水平和垂直方向上都重复图像。某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如果图像仅在水平方向重复

则使用background-repeat:repeat-x，则背景看起来会更好，如需垂直重复图像，则设置

background-repeat:repeat-y，background-repeat

属性还可指定只显示一次背景图像。具体属性值如下表所示。新知学习5：CSS背景样式background-repeat属性值功能repeat-x仅在水平方向平铺repeat-y仅在垂直方向平铺no-repeat只显示一次背景图像任务2.4为“中国民俗”网站页面设置外观知识储备示例代码如下：新知学习5：CSS背景样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备4.背景定位background-position

属性用于指定背景图像的位置。示例代码如下：新知学习5：CSS背景样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备5.背景-简写属性在以上实例中可以看到页面的背景通过了很多的属性来控制。为了简化这些属性的代码，可以将这些属性合并在同一个属性中，背景的简写属性为"background"。示例代码如下：新知学习5：CSS背景样式页面预览效果如下图所示。任务2.4为“中国民俗”网站页面设置外观知识储备当使用简写属性时，属性值的顺序为：

background-color

background-image

background-repeat

background-attachment

background-position以上属性无需全部使用，按照页面的实际需要使用。新知学习5：CSS背景样式任务2.4为“中国民俗”网站页面设置外观操作实践在任务2.3中，小丁已经制作了首页的HT

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论