Web学习笔记（4）

目录

音频和视频

播放音频

播放视频

CSS3语法

CSS3样式规则

1.CSS基础知识

2.初识CSS

3.用内嵌式引入CSS样式

4.用外链式引入CSS样式

CSS3基础选择器

CSS3属性选择器

CSS3组合选择器

CSS3文本字体样式

CSS3文本外观样式

CSS3背景样式

---

音频和视频

• 播放音频

1)支持audio元素的音频格式

HTML5使用<audio>元素用来播放音频，目前<audio>元素支持三种音频编码。

• WAV：为微软公司(Microsoft)开发的一种声音文件格式，采用44.1K的取样频率，16位量化数字，声音文件质量和CD相差无几。
• MP3：是一种音频压缩技术，用来大幅度地降低音频数据量。将音乐以1:10甚至1:12的压缩率压缩。
• Ogg：全称应该是OGGVobis(oggVorbis)是一种新的音频压缩格式，Ogg是完全免费、开放和没有专利限制的，文件扩展名是.OGG。

HTML5音频在浏览器中的支持情况如下图所示：

一般提供ogg和mp3格式，就可以支持所有主流浏览器了。

2)audio元素及其属性

使用audio元素播放音频，不需要使用任何插件，只需支持 HTML5 的浏览器即可。基本格式如下： <audio src="…" controls="controls"></audio> 在 <audio> 和 </audio>之间可以放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。 audio元素常用的属性如下：

• src：规定要播放的音频文件的地址
• controls：添加该属性，则向用户显示带有播放、暂停和音量调节的控件，不同的浏览器会展示不同样式的控制面板
• autoplay：添加该属性，可在音频加载完成后自动播放
• loop：添加该属性，可使音频连续播放
• preload：用于控制音频的加载方式，该属性有三种取值，当取值为none时,表示不加载；当取值为auto时,表示自动加载，网页加载完就加载整个音频；当取值为metadata时，只载入音频的元数据。

3)source元素及其属性

<source> 标签称为媒体元素，可为浏览器提供多种媒体格式的资源，以兼容用户的浏览器。 source元素的常用属性如下：

• src：规定要播放的音频文件的地址
• type:规定媒体资源的MIME类型

用法示例：

1. <audio controls="controls">
2.  <source type="audio/mpeg" src="Try Everything.mp3">
3.  <source type="audio/ogg" src="Try Everything.ogg">
4.   您的浏览器不支持 audio 标签。
5. </audio>

4)运用audio元素播放音频示例

在HTML5中，使用<audio></audio>标签来播放音频，在该标签中可通过src属性设置音频文件的url，通过controls属性添加播放控件，添加autoplay属性可在音频加载后自动播放。例如：

1. <audio src="http://music.163.com/song/media/outer/url?id=562598065.mp3" controls="controls" >
2. </audio>

• 播放视频

1)支持video元素的视频格式

HTML5使用<video>元素用来播放视频，目前<video>元素支持三种视频编码。

• MP4：这是一种具有H.264视频编码和AAC音频编码的格式
• WebM：这是一种具有VP8视频编码和Vorbis音频编码的格式
• Ogg：是一种具有Theora视频编码和Vorbis音频编码的格式。

HTML5视频在浏览器中的支持情况如下图所示：

 

一般提供ogg和mp4格式，就可以支持所有主流浏览器了。

2)video元素及其属性

使用video元素播放视频，也不需要使用任何插件，只需支持 HTML5 的浏览器即可。基本格式如下： <video src="…" controls="controls"></video> 在 <video> 和 </video>之间可以放置文本内容，这些文本信息将会被显示在那些不支持 <video> 标签的浏览器中。 video元素常用的属性如下：

• src：规定要播放的视频文件的地址
• controls：添加该属性，则向用户显示带有播放、暂停和音量调节、全屏的视频控件，不同的浏览器会展示不同样式的控制面板
• autoplay：添加该属性，可在视频加载完成后自动播放
• loop：添加该属性，可使视频连续播放
• preload：用于控制视频的加载方式，该属性有三种取值，当取值为none时,表示不加载；当取值为auto时,表示自动加载，网页加载完就加载整个视频；当取值为metadata时，只载入视频的元数据。
• width：设置视频播放器的宽度
• height：设置视频播放器的高度

3)source元素及其属性

<source> 标签称为媒体元素，可为浏览器提供多种媒体格式的资源，以兼容用户的浏览器。 source元素的常用属性如下：

• src：规定要播放的视频文件的地址
• type:规定媒体资源的MIME类型

用法示例：

1. <video controls="controls" autoplay="autoplay">
2.     <source src="other/Wildlife.ogv" type="video/ogg">
3.     <source src="other/Wildlife.webm" type="video/webm">
4.     <source src="other/Wildlife.mp4" type="video/mp4">
5.     您的浏览器不支持video元素。
6. </video>

