Web前端开发实例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 课件 第4章 CSS3基础_第1页
Web前端开发实例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 课件 第4章 CSS3基础_第2页
Web前端开发实例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 课件 第4章 CSS3基础_第3页
Web前端开发实例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 课件 第4章 CSS3基础_第4页
Web前端开发实例教程-HTML5+CSS3+JavaScript+jQuery（第2版） 课件 第4章 CSS3基础_第5页
已阅读5页，还剩53页未读， 继续免费阅读

下载本文档

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

文档简介

高等学校规划教材Web前端开发实例教程（第2版）——HTML5+CSS3+JavaScript+jQuery第4章CSS3基础目录4.1CSS3概述4.2在网页中引用CSS的方法4.3CSS的主要特性4.4CSS的基本语法4.5CSS的选择器4.6CSS属性值的写法和单位4.7文件结构与元素类型4.8案例—制作鲜品园行业资讯页面4.1CSS3概述4.1.1CSS3的编写规范4.1.2CSS3的工作环境4.1.1CSS3的编写规范 1．目录结构命名规范 存放CSS样式文件的目录一般命名为style或css。 2．样式文件的命名规范 为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件，这个文件一般命名为style.css或css.css。 3．选择符的命名规范 所有选择符必须由英文字母或“_”（下画线）组成，必须以字母开头，不能为纯数字。4.1.1CSS3的编写规范 4．CSS代码注释 在CSS中添加注释非常简单，它以“/*”开始，以“*/”结尾。注释可以是单行的，也可以是多行的。 （1）结构性注释 结构性注释仅仅是用风格统一的大注释块从视觉上区分被分隔部分。 （2）提示性注释 在编写CSS文件时，可能需要某种技巧解决某个问题。4.1.2CSS3的工作环境 1．CSS3的显示环境 浏览器是CSS3的显示环境。目前，浏览器的种类多种多样，主流浏览器都支持CSS3，但它们之间仍存在符合标准的差异，相同的CSS样式代码在不同的浏览器中可能显示的效果有所不同。 2．CSS3的编辑环境 能够编辑CSS3的软件有很多，如Dreamweaver、HBuilderX、EditPlus和topStyle等。4.2在网页中引用CSS的方法4.2.1行内样式4.2.2内部样式表4.2.3链入外部样式表4.2.4导入外部样式表4.2.5案例—制作鲜品园业务简介页面4.2.1行内样式 行内样式是各种引用CSS中最直接的一种。行内样式就是通过直接设置各个元素的style属性，从而达到设置样式的目的。这样的设置方式，使得各个元素都有自己独立的样式，但是会使整个页面变得臃肿。 这种样式表只对所定义的标签起作用，并不对整个页面起作用。行内样式的格式为：<标签style="属性:属性值;属性:属性值;…">4.2.1行内样式 【例4-1】使用行内样式将样式表的功能加入到网页中。4.2.2内部样式表

内部样式表是指把样式定义<style>…</style>作为网页代码的一部分放到头部定义<head>…</head>中，定义的样式可以在整个HTML文件中调用。

1．内部样式表的格式

<styletype="text/css">选择符1{属性:属性值;属性:属性值;…}/*注释内容*/…选择符n{属性:属性值;属性:属性值;…}/*注释内容*/</style>4.2.2内部样式表

2．组合选择符的格式

除了在<style>…</style>内分别定义各种选择符的样式，如果多个选择符具有相同的样式，那么还可以采用组合选择符，以减少重复定义的麻烦，其格式为：<styletype="text/css">选择符1,选择符2,…,选择符n{属性:属性值;属性:属性值;…}选择符a,选择符b,…,选择符m{属性:属性值;属性:属性值;…}</style>4.2.2内部样式表

