CSS技术基本概述实用教案

《CSS技术基本概述实用教案》由会员分享，可在线阅读，更多相关《CSS技术基本概述实用教案（87页珍藏版）》请在金锄头文库上搜索。

1、HTML总结(zngji)&回顾HTML标记的组合就是HTML语言，浏览器根据HTML标记的含义进行解析和显示HTML标记及标记属性(shxng)的规范写法：所有开始标记都有结束标记标记名和属性(shxng)名小写属性(shxng)值加双引号或单引号掌握常用HTML标记：文字、标题、段落、层、列表和、超链接、图像、换行等第1页/共86页第一页，共87页。HTML回顾(hug)重点理解：表格与、()的使用利用表格进行布局(bj)重点理解：表单标记及表单控件标记（、等）的用法理解表单提交数据的过程数据如何打包（表单元素名称=表单元素值）数据发送至何处（action属性）数据发送的形式（method

2、属性：GETPOST）第2页/共86页第二页，共87页。本篇内容(nirng)CSS概述(ish)CSS细节第3页/共86页第三页，共87页。说明(shumng)本篇教学目的在于(ziy)css入门，能够运用css的几种基本用法，能够看懂和理解比较复杂一些的css用法第4页/共86页第四页，共87页。一、CSS概述(ish)CSS定义CSS的产生(chnshng)第一个CSS示例CSS的好处第5页/共86页第五页，共87页。1.1CSS定义(dngy)CSS（Cascade Style Sheet）级联（层叠）样式表是由W3C组织制定的一种用来定义(dngy)样式规则（如字体、颜色和位置）的语

3、言能让网页制作者有效地定制、改善网页的显示效果第6页/共86页第六页，共87页。1.2CSS的产生(chnshng)HTML中，文本的格式化（样式设置）可以使用一些特定的标记，比如粗体标记，标记等样式标记散落于HTML语言中，使得内容和格式化的代码混杂(hnz)一起，难以区分。解决方法是改用独立的技术CSS示例(shl)第7页/共86页第七页，共87页。1.3第一个CSS示例(shl)示例(shl)第8页/共86页第八页，共87页。1.3.1第一个CSS说明(shumng)CSS语句CSS语句(yj)的构成：样式应用样式的场所第9页/共86页第九页，共87页。CSS语句的构成：样式应用(yng

4、yng)样式的场所 pcolor : red; 在这里，页面中的 元素是应用样式的场所(chn su)，CSS中，元素名称两边不加属性名color代表(dibio)字体颜色属性值red一条样式样式属性名和值之间用冒号（：）分隔，每条样式最后加一个分号（；）应用于 元素的所有样式放置在一对大括号之间样式包括：样式属性名样式属性值第10页/共86页第十页，共87页。CSS语句的构成：样式(yngsh)（属性名、属性值）应用样式(yngsh)的场所 pcolor : red; 这条CSS语句(yj)的作用：选择页面上的所有元素，将内容的字体颜色设置为red称之为p选择符也叫做(jiozu)“选择符”

5、第11页/共86页第十一页，共87页。CSS语句(yj)里添加更多样式：可以添加若干条样式（属性名、属性值） pcolor : red;font-size:32px; 这条CSS语句的作用：将页面上元素的内容的字体(zt)颜色设置为red，大小设置为32像素;第12页/共86页第十二页，共87页。1.3.2第一个CSS说明(shumng)CSS的引入CSS的引入有多种方式，第一个示例采用(ciyng)在页面文件中直接引入CSS样式，方法如下：第13页/共86页第十三页，共87页。 css pcolor:red; 第一段文字(wnz) 在HTML页面中直接引入CSS，需要在元素里增加一对样式(y

6、ngsh)开始和结束标记（）标记(bioj)属性type值为text/csscss语句置于标记之间第14页/共86页第十四页，共87页。 css pcolor:red; 第一段文字(wnz) 内容的样式(yngsh)采用独立的CSS原始(yunsh)内容样式 应用p选择符选择页面中的元素第15页/共86页第十五页，共87页。1.3.3第一个CSS说明(shumng)写法以下写法都可以：CSS不区分大小写，推荐(tujin)全部小写 pcolor : red;font-size : 32px; p color : red; font-size : 32px; 包含多条样式(yngsh)时，习惯第