4)运用video元素播放视频示例

在HTML5中，使用<video></video>标签来播放视频，在该标签中可通过src属性设置视频文件的url，通过controls属性添加播放控件，添加autoplay属性可在视频加载后自动播放。例如：

1. <video src="http://vjs.zencdn.net/v/oceans.mp4" controls="controls" autoplay="autoplay" width="400" height="240">
2. </video>

CSS3语法

• CSS3样式规则

1.CSS基础知识

1）什么是CSS

CSS是Cascading Style Sheets（层叠样式表）的缩写，它是一种对Web文档添加样式的简单机制，是一种表现HTML或XML等文件外观样式的计算机语言，是一种网页排版和布局设计的技术。

2）CSS的特点

纯CSS布局与结构式HTML相结合能帮助设计师分离外观与结构，和传统的表格布局相比，具有以下特点：

网页载入更快

降低流量费用

修改设计时效率高

更容易被搜索引擎收录

3）浏览器对CSS3的支持及浏览器前缀

CSS3是2010年推出的新标准，在选择器方面，除了IE9以下的浏览器版本，其他浏览器已全部支持CSS3选择器；在属性方面除了CSS的Transforms 3D还没有浏览器支持以外，Chrome和Safari对CSS3的其他属性全部支持，其次支持较好的是Opera和Firefox。 但是，一些CSS3的样式，各家浏览器的语法规则还有差异。为了让设计人员设计的一个效果被各个浏览器识别，通常可在样式代码前添加浏览器前缀。 常用的浏览器前缀如下：

-ms-：IE浏览器前缀

-moz-： 火狐 浏览器前缀

-webkit-:苹果、微软和谷歌浏览器前缀

-o-：欧朋浏览器前缀

4）CSS的样式规则

CSS 样式设置由选择器和声明两部分组成：

选择器：用于指明样式作用的对象

声明：用于定义样式的格式，由属性和值组成，两者以“:”分隔

例如： body{color:blue } 该样式的作用的对象是标签选择器body,定义的样式属性为color，取值为blue

5）引入CSS样式的方法

在网页中应用CSS样式有内联式、内嵌式、外链式和外导式4种方法。

内联式：通过标记的style属性直接把CSS样式添加到HTML的标签中。 例如：<span style="color:red; font-weight:bold;">内联样式</span>

内嵌式：将CSS代码集中写在HTML文档的头部标签中。并用<style>标记定义。例如：

1. 1. <style type="text/css">
   2.   span{color:red;
   3.        font-weight:bold;}
   4. </style>

外链式：将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。例如： <link type="text/css" rel="stylesheet" href="style.css" />

外导式：将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过@import url(“外部样式表相对路径”)语句将外部样式表文件链接到HTML文档中。例如：

1. 1. <style type="text/css">
   2.   @import url("style.css");
   3. </style>  

2.初识CSS

在标签中添加CSS样式

在HTML标签中,使用style属性来添加CSS样式，其取值由属性和值组成，两者以冒号“:”分隔，多个属性之间用分号“；”分隔。

示例如下：

<span style="color:red;font-weight:bold;">内联样式</span>

常用的文本样式属性有：

color：设置文本的颜色

font-family：设置文本的字体

font-size：设置文本的字号大小

text-align：文本水平对齐方式

line-height：设置文本的行间距

3.用内嵌式引入CSS样式

在HTML头部添加CSS样式

在HTML标签中,使用style标签来添加CSS样式，其方法是将CSS代码集中写在HTML文档的头部的style标签中。 示例如下：

1.  <style type="text/css">
2.     body{background-image:url(背景图的路径);
3.       background-size:cover;}
4.    div{position:fixed;
5.         left:500px;
6.          top:200px;
7.          color:red
8.    }
9.  </style>

常用的背景样式属性有：

background-color：设置元素的背景颜色

background-image：设置元素的背景图像，取值格式为url(背景图像的路径)

background-size：设置元素的背景图像大小。

取值为cover时，会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小；取值为contain时，会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小；取值为长度值，第一个参数设置宽度，第二个参数设置高度，两个参数之间空格分隔。

background-repeat：设置元素的背景平铺方式。取值为no-repeat表示不平铺；取值为repeat-x表示横向平铺；取值为repeat-y表示纵向平铺；取值为repeat表示双向平铺。

4.用外链式引入CSS样式

在HTML中链接外部样式表文件

在HTML标签中,使用link标签来链接CSS样式文件。

示例如下：

<link href="CSS文件的路径" type="text/css" rel="stylesheet"/>

link标签属性有：

href：取值为外部样式文件的路径

type：设置外部文档的类型。取值为text/css时，表示外部文档的类型为CSS样式表；取值为text/javascript时，表示外部文档的类型为javascript脚本

