《网页设计与制作教程》课件-第4章 CSS基础_第1页
《网页设计与制作教程》课件-第4章 CSS基础_第2页
《网页设计与制作教程》课件-第4章 CSS基础_第3页
《网页设计与制作教程》课件-第4章 CSS基础_第4页
《网页设计与制作教程》课件-第4章 CSS基础_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

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

文档简介

网页设计与制作教程（HTML+CSS+JavaScript）机械工业出版社同名教材配套电子教案4.1CSS概述4.2CSS与HTML文档的结合方法4.3样式表语法4.4多重样式表的层叠4.5CSS的属性单位第4章CSS基础4.1.1CSS的基本概念

CSS（CascadingStyleSheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，像文字的大小、颜色以及图片位置等，都是设置显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。建立一个定义样式的CSS文件，并让所有HTML都调用这个CSS文件所定义的样式即可，如图4-1所示。

4.1CSS概述4.1.2CSS的发展历史1996年12月W3C推出了CSS规范的第一个版本CSS1.0。这一规范立即引起了各方的积极响应，随即MicroSoft公司和Netscape公司纷纷表示自己的浏览器能够支持CSS1.0，从此CSS技术的发展几乎一马平川。1998年W3C发布了CSS2.0/2.1版本。早在2001年5月，W3C就着手开发CSS第三版规范，CSS3规范被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布，及时调整模块的内容；另外一方面，由于受支持设备和浏览器厂商的限制，设备或者厂商可以有选择的支持一部分模块，支持CSS3的一个子集，这样将有利于CSS3的推广。4.1CSS概述4.1.3CSS3的特点

Web开发者可以借助CSS3设计圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等来提高Web设计的质量，开发者将不必再依赖图片或者Javascript去完成这些任务，极大地提高了网页开发效率。1．CSS3在选择器上面的支持2．CSS3在样式上的支持3．CSS3对于动画的支持4．浏览器对CSS3的兼容性类似于HTML5，没有一种浏览器是完全兼容CSS3的。因此，本章中的实例可能采用不同的浏览器进行验证，如无特别声明，仍采用Opera浏览器浏览CSS3网页。4.1CSS概述4.1.4CSS的代码规范1．目录结构命名规范存放CSS样式文件的目录一般命名为style或css。2．CSS样式文件的命名规范在项目初期，会把不同的类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便；在项目后期，为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件，这个文件一般命名为style.css或css.css。3．CSS选择符的命名规范所有CSS选择符必须由小写英文字母或“_”下划线组成，必须以字母开头，不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择符，做到“见其名知其意”。4.1CSS概述4.2.1定义内部样式表可以在HTML文档的<html>和<body>标签之间插入一个<style>…</style>标签对，在其中定义样式。内部样式表的格式为：<styletype="text/css"><!--

选择符1{属性:属性值;属性:属性值…}/*注释内容*/

选择符2{属性:属性值;属性:属性值…}…

选择符n{属性:属性值;属性:属性值…}--></style>4.2CSS与HTML文档的结合方法4.2.2定义行内样式表

行内样式表也称内嵌样式表，是指在HTML标签中插入style属性，再定义要显示的样式表，而style属性的内容就是CSS的属性和值。用这种方法，可以很简单地对某个标签单独定义样式表。这种样式表只对所定义的标签起作用，并不对整个页面起作用。有时候这种方式却非常有效。其格式为：<标签

style="属性:属性值;属性:属性值

…">4.2CSS与HTML文档的结合方法4.2.3链入外部样式表链入外部样式表就是当浏览器读取到HTML文档的样式表链接标签时，将向所链接的外部样式表文件索取样式。先将样式表保存为一个样式表文件（.css），然后在网页中用<link>标签链接这个样式表文件。<link>标签必须放到页面的<head>…</head>标签对内。其格式为：<head>…<linkrel="stylesheet"href="外部样式表文件名.css"type="text/css">…</head>4.2CSS与HTML文档的结合方法4.2.4导入外部样式表导入外部样式表就是当浏览器读取HTML文件时，复制一份样式表到这个HTML文件中，即在内部样式表的<style>标签对中导入一个外部样式表文件。其格式为：<styletype="text/css"><!--@importurl("外部样式表的文件名1.css");@importurl("外部样式表的文件名2.css");

其他样式表的声明--></style>4.2CSS与HTML文档的结合方法4.3.1CSS的定义组成

CSS的定义是由3个部分构成：选择符（selector）、属性（attribute）和属性的取值（value）。其语法为：selector{attribute:value} /*（选择符{属性：属性值}）*/CSS选择符可以分为很多类，包括：类型选择符，class类选择符，id选择符，通用选择符，分组选择符，包含选择符，元素指定选择符，子对象选择符，属性选择符。下面讲解几种常用的选择符。4.3样式表语法4.3.2常用的选择符1．类型选择符类型选择符是指以文档对象模型（DOM）作为选择符，即选择某个HTML标签为对象，设置其样式规则。类型选择符就是网页元素本身，定义时直接使用元素名称。其格式为：E{/*CSS代码*/}4.3样式表语法4.3.2常用的选择符2．class类选择符在应用时只要在标签中指定它属于哪一个类，就可以使用该类的样式了。其格式为：<styletype="text/css"><!--