7、一种写法第16页/共86页第十六页，共87页。1.3.4第一个CSS说明(shumng)术语总结CSS语句的构成：（若干条）样式样式的属性(shxng)名样式的属性(shxng)值应用样式的场所选择符 pcolor : red; p选择符一条(y tio)样式样式属性名样式属性值第17页/共86页第十七页，共87页。1.4CSS的好处(hochu)CSS将HTML格式与内容分离，有利于对内容进行统一的格式设置和修改CSS样式相比HTML格式化标记(bioj)的功能更加丰富和强大不采用(ciyng)CSS示例采用CSS示例第18页/共86页第十八页，共87页。二、CSS细节(xji)CSS样式(

8、yngsh)CSS选择符CSS的引入方式CSS样式(yngsh)的级联第19页/共86页第十九页，共87页。2.1CSS样式(yngsh)HTML中的格式化标记（如等）功能有限，CSS样式的功能更加强大CSS包括各种样式属性，用于控制字体、颜色、对齐方式和边距以及位置等CSS样式种类繁多，无须(wx)一一记忆第20页/共86页第二十页，共87页。2.1.1CSS样式(yngsh)字体字体的样式属性主要包括文字(wnz)的字体、大小、颜色、显示效果等示例(shl)向雷锋同志学习！仅通过HTML如何实现该效果第21页/共86页第二十一页，共87页。字体样式(yngsh)的说明font-family

9、：指定(zhdng)字体可以指定(zhdng)多个字体，字体之间以逗号（,)分隔按顺序依次查找计算机中有无指定(zhdng)的字体，有则显示，无则查找下一个，如果都没有查到，采用默认字体font-family:微软雅黑,楷体(kit),宋体;第22页/共86页第二十二页，共87页。字体(zt)样式的说明font-size：字体大小常用单位(dnwi)：px（像素），pt（点）40px：px代表像素单位(dnwi)，单位(dnwi)通常不要省略 font-size: 40px; 第23页/共86页第二十三页，共87页。字体样式(yngsh)的说明color：字体颜色可以用预定义的颜色名称可以用十

10、六进制(sh li jn zh)代码颜色拾取 color:red; color:#ff0000; 第24页/共86页第二十四页，共87页。字体(zt)样式的说明font-weight：控制字体的粗细取值：normal, bold, lighter, bolder，默认normalfont-style：控制文字倾斜(qngxi)取值：italic，normal，默认normaltext-decoration：控制下划线等取值：underline（下划线），line-through（中划线），overline（上划线） font-weight: bold; font-style:italic; t

11、ext-decoration:underline; 示例(shl)第25页/共86页第二十五页，共87页。CSS字体(zt)样式属性含义属性值font-family字体各种字体font-style字体样式italic、oblique、normalfont-variant小体大写small-capsfont-weight字体粗细normal、bold、bolder、lighterfont-size字体大小absolute、relative、%color字体颜色颜色值第26页/共86页第二十六页，共87页。2.1.2CSS样式(yngsh)背景背景属性包括背景颜色、背景图像以及背景图像的控制(kn

12、gzh)background-color：设置元素的背景色示例(shl) background-color: silver;第27页/共86页第二十七页，共87页。CSS样式(yngsh)背景background-image：设置元素的背景图像background-repeat：设置背景图像的重复取值：no-repeat（不重复），repeat（在水平和垂直(chuzh)方向上重复），repeat-x和repeat-y（分别在水平和垂直(chuzh)方向上重复），默认repeat background-image: url( “” ) ; 示例(shl)可以用相对地址或绝对地址示例第28页/共

13、86页第二十八页，共87页。CSS背景(bijng)样式属性含义属性值background-color背景色颜色值background-image背景图案图片路径(相对，绝对)background-repeat背景图案重复方式repeat-x | repeat-y | no-repeat| repeat第29页/共86页第二十九页，共87页。2.1.3CSS样式(yngsh)文本文本属性包括对齐方式、文字间距、行距(hngj)等text-align：设置文本的水平对齐方式取值：left，center，right，默认left示例(shl) text-align: center;第30页/共86