rel：设置当前文档与引用外部文档的关系。取值为stylesheet，表示定义一个外部样式表。

• CSS3基础选择器

通用选择器

通用选择器“ * ”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。 例如：

1. *{
2.   margin:0px;
3.   padding:0px;
4.   border:0px
5.   }

标签选择器

指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式 。 例如：

1. p{
2.   font-famliy:黑体;
3.   font-size:12px;
4.   color:green;
5.   }

类选择器

用来为一系列的网页元素定义相同的显示样式。类选择器使用“.”进行标识，后面紧跟类名。 例如： 若设置 <p class=font01>您好</p> 则这个p标签设置的样式可写为： .font01{color:green;}

ID选择器

用来为唯一的网页元素定义显示样式。ID选择器使用“#”进行标识，后面紧跟ID名。 例如： 若设置 <p id=green>您好</p>则这个p标签设置的样式可写为： #green{color:green;} 特别注意：HTML和XHTML中，类名和ID名定义是区分大小写的！！

CSS样式的特殊性

当基础选择器的多个规则都应用在同一元素时，权重高的样式优先。 样式优先级从高到低分别是： id选择器、类选择器、标签选择器、通用选择器。 例如： 若设置 <p class=font1>CSS样式的特殊性</p> 当

1. .font1{Color:red}
2.     p{color:blue}

p标签中的文本颜色显示为红色

• CSS3属性选择器

CSS3-属性选择器

属性选择器

属性选择器用于选取带指定属性的元素。语法格式如下：

  选择器[属性名]{属性:属性取值;}

例如：

  h1[id]{color:red;}

文本对齐属性

text-align属性是将块级标签以及单元格里面的文本内容进行相应的对齐。属性取值可以是：left、right、center、justify。

vertical-align属性是将行内元素一级单元格里面的文本内容进行相应的对齐。属性取值可以是：bottom、top、middle、baseline。

如果希望将块级元素内的文本设置为垂直居中，这里介绍一个巧妙的方法就是将文本行高line-height与块级元素的height值设置一样。如果设置不一样，会有怎样的结果呢？聪明的您，一定能试出规律的！

CSS3-包含及连字符选择器

1）属性值选择器

属性值选择器选取带有指定属性及取值的元素。语法格式如下：

选择器[属性名=属性取值]{属性:属性取值;} 例如： h1[id=yyy]{color:red;}

2）属性值的包含与连字符选择器

属性值的包含选择器选取属性值中包含指定词汇的元素。语法格式如下：

 选择器[属性名~=指定词汇]{属性:属性取值;}

属性值的连字符选择器选取带有以指定值开头的属性值的元素，该值必须是整个单词。语法格式如下：

选择器[属性名~=前缀]{属性:属性取值;}

3）文本加粗的属性

font-weight设置字体的粗细，取值可以是bolder（特粗体）、bold（粗体）、normal（正常）、lighter（细体）或100~900之间的9个等级。

4）元素背景色的设置

background-color属性用于设置元素背景颜色。属性取值为颜色单词或颜色代码。

CSS3-前缀后缀选择器

1）属性值前缀选择器

属性值前缀选择器匹配属性值以指定值开头的每一个元素。语法格式如下：

  选择器[属性名^=指定的开头]{属性:属性取值;}

2）属性值的子串选择器

属性值的子串选择器匹配属性值中包含指定值的每一个元素。语法格式如下：

  选择器[属性名*=指定值]{属性:属性取值;}

3）属性值后缀选择器

属性值后缀选择器匹配属性值以指定值结尾的每一个元素。语法格式如下：

  选择器[属性名$=指定的结尾]{属性:属性取值;}

• CSS3组合选择器

1）群组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

样式格式

标签名,标签名{属性1:属性值1; 属性2:属性值2;}

用法示例

h1,h2,h3{color:green;}

2）后代选择器

当标签发生嵌套时，内层标签就成为外层标签的后代。后代选择器用来选择元素或元素组的后代，选择器的写法是外层元素写在前面，内层元素写在后面，中间用空格分隔。

样式格式

外层元素,内层元素{属性1:属性值1; 属性2:属性值2;}

用法示例

