资源描述
人机交互界面设计,第三章,web基础知识,目录,01,了解万维网、IP和域名、HTTP、FTP,02,Dreamweaver基本操作,03,网页文件的基本操作,04,认识HTML,03-01,创建站点,03-02,管理站点,01,了解万维网、IP和域名、HTTP、FTP,万维网,WWW是环球信息网的缩写，（亦作,“,Web,”,、,“,WWW,”,、,“,W3,”,，英文全称为,“,World Wide Web,”,），中文名字为,“,万维网,”,，环球网等，常简称为Web。,超文本,超文本（Hypertext）是由一个叫做网页浏览器（Web browser）的程序显示。网页浏览器从网页服务器取回称为,“,文档,”,或,“,网页,”,的信息并显示。,网页、网页文件及网站,网页是网站的基本信息单位，是WWW的基本文档。它由文字、图片、动画、声音等多种媒体信息以及链接组成，是用HTML编写的。,网页文件是用HTML（标准通用标记语言下的一个应用）编写的，可在WWW上传输，能被浏览器识别显示的文本文件。其扩展名是.htm和.html。,网站由众多不同内容的网页构成，网页的内容可体现网站的全部功能。,HTTP,HTTP是Hypertext Transfer Protocol的缩写，即超文本传输协议。HTTP提供了访问超文本信息的功能，是WWW浏览器和WWW服务器之间的应用层通信协议。,01,了解万维网、IP和域名、HTTP、FTP,01,了解万维网、IP和域名、HTTP、FTP,IP地址和域名,IP即网络之间互连的协议，英文缩写为,“,Internet Protocol,”,，中文缩写为,“,网协,”,。IP地址：网络地址、网络协议。,域名：网站的名称。,FTP,FTP 是File Transfer Protocol（文件传输协议）的英文简称，而中文简称为,“,文传协议,”,。用于Internet上的控制文件的双向传输。同时，它也是一个应用程序（Application）。,02,Dreamweaver基本操作,Dreamweaver是一款极为优秀的可视化网页设计制作工具和网站管理工具。它具有以下优点：,制作,效率高,网站管理便捷,控制能力强,02,Dreamweaver基本操作,认识,Dreamweaver,界面,属性面板,编辑窗口,对象面板,03,网页文件的基本操作,创建站点,1,2,3,在启动,Dreamweaver,时通过欢迎页面创建,在Dreamweaver工作环境下，单击菜单栏中的,“,站点,”,-,“,新建站点,”,命令,“,文件,”,“,管理站点,”,，在弹出窗口中点击,“,新建站点,”,命令,03,网页文件的基本操作,新建站点,步骤二,站点标题,步骤三,选择服务器,03,网页文件的基本操作,管理站点,在“文件”面板中的“food”文件夹上单击鼠标右键，则弹出一个快捷菜单。我们可以通过这个来管理站点。,根据需求建立相应的文件及文件夹。,04,认识HTML,HTML基本结构,网站名称,网站基本内容,END,THANK YOU,人机交互界面设计,第四章,HTML5基础,目录,01 html5基本结构标签,02 文本制作,03 网页图片的显示,04 超链接,02-01 认识标题、段落、短语元素,02-02 特殊字符,05 列表标签,05-01 无序列表,05-02 有序列表,05-03 定义列表,06 html5媒体元素,06-01 abject对象 06-04 audio对象,06-02 embed对象 06-05 source 复数媒体元素,06-03 video对象,01 html5基本结构标签,Div标签,该元素是用于分组 HTML 元素的块级元素。可以把它看作是一个容器，用来定义文档中的分区。这是一个双标签，在使用时，必须关闭它,。,这是一个模块内容,书中这部分代码有错，以ppt为准,01 html5基本结构标签,header标签,标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面，表示网页一个模块内容的头部。,它可以包括标签，还可以包括表格内容、标识、搜索表单、导航等。Header中至少要有一个标题元素或hgroup元素或nav元素,用法：,头部内容 /标题元素，后面会详解 头部信息,01 html5基本结构标签,nav标签,nav标签可以作为页面导航的链接组。同样可以包含标签，或者其他列表，表单等,用法：,这里显示的是导航部分。,section标签,该标签用来定义文档中的节。比如章节、某个模块或文档中的其它部分。一般用于成块的内容，会在文档流中开始一个新的节。,用法：,该模块的标题 该模块的内容,01 html5基本结构标签,article,标签,是一个特殊的section标签，具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。,用法：,这是文章标题 文章内容详情 /这里的是段落标签，后面做详解 这里可以是文章内容 ,01 html5基本结构标签,aside,标签,1、可以表示包含在article元素中的附属信息，如名次解释，相关引用资料等。,用法：,文章标题 文章内容 本文出自,2、也可以表示整个页面或站点的附属信息部分。如侧边栏、博客里面的其他文章列表，友情链接、单元广告等。,01 html5基本结构标签,footer,标签,1、该标签用于定义section、article或网页的页脚，包含了与内容或页面有关的信息，比如说文章信息（作者和日期）。作为页面的页脚时，一般包含了版权、相关文件和链接。它和标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该模块的页脚了。,用法：,Copyright 2006-2015 重庆市巴南分局备案编号:110105000000,01 html5基本结构标签,hgroup标签,若在一模块中需要含有一系列的标题元素，则可以用hgroup将他们包裹起来。,用法：,标题1 标题2 ,01 html5基本结构标签,figure标签与figcaption标签,一段独立的流内容，一般表示文档的一个独立单元。这2个属性常常在一起使用，figcaption元素为figure元素组添加描述信息。可以用于对元素的组合，多用于图片与图片描述组合。,用法：,这里可以插入一张图片 这儿是图片的描述信息,02,文本制作,段落：,段落标签顾名思义就是一个段落，可以理解为一些句子或文本组织在一起的块级元素。,用法：这里是一个段落。,-认识标题、段落、短语元素,标题：,标题元素从h1到h6共六级。,标题元素中包含的文本被浏览器渲染为“块”元素，即会自动产生换行。,所显示的字号是最大的，所显示的字号最小,span：,行内元素，本身没有任何含义和任何样式，但可以定义组合文档中的部分文字。,用法：,下面这是一段文字,换行：,在html中的换行显示需要专门的标签。该标签单独使用，不成对出现，是一种独立标记。,用法：,这里将要换行。这里是第二行。,02,文本制作,制作,效率高,网站管理便捷,控制能力强,-认识标题、段落、短语元素,短语元素：,短语元素都是行内元素。指的是要定义一个段落或者一句话里面的一部分文字。比如，要强调某个文字，倾斜某个文字，高亮某个文字等等。,如要为：,文字加粗这部分文字加粗,强调文字强调这里的文字,斜体文字这里的文字会有斜体效果。,02,文本制作,-认识标题、段落、短语元素,短语元素（需要时可以查表）,标签,用途,缩写：用于显示文本的缩写，配置title属性,加粗：文本没有额外的重要性，但样式采用加粗字体,引文或参考：用于显示文本是引文或参考，通常倾斜显示,代码：用于显示文本为程序代码，通常使用等宽字体,术语定义：用于显示文本为词汇或术语定义，通常倾斜显示,强调：用于强调文本，通常倾斜显示,倾斜：文本没有额外的重要性，但样式采用倾斜字体,输入文本：用于显示要用户输入的文本，通常用等宽字体显示,记号文本：文本高亮显示（仅用于HTML5）,示例文本：用于显示程序的示例输出，通常显示为等宽字体,小文本：用小字号显示的免责声明。,强调文本：显示文本强调或突出与周边的普通文本，通常加粗显示,下标：用于显示文本的下标,上标：用于显示文本的上标,变量文本：用于显示变量或程序输出，通常倾斜显示,02,文本制作,-认识标题、段落、短语元素,案例：,根据效果图，在,Dreamweaver,中写出源代码。,02,文本制作,-认识标题、段落、短语元素,小贴士：什么是块状元素，什么是内联元素？,块级元素：这类元素的特征是添加该标签后，会独立的成一行显示。,行内元素：也叫内联元素。这类元素的特征是增加其标签后，不会换行。块元素可以见下图。,02,文本制作,控制能力强,-特殊字符,若我们需要在html页面中显示某些符号如：，&，”等等，在html代码中直接输入上述类似符号时，会与html中的关键字有冲突，因此不能直接在代码中输入，而是需要转化为相对应的html代码。,符号,HTML代码,&,空格,02,文本制作,制作,效率高,-特殊字符,案例：,根据效果图，在,Dreamweaver,中写出源代码。,03,网页图片的显示,插入图片,为插入图片标签。仅仅使用 标签并不会在网页中插入图像。图片必须要有图片来源以及替代文本属性，即src以及alt属性。,用法：,src属性代表的是图片路径，该路径可以是绝对路径也可以是相对路径。,alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。,03,网页图片的显示,案例操作,题目要求在,1.html,内插入,01.jpg,和,02.jpg,两张图片。文件结构图如下图,4.7,所示。请写出相应,html,代码：,03,网页图片的显示,小贴士：,什么时候插入图片，什么时候用背景图片？,当图片作为页面主体内容，如新闻图片时，使用插入图片。作为页面整体背景或者点缀美化功能的时候可以作为背景图片引入。,相对路径与绝对路径,（1）绝对路径,绝对路径表示一个完整的路径。,可以来源于本机中的物理地址，例如src=D:/mysite/image/pic.jpg；,也可以来源于internet的网络路径，例如src=超链接主要由标签对和属性href 构成。要实现链接的跳转，必须要使用属性href,用法：,链接的文字或图片,通过点击链接的文字，具体的语法为：链接文字,图片超链接,通过点击图片进行跳转，具体的语法为：,04,超链接,锚点超链接,1、确定链接跳转的位置，设置锚点：目标位置（锚点的名字可以是任意的英文名）,2、创建链接源，链接文字或者图片,注意：锚点名称需要必须要与链接的href内的锚点名称匹配（相同）。,邮件超链接,需要建立邮件超链接时，点击内容会启动电子邮件程序。,具体用法为：发邮件,04,超链接,案例,以下是关于超链接的一个知识巩固案例。根据如图所示的网页效果图及文档路径，在Dreamweaver中写出源代码。（文档路径在书上有缺失，下图为准）,创建一个名为test.html页面,分别设置5个字段：link，百度图标图片，锚点链接，发邮件，这里是一段话,为link字段增加链接到与test.html同级文件下的1.html,为百度图片图片增加链接到百度官网,为锚点链接字段增加锚点链接到“这里是一段话”,为发邮件字段增加邮件超链接到hello,05,列表标签,列表标签是,HTML,中常用的一种标签。,具体分为,无序,有序列表,定义列表。,列表标签的主要用途为：网页导航、网页列表页、网页图文排列部分等,05,列表标签,-无序列表,无序列表（,Unordered lists,）,是一个项目的列表，在列表中每个项目前面加上列表符号。这种列表也可称为项目列表。此项目列表使用粗体圆点（典型的小黑圆圈，属于默认设置）、方块、圆圈进行标记。,第一项,第二项,第三项,值,示例,disc（默认）,圆点,square,小方块,circle,圆环,创建一个无序列表要用方块来标记他的项目符合，可以使用列表的type属性值“square”，即,05,列表标签,-无序列表,案例,在,Dreamweaver,中写出标题与无序列表的源代码,05,列表标签,-有序列表,有序列表（,Unordered lists,）,有序就是有顺序。有序列表可以使用数字（默认）、大写字母、小写字母、大写罗马数字、和小写罗马数字进行编号。,第一项,第二项,第三项,创建一个大写字母,值,示例,1,数字（默认）,A,大写字母,a,小写字母,I,大写罗马数字,i,小写罗马数字,05,列表标签,-有序列表,案例,在,Dreamweaver,中写出标题与有序列表的源代码,05,列表标签,-定义列表,定义列表（,Unordered lists,）,用于常见问题及答案；或者一个列表包含多个术语及不同的解释，就可以使用定义列表进行布局。,如：,名词,解释的内容,05,列表标签,-定义列表,案例,在,Dreamweaver,中写出标题与定义列表的源代码,06 html5媒体元素,在网页上插入音频、视频可以使其显得更生动。如,object对象标签,、,embed,嵌入对象。,Html5增加了一些多媒体和交互元素，帮助我们更好的显示音频或视频，如,video视频播放,audio声音播放,source媒体元素等,06 html5媒体元素,Object对象,该元素用来将各式各样的资料配置到网页中，例如影像、图片、动画、甚至word文件等,。,Html5删除了html4中object元素的很多属性，支持html5的属性如下表,属性,属性说明,data,必要属性，指定对象数据源的URL，在html4标准中，若属性值为相对URL，将以codebase属性的属性值为基准URL,type,data属性所指定的数据的mime形态,uesmap,将对象设定为客户端的影像地图，URL格式为”#mapname”，其中mapname对应于map元素的id属性值,width,指定对象的宽度，属性至可为正整数的像素值或这百分比值,height,指定对象的高度，属性至可为正整数的像素值或这百分比值,06 html5媒体元素,embed对象,该元素用来嵌入对象，如多媒体对象flash。该元素为一个空元素，是一个单标签。,语法规则如下：,。,属性,属性说明,Src,必要属性，指定嵌入对象的来源路径,type,嵌入对象的mime类型,width,指定对象的宽度，属性至可为正整数的像素值或这百分比值,height,指定对象的高度，属性至可为正整数的像素值或这百分比值,06 html5媒体元素,video对象,该元素是用来播放视频的元素。但因各个浏览器在 video元素的可播放影片格式方面支持不一致，若要让我们的网页文件能够兼容各种主流浏览器，并通过video元素来播放影片，则至少需准备*ogg、*ogv、*mp4、*m4v这些类型的影片,语法规则如下：,。,src,设置影片播放来源路径。属性值仅能为单一来源的URL，不可复数指定,poster,指定影片开始播放前显示的预览图片来源URL,autoplay,设置或返回是否在就绪（加载完成）后随即播放视频。若不加此属性，当影片文件成功加载时在是并不会自动开始播放,loop,设置或返回视频是否应在结束时再次播放。未加属性时，结束后会停止播放，反之，则重复播放。,preload,设定影片是否要预先加载。取值可为none，auto，metadata,controls,设置或返回视频是否应该显示控件（比如播放/暂停等）。,06 html5媒体元素,audio对象,同理，该元素是用来播放声音的元素。,语法规则如下：,。,属性,属性说明,src,设置声音播放来源路径。属性值仅能为单一来源的URL，不可复数指定,autoplay,设置或返回是否在就绪（加载完成）后随即播放声音文件。若不加此属性，当声音文件成功加载时在是并不会自动开始播放,loop,设置声音文件是否应在结束时再次播放。未加属性时，结束后会停止播放，反之，则重复播放。,preload,设定声音文件是否要预先加载。取值可为none，auto，metadata,controls,设置是否应该显示控件（比如播放/暂停等）。,06 html5媒体元素,source对象,Source是video与audio元素的子元素。可以利用source元素来定义多个影片、声音文件来源。,注意：在audio和video元素中，可以同时使用多个source元素，由于使用了source属性，不可再为video和audio设定src属性，否则video与audio元素标签的source元素等同无效。,语法规则如下：,属性,属性说明,src,设置影片、声音播放来源路径。属性值仅能为单一来源的URL，不可复数指定,Type,指定播放来源用的mime类型,Media,指定播放来源是哪一种媒体或设备。取值可以是all/aural/braille/handheld/projection/print/tty/tv,END,THANK YOU,人机交互界面设计,第五章,CSS3详解,目录,01 css3概述,02 css的配置方法,03 css的声明及选择器,04 css中的注释,05 css3基本属性,06 css3中的伪类和伪对象,07 css3中的动画,05-01 背景属性 05-03 列表属性,05-02 文本属性 05-04 其他常用显示属性,06-01 常用的css伪类,06-02 结构性伪类,06-03 伪对象,07-01 2d变形 07-03 3d变形,07-02 css3过渡 07-04 animation动画,01 css3概述,Css样式表优点,CSS(Cascading Style Sheets)，即层叠样式表。他用来设置网页中各种标签的样式，如设置文字大小，颜色，行高，背景等等。“层叠”是指当在 HTML文件中引用多个样式文件时，浏览器将依据层叠顺序及就近原则进行处理，以避免发生冲突,。,更多的排版和页面布局控制。可以控制字号、行距、字间距、边距、缩进等。,样式和结构分离。文本格式和颜色可以独立于网页结构内容部分进行配置和存储。,方便修改。若需要更换某个模块的字体颜色，只需要修改css样式里面的文字颜色属性即可，有利于网页维护。,文档变得更小，提高加载速度。Css从文档分离出来后，html的体积会变得更小。,CSS3是CSS技术的升级版本CSS3语言开发是朝着模块化发展的。在css3语言中，增加了更多的新模块。这些模块包括：盒子模型、列表模块、,超链接,方式、语言模块、背景和边框、文字特效、多栏布局、动效等,02,css的配置方法,嵌入样式：,内联样式：,不提倡，因为他不能更好的实现结构样式分离，特殊情况下可以使用，只适合该特定元素的特定属性,外部样式,将外部的独立的样式表文件引入到 HTML 文件中。,用法：,导入样式：,在 HTML 文件初始化时，会被全部导入到 HTML 文件内，作为文件的一部分,import url(外部样式表文件地址);,03,css的声明及选择器,Css的声明,ss的声明指的是需要设置的css属性（例如颜色）及其值。,Css的声明指的是需要设置的css属性（例如颜色）及其值。它有一定的语法规则。不管是外部链接还是嵌入样式，导入式样式，声明css的方法都是一样的。语法结构如下：,选择符,属性1:属性值;,属性2:属性值;,03,css的声明及选择器,Css选择器,标签选择器,id 选择器,类选择器,分组选择器,包含选择器,通配符选择器,03,css的声明及选择器,标签选择器,我们直接给标签设置样式的类型就是标签选择器,例如：,a,color:#ff0000;,font-size:16px;,03,css的声明及选择器,类选择器,类选择器也叫class选择器，语法为:,.类名属性1:属性值;,例如：,Css部分：,.class,color:#ff0000;,font-size:16px;,Html部分：,点此链接2,03,css的声明及选择器,id选择器,但与class不同的是，id名不能重复.#类名属性1:属性值;,例如：,Css部分：,#menu,color:#ff0000;,font-size:16px;,Html部分：,导航,03,css的声明及选择器,分组选择器,当多个选择器声明的样式完全相同时，可以将他们统一进行声明，各选择器之间使用英文”,”分开,语法为：标签1,标签2,标签3属性1:属性值;属性2:属性值;,例如：,Css部分：,#menu,.red,footer,color:#ff0000;,font-size:16px;,Html部分：,标题,导航,这里是段落1,这里是段落2,这里是版权信息,03,css的声明及选择器,包含选择器,需要为一个容器里面的元素设置样式时，需要使用包含选择器语法为：父选择器 子选择器属性1:属性值;属性2:属性值;,父选择器和子选择器之间用空格隔开,例如：,Css部分：,p a,color:#ff0000;,font-size:14px;,Html部分：,链接1,点击这里,跳转到首页,03,css的声明及选择器,通配符选择器,它由星号*来表示选择器的名称，可以定义所有的网页元素显示格式。通配符一般用于统一浏览器设置,例如：,意思是，将该页面的所有标签样式中的外边距、内边距重置为0，来统一浏览器样式,*,margin:0;,padding:0;,03,css的声明及选择器,案例,请完成如上图的html及css样式,03,css的声明及选择器,优先级,当有多个选择器作用于同一个元素时，最终会使用哪一个选择器所设置的样式？,优先级由高到低为：,行内样式 id 选择器 类选择器 标签选择器,。,若一个页面内有不同类型的css文件，css文件的优先级别为：,行内样式表 内嵌样式表 链接样式表 导入样式表。,04 css中的注释,注释,为了帮助理解和后期维护，在css中应该有一定的注释即解释，这些注释是不会对css代码产生影响的。,如：,/*-注释内容-*/,html注释和css注释可以混用吗？,不行。,05 css3基本属性,-背景属性,Css2的背景可以设置为纯色，图片，重复；,css3的背景有很大程度的突破，如透明度，渐变色，背景剪裁，背景图片大小，多背景,背景颜色,可以为颜色名称的英文。对应的语法为：,background-color:blue;,可以为颜色对应的16进制值。语法为：,background-color:#0000ff;,可以为颜色对应的rgb值。语法为：,background-color:rgb(0,0,255),Css3提供了半透明的显示。语法显示为：,background-color:rgba(0,0,0,0.6)。,05 css3基本属性,-背景属性,背景图片,图片路径的设置与之前插入图片一样，分为相对路径和绝对路径。,语法为background-image:url(图片路径),背景位置,在网页中需要将背景图片放在我们希望的位置，所以可以通过background-position属性来改变默认的位置。,background-position：top center,background-position:10px 10px,background-position:50%50%,background-position:left 20px top 10px,05 css3基本属性,-背景属性,背景渐变绘制,Css3中，支持背景的渐变。,线性渐变linear-gradient,径向渐变radial-gradient,重复的线性渐变repeating-linear-gradient,重复的径向渐变repeating-radial-gradient,每一种渐变里面一定会有渐变方向，角度，起始颜色，终止颜色等,用法如下：,background:linear-gradient(-90deg,#fff,#333);background:radial-gradient(center,circle,#f00,#ff0,#080);,background:radial-gradient(50%,circle,#f00,#ff0,#080);,05 css3基本属性,-背景属性,背景滚动属性,背景可以被固定在某一处，也可以跟随网页内容的滚动更滚动。,用法为：background-attachment：scrool/fixed;,背景定位的盒子,背景的左上角可以定位在边框、内边距和内容上,用法为：background-origin:padding-box/border-box/content-box,背景剪裁属性,背景由边框开始剪裁的意思是，边框以内部分可见，背景由内边距开始剪裁的意思是，内边距以内部分可见；背景由内容开始剪裁的意思是，内容以内部分可见。,用法为：background-clip:padding-box/border-box/content-box。,05 css3基本属性,-背景属性,背景大小,背景大小是css3的新属性，background-size属性可以用来定义背景图片的尺寸。,用法为：background-size:100px 200px/40%/cover/content。,简写背景属性,部分属性可以简写到background属性里面，,用法为：background：#00ff00 url(images/01.jpg)repeat-x top 30px left 30px scroll;,05 css3基本属性,案例,请完善html及css。将素材提供的bg.jpg放到页面中间，并且可以根据页面大小自动缩放，不重复，背景图片以外填充#dff2f4天蓝色。文字大小为20像素。,-背景属性,05 css3基本属性,文字字体,网页中，文本的颜色，间距行距，字体大小，字体效果多种多样，我们必须为之排版，才能使网页看起来重点分明，简明整洁,-文本属性,设置文字字体属性为 font-family，基本语法：font-family:字体 1,字体 2,字体 3;,文字大小,通过font-size来控制文字大小，基本语法：font-size:尺寸/百分比/关键字。,文字倾斜,文字样式为斜体时，使用font-style属性。,基本语法：font-style:normal/italic/oblique;,05 css3基本属性,文字粗体,-文本属性,文字需要为粗体显示时，使用font-weight属性。,基本语法：font-weight:normal/bold/bolder/lighter/number,;pfont-weight:bold;,文字颜色,设置颜色用color来定义。用法color:颜色名称；color:#000000；color:rgb(0,0,255)。,英文字异体,属性为font-variant，作用是将所有小写字母转换为小型大写字母，,基本语法：font-variant:normal/small-caps;,05 css3基本属性,简写属性,-文本属性,与背景属性一样，font也有简写属性，,用法：font:italic bold 30px 微软雅黑，,文字修饰,修饰文字是指为文字添加下划线、删除线和上划线。,基本语法：text-decoration:underline|oveline|line-through|blink|none;,英文字母大小写转换,该属性为text-transform，,基本语法：text-transform:none/capitalize/uppercase/lowercase,05 css3基本属性,中文字符间距,-文本属性,通过letter-spacing属性可以用来调整中文字符或英文字符之间的间距，,用法：letter-spacing:normal/长度，,英文单词间距,属性为 word-spacing，用来调整英文单词之间的间距,基本语法：word-spacing:normal/长度;,文本水平对齐方式,text-align可以改变文本行之间的对齐方式,基本语法：text-align:left/right/center/justify,05 css3基本属性,段落首行缩进,-文本属性,通常在段落的首行会有退格缩进，css的表达方式为text-indent，,用法：text-indent:长度/百分比，,行高,为了试段落文本看起来舒服，我们通常会调节行间距，该属性为line-height,基本语法：line-height:normal|数字|长度|百分比,文本阴影属性,Css3中，使用text-shadow可以为文本增加阴影,基本语法：text-shadow:5px 5px 5px#ff0000,05 css3基本属性,Css3自动换行,-文本属性,Css3还增加了一个文本属性为word-warp，表示可以允许文本在某个区域内强制换行。可以强制将长单词拆分，并换行到下一行,用法：pword-wrap:break-word;,05 css3基本属性,案例,-文本属性,我们将完成以上视图，请完善html及css。题目要求，将标题设置字体大小36，文字间距24px，页面水平居中。设置正文字体14px，文字字体为微软雅黑，英文字体首字母为大写，行高为1.5em，首行缩进2em。圣诞节3个字设置下划线并加粗显示。,05 css3基本属性,设置列表符号,-列表属性,属性为 list-style-type，用来设置列表项的符号类型，基本语法：list-style-type:属性值;,属性值,属性值说明,disc,黑色圆点，默认值,circle,空心圆圈,square,黑色正方形,decimal 或 1,数字，如：1，2，3，4，,lower-roman 或 i,小写罗马文字，如：I，ii，iii，iv，,upper-roman 或 I,大写罗马文字，如：I，II，III，IV，V，,lower-latin 或 a,小写拉丁文，如：a，b，c，z,upper-latin 或 A,大写拉丁文，如：A，B，C，.Z,none,不显示任何符号,05 css3基本属性,设置列表项图片,-列表属性,可以用图片美化列表项，其属性为 list-style-image，语法为：list-style-image:url(图片地址);,设置列表位置,列表项符号位于文本的左侧，默认放置在文本以外，可以通过调整位置将其放置到文本以内。属性为 list-style-position，,语法为：list-style-position:outside/inside;。,简写属性,list-style也有简写属性，,语法为：list-style:none url(图片地址)inside,05 css3基本属性,案例,-列表属性,完成如图所示案例，完成html及css部分。在这个案例中为了美化效果，加入了前面背景、文字部分的css样式,05 css3基本属性,Css其他常用显示属性,-列表属性,Display属性,display 属性可以定义元素的显示类型，属性值block是以块状元素的方式显示，inline是以内联元素的方式显示，none是不显示。,Display：none/block/inline/inlin-block,overflow属性,overflow 属性规定当内容溢出元素框时发生的事情,overflow：visible/hidden/scroll/auto,opacity属性,当我们需要对某些元素表现为半透明效果时，需要使用到opacity属性。,语法如下：opacity:0.5。取值范围为0-1，1表示不透明，0表示完全透明。,05 css3基本属性,小贴士,-列表属性,如何在低版本的浏览器中显示半透明？,由于老版本的各个浏览器对opacity的支持不一致，我们可以通过浏览器前缀使兼容性更好。如Ie8以下filter:alpha(opacity=50)，firefox需要加浏览器前缀如-moz-opactiy:0.5。为了满足所有浏览器，需要写5条,-webkit-opacity:0.5;/*老safari和老Chrome浏览器*/,-moz-opacity:0.5;/*低于Firefox0.9版本的*/,-khtml-opacity:0.5;/*老式khtml内核的Safari浏览器*/,opacity:0.5;/*IE9以上和所有新版本浏览器*/,filter:alpha(opacity=50);/*IE4-8*/,06 css3中的伪类和伪对象,常用的css伪类,所谓“伪“，就是指不是真正的标签，而是依附于结构标签的一种状态。我们分为伪类和结构性伪类，以及伪对象,在网页中，我们点击超链接，会改变颜色或者变换样式，,这通常是css中称为伪类的技术实现的。,属性值,属性值说明,:link,默认链接时的样式,:visited,访问过后的样式,:focus,元素获得焦点时的样式,:hover,鼠标经过时候的样式,:active,激活元素是的样式,06 css3中的伪类和伪对象,结构性伪类,所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器，语法如下，,选择器:伪元素属性:值,伪元素选择器也可以与类配合使用，语法如下,，选择器 类名:伪元素属性:值,属性值,属性值说明,:first-of-type,应用于指定类型的第一个元素,:first-child,应用于元素的第一个子元素,:last-of-type,应用于指定类型的最后一个元素,:last-child,应用于元素的最后一个,:nth-of-type(n),应用于置顶类型的第n个元素，n可以是数字，或者偶数（even）奇数（odd）,06 css3中的伪类和伪对象,伪对象,伪元素是对元素中的特定内容进行操作。设计伪元素的目的就是去选取诸如元素内容第一个字或字母、文本第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。,属性值,属性值说明,:first-letter,将样式应用于元素文本的第一个字或字母,:first-line,将样式应用于元素文本的第一行,:before,在元素内容的最前面添加新内容，与content结合，见后面案例,:after,在元素内容的最后面添加新内容，用法同上,p:first-child:first-letter /*第一个段落里的第一个字母*/,font-size:30px;,font-weight:bold;,07 css3中的动画,Css3已经变得非常强大，以前网页里必须靠flash或者js才能实现的动画效果，现在可以靠纯css代码就可以完成。结合js，html5的canvas，还可以做出更炫的动画。Css3中的动画效果分为2d变形，3d变形，帧动画,使用该属性时，Chrome 和 Safari 需要前缀-webkit-；Internet Explorer 9 需要前缀-ms-。,2d变形,在2维空间中，元素可以被移位，倾斜，缩放，旋转，2d变形工作在X轴和Y轴，也就是我们常说的水平轴和垂直轴。,07 css3中的动画,-2d变形,位移translate,Translate是指的一个方法，可以简单的理解为：使用translate()函数，你可以把元素从原来的位置移动向x轴y轴移动，而不影响在X、Y轴上任何组件。translate()函数可以取一个值tx，也可以同时取两个值tx和ty，,语法为transform:translate(x,y),缩放scale,缩放scale()函数可以让元素根据中心原点进行缩放。默认值为1。,语法为transform:scale(x,y)，,其中，x代表水平
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