14、页第三十页，共87页。HTML的格式化用法(ynf)VSCSSCSS样式属性和HTML属性很多写法不完全一致，比如：text-align（CSS中），align（HTML标记属性）HTML中一些格式化标记，比如（粗体）（斜体）等，在CSS中，通过(tnggu)新的样式属性来展现传统HTML中用于格式化的标记（，等）不再推荐使用，推荐采用CSS来实现相比HTML格式化标记，CSS提供的样式功能更加丰富第31页/共86页第三十一页，共87页。对比(dub)示例(shl) p font-family:微软雅黑,楷体(kit),宋体; color:red; font-size:32px; font-w

15、eight:bold; font-style:italic; text-decoration:underline; 第一段文字第二段文字第32页/共86页第三十二页，共87页。2.1.4CSS样式(yngsh)边框在CSS看来，HTML元素都有一个边框CSS边框属性(shxng)设置元素边框的颜色、宽度、样式等第33页/共86页第三十三页，共87页。border-style（边框样式）：控制边框的外观取值：none(无边框)，solid(实线)，dashed（虚线)，dotted（点线），double（双线），groove(凹槽)，inset（凹边），ridge（凸槽），outset（凸边(t

16、 bin)）border-color（边框颜色）：取值：颜色名，或十六进制border-width（边框宽度）：通常采用像素单位示例(shl)第34页/共86页第三十四页，共87页。border属性：通过该属性同时设置边框(binkung)样式、宽度、颜色 border: 5px solid green;多个值之间以空格分隔(fng)，多个值的顺序随意示例(shl)第35页/共86页第三十五页，共87页。定义(dngy)边框的一侧：可以定义(dngy)任何一侧(上、下、左、右）的边框的样式、宽度或颜色border-topborder-bottomborder-leftborder-right比

17、如：定义(dngy)边框上侧border-top-style: dashed;border-top-width:5px;border-top-color:green; border-top: 10px dashed navy;示例(shl)第36页/共86页第三十六页，共87页。 div border:5px solid blue;border-top:10px dashed navy; 对于边框上侧：border-top样式(yngsh)覆盖了border样式(yngsh)第37页/共86页第三十七页，共87页。CSS边框(binkung)样式属性含义属性值border-width边框宽度（

18、四边） 通常采用像素单位border-color边框颜色（四边） 颜色值border-style边框样式（四边） dotted | dash | solid | double | groove | ridge | inset | outsetborder边框所有属性border-top-width上边框宽度border-top-color上边框颜色border-top-style上边框样式border-top 上边框所有属性第38页/共86页第三十八页，共87页。2.1.5CSS样式(yngsh)高度和宽度height和width属性控制元素矩形区域的大小常用单位(dnwi)：px（像素），p

19、t（点）示例(shl)width:200px;height:200px;第39页/共86页第三十九页，共87页。补白补白(bbi)2.1.6CSS样式(yngsh)补白元素(yuns)内容与边框之间有一层“补白”（也叫“填充”）元素内容区边框补白补白补白补白补白补白第40页/共86页第四十页，共87页。CSS样式(yngsh)补白padding属性控制元素内容(nirng)与边框之间的补白属性含义属性值padding-left内容与左边框的补白通常采用像素单位padding-top内容与上边框的补白padding-right内容与右边框的补白padding-bottom内容与下边框的补白pad

20、ding同时设置四侧的补白示例(shl)第41页/共86页第四十一页，共87页。2.1.7CSS样式(yngsh)边界元素(yuns)与元素(yuns)之间有一层边界元素(yun s)内容区补白补白补白补白补白补白补白补白元素内容区元素B边框元素A边框边边 界界第42页/共86页第四十二页，共87页。CSS样式(yngsh)边界margin属性控制元素(yun s)之间的边界示例(shl)属性含义属性值margin-top上边界常用单位像素margin-right右margin-bottom下margin-left左margin同时设置第43页/共86页第四十三页，共87页。“盒模式”：CSS

21、中，每个元素被看待成一个“盒子”box，这个(zhge)盒子有“边框”，盒子内容与边框之间有“补白”，盒子与盒子之间有“边界”第44页/共86页第四十四页，共87页。2.1.8CSS样式(yngsh)定位定位(dngwi)类型由position属性指定position取值：absolute和relative指定定位(dngwi)类型后，可用下列属性来提供具体位置left：左边的位置偏移right:右边的位置偏移top：顶部的位置偏移bottom：底部的位置偏移第45页/共86页第四十五页，共87页。定位(dngwi)说明positon取值absolute时，表示相对于父元素；position取

22、值relative时，表示相对于自身left取值25px，absolute下，元素左边将偏离父元素25像素(xins)；relative下，元素左边距离自身原始位置偏移25像素(xins)absolute示例(shl)1absolute示例2第46页/共86页第四十六页，共87页。2.1.9CSS样式(yngsh)display样式属性display，描述元素如何显示(xinsh)取值：block，inline，list-item，none理解：元素在网页上的显示(xinsh)占据一块矩形区域（盒模式），display属性控制该矩形区域如何显示(xinsh)block：使元素显示(xinsh)

23、在下一行none：使得元素隐藏不显示(xinsh)示例(shl)第47页/共86页第四十七页，共87页。2.1.10CSS样式(yngsh)的继承示例(shl) body font-family:微软雅黑,楷体(kit),宋体; 你好，欢迎光临饮料铺!卡布奇诺，15元来自意大利的咖啡，口味香浓绿茶，10元来自中国的茶饮，清凉爽口里嵌套的元素继承了body的字体样式第48页/共86页第四十八页，共87页。继承( jchng)的覆盖 body font-family:微软雅黑,楷体,宋体; p font-family: 华文(hu wn)行楷,微软雅黑; 你好，欢迎光临饮料(ynlio)铺!卡布奇

24、诺，15元来自意大利的咖啡，口味香浓绿茶，10元来自中国的茶饮，清凉爽口p的字体样式覆盖从body继承的字体样式示例第49页/共86页第四十九页，共87页。在CSS里，被应用的样式规则总是最具体的比如，如果(rgu)有一个样式，定义了一个更具体的，则浏览器会执行更具体的那条样式 body font-family:微软雅黑,楷体,宋体; p font-family: 华文(hu wn)行楷,微软雅黑; 第50页/共86页第五十页，共87页。CSS样式(yngsh)继承的说明一个(y)元素的CSS样式属性，（部分地）会被嵌套在其内的元素（子孙元素）所继承继承的样式可以被子孙元素重新定义的相同样式所

25、覆盖哪些属性可以继承？主要是字体相关的样式（如字体、颜色、大小、粗斜体等）其它大部分属性不被继承如边框、位置等根据理解，动手验证，不用死记硬背示例(shl)第51页/共86页第五十一页，共87页。二、CSS细节(xji)CSS样式(yngsh)CSS选择符CSS的引入方式CSS样式(yngsh)的级联第52页/共86页第五十二页，共87页。2.2CSS选择符CSS语句中的选择符（selector)定义了样式应用的场所（对象），即受样式影响(yngxing)的是哪些HTML元素三种主要类型的选择符：HTML标记选择符class（类）选择符ID选择符理解理解(lji)第53页/共86页第五十三页，