div p {background-color:#CCC; }

3）子元素选择器

子元素选择器选取某个元素的直接子元素（间接子元素不适用）；子元素选择器元素之间使用大于号（>）隔开。

样式格式

父元素>子元素{属性1:属性值1; 属性2:属性值2;}

用法示例

div>p {background-color:#CCC; }

4）相邻兄弟选择器

相邻兄弟选择器用于选择紧接在某元素之后的弟元素。相邻兄弟选择器元素之间使用加号（+）隔开。

样式格式

兄元素+相邻弟元素{属性1:属性值1; 属性2:属性值2;}

用法示例

div+p {background-color:#CCC; }

background-color

background-color属性可用于设置元素的背景颜色。

• 样式示例：
  1. body
  2. {
  3. background-color:yellow;
  4. }
  5. h1
  6. {
  7. background-color:#00ff00;
  8. } 

5）普通兄弟选择器

普通兄弟选择器用于选择在某元素之后的弟元素。普通兄弟选择器元素之间使用加号（~）隔开。

样式格式

兄元素~弟元素{属性1:属性值1; 属性2:属性值2;}

用法示例

div~p {background-color:#CCC; }

• CSS3文本字体样式

1. 字体样式属性相关的概念

1）font-size

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，具体如下图所示。

代码示例： p{font-size:100px;}

2）font-family

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。

代码示例： p{font-family:微软雅黑;}

3）font-weight

font-weight属性用于定义字体的粗细，其可用属性值如下图所示。

 

代码示例： p{font-weight:bolder;}

4）font-style

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式;

italic：浏览器会显示斜体的字体样式;

oblique：浏览器会显示倾斜的字体样式;

代码示例： p{font-style:italic;}

5）font综合属性

font属性用于对字体样式进行综合设置，其属性由各子属性取值组成，各子属性取值间用空格分隔，要特别注意其各子属性取值必须严格依照以下顺序书写：

选择器{font: font-style font-variant font-weight font-size/line-height font-family;}

代码示例： p{font:italic bold 12px/20px arial;}

6）@font-face属性

@font-face属性是CSS3的新增属性，用于定义服务器字体。通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。其语法格式为：

@font-face{ font-family:字体名称; src:字体路径; }

1. 结构设置

em

标签<em>...</em>是CSS3中引入的文本格式化标签，可使作用的文本呈现斜体效果，并具有强调的语义。

strong

标签<strong>...</strong>是CSS3中引入的文本格式化标签，可使作用的文本呈现粗体效果，并具有强调的语义。

1. 样式设置

color

color属性用于设置文本的颜色。

font-size

font-size属性用于设置字号。

font-family

font-family属性用于设置字体。

• CSS3文本外观样式

color

color属性用于定义文本的颜色，其取值方式有如下3种：

• 预定义的颜色单词，如red，green，blue等。
• 十六进制颜色值，如#FF0000，#FF6600，#29D794等。实际应用中，也可以使用缩写值，如将#FF0000写为#F00
• RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

代码示例： <p style=color:red>您好</p> 显示效果：

您好

letter-spacing

letter-spacing属性用于定义字符(字母或汉字）间距。其属性值可为不同单位的数值，允许使用负值，默认为normal。

代码示例： <p style=letter-spacing:20px>您好</p> 显示效果：

您好

#### word-spacing word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

代码示例： <p style=word-spacing:20px>hello css</p> 显示效果：

hello css

line-height

line-height属性用于设置行间距，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

代码示例： p{line-height:50px;}

text-align

text-align属性用于设置文本内容水平对齐，相当于html中的align对齐属性。 text-align可用属性值如下：

• left：左对齐（默认值）
• right：右对齐。
• center：居中对齐。

代码示例： <p style=text-align:center>hello css</p> 显示效果：

hello css

text-transform

text-transform属性用于控制英文字符的大小写。 text-transform可用属性值如下：

• none：不转换（默认值）。
• capitalize：首字母大写。
• uppercase：全部字符转换为大写。
• lowercase：全部字符转换为小写。

代码示例： <p style=text-transform:capitalize>hello css</p> 显示效果：

Hello Css

text-decoration

text-decoration属性用于设置文本的下划线，上划线，删除线等修饰效果。 text-decoration可用属性值如下：

• none：没有装饰（正常文本默认值）。
• underline：下划线。
• overline：上划线。
• line-through：删除线。

代码示例： <p style=text-decoration:underline>hello css</p> 显示效果：

hello css

text-indent

text-indent属性用于设置首行文本的缩进。 text-indent属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

代码示例： <p style=text-indent:2em>hello css</p> 显示效果：

hello css

text-shadow

text-shadow属性可以为页面中的文本添加阴影效果。常用子属性为：

• h-shadow用于设置水平阴影的距离
• v-shadow用于设置垂直阴影的距离
• blur用于设置模糊半径
• color用于设置阴影颜色。 综合设置text-shadow属性取值的语法格式为： text-shadow:h-shadow v-shadow blur color

代码示例： <p style="text-shadow:2px 2px 2px blue">hello css</p> 显示效果：

hello css

text-indent

text-indent属性用于设置文本的缩进。

line-height

line-height属性用于设置文本行高。

text-decoration

text-decoration属性用于设置文本的修饰。

• CSS3背景样式

背景色的设置

CSS中使用background-color属性设置元素的背景色。语法格式如下：

  选择器{background-color:颜色值;}