标签1.类名称1{属性:属性值;属性:属性值…}

标签2.类名称2{属性:属性值;属性:属性值…}…

标签3.类名称n{属性:属性值;属性:属性值…}--></style>4.3样式表语法4.3.2常用的选择符3．id选择符id选择符用来对某个单一元素定义单独的样式。定义id选择符时要在id名称前加上一个“#”号。格式为：<styletype="text/css"><!--#id名1{属性:属性值;属性:属性值

…}#id名2{属性:属性值;属性:属性值

…}…#id名n{属性:属性值;属性:属性值

…}--></style>4.3样式表语法4.3.2常用的选择符4．span选择符<span>标签也可以用来定义区域，但一般用于网页中某一个小问题段落。其格式为：<spanid="样式名">…</span>或<spanclass="样式名">…</span>5．div选择符div（division，部分的简写）在功能上与span相似，最主要的差别在于，div是一个块级标签。其格式为：<divid="样式名">…</div>或<divclass="样式名">…</div>4.3样式表语法4.3.2常用的选择符6．通用选择符通用选择符指选定文档对象模型（DOM）中的所有类型的单个对象，是一种特殊的选择符，它用*表示。其格式为：*｛CSS代码｝7．通用兄弟元素选择符E~F通用兄弟元素选择符E~F用来指定位于同一个父元素之中的某个元素的之后的所有其他某个种类的兄弟元素所使用的样式。其格式为：E~F：{att}4.3样式表语法4.3.2常用的选择符8．包含选择符包含选择符能够简化代码，大范围的样式控制。其格式为：E1E2｛/*对子层控制规则*/｝9．分组选择符分组选择符指的是对多个标签设置同一样的样式。格式为：E1,E2,E3{/*CSS代码*/}4.3样式表语法4.3.2常用的选择符10．属性选择符属性选择符存在7种具体形式：（1）E[att]属性名选择符（2）E[att=val]属性值选择符（3）E[att~=val]属性值选择符（4）E[att|=val]属性值选择符（5）E[att^=val]属性值子串选择符（6）E[att$=val]属性值子串选择符（7）E[att*=val]属性值子串选择符4.3样式表语法4.3.2常用的选择符11．伪类选择符（1）E:root结构性伪类选择符（2）E:nth-child(n)结构性伪类选择符（3）E:nth-last-child(n)结构性伪类选择符（4）E:first-child与E:last-child结构性伪类选择符（5）E:only-child结构性伪类选择符（6）E:empty结构性伪类选择符（7）E:not(s)否定伪类选择符（8）E:target目标伪类选择符（9）UI元素状态伪类选择符4.3样式表语法样式表的优先级别从高到低为：行内样式表、内部样式表、链接样式表、导入样式表和默认浏览器样式表。浏览器将按照上述顺序执行样式表的规则。样式表的层叠性就是继承性，样式表的继承规则是：外部的元素样式会保留下来，由这个元素所包含的其他元素继承；所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把多层嵌套的样式叠加在一起，除非进行更改；遇到冲突的地方，以最后定义的为准。【演练4-5】首先链入一个外部样式表，其中定义了h3选择符的color、text-align和font-size属性（标题3的文字色彩为红色，向左对齐，尺寸为8号字）【演练4-6】在div标签中嵌套p标签4.4多重样式表的层叠4.5.1长度、百分比单位1．长度单位长度单位有相对长度单位和绝对长度单位两种类型。相对长度单位是指，以该属性前一个属性的单位值为基础来完成目前的设置。绝对长度单位将不会随着显示设备的不同而改变。换句话说，属性值使用绝对长度单位时，不论在哪种设备上，显示效果都是一样的，如屏幕上的1cm与打印机上的1cm是一样长的。由于相对长度单位确定的是一个相对于另一个长度属性的长度，因而它能更好地适应不同的媒体，所以它是首选的。4.5CSS的属性单位4.5.1长度、百分比单位2．百分比单位

百分比单位也是一种常用的相对类型。百分比值总是相对于另一个值来说的，该值可以是长度单位或其他单位。每一个可以使用百分比值单位指定的属性，同时也自定义了这个百分比值的参照值。在大多数情况下，这个参照值是该元素本身的字体尺寸。并非所有属性都支持百分比单位。

一个百分比值由可选的正号“+”或负号“-”，接着一个数字，后跟百分号“%”组成。如果百分比值是正的，正号可以不写。正负号、数字与百分号之间不能有空格。4.5CSS的属性单位4.5.2色彩单位在HTML网页或者CSS样式的色彩定义里，设置色彩的方式是RGB方式。在RGB方式中，所有色彩均由红色（Red）、绿色（Green）、蓝色（B1ue）三种色彩混合而成。在HTML标记中只提供了两种设置色彩的方法：十六进制数和色彩英文名称。CSS则提供了3种定义色彩的方法：十六进制数、色彩英文名称、rgb函数和rgba函数。4.5CSS的属性单位使用UI元素状态伪

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

温馨提示

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

最新文档

评论

0/150

提交评论