26、共87页。HTML标记选择符就是标记选择符就是HTML标记（不加标记（不加），如：），如：p，div，body如果在如果在CSS中将某个中将某个HTML标记定义标记定义(dngy)成选择符，则在成选择符，则在CSS所应用的网页所应用的网页中，所有的这种中，所有的这种HTML标记都按照相应的样式进行显示标记都按照相应的样式进行显示示例(shl)2.2.1HTML标记(bioj)选择符第54页/共86页第五十四页，共87页。2.2.2类（class）选择符用HTML标记比如段落作为HTML选择符定义的样式规则，将影响所有段落，如果想采用不同样式，可以创建(chungjin)不同的样式类，通过类选择

27、符应用不同样式类第55页/共86页第五十五页，共87页。定义：选择符直接以点（.）开头，后跟类名(任意合法名称)，即“.类名”应用：类选择符根据HTML标记的class属性进行选择，选择class属性等于(dngy)该“类名”的任何HTML标记 .类名(li mn) 样式1；样式2； 选择class属性为“类名”的任何(rnh)元素类选择符的定义和应用第56页/共86页第五十六页，共87页。类选择符的应用：使用(shyng)HTML标记的class属性 .style1 样式(yngsh) .style2 样式(yngsh) 段落内容1段落内容2示例class = “style1”class =

