资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/12/16,#,课程导言,本,课程的,目标,单张网页的创建,网站的整体规划，创建，发布，,管理,网站建设的市场,需求（查询最新的招聘网站，了解招聘需求）,美工,网页设计师,设计页面，美化页面,Photoshop,，,flash,后台,高级软件工程师,功能模块的实现，数据的读取写入,Java,，,php,，,前端,前端开发工程师,把设计图转成网页，布局用户的交互，,网站性能优化、,SEO,HTML,、,CSS,、,JavaScript,第,1,章,网页,制作基础知识,第,1,章,网页制作基础知识,了解,web,标准,掌握,HTML,、,CSS,及,JavaScript,的作用,了解网页制作工具,Dreamweaver,案例,1,黄姚古镇欢迎你,1.1,网站建设基本,概念,网站执行过程,4,域名服务器,ip,：,111.12.118.77,数据库服务器,应用服务器,存储服务器,html,格式内容,Wide Web,的中文简称，也称为,3W,网，万维网是一个,以,Internet,为基础的计算机网络,，它的本质是一种,基于超级文本技术,的交互式信息浏览检索工具，它允许用户在一台计算机上通过,Internet,存取另一台计算机上的信息。,万维网是,Internet,提供的应用最普及、功能最丰富、使用方法最简便的信息服务，是,Internet,上那些支持,www,协议和超文本传输协议的客户机与服务器的集合，通过它可以存取世界各地的超媒体文件，内容包括文字、图形、声音、动画、资料库，以及各式各样的软件。,5/7/2025,统一资源定位符（,URL,）,URL,（,Uniform Resource Locator,）是专为标识,Internet,网上资源位置而设的一种编址方式，主要是用来指定协议（如,HTTP,或,FTP,）以及对象、文档、万维网网页或其他目标在,Internet,的位置和存取方式，通常所说的网页地址指的即是,URL,。,例如：,http,:/,/,index.html,协议,代码,主机地址,具体,的文件名,5/7/2025,域名,域名,就是常说的网址，它也具有惟一性，如百度的网址,、网易的网址,等就是一个域名。,域名,由汉语拼音或英文字符加上数字表示，在访问网络时，域名将通过域名服务器转换成,IP,地址，这种转换是在后台完成的。,5/7/2025,超文本传输协议,HTTP,是超文本转移协议，是客户端浏览器或其他程序与,Web,服务器之间的应用层通信协议,。,在,Internet,的,web,服务器上存放的都是超文本信息，客户机需要通过,HTTP,协议传输所要访问的超文本信息,。,HTTP,包含命令和传输信息，不仅可用于,Web,访问，也可以用于其他因特网内联网应用系统之间的通信，从而实现各类应用资源超媒体访问的集成。,Web,标准组织（,W3C,）于,1998,年发起，目的是说服,Netscape,、,Microsoft,和其他浏览器生产商彻底支持标准。他采用从容进行、坚持和策略性的方法，最终使得浏览器生产商同意引进一系列标准。通过共同的标准协同工作，是,Web,向前发展必需的观点。,Web,标准组织,5/7/2025,主页与子页,按,网页在网站中所处的位置可将网页分为,主页（首页）,和,子页,两类。,主页,子页,index.htm,5/7/2025,静态网页,和,动态网页,按网页的表现形式可将网页分为：,静态网页,和,动态,网页,静态网页示意图,动态网页示意图,网站,与,网页,网站是由若干网页构成的，这些网页按照一定的逻辑关系组织在一起。每个网页都包含一定的组成元素，网页的设计与制作就是对这样元素的规划和构建。,13,网页,文字,图片,网页,图片,视频,网页,视频,音频,构成网页的基本元素主要包括文本、图片、水平线、表格、表单、超链接及各种动态元素。,14,网页基本元素,1.1.2 Web,标准,概述,结构化,标准,语言,表现,标准语言,行为标准语言,1.1,网站建设基本,概念,1.2,网页制作入门,1.2.1 HTML,简介,HTML,是英文,Hypertext Marked Language,的缩写，中文意思是超文本标记语言，是一种用来制作超文本文档的简单标记,语言,.,html,的作用,标记网页内容的显示方式,html,的发展,简单的文本信息发展到多媒体信息,混乱的行业状态到统一的,web,标准化,功能越来越强大,html5,的发展,html,发展历程,17,蒂姆,伯纳斯,李,1989,年,-html,1995,年,IETF,Html 2.0,1996,年,w3c,Html 3.2,1997,年,w3c,Html 4.0,1999,年,w3c,Html 4.1,2000,年,w3c,xHtml 1.0,2001,年,w3c,xHtml 1.1,xHtml 2.0,2004,年,WHATWG,Html 5,草案,2008,年（两组织合并）,Html 5,正式版,2014,年,10,月,29,日,（,w3c,）,Html 5,标准规范,分化,分歧,XML,CSS,1.2.2 CSS,简介,CSS,（,Cascading Style Sheet,，可译为,“,层叠样式表,”,或,“,级联样式表,”,）是一组格式设置规则，用于控制,Web,页面的外观。通过使用,CSS,样式设置页面的格式，可将页面的内容与表现形式分离。,1.2.3 JavaScript,简介,JavaScript,是目前在网页中广泛使用的脚本语言，它是,Netscape,公司利用,Java,的程序概念，将自己原有的,Livescript,重新进行设计后而产生的脚本语言。,JavaScript,是一种基于对象和事件驱动并具有安全性能的脚本语言，有了,JavaScript,，可使网页变得生动、活泼。使用它的目的是与,HTML,、,Java,小程序（,Java Applet,）一起实现在一个网页中链接多个对象，与网络客户进行交互，从而可以开发客户端的应用程序,1.3,常用编辑工具,1.3.1,常用编辑工具对比,1.,记事本,2.EditPlus,3.Dreamweaver,1.3.2 Dreamweaver,工具使用简介,Dreamweaver,是一个“所见即所得”的网页制作和网站管理开发工具，利用,Dreamweaver,可以设计、开发并维护符合,Web,标准的网站和应用程序。无论网站开发者是喜欢直接编写,HTML,代码的驾驭感还是偏爱在可视化编辑环境中工作，,Dreamweaver,都会提供帮助良多的工具，丰富,Web,创作体验。,第,2,章,建设,基本,HTML,页面,第,2,章,建设,基本,HTML,页面,案例,2,黄姚,古镇简介,案例,3,黄姚,古镇简介引文注释,案例,4,醉黄姚,-,图文黄姚简介,案例,2,黄姚,古镇简介,“黄姚,古镇简介,”是,网页中,常见的,纯文字,形式。,文本,描述对,要传达,的,信息更加可靠,，,对旅游景点的推广有很大,的,帮助作用,。,本节就,使用,HTML,技术,中的文本标记等,来,完成此网页的设计与制作。,案例,2,黄姚,古镇简介,HTML,结构,文本标记,1.HTML,结构,标记,标记位于文档的最前面，用于向浏览器说明当前文档使用哪种,HTML,或,XHTML,标准规范，必需在开头处使用,标记为所有的,XHTML,文档指定,XHTML,版本和类型，只有这样浏览器才能将该网页作为有效的,XHTML,文档，并按指定的文档类型进行解析。,案例,2,知识点,1.HTML,结构,标记,标记位于,标记之后，也称为根标记，用于告知浏览器其自身是一个,HTML,文档，,标记标志着,HTML,文档的开始，,标记标志着,HTML,文档的结束，在它们之间的是文档的头部和主体内容。,在,之后有一串代码“,xmlns=www.w3.org/1999/xhtml”,用于声明,XHTML,统一的默认命名空间。,案例,2,知识点,1.HTML,结构,标记,标记用于定义,HTML,文档的头部信息，也称为头部标记，紧跟在,标记之后，主要用来封装其他位于文档头部的标记，例如,、,、,及,等，用来描述文档的标题、作者以及和其他文档的关系等。,一个,HTML,文档只能含有一对,标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。,案例,2,知识点,1.HTML,结构,标记,标记用于定义,HTML,文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于,标记内，,标记中的信息才是最终展示给用户看的。,一个,HTML,文档只能含有一对,标记，且,标记必须在,标记内，位于,头部标记之后，与,标记是并列关系。,案例,2,知识点,2.,文本标记,2.,文本标记,在网页中文本是常用的元素之一。文本可以起到传递信息、导航和交互的作用。那在网页中文本怎么添加进来，这个就这里我们要讲解的内容了。,标题标记,(h1-h6),基本,语法：,语法解释：,该标记用来定义六级标题，从一级到六级，每级标题的字体大小依次递减。标题标记本身具有换行的作用，标题总是从新的一行开始。,#,用来指定标题文字的大小，,#,取,1,6,的整数值，取,1,时文字最大，取,6,时文字最小。,案例,2,知识点,2.,文本标记,段落,标记,标记,基本,语法,：,语法解释：,在,与,标记之间的文字是属于一个段落。段落与段落之间有一定的间距。,案例,2,知识点,2.,文本标记,换行标记,：,语法,解释：,标记不是成对出现的，是一个单标记。一次换行使用一个,标记，多次换行可以使用多个,标记。,如果想强制浏览器不换行显示，可以使用,标记。如果希望,标记中的文字强制换行，则可以使用,标记,案例,2,知识点,2.,文本标记,基本语法：,语法解释：,标记之间的内容不换行，但是,标记中被,包含的内容将被强制换行。,例子,2-1,：,标题、段落和换行的设置的具体例子可见。,案例,2,知识点,2.,文本标记,段落,对齐,：,align,属性，取值为：,left,（左对齐）、,right,（右对齐）、,center,（居中对齐）和,justify,（两端对齐）。,居中,标记,：,center,水平分割线,:hr,特殊文字符号,:,见下,表,案例,2,知识点,例子,2-2,：水平分割线的案例应用。,2.,文本标记,符号代码,说明,符号代码,说明,连接符,除法符号,版权所有,中间点,注册,小于符号,商标,大于符号,小节,人民币符号,欧元,度,加减符号,磅,案例,2,知识点,例子,2-3,：特殊符号部分的内容进行练习例子。,案例,2,实现过程,案例,3,黄姚古镇简介引文注释,案例“黄姚古镇简介引文注释”描述的,是,黄姚,古镇简介引文参考文献的样例,，,主要是使用纯文本来实现的，但对于文本的显示外观进行了控制，所以本节主要讲解文本修饰标记,和文本修饰的其他标记的使用。,案例,3,黄姚古镇简介引文注释,font,修饰标记,其他文字修饰标记,1,.,font,修饰标记,1,）,标记,设置文字样式的基本标记是,，被其包含的文本为样式作用区。,基本语法：,例子,2-4,：,标记设置字体外观,案例,3,知识点,1.,font,修饰标记,（,2,）,标记,是基底文字标记。在制作网页前，可以使用,标记对整个网页文字进行一个基本的定义，主要包括字体、字号和颜色，当网页中没有另外定义文字样式时，就自动套用,标记定义的样式。,基本语法：,语法,解释：,标记的三个属性和,标记一样。,案例,3,知识点,2.,其他文字修饰标记,粗,体,为了使文字更醒目，可以使用,标记将文字加粗显示。,基本语法：,语法解释：,使被作用的文字加粗显示,斜体,如果想使文字倾斜显示，可以使用,标记或,。,基本语法：,语法解释：,使被作用的文字倾斜显示。,案例,3,知识点,2.,其他文字修饰标记,下划线,如果想使文字添加上下划线，可以使用,标记。,基本语法：,语法解释：,使被作用的文字加上下划线。,删除线,基本语法：,语法解释：,使被作用的文字加上删除线,案例,3,知识点,2.,其他文字修饰标记,上标和下标,如果在网页中添加数学公式，有可能遇到输入上标和下标的问题，比如,a,2,、,b,2,等。,基本语法：,语法解释：,将文字放在,与,之间就可以实现上标。,将文字放在,与,之间就可以实现,下标,。,案例,3,知识点,例子,2-5,：文字加粗、斜体和下划线例子示范。,案例,3,实现过程,案例,4,醉,黄姚,图文黄姚简介,“醉黄姚,图文黄姚简介”,是,网页中常见,的,图,文混排,形式。,图文混排形式的网页,描述对,要传达的景点,风光,更精准,，,图片有画龙点睛的作用，更直观更具信息量，,对,旅游景点的,推广,更,有作用,。本节就,使用,HTML,技术,中的图像,img,标记等,来,完成此网页的设计与制作。,案例,4,醉黄姚,图文黄姚简介,Img,标记使用,图,文混排,1.,图像标记,img,在,HTML,网页中添加图片使用的是,img,标记。,img,标记的基本语法是：,对于,img,的语法解释是这样的，,src,是,img,标记的基本属性，它的属性值是该图片的,url,地址。,url,地址可以是绝对地址也可以是相对地址。那么除了,src,属性外，,img,还有其他的属性，详细见表,2-2,所示。,案例,4,知识点,1.,图像标记,img,属性,功能,说明,src,指定,图片的,url,地址,width,指定,图片的宽度,height,指定,图片的高度,hspace,指定,图片水平间距,vspace,指定,图片垂直间距,align,指定,图片对齐方式,boder,指定,图片边框大小,alt,指定,图片无法显示时的说明文字,title,鼠标,悬挂在图片上时显示的文字,案例,4,知识点,1.,图像标记,img,设置图像大小,我们要知道，在网页中显示的图像的大小默认下是原始大小，我们要改变其大小，就要使用,img,的,width,和,height,属性。其语法格式如下：,对于,width,与,height,的单位可以是绝对尺寸像像素，也可以是相对尺寸像百分比，但要注意的是百分比是指图像大小为浏览器窗口大小的百分比。而且两个属性可以只设置其中一个，则另一个会按照原始图像等比自动调整。如果这两个属性都进行了设置，那么图像不再按原图等比缩放，较原图会是失真的比例。,案例,4,知识点,例子,2-6,：,图片的设置例子,1.,图像标记,img,设置图像的间距,网页中的图像与周边元素都要有一定的距离才会更美观，那这距离就由,img,标记的,hspace,和,vspace,来完成。其语法格式如下：,其中的,hspace,是设置图像与周边相邻元素的水平间距的，而,vspace,则是垂直间距。属性值为数字，单位为像素,。,。,案例,4,知识点,例子,2-7,：图像间距的设置例子示范,1.,图像标记,img,设置图像大小,我们要知道，在网页中显示的图像的大小默认下是原始大小，我们要改变其大小，就要使用,img,的,width,和,height,属性。其语法格式如下：,对于,width,与,height,的单位可以是绝对尺寸像像素，也可以是相对尺寸像百分比，但要注意的是百分比是指图像大小为浏览器窗口大小的百分比。而且两个属性可以只设置其中一个，则另一个会按照原始图像等比自动调整。如果这两个属性都进行了设置，那么图像不再按原图等比缩放，较原图会是失真的比例。,案例,4,知识点,例子,2-6,：图片的设置例子,1.,图像标记,img,设置图像的边框大小,通常图像的边框在默认情况下是不存在的，但我们可以增加边框来凸显图像。其基本语法如下：,我们只能更改图像边框的宽度，边框的颜色不可以调整，默认为黑色，如果图像作为超级链接使用，其边框颜色与链接文字的一样，为蓝色，具体可见例子,2-8,所示。,案例,4,知识点,例子,2-8,：图像的边框的示范例子。,1.,图像标记,img,指定图像的说明文本,对于图像的说明文本分为两种情况，一是图像正常显示时，二是图像无法显示时。我们可以通过,img,标记的,title,和,alt,属性来设置，语法如下：,当图像正常显示时鼠标滑过图像可以显示出来的文字说明用,title,，图像无法显示时给出的说明文字用,alt,，可见例子,2-9,所示。,案例,4,知识点,例子,2-9,：图片的替换文本示范例子。,案例,4,实现过程,第,3,章,使用,CSS,技术美化网页,第,3,章,使用,CSS,技术美化网页,案例,5,黄姚古镇多彩标题,案例,6,黄姚旅游信息新闻,案例,7,黄姚对联赏识,案例,5,黄姚古镇多彩标题,“,黄姚古镇多彩,标题”,是我们为黄姚古镇设计的一个,“,Logo,”,，,是,企业文化的象征，通过商标的普及可以让消费者更好的认识企业主体及品牌文化。文字作为,logo,含义直接明确，更容易被认知理解。本节我们即将引入,CSS,，通过,CSS,控制,文字,外观,来,模拟一款文字,logo,。,案例,5,黄姚古镇多彩标题,1.CSS,基础概念,CSS,样式的,引用,Css,的基本选择器,1.CSS,基础概念,什么是,CSS,CSS,语言称之为层叠样式表（,Cascading Stylesheet,），是一种标记语言，它本身不需要编译，可以直接由浏览器解释执行，属于浏览器解释型语言，在标准网页设计中,CSS,负责网页内容的表现，并且,允许将样式与网页内容分离的,一种标记性语言。,案例,5,知识点,例子,3-1,例子,3-2,用于不用,CSS,的区别,1.CSS,基础概念,CSS,语法的核心包括三部分：选择符，样式属性及属性值。其基本语法如下：,选择符,属性,1,：属性值,1,；,属性,2,：属性值,2,；,；,属性,n,：属性值,n,；,案例,5,知识点,1.CSS,基础概念,在具体使用,CSS,之前，请看一个生活中的例子，通常我们描述一个人可以为这个人列一张表：,张飞,身高：,185cm,；,体重：,105kg,；,性别：男；,性格：暴躁；,民族：汉族；,案例,5,知识点,1.CSS,基础概念,案例,5,知识点,2,级标题,字体：宋体；,大小：,15,像素；,颜色：红色；,装饰：下划线,h2,font-family:,宋体,;,font-size:15px;,color:red;,text-decoration:,underline;,1.CSS,基础概念,案例,5,知识点,CSS,的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”,。,因此，概括来说，,CSS,就是由,3,个基本,部分组成的,“,对象,”、“,属性,”,和,”,值,”。,2.CSS,样式的引用,内嵌样式,内嵌样式是混合在,HTML,标记里使用的，即在,标记里加入,style,参数。而,style,参数的内容就是,CSS,的属性和值，用这种方法，可以很简单的对某个元素单独定义样式。其语法格式如下：,案例,5,知识点,2.CSS,样式的引用,内嵌样式,语法解释：,（,1,）,HTML,标记就是页面中标记,HTML,元素的标记，如,p,、,img,等；,（,2,）,style,标记后面引号中的内容相当于样式表中大括号里的内容，,style,标记可以应用于,HTML,文件中的任意的,body,标记。,案例,5,知识点,2.CSS,样式的引用,内部样式,内部样式表是通过,标记把样式表的内容直接放到,HTML,页面的,区里，这些定义的样式就应用到页面中了，样式表是用,标记插入的，其语法格式如下：,选择,符,样式,属性,:,取值,;,样式,属性,:,取值,;,选择,符,样式,属性,:,取值,;,样式,属性,:,取值,;,案例,5,知识点,2.CSS,样式的引用,内部样式,语法解释：,标记：用来说明要定义的样式；,type=,text/css,，说明这是一段,CSS,样式表代码；,选择,符：样式的名称，可以是,HTML,的所有标记名称。,案例,5,知识点,2.CSS,样式的引用,链入外部样式,链入外部样式表是要先把样式表保存为一个单独的文件，然后在页面中用,标记链接到这个文件，注意这个,标记必须放到页面的,区内，其语法格式如下,：,案例,5,知识点,2.CSS,样式的引用,链入外部样式,语法解释：,href,：,用于指定样式表文件所在的地址，可以是绝对地址也可以是相对地址。如上面代码中的,”mystyle.css”,，表示浏览器从,mystyle.css,文件中以文档格式读出定义的样式表。样式表文件可以用任何文本编辑器打开并编辑，扩展名为,.css,。内容是定义的样式表，注意不能包含任何,HTML,标记。,rel=”stylesheet”,：指在,HTML,页面文件中使用的是外部样式表。,type=”text/css”,：指明该文件的类型是样式表文件。,案例,5,知识点,2.CSS,样式的引用,导入外部样式,导入外部样式表是指在内部样式表的,区域内导入一个外部样式表，导入时需要用,import,做声明，该声明可放在,标记外也可以放在,标记内，但根据语法规则，一般都是放在,标记内，其语法格式如下：,import url,（外部样式表文件地址）；,案例,5,知识点,2.CSS,样式的引用,导入外部样式,语法解释：,（,1,）,import,语句后面的“,:,”是不能省略的。样式表的地址可以是绝对地址也可以是相对地址。,（,2,）外部样式表文件的扩展名必须为,.css,案例,5,知识点,3.CSS,的基本选择,符,CSS,就是由,3,个基本部分组成的,“,对象,”、“,属性,”,和,”,值,”。,案例,5,知识点,CSS,中首先我们要知道什么是选择符（器）？每一条,css,样式声明（定义）由两部分组成，形式如下：,选择器,样式,;,在,之前的部分就是,“,选择器,”,，,“,选择器,”,指明了,中的,“,样式,”,的作用对象，也就是,“,样式,”,作用于网页中的哪些元素。,css,的选择符可以分为,5,种，分别是：,标签选择符、类选择符、,id,选择符,、伪类及伪对象选择符、通配符选择符。,3.CSS,的基本选择,符,CSS,中,首先我们要知道什么是选择符（器）？每一条,css,样式声明（定义）由两部分组成，形式如下：,选择器,样式,;,在,之前的部分就是,“,选择器,”,，,“,选择器,”,指明了,中的,“,样式,”,的作用对象，也就是,“,样式,”,作用于网页中的哪些元素。,案例,5,知识点,3.CSS,的基本选择符,HTML,标签选择符,标签选择符即使用,XHTML,中已有的标签作为选择符。如：,pfont:12px;,其中,“,p,”是,HTML,标记选择符。,案例,5,知识点,3.CSS,的基本选择符,类选择符,类,选择器在,css,样式编码中是最常用到的，格式如下：,.,类选择器名称,css,样式代码,即：,.,类选择器名称,属性,:,属性值,;,其中要以英文圆点开头；类选择器名称可以任意起名（但是不能用中文）。,具体,例子,3-3,。,CSS,的类选择符示范例子,案例,5,知识点,3.CSS,的基本选择符,id,选择符,id,选择器在,css,样式编码中是最常用到的，格式如下：,#id,选择器名称,css,样式代码,即：,#id,选择器名称,属性,:,属性值,;,其中要以符号,#,开头,id,，选择器名称可以任意起名（但是不能用中文）。,例子,3-4,。,CSS,的,id,选择符示范例子,案例,5,知识点,3.CSS,的基本选择符,类选择符与,id,选择符,相同点是可以应用于任何元素；不同点是,id,选择符只能在文档中使用一次，而类选择符可以多次被使用。,案例,5,知识点,3.CSS,的基本选择符,伪类和伪元素选择符,伪类和伪元素选择符是一组,CSS,预定义好的类和对象，不需要进行,id,和,class,属性的声明，能自动地被支持,CSS,的浏览符所识别。,案例,5,知识点,3.CSS,的基本选择符,1,）伪类,:,伪类的基本格式为：,选择符,:,伪类,属性,:,值,常用伪类,见,下,表所,示。,案例,5,知识点,3.CSS,的基本选择符,案例,5,知识点,伪,类,用法,:,link,超级链接,未被访问时,:,hover,对象,在鼠标滑过时,:,active,对象,被用户单击时,:,visited,超级链接,被访问后,:,foucs,对象,称为输入焦点时,:,first-child,对象,的第一个子对象,:,first,页面,的第一页,例子,3-5,：,CSS,的伪类示范,例子,3.CSS,的基本选择符,伪元素,:,伪元素指元素的一部分，如段落的第一个字母。伪元素的基本格式为：,选择符,.,类,:,伪元素,属性,:,值,使用伪类可以区别开不同种类的元素，,CSS,预定义的伪类,如,下,表所,示。,案例,5,知识点,3.CSS,的基本选择符,案例,5,知识点,伪,元素,用法,:after,设置,某个对象之后的内容,:,first-letter,对象,内容的第一个字母,:,first-line,对象,内第一行,:,before,设置,某一个对象之前的内容,例子,3-6,：,CSS,的伪元素示范,例子,3.CSS,的基本选择符,通配符选择符,配符使用星号“,*,”表示,比如：,*color:red;,这里就把所有元素的字体设置为红色。,案例,5,知识点,3.CSS,的基本选择符,由于,*,会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用,*,通配符选择器，取而代之的是，把所有需要统一设置的元素，放在一起，一块设置，比如：,html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img margin:0;padding:0;,案例,5,知识点,案例,5,实现过程,案例,6,黄姚旅游信息新闻,案例“黄姚旅游信息新闻,”是,一种图文形式的网页，也是网页主要的表现形式。本文主要通过,CSS,字体样式及,CSS,文本外观样式来制作这个黄姚旅游信息,新闻,.,案例,6,黄姚旅游信息新闻,1,CSS,字体样式属性,2,文本外观,属性,1,CSS,字体样式属性,设置字体族科：,font-family,字体族科的意思是在,CSS,中利用,font-family,属性来设置文字的字体,.,基本格式如下,:,font-family:,字体,1,字体,2,字体,3,;,p font-family:”,隶书,”;,案例,6,知识点,1,CSS,字体样式属性,设置字号：,font-size,案例,6,知识点,属性,取值,说明,属性,取值,说明,Em,相对,长度单位,xx-small,极,小字,px,绝对,长度单位像素,x-small,较,小字,In,绝对,长度单位英寸,small,小号,字,Cm,绝对,长度单位厘米,medium,中等,大小,Mm,绝对,长度单位毫米,Large,大号,字,Pt,绝对,长度单位点,x-large,较,大字,xx-large,极,大字号,例子,3-7,1,CSS,字体样式属性,设置字体样式：,font-style,案例,6,知识点,属性,取值,说明,Normal,默认,样式，正常显示,Italic,斜体,oblique,歪斜,体，其实与,italic,斜体样式一样,1,CSS,字体样式属性,设置字体加粗：,font-weight,案例,6,知识点,属性,取值,说明,normal,默认,样式，正常显示,Bold,粗,体,Bolder,加,粗,Lighter,细,体,100900(100,的整数倍,),100,200,300-900,，其中,700,与,bold,粗体一样,1,CSS,字体样式属性,设置字体变体：,font-variant,normal,：默认值，正常显示；,small-caps,：小型大写字母。,例子,3-8,：,设置字体变体示范例子。,案例,6,知识点,2,文本外观属性,调整字符间距：,letter-spacing,letter-spacing,属性是用来控制字符之间的间距的，其取值如下：,normal,：默认值；,长度：包括长度值和长度单位，其设置方法与前面字大小一样。,调整单词间距：,word-spacing,word-spacing,设置单词之间的间距，使用方法与,letter-spacing,类似。,案例,6,知识点,2,文本外观属性,添加文字修饰：,text-decoration,案例,6,知识点,属性,取值,说明,Underline,下划线,Overline,上,划线,line-through,删除线,Blink,闪烁,none,无,修饰,2,文本外观属性,设置文本排列方式：,text-align,案例,6,知识点,属性,取值,说明,l,eft,左对齐,right,右对齐,center,居中对齐,justify,两端对齐,2,文本外观属性,设置段落缩进：,text-indent,长度：长度值和长度单位，与前面介绍一致；,百分比：相对上一级而言。,案例,6,知识点,2,文本外观属性,调整行高：,line-height,案例,6,知识点,属性,取值,说明,Normal,默认,值，正常行高,数字,表示,行高为该元素字体大小与该数字相乘的结果,长度,长度,值和长度单位,百分比,表示,行高是该元素与字体大小的百分比,2,文本外观属性,转换英文大小写：,text-transform,案例,6,知识点,属性,取值,说明,uppercase,所有,单词都大写；,lowercase,所有,单词都小写；,capitalize,所有,单词首字母都大写；,none,默认,显示,例子,3-9,：,对文本外观属性进行了综合应用,案例,6,实现过程,补充案例,案例,7,黄姚美食推荐,到一个地方旅游除了观赏漂亮的风景，品尝当地的美食也是旅游者最喜欢的活动。美食推荐是把最具有地方特色的美食在网页中推荐出来，方便旅游者在旅途中获取美食信息，也是旅游网站必备的信息资讯内容。“黄姚美食推荐”是把黄姚古镇的几个独特美食在网页中图文介绍，采用了,CSS,的复合选择器实现,。,案例,7,黄姚古镇美食推荐,1,复合选择器,2,CSS,层叠性和继承性,3,CSS,的,优先级,1,复合选择器,1,复合选择器,标,记,指定,式选择器,标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为,class,选择器或,id,选择器，两个选择器之间不能有空格。,例如：,h3.special,或,p#one,。,案例,7,知识点,例子,3-10,标签指定式选择器,案例,1,复合选择器,后代选择器,后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。,案例,7,知识点,例子,3-11,：后代选择器示范案例。,1,复合选择器,并集选择器,并,集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、,class,类选择器、,id,选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为他们定义相同的,CSS,样式,。,案例,7,知识点,例子,3-12,：并集选择器案例示范。,2,CSS,层叠性和继承性,定位背景的方法有两种，一种是指定位置名称，另一种是通过像素或百分比指定背景具体的位置，基本格式如下：,background-position,：关键字,|,百分比,|,长度,关键字：,在,水平方向取值为,left,、,center,、,right,在,垂直方向的取值为,top,、,center,、,bottom,水平,垂直方向可以相互搭配使用。,案例,7,知识点,2,CSS,层叠性和继承性,层叠性,所谓层叠性是指多种,CSS,样式的叠加。例如，当使用内嵌式,CSS,样式表定义,标记字号大小为,12,像素，链入式定义,标记颜色为红色，那么段落文本将显示为,12,像素红色，即这两种样式产生了叠加。,继承性,所谓继承性是指书写,CSS,样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。例如，定义主体元素,body,的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他的标记都嵌套在,标记中，是,标记的子标记。,并不是所有的,CSS,属性都可以继承，例如：边框属性、外边距属性、内边距属、背景属性、定位属性、布局属性、元素宽高属性等属性就不具有继承性。,案例,7,知识点,3,CSS,的优先级,CSS,控制页面的方法各有不同，但如果把这几种方法同时运用到一个,HTML,文件的同一个标记上，就会出现优先级的问题。如果在各种方法中设置的属性不一样，如内嵌样式设置字体为宋体，内部式设置字体颜色为红色，那么现实的结果会让二者同时生效，为宋体红色字。但当各种方法同时设置同一个属性的时候，如都设置字体颜色，情况就会比较复杂。如下所示，首先创建两个,CSS,文件，其中第,1,个命名为,red.css,，其内容为：,p,color:red;,案例,7,知识点,3,CSS,的优先级,第,2,个命名为,green.css,，其内容为：,p,color:green;,接着创建,HTML,代码，把这两个,CSS,的作用将分别把文本段落的文字设置成红色和绿色。具体见例子,3-13,。,例子,3-13,：,CSS,的优先级示范例子。,案例,7,知识,点,3,CSS,的优先级,使用,“background”,属性，其值由多个背景控制的属性值组合而成，基本格式如下：,background,：,corol url()repeat position,attachment,；,如,body,background-image:url(images/hys.png);,background-attachment:fixed;,background-repeat:no-repeat;,background-position:center center;,可以等价简化写为：,body,url(images/hys.png)no-repeat center center fixed,案例,7,知识,点,案例,7,实现过程,第,4,章,CSS,盒子模型,第,10,章,JavaScript,核心对象,案例,8,黄姚风景图文欣赏,案例,9,黄姚最受欢迎的土特产推介,案例,10,黄姚风景明信片,案例,8,黄姚风景图文欣赏,“黄姚风景图文欣赏”即是网页中常见的图文并存的形式。漂亮的图片，画龙点睛的标题，抒情的文章描述三者结合起来在网页页面中呈现，全方位的对要传达的景点风光描述，对旅游景点的推广有很大的作用。本节就使用,CSS,技术与盒子边框属性来完成此网页的设计与制作。,案例,8,黄姚风景图文欣赏,CSS,盒子模型,标准文档流,块元素,div,与行内元素,span,边框属性,1.,CSS,盒子模型,CSS,盒子模型就是在网页设计中经常用到的,CSS,技术所使用的一种思维模型。其核心思路是把网页中元素对象都看做出一个个矩形的盒子，每个盒子由内容,(content),、填充,(padding),、边框,(border),、边界,(margin),四个部分,组成。,案例,8,知识点,外边框（,margin,）,内边框（,padding,）,边框（,border,）,盒子中的内容,1.,CSS,盒子模型,CSS,盒子模型就是在网页设计中经常用到的,CSS,技术所使用的一种思维模型。其核心思路是把网页中元素对象都看做出一个个矩形的盒子，每个盒子由内容,(content),、填充,(padding),、边框,(border),、边界,(margin),四个部分,组成。,案例,8,知识点,外边框（,margin,）,内边框（,padding,）,边
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
