商务网页设计与制作（第2版）课件 第13课 CSS网页式样制作技术_第1页
商务网页设计与制作（第2版）课件 第13课 CSS网页式样制作技术_第2页
商务网页设计与制作（第2版）课件 第13课 CSS网页式样制作技术_第3页
商务网页设计与制作（第2版）课件 第13课 CSS网页式样制作技术_第4页
商务网页设计与制作（第2版）课件 第13课 CSS网页式样制作技术_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

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

文档简介

第4章 CSS网页式样制作技术4.1.4CSS样式类别4.1.5CSS中的度量单位4.1.6CSS注释4.1.7CSS常用属性4.1.4CSS样式类别CSS是配合HTML网页文件使用的，如果没有HTML，则CSS没有任何作用。HTML使用CSS样式时主要分以下几种情况：内联样式、内部样式、外部样式（链接样式、导入样式）。1．内联样式内联样式，也称为“行内样式”，就是在HTML的标签中，直接定义并立即使用CSS样式的应用方式。内联样式对改进网页制作效率方面几乎没有什么作用，所以很少使用。定义及引用内联样式的方法是非常特殊的，需要通过“style”来定义，设置方法为<标签名style="属性1:属性1的值;属性2:属性2的值;……">这种应用模式几乎没有对HTML文档有任何改进，文档依旧庞大、烦琐，易读性差。只是使用了CSS规则让功能增强一些，不建议使用。<html><head><title>CSS行内样式示例</title></head><body><h4style="font-family:楷体;color:#0000CC;font-size:24px">CSS标题h4实例</h4><!--通过style定义了一个内联样式应用示例--></body></html>2．内部样式内部样式，也称为“内嵌样式”，是指将CSS代码内嵌在HTML文档头中的应用方式。该方式能够简化HTML的文档代码，提高HTML的制作效率。实现方法是将CSS代码封装在<style>和</style>之间，形成一个CSS代码模块，整体嵌入在HTML文档的文档头中，也就是嵌入在标签<head>与</head>之间。定义内部样式，需要使用<style>标签及相关属性，设置方法为：<style>