28、 “style2”选择class为“style1”的元素选择class为“style2”的元素第57页/共86页第五十七页，共87页。 .style 样式(yngsh); 段落(dunlu)内容选择(xunz)class为“style”的任何元素示例 层内容类选择符选择类选择符选择class属性等于该类名的属性等于该类名的任何元素任何元素第58页/共86页第五十八页，共87页。2.2.3ID选择符id：HTML标记（元素）的可选属性，一个HTML元素可以设置id属性值，标识该HTML元素HTML标记（元素）的name属性在一个页面中，id值是唯一(wiy)的，name属性值可以重复 段落(du

29、nlu)内容 段落(dunlu)内容第59页/共86页第五十九页，共87页。ID和NAME 第60页/共86页第六十页，共87页。ID选择符如果一个HTML标记设置(shzh)了id属性，可以通过“id选择符”设置(shzh)该HTML标记的样式ID选择符定义和应用定义：以（#）开头后跟ID值，即“#ID值”应用：ID选择符根据HTML标记的id属性进行选择，选择id属性值等于该“ID值”的任意一个元素第61页/共86页第六十一页，共87页。 #style 样式(yngsh); 段落(dunlu)内容HTML标志可以有id属性，值为任意合法(hf)名称示例选择id为“style”的任意一个元素