【例4-2】使用内部样式表将样式表的功能加入到网页中。4.2.3链入外部样式表 外部样式表通过在某个HTML页面中添加链接的方式生效。 1．使用<link>标签链接样式表文件 <link>标签放到页面的<head>…</head>标签内。其格式为：<head>…<linkrel="stylesheet"href="外部样式表文件名.css"type="text/css">…</head>4.2.3链入外部样式表 2．样式表文件的格式 样式表文件的内容是定义的样式表，不包含HTML标签。样式表文件的格式为：选择符1{属性:属性值;属性:属性值…}/*注释内容*/选择符2{属性:属性值;属性:属性值…}…选择符n{属性:属性值;属性:属性值…}4.2.3链入外部样式表 【例4-3】使用链入外部样式表将样式表的功能加入到网页中，链入外部样式表文件至少需要两个文件：一个是HTML文件；另一个是CSS文件。4.2.4导入外部样式表 导入外部样式表是指在内部样式表的<style>标签里导入一个外部样式表，当浏览器读取HTML文件时，复制一份样式表到这个HTML文件中。其格式为：<styletype="text/css"><!--@importurl("外部样式表的文件名1.css");@importurl("外部样式表的文件名2.css");其他样式表的声明--></style>4.2.4导入外部样式表 【例4-4】使用导入外部样式表将样式表的功能加入到网页中，导入外部样式表文件至少需要两个文件：一个是HTML文件；另一个是CSS文件。4.2.5案例—制作鲜品园业务简介页面 【例4-5】使用链入外部样式表的方法制作鲜品园业务简介页面。4.3CSS的主要特性4.3.1继承4.3.2层叠4.3.3优先级4.3.1继承 继承指的是特定的CSS属性可以从父元素向下传递给子元素。这种特性允许样式不仅应用于某个特定的元素，同时也应用于其后代，而后代所定义的新样式，不会影响父代样式。【例4-6】CSS继承示例。4.3.2层叠 层叠是指CSS能够对同一个元素应用多个样式表的能力。样式生效的优先级从高到低的顺序为：内联样式→内部样式→外部样式→浏览器默认设置。【例4-7】样式表层叠示例。4.3.3优先级 定义CSS样式时，经常出现两个或更多规则应用在同一个元素上，这时就会出现优先级的问题。 1．特殊性 在编写CSS代码时，会出现多个样式规则作用于同一个元素的情况，特殊性描述了不同规则的相对权重，当多个规则应用到同一个元素时权重越大的样式会被优先采用。4.3.3优先级 2．重要性 不同的选择符定义相同的元素时，要考虑不同选择符之间的优先级（id选择符、类选择符和HTML标签选择符），id选择符的优先级最高，其次是类选择符，HTML标签选择符最低。如果想超越这三者之间的关系，可以用!important来提升样式表的优先级：p{color:#f00!important}.blue{color:#00f}#id1{color:#ff0}4.4CSS的基本语法4.4.1基本语法4.4.2注意事项4.4.1基本语法 CSS的基本语法由两部分组成，其格式为：selector{property1:value1;property2:value2;…} selector称为选择器，选择器决定了样式定义需要改变的HTML元素。 property:value称为样式声明，每一条样式声明由property（属性）和value（属性的值）组成，并用冒号隔开，以分号结束，由一条或多条样式组成，包含在一对花括号“{}”内。用于告诉浏览器如何渲染页面中与选择符相匹配的对象4.4.2注意事项 1．属性名和属性值要正确 property（属性）是由官方CSS规范约定的，而不是自定义的。属性是希望设置的样式属性。每个属性有一个值value（属性值），属性和值用冒号分开，属性值跟随属性的类别而呈现不同的形式，一般包括数值、单位及关键字。 2．需要加引号 如果值为若干单词，单词之间有空格，则要给值加引号。4.4.2注意事项 3．多重声明 如果要定义不止一个声明，则需要用分号将每个声明分开。 4．代码的可读性 一般来说，为了方便阅读，应该在每行只描述一个属性，并且在属性末尾都加上分号。 5．空格 大多数样式表包含多条规则，而大多数规则包含多个声明。4.4.2注意事项 6．大小写 CSS对大小写不敏感，但在编写样式时，推荐属性名和属性值都用小写。但是，也有例外，如果涉及与HTML文件一起工作，那么class和id名称对大小写是敏感的。因此，W3C推荐HTML文件中的代码用小写字母来命名。 7．选择器的分组 对于具有相同样式的选择器，可以将这些选择器分成一组，用逗号将每个选择器隔开。4.5CSS的选择器4.5.1元素选择器4.5.2通配符选择器4.5.3派生选择器4.5.4兄弟选择器4.5.5id选择器4.5.6类选择器4.5.7伪类选择器4.5.8伪元素选择器4.5.1元素选择器 元素选择器也称标签选择器。HTML页面是由多个不同的标签元素组成的，如h1、p、img等。CSS的元素选择器用于声明这些元素的样式。元素选择器是最简单的，选择器是某个HTML元素。元素选择器的格式为：E{property1:value1;property2:value2;…}4.5.2通配符选择器 通配符选择器也称全局选择器，其作用是定义网页中所有标记元素都使用同一种样式。格式为：*{property1:value1;property2:value2;…}【例4-8】通配符选择器示例。4.5.3派生选择器 派生选择器是指依据元素在其位置的上下文关系定义样式。派生选择器可以分成3种：后代选择器、子元素选择器、相邻兄弟选择器。 1．后代选择器 后代选择器（DescendantSelector）又称包含选择器，后代选择器可以选择某元素后代的元素，两个元素之间的层次间隔可以是无限的。其格式为：父元素子元素{property1:value1;property2:value2;…}4.5.3派生选择器 【例4-9】后代选择器示例。4.5.3派生选择器 2．子元素选择器 子元素选择器（ChildSelectors）只能选择作为某元素子元素的元素。它与后代选择器最大的不同就是元素间隔不同，后代选择器将该元素作为父元素，它所有的后代元素都是符合条件的，而子元素选择器只有相对于父元素来说的第一级子元素符合条件。其格式为：父元素>子元素{property1:value1;property2:value2;…}4.5.3派生选择器 3．相邻兄弟选择器 相邻兄弟选择器（AdjacentSiblingSelector）可选择紧接在另一个元素后的元素，并且二者有相同的父元素。与后代选择器和子元素选择器不同的是，相邻兄弟选择器针对的元素是同级元素，且两个元素是相邻的，拥有相同的父元素。其格式为：兄弟1+兄弟2{property1:value1;property2:value2;…}4.5.3派生选择器 【例4-10】相邻兄弟选择器示例。4.5.4兄弟选择器 兄弟选择器使用了波浪号（~），即兄弟结合符（SiblingCombinator）。兄弟元素选择器用来指定位于同一个父元素中的某个元素之后的其他所有某个种类的兄弟元素所使用的样式。当两个标签不相邻时，要想修改后一个标签的样式，需要使用兄弟选择器。其格式为：元素1~元素2{property1:value1;property2:value2;…}4.5.4兄弟选择器 【例4-11】兄弟选择器示例。4.5.5id选择器 id选择器可以为标有特定id的单一HTML元素指定单独的样式。定义id选择器时要在id名称前加上一个“#”号。其格式为：E#idValue{property1:value1;property2:value2;…}【例4-12】id选择器示例。4.5.6类选择器 类选择器可以为指定类的HTML元素指定样式。其格式为：E.classValue{property1:value1;property2:value2;…}【例4-13】class选择器示例。4.5.7伪类选择器 伪类是指同一个标签，根据其不同状态，有不同的样式。伪类选择器和类选择器不同，不能像类选择器一样随意用别的名字。伪类是指那些处在特殊状态的元素。伪类名可以单独使用，泛指所有元素，也可以和元素名称连起来使用，特指某类元素。伪类以冒号（:）开头，元素选择符和冒号之间不能有空格，伪类名中间也不能有空格。伪类选择器的语法格式为：selector:pseudo-class{property1:value1;property2:value2;…}4.5.7伪类选择器 【例4-14】伪类应用示例。当鼠标指针悬停在超链接时背景色变为其他颜色，并且添加了边框线，待鼠标指针离开超链接时又恢复到默认状态，这种效果就可以通过伪类实现。4.5.7伪类选择器 【例4-15】:first-child伪类示例。使用:first-child伪类选择元素的第一个子元素。4.5.8伪元素选择器 伪元素不是真正的页面元素，在HTML中没有对应的元素。伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么一个称为伪类，另一个称为伪元素的原因。 CSS3为了区分伪类和伪元素，规定伪类用一个冒号（:）来表示，伪元素用两个冒号（::）来表示。伪元素由双冒号和伪元素名称组成。伪元素的语法格式为：selector::pseudo-element{property1:value1;property2:value2;…}4.5.8伪元素选择器 【例4-16】伪元素选择器示例。本例文件4-16.html在浏览器中的显示效果如图4-18（a）所示；当用鼠标选中内容时，被选中内容的背景改变颜色，如图4-18（b）所示。4.6CSS属性值的写法和单位4.6.1长度、百分比单位4.6.2色彩单位4.6.1长度、百分比单位 使用CSS进行排版时，常常会在属性值后面加上长度单位或百分比单位。 1．长度单位 长度单位有相对长度单位和绝对长度单位两种类型。 相对长度单位是指，以该属性前一个属性的单位值为基础来完成目前的设置。 绝对长度单位将不会随着显示设备的不同而改变。4.6.1长度、百分比单位 2．百分比单位 百分比单位也是一种常用的相对类型。百分比值总是相对于另一个值来说的，该值可以是长度单位或其他单位。每一个可以使用百分比值单位指定的属性，也自定义了这个百分比值的参照值。 一个百分比值由可选的正号“+”或负号“-”，接着一个数字，后跟百分号“%”组成。如果百分比值是正的，则正号可以不写。正负号、数字与百分号之间不能有空格。4.6.2色彩单位

CSS则提供了四种定义色彩的方式：颜色英文名称、十六进制数、rgb函数和rgba函数。

1．用颜色英文名称方式表示色彩值

CSS中提供了与HTML一样的用颜色英文名称表示色彩的方式。

2．用十六进制数方式表示色彩值

在计算机中，定义每种色彩的强度范围为0～255。当所有色彩的强度都为0时，将产生黑色；当所有色彩的强度都为255时，将产生白色。4.6.2色彩单位

3．用rgb函数方式表示色彩值

在CSS中，可以用rgb函数设置所要的色彩。语法格式为：rgb(R,G,B)。

4．用rgba函数方式表示色彩值

rgba函数在rgb函数的基础上增加了控制alpha透明度的参数。语法格式为：rgba(R,G,B,A)。4.7文件结构与元素类型4.7.1文件结构的基本概念4.7.2元素类型4.7.1文件结构的基本概念 为了更好地理解“CSS采用HTML文件结构来决定其样式的应用”这句话，首先需要理解文件是怎样

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

温馨提示

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

最新文档

评论

0/150

提交评论