选择符名{属性1:属性1的值;属性2:属性2的值;……}</style>内部样式主要用于CSS样式内容比较简单、内容较少的情况。实际的应用场景较少，多用于教学、演示等。引用内部样式（包括外部样式），就是指定HTML中的元素套用哪一个CSS样式，并通过选定样式选择符（在下小节中讲解）来指定。引用内部样式选择符的方法为对于标签选择符，HTML中会根据标签自动套用CSS中定义的该标签选择符，无须额外编写任何引用标签选择符的代码，最简单；对于类选择符，需要使用class="类选择符名"来指定，设置方法为<标签class="类选择符名">对于ID选择符，需要使用id="ID选择符名"来指定，设置方法为<标签id="ID选择符名"><html><head><title>CSS内嵌式样示例</title><style>/*定义CSS开始*/h4/*定义h4选择符*/{font-family:宋体;/*声明*/color:#000099;/*声明*/font-size:25px/*声明*/}</style><!--结束CSS定义--></head><body><h4>有CSS选择符的标题h4实例</h4><h3>没有CSS选择符的标题h3实例</h3></body></html>3．外部样式外部样式是指把CSS代码存储在HTML的文件外部，以“.css”文件格式独立存储的应用方式。当HTML需要引用CSS样式时，需要以链接或者导入的方式将CSS文件中定义的样式全部集成到HTML的文档头中，就像在一个HTML文件中一样。后续的引用方法与内部样式的引用方法相同。外部样式又分为外部链接样式和外部导入样式两种类型。（1）外部链接样式外部链接样式是最常用、最实用的一种CSS使用方法，将HTML网页内容和CSS显示规则分离，形成“一个网页文件+一个CSS文件（如果必要，可以形成多个CSS文件）”的形式。这种分离非常有利于项目人员之间的分工协作，代码编写人员侧重于网页功能的实现，美工人员侧重于页面的美化设计，工作效率大大提高。而且，这种分离使得HTML代码极其精炼，易于项目后期的升级与维护。定义外部链接样式分两部分：一部分是在HTML文档头中做外部CSS样式的链接声明，明确需要连接的外部样式文件（.css源文件）的名称及其存放路径；另一部分是在CSS源文件中定义显示样式（定义选择符及其声明）。CSS源文件通常是由多个选择符及其声明组成的，数量没有限制，需要多少就定义多少。在CSS源文件中编写CSS样式的语法规则与内部样式的编写规则是一样的，等同于把内部样式中选择符及声明的内容统一打包在CSS源文件中。定义与引用外部式样，分以下3个步骤：在HTML的头文档中做外部链接样式的声明，需要使用<link>标签及其相关属性。设置方法为<linkhref="外部链接CSS文件名称"type="属性值"rel="属性值"/>其中，<link>标签的主要属性如下表：属性值描述hrefURL规定被链接文档的位置relAlternateAuthorHelpIconLicenceNextPingbackPrefetchPrevSearchSidebarStylesheettag规定当前文档与被链接文档之间的关系。通常需要设置为“Stylesheet”typeMIME_type规定被链接文档的MIME类型。最常用的值是“text/css”在CSS源文件中定义选择符及其声明，完成外部样式的定义工作。在CSS源文件中定义选择符及其声明，设置方法为：选择符名｛属性1:属性1的值;属性2:属性2的值;……｝在HTMl中引用选择符在HTML文档体中引用外部样式中的选择符与引用内部样式中的方法是一样的。h4/*定义h4选择符*/{font-family:宋体;/*声明*/color:#000099;/*声明*/font-size:25px/*声明*/}<html><head><title>CSS外部链接应用示例</title><linkhref="CSS_example.css"type="text/css"rel="stylesheet"/></head><body><h4>有CSS选择符的标题h4实例</h4><h3>没有CSS选择符的标题h3实例</h3></body></html>上述示例代码中，文档头中声明了“CSS_example.css”文件，然后在HTML代码就能引用“CSS_example.css”中定义的CSS样式了。应用外部链接样式HTML代码示例如下：应用外部样式CSS代码示例如下（存储在CSS_example.css文件中）：（2）外部导入样式外部导入样式与外部链接样式的基本作用是相同的，CSS源文件的代码规则也完全相同，只是引用CSS代码文件的技术实现方式不同：一种是外部链接方式，一种是外部导入方式。但外部导入样式也有其优点，不仅可以导入到HTML中，也可以导入到CSS样式中。外部导入样式特别适用于对IO访问要求高、网页响应速度快的场景。定义并引用外部导入样式，需要使用“@import”来实现，导入到文件头中的<style>与</style>之间。也可以理解为，把内部样式中的定义中的“选择符”和“声明”部分打包成CSS源文件，用导入的方法将其导回来。定义和引用外部导入样式与定义和引用外部链接样式类似，同样分两部分：一部分是在HTML文档头中做外部导入样式的声明，另一部分是在CSS源文件中定义选择符及其声明。在HTML文档头中做外部导入样式的声明，需要使用“@import”及其相关属性。设置方法为：<style>@importurl(CSS文件名);</style>需要注意的是，结尾必须以分号“;”结尾，与声明外部链接样式不同，这是为什么呢？因为外部链接样式使用的是标签<link>,而外部导入样式使用的是一个特殊的功能语句。在CSS文件中定义选择符及其声明内容。在CSS文件中定义外部导入样式中选择符及其声明的方法与外部链接样式的方法完全一样。设置方法为：选择符名｛属性1:属性1的值;属性2:属性2的值;……｝在HTML中引用选择符。<html><head><title>CSS外部导入应用示例</title><style>@importurl(css_example.css);</style></head><body><h4>有CSS选择符的标题h4实例</h4><h3>没有CSS选择符的标题h3实例</h3></body></html>应用外部导入样式的HTML代码示例如下：本例中，应用外部导入样式的CSS代码文件也是css_example.css文件，不再重复介绍。4.1.5CSS中的度量单位在CSS中，度量单位主要有颜色单位、长度单位、时间单位、角度单位和频率单位5种。其中，颜色单位、长度单位比较常用，下面予以介绍。1．颜色单位CSS中的颜色单位与HTML中的颜色单位是一致的，不仅具有英文表达、十六进制值表达、RGB代码表达方式，还增加了“inherit（继承）”属性，可以直接继承父元素的颜色属性值。在CSS中，各个属性基本都具有“inherit”属性，不仅增强了CSS样式的使用效率，还能保证风格一致，简化代码，提高效率。2．长度单位在CSS中，长度单位比较丰富，主要长度单位表达形式如表4.1.6CSS注释编写CSS代码同样需要养成良好的书写习惯。对文档进行注释是一个好习惯。CSS中的注释方法与HTML不同，在CSS代码体内，用“/*注释说明*/”对文档进行注释说明。4.1.7CSS常用属性1.CSS背景属性background：在一个声明中设置所有的背景插件1background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动1background-color：设置元素的背景颜色1background-image：设置元素的背景图像1background-position：设置背景图像的开始位置1background-repeat：设置是否及如何重复背景图像

2.CSS文本属性color：设置文本的颜色1direction：规定文本的方向/书写方向2letter-spacing：设置字符间距1line-height：设置行高1text-align：规定文本的水平对齐方式1text-decoration：规定添加到文本的装饰效果1text-indent：规定文本块首行的缩进1text-shadow：规定添加到文本的阴影效果2text-transform：控制文本的大小写1unicode-bidi：设置文本方向2white-space：规定如何处理元素中的空白1word-spacing：设置单词间距13.CSS字体属性font：在一个声明中设置所有字体属性1font-family：规定文本的字体系列1font-size：规定文本的字体尺寸1font-size-adjust：为元素规定aspect值2font-stretch：收缩或拉伸当前的字体系列2font-style：规定文本的字体压实1font-variant：规定文本的字体样式1font-weight：规定字体的粗细

4.CSS边框属性border：在一个声明中设置所有的边框属性1border-bottom：在一个声明中设置所有的下边框属性1border-bottom-color：设置下边框的颜色2border-bottom-style：设置下边框的样式2border-bottom-width：设置下边框的宽度1border-color：设置四条边框的颜色1border-left：在一个声明中设置所有的左边框属性1border-left-color：设置左边框的颜色2border-left-style：设置左边框的样式2border-left-width：设置左边框的宽度1border-right：在一个声明中设置所有右边框的属性1border-right-color：设置右边框的颜色2border-right-style：设置右边框的样式2border-right-width：设置右边框的宽度1border-style：设置四条边框的样式1border-top：在一个声明中设置所有上边框的属性1border-top-color：设置上边框的颜色2border-top-style：设置上边框的样式2border-top-width：设置上边框的宽度1border-width：设置四条边框的宽度1outline：在一个声明中设置所有的轮廓属性2outline-color：设置轮廓的颜色2outline-style：设置轮廓的样式2outline-width：设置轮廓的宽度5.CSS外边距属性margin：在一个声明中设置所有的外边距属性1margin-bottom:设置元素的下外边距1margin-left:设置元素的左外边距1margin-right:设置元素的右外边距1margin-top:设置元素的上外边距

6.CSS内边距属性padding:在一个声明中设置所有的内边距属性1padding-bottom:设置元素的下内边距1padding-left:设置元素的左内边距1padding-right:设置元素的右内边距1padding-top:设置元素的上内边距

7.CSS列表属性list-style:在一个声明中设置所有的列表属性1list-style-image:将图像设置为列表项标记1list-position:设置列表项标记的放置位置1list-style-type:设置列表项标记的类型

8.CSS尺寸属性height:设置元素高度1max-height:设置元素的最大高度2max-width:设置元素的最大宽度2min-height:设置元素的最小高度2min-width:设置元素的最小宽度2width:设置元素的宽度1

9.CSS定位属性bottom:设置定位元素下外边距边界与其包含块下边界之间的偏移2clear:规定元素的

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

温馨提示

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

最新文档

评论

0/150

提交评论