30、第62页/共86页第六十二页，共87页。选择符小结(xioji)类选择符和ID选择符:一个页面，类选择符可以重复使用，多个HTML标记的class属性值是可以相同的一个页面中，HTML标记的ID值是唯一的，ID选择符通常用于为某一个特定的HTML元素(yuns)设置样式示例(shl)第63页/共86页第六十三页，共87页。选择符小结(xioji)三种选择符:HTML标记(bioj)选择符(标记(bioj)名不加)根据HTML标记(bioj)名进行选择类选择符(用.定义)根据HTML标记(bioj)的class属性进行选择ID选择符(用#定义)根据HTML标记(bioj)的id属性进行选择第64

31、页/共86页第六十四页，共87页。课堂练习，问以下(yxi)选择符的含义： table 样式(yngsh) td .td #TitlePanel 第65页/共86页第六十五页，共87页。2.2.4选择符的进一步学习(xux)组合选择器可以在一条CSS语句中定义(dngy)若干个选择器，每个选择器之间用逗号（，）分隔 p,h1,h2color:red; font-weight:bold; 元素的文本(wnbn)内容都为红色，粗体示例第66页/共86页第六十六页，共87页。选择符的进一步学习(xux)关联选择(xunz)器只选择(xunz)特定元素的子孙元素 div pcolor:red; fon

32、t-weight:bold; 只选择嵌套在div元素(yun s)里的p元素(yun s)两者之间以空格进行分隔第67页/共86页第六十七页，共87页。htmlheadbodytitledivpp div p color:red; font-weight:bold; 选择(xunz)不选择不选择(xunz)示例(shl)第68页/共86页第六十八页，共87页。htmlbodypp .style p color:red; font-weight:bold; 选择(xunz)选择(xunz)class为”style”的元素内嵌套的p元素不选择不选择(xunz)第69页/共86页第六十九页，共87页

33、。htmlbodypp #style p color:red; font-weight:bold; 选择(xunz)id为”style“的元素内嵌套的p元素第70页/共86页第七十页，共87页。课堂练习，问以下选择符的含义(hny)：学习网页源码时，能看懂各种选择符的含义(hny) .grid .grid table #grid table 新浪首页源文件中的CSS .grid,table 要求要求(yoqi) .grid table td 第71页/共86页第七十一页，共87页。选择符的进一步学习(xux)伪类选择器：对同一个HTML元素(yuns)的各种状态的一种定义方式比如：对于超链接（

34、）的正常状态、访问过的状态、光标移动上去的状态常用伪类选择器：a:hover光标移动到超链接上时的状态a:visited超链接访问过后的状态示例(shl)第72页/共86页第七十二页，共87页。二、CSS细节(xji)CSS样式(yngsh)CSS选择符CSS的引入方式CSS样式(yngsh)的级联第73页/共86页第七十三页，共87页。2.3应用CSS样式的不同(btn)方式HTML文档内定义内部(nib)样式表链接外部样式表嵌入外部样式表直接定义HTML标记的style属性（内联样式）第74页/共86页第七十四页，共87页。2.3.1HTML文档内定义(dngy)内部样式表 css pco

35、lor:red; 第一段文字(wnz) 只在该页面(y min)内有效第75页/共86页第七十五页，共87页。2.3.2链接(linji)外部样式表在文件里(后缀名为css)定义各种样式规则，页面(ymin)中创建到该文件的外部链接bodybackground-color:#d2b48c;border:10px solid gray;padding:20px;font-family:微软雅黑;蓝色部分(b fen)写在单独的样式文件（后缀名为css)文件里不需要标记一个样式文件可被多个文档引入样式文件示例第76页/共86页第七十六页，共87页。 css . 之间的标记(bioj)链接外部样式文

36、件相对(xingdu)或绝对地址链接示例1链接示例2链接外部样式文件表第77页/共86页第七十七页，共87页。2.3.3嵌入(qinr)外部样式表定义好的外部样式表还可以通过import命令嵌入在页面中，该命令通常放置(fngzh)在标记之间旧版浏览器不支持（IE6及以下）import url(样式(yngsh)文件名.css)；相对或绝对地址示例第78页/共86页第七十八页，共87页。内联样式表内联样式直接(zhji)定义HTML标记的style属性 css 段落(dunlu)文字 HTML标记(bioj)的style属性style属性值 ：（若干条）css样式内联样式只针对该元素有效第79

37、页/共86页第七十九页，共87页。二、CSS细节(xji)CSS样式(yngsh)CSS选择符CSS的引入方式CSS样式(yngsh)的级联第80页/共86页第八十页，共87页。2.4CSS样式(yngsh)的级联（层叠）CSS（CascadeStyleSheet）级联（层叠）样式表同一个元素，可能会被多个“选择符”选中，即存在着多个级联（层叠）的样式表影响(yngxing)该元素的样式如果一个元素被多个选择符选择，对于同一条样式，在CSS里，被应用的样式规则总是最具体的第81页/共86页第八十一页，共87页。 body font-family:微软雅黑,楷体(kit),宋体; p font-

38、family: 华文行楷,微软雅黑; 你好，欢迎光临饮料铺!卡布奇诺，15元来自意大利的咖啡，口味香浓绿茶，10元来自中国的茶饮，清凉(qngling)爽口p元素(yun s)被body和p选择符同时选中对于同一条样式font-family,应用最具体的第82页/共86页第八十二页，共87页。htmlbodypp pcolor:green; font-size:24px; .style p color:red; font-size:40px; 被p选择符选中字体(zt)绿颜色,24像素被p和.style p同时(tngsh)选中应用(yngyng)最具体规则：字体红色,大小40px示例第83页

39、/共86页第八十三页，共87页。htmlbodypp pcolor:green; font-size:24px; font-style:italic; .style p color:red; font-size:30px; font-weight:bold; 示例(shl)被p和.style p同时(tngsh)选中应用(yngyng)最具体规则：字体红色，大小40px斜体和粗体显示第84页/共86页第八十四页，共87页。CSS综合练习(linx)&作业阅读(yud)所提供bookshop网站页面，描述CSS是如何修饰页面效果的，包括各选择符应用在哪些元素，以及应用的样式效果有不明白处，在作业中进行说明第85页/共86页第八十五页，共87页。感谢您的观看(gunkn)！第86页/共86页第八十六页，共87页。内容(nirng)总结HTML总结&回顾。标记(bioj)名和属性名小写。能让网页制作者有效地定制、改善网页的显示效果。1.3.4 第一个CSS说明术语总结。CSS将HTML格式与内容分离，有利于对内容进行统一的格式设置和修改。font-family:微软雅黑,楷体,宋体。font-family:微软雅黑,楷体,宋体。背景属性包括背景颜色、背景图像以及背景图像的控制。在文件里(后缀名为css)定义各种样式规则，页面中创建到该文件的外部链接第八十七页，共87页。