CSS技术基本概述实用教案

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

2、action属性） 数据发送的形式（method属性：GETPOST）第2页/共86页第二页，共87页。本篇内容(nirng) CSS概述(i sh) CSS细节第3页/共86页第三页，共87页。说明(shumng) 本篇教学目的在于(ziy)css入门，能够运用css的几种基本用法，能够看懂和理解比较复杂一些的css用法第4页/共86页第四页，共87页。一、CSS概述(i sh) CSS定义 CSS的产生(chnshng) 第一个CSS示例 CSS的好处第5页/共86页第五页，共87页。1.1 CSS定义(dngy) CSS（Cascade Style Sheet） 级联（层叠）样式表 是由

3、W3C组织制定的一种用来定义(dngy)样式规则（如字体、颜色和位置）的语言 能让网页制作者有效地定制、改善网页的显示效果第6页/共86页第六页，共87页。1.2 CSS的产生(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)的构

4、成： 样式 应用样式的场所第9页/共86页第九页，共87页。 CSS语句的构成： 样式 应用(yngyng)样式的场所 pcolor : red; 在这里，页面中的 元素是应用样式的场所(chn su)，CSS中，元素名称两边不加属性名color代表(dibio)字体颜色属性值red一条样式样式属性名和值之间用冒号（：）分隔，每条样式最后加一个分号（；）应用于 元素的所有样式放置在一对大括号之间样式包括：样式属性名样式属性值第10页/共86页第十页，共87页。 CSS语句的构成： 样式(yngsh)（属性名、属性值） 应用样式(yngsh)的场所 pcolor : red; 这条CSS语句(y

5、j)的作用：选择页面上的所有元素，将内容的字体颜色设置为red称之为p选择符也叫做(jiozu)“选择符”第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页。

6、css pcolor:red; 第一段文字(wnz) 在HTML页面中直接引入CSS，需要在元素里增加一对样式(yngsh)开始和结束标记（）标记(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

7、 : 32px; p color : red; font-size : 32px; 包含多条样式(yngsh)时，习惯第一种写法第16页/共86页第十六页，共87页。1.3.4 第一个CSS说明(shumng)术语总结 CSS语句的构成： （若干条）样式 样式的属性(shxng)名 样式的属性(shxng)值 应用样式的场所选择符 pcolor : red; p选择符一条(y tio)样式样式属性名样式属性值第17页/共86页第十七页，共87页。1.4 CSS的好处(ho chu) CSS将HTML格式与内容分离，有利于对内容进行统一的格式设置和修改 CSS样式相比HTML格式化标记(bioj

8、)的功能更加丰富和强大不采用(ciyng)CSS示例采用CSS示例第18页/共86页第十八页，共87页。二、CSS细节(xji) CSS样式(yngsh) CSS选择符 CSS的引入方式 CSS样式(yngsh)的级联第19页/共86页第十九页，共87页。2.1 CSS样式(yngsh) HTML中的格式化标记（如等）功能有限，CSS样式的功能更加强大 CSS包括各种样式属性，用于控制字体、颜色、对齐方式和边距以及位置等 CSS样式种类繁多，无须(wx)一一记忆第20页/共86页第二十页，共87页。2.1.1 CSS样式(yngsh)字体 字体的样式属性主要包括文字(wnz)的字体、大小、颜色

9、、显示效果等示例(shl)向雷锋同志学习！仅通过HTML如何实现该效果第21页/共86页第二十一页，共87页。字体样式(yngsh)的说明 font-family：指定(zhdng)字体 可以指定(zhdng)多个字体，字体之间以逗号（,)分隔 按顺序依次查找计算机中有无指定(zhdng)的字体，有则显示，无则查找下一个，如果都没有查到，采用默认字体font-family:微软雅黑,楷体(kit),宋体;第22页/共86页第二十二页，共87页。字体(zt)样式的说明 font-size：字体大小 常用单位(dnwi)：px（像素），pt（点） 40px：px代表像素单位(dnwi)，单位(dn

10、wi)通常不要省略 font-size: 40px; 第23页/共86页第二十三页，共87页。字体样式(yngsh)的说明 color：字体颜色 可以用预定义的颜色名称 可以用十六进制(sh li jn zh)代码 颜色拾取 color:red; color:#ff0000; 第24页/共86页第二十四页，共87页。字体(zt)样式的说明 font-weight：控制字体的粗细 取值：normal, bold, lighter, bolder，默认normal font-style：控制文字倾斜(qngxi) 取值：italic，normal，默认normal text-decoration：

11、控制下划线等 取值：underline（下划线），line-through（中划线），overline（上划线） font-weight: bold; font-style:italic; text-decoration:underline; 示例(shl)第25页/共86页第二十五页，共87页。CSS字体(zt)样式属性含义属性值font-family字体各种字体font-style字体样式italic、oblique、normalfont-variant小体大写small-capsfont-weight字体粗细normal、bold、bolder、lighterfont-size字体大小a

12、bsolute、relative、%color字体颜色颜色值第26页/共86页第二十六页，共87页。2.1.2 CSS样式(yngsh)背景 背景属性包括背景颜色、背景图像以及背景图像的控制(kngzh) background-color：设置元素的背景色示例(shl) background-color: silver;第27页/共86页第二十七页，共87页。CSS样式(yngsh)背景 background-image：设置元素的背景图像 background-repeat：设置背景图像的重复 取值：no-repeat（不重复），repeat（在水平和垂直(chuzh)方向上重复），repe

13、at-x和repeat-y（分别在水平和垂直(chuzh)方向上重复），默认repeat background-image: url( “” ) ; 示例(shl)可以用相对地址或绝对地址示例第28页/共86页第二十八页，共87页。CSS背景(bijng)样式属性含义属性值background-color背景色颜色值background-image背景图案图片路径(相对，绝对)background-repeat背景图案重复方式repeat-x | repeat-y | no-repeat| repeat第29页/共86页第二十九页，共87页。2.1.3 CSS样式(yngsh)文本 文本属性包

14、括对齐方式、文字间距、行距(hngj)等 text-align：设置文本的水平对齐方式 取值：left，center，right，默认left示例(shl) text-align: center;第30页/共86页第三十页，共87页。HTML的格式化用法(yn f) VS CSS CSS样式属性和HTML属性很多写法不完全一致，比如：text-align（CSS中），align（HTML标记属性） HTML中一些格式化标记，比如（粗体）（斜体）等，在CSS中，通过(tnggu)新的样式属性来展现 传统HTML中用于格式化的标记（，等）不再推荐使用，推荐采用CSS来实现 相比HTML格式化标记，

15、CSS提供的样式功能更加丰富第31页/共86页第三十一页，共87页。对比(dub)示例(shl) p font-family:微软雅黑,楷体(kit),宋体; color:red; font-size:32px; font-weight:bold; font-style:italic; text-decoration:underline; 第一段文字第二段文字第32页/共86页第三十二页，共87页。2.1.4 CSS样式(yngsh)边框 在CSS看来，HTML元素都有一个边框 CSS边框属性(shxng)设置元素边框的颜色、宽度、样式等第33页/共86页第三十三页，共87页。 border-

16、style（边框样式）：控制边框的外观 取值：none(无边框)，solid(实线)，dashed（虚线)，dotted（点线），double（双线），groove(凹槽)，inset（凹边），ridge（凸槽），outset（凸边(t bin)） border-color（边框颜色）： 取值：颜色名，或十六进制 border-width（边框宽度）： 通常采用像素单位示例(shl)第34页/共86页第三十四页，共87页。 border属性：通过该属性同时设置边框(binkung)样式、宽度、颜色 border: 5px solid green;多个值之间以空格分隔(fng)，多个值的顺序随意

17、示例(shl)第35页/共86页第三十五页，共87页。 定义(dngy)边框的一侧：可以定义(dngy)任何一侧(上、下、左、右）的边框的样式、宽度或颜色 border-top border-bottom border-left border-right 比如：定义(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;bord

18、er-top:10px dashed navy; 对于边框上侧：border-top样式(yngsh)覆盖了border样式(yngsh)第37页/共86页第三十七页，共87页。CSS边框(binkung)样式属性含义属性值border-width边框宽度（四边） 通常采用像素单位border-color边框颜色（四边） 颜色值border-style边框样式（四边） dotted | dash | solid | double | groove | ridge | inset | outsetborder边框所有属性border-top-width上边框宽度border-top-color上

19、边框颜色border-top-style上边框样式border-top 上边框所有属性第38页/共86页第三十八页，共87页。2.1.5 CSS样式(yngsh)高度和宽度 height和width属性控制元素矩形区域的大小 常用单位(dnwi)：px（像素），pt（点）示例(shl)width:200px;height:200px;第39页/共86页第三十九页，共87页。补白补白(bbi)2.1.6 CSS样式(yngsh)补白 元素(yun s)内容与边框之间有一层“补白”（也叫“填充”）元素内容区边框补白补白补白补白补白补白第40页/共86页第四十页，共87页。CSS样式(yngsh)补

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

21、h)边界margin属性控制元素(yun s)之间的边界示例(shl)属性含义属性值margin-top上边界常用单位像素margin-right右margin-bottom下margin-left左margin同时设置第43页/共86页第四十三页，共87页。 “盒模式”： CSS中，每个元素被看待成一个“盒子”box，这个(zh ge)盒子有“边框”，盒子内容与边框之间有“补白”，盒子与盒子之间有“边界”第44页/共86页第四十四页，共87页。2.1.8 CSS样式(yngsh)定位 定位(dngwi)类型由position属性指定 position取值：absolute和relative

22、指定定位(dngwi)类型后，可用下列属性来提供具体位置 left：左边的位置偏移 right: 右边的位置偏移 top：顶部的位置偏移 bottom：底部的位置偏移第45页/共86页第四十五页，共87页。定位(dngwi)说明 positon取值absolute时，表示相对于父元素；position取值relative时，表示相对于自身 left取值25px，absolute下，元素左边将偏离父元素25像素(xin s)； relative下，元素左边距离自身原始位置偏移25像素(xin s)absolute示例(shl)1absolute示例2第46页/共86页第四十六页，共87页。2.1

23、.9 CSS样式(yngsh)display 样式属性display，描述元素如何显示(xinsh) 取值：block，inline，list-item，none 理解：元素在网页上的显示(xinsh)占据一块矩形区域（盒模式），display属性控制该矩形区域如何显示(xinsh) block：使元素显示(xinsh)在下一行 none：使得元素隐藏不显示(xinsh)示例(shl)第47页/共86页第四十七页，共87页。2.1.10 CSS样式(yngsh)的继承示例(shl) body font-family:微软雅黑,楷体(kit),宋体; 你好，欢迎光临饮料铺!卡布奇诺，15元来自意

24、大利的咖啡，口味香浓绿茶，10元来自中国的茶饮，清凉爽口里嵌套的元素继承了body的字体样式第48页/共86页第四十八页，共87页。 继承( jchng)的覆盖 body font-family:微软雅黑,楷体,宋体; p font-family: 华文(hu wn)行楷,微软雅黑; 你好，欢迎光临饮料(ynlio)铺!卡布奇诺，15元来自意大利的咖啡，口味香浓绿茶，10元来自中国的茶饮，清凉爽口p的字体样式覆盖从body继承的字体样式示例第49页/共86页第四十九页，共87页。 在CSS里，被应用的样式规则总是最具体的 比如，如果(rgu)有一个样式，定义了一个更具体的，则浏览器会执行更具体

25、的那条样式 body font-family:微软雅黑,楷体,宋体; p font-family: 华文(hu wn)行楷,微软雅黑; 第50页/共86页第五十页，共87页。CSS样式(yngsh)继承的说明 一个(y )元素的CSS样式属性，（部分地）会被嵌套在其内的元素（子孙元素）所继承 继承的样式可以被子孙元素重新定义的相同样式所覆盖 哪些属性可以继承？ 主要是字体相关的样式（如字体、颜色、大小、粗斜体等） 其它大部分属性不被继承 如边框、位置等 根据理解，动手验证，不用死记硬背示例(shl)第51页/共86页第五十一页，共87页。二、CSS细节(xji) CSS样式(yngsh) CS

26、S选择符 CSS的引入方式 CSS样式(yngsh)的级联第52页/共86页第五十二页，共87页。2.2 CSS选择符 CSS语句中的选择符（selector)定义了样式应用的场所（对象），即受样式影响(yngxing)的是哪些HTML元素 三种主要类型的选择符： HTML标记选择符 class（类）选择符 ID选择符理解理解(lji)第53页/共86页第五十三页，共87页。 HTML标记选择符就是标记选择符就是HTML标记（不加标记（不加），如：），如：p，div，body 如果在如果在CSS中将某个中将某个HTML标记定义标记定义(dngy)成选择符，则在成选择符，则在CSS所应用的网页所

27、应用的网页中，所有的这种中，所有的这种HTML标记都按照相应的样式进行显示标记都按照相应的样式进行显示示例(shl)2.2.1 HTML标记(bioj)选择符第54页/共86页第五十四页，共87页。2.2.2 类（class）选择符 用HTML标记比如段落作为HTML选择符定义的样式规则，将影响所有段落，如果想采用不同样式，可以创建(chungjin)不同的样式类，通过类选择符应用不同样式类第55页/共86页第五十五页，共87页。 定义：选择符直接以点（.）开头，后跟类名(任意合法名称)，即“.类名” 应用：类选择符根据HTML标记的class属性进行选择，选择class属性等于(dngy)该

28、“类名”的任何HTML标记 .类名(li mn) 样式1；样式2； 选择class属性为“类名”的任何(rnh)元素类选择符的定义和应用第56页/共86页第五十六页，共87页。 类选择符的应用：使用(shyng)HTML标记的class属性 .style1 样式(yngsh) .style2 样式(yngsh) 段落内容1段落内容2示例class = “style1”class = “style2”选择class为“style1”的元素选择class为“style2”的元素第57页/共86页第五十七页，共87页。 .style 样式(yngsh); 段落(dunlu)内容选择(xunz)cla

29、ss为“style”的任何元素示例 层内容类选择符选择类选择符选择class属性等于该类名的属性等于该类名的任何元素任何元素第58页/共86页第五十八页，共87页。2.2.3 ID选择符 id： HTML标记（元素）的可选属性，一个HTML元素可以设置id属性值，标识该HTML元素 HTML标记（元素）的name属性 在一个页面中，id值是唯一(wi y)的，name属性值可以重复 段落(dunlu)内容 段落(dunlu)内容第59页/共86页第五十九页，共87页。ID和NAME 第60页/共86页第六十页，共87页。ID选择符 如果一个HTML标记设置(shzh)了id属性，可以通过“id

30、选择符”设置(shzh)该HTML标记的样式 ID选择符定义和应用 定义：以（#）开头后跟ID值，即“#ID值” 应用：ID选择符根据HTML标记的id属性进行选择，选择id属性值等于该“ID值”的任意一个元素第61页/共86页第六十一页，共87页。 #style 样式(yngsh); 段落(dunlu)内容HTML标志可以有id属性，值为任意合法(hf)名称示例选择id为“style”的任意一个元素第62页/共86页第六十二页，共87页。选择符小结(xioji) 类选择符和ID选择符: 一个页面，类选择符可以重复使用，多个HTML标记的class属性值是可以相同的 一个页面中，HTML标记的

31、ID值是唯一的，ID选择符通常用于为某一个特定的HTML元素(yun s)设置样式示例(shl)第63页/共86页第六十三页，共87页。选择符小结(xioji) 三种选择符: HTML标记(bioj)选择符(标记(bioj)名不加) 根据HTML标记(bioj)名进行选择 类选择符(用.定义) 根据HTML标记(bioj)的class属性进行选择 ID选择符(用#定义) 根据HTML标记(bioj)的id属性进行选择第64页/共86页第六十四页，共87页。 课堂练习，问以下(yxi)选择符的含义： table 样式(yngsh) td .td #TitlePanel 第65页/共86页第六十五

32、页，共87页。2.2.4 选择符的进一步学习(xux) 组合选择器 可以在一条CSS语句中定义(dngy)若干个选择器，每个选择器之间用逗号（，）分隔 p,h1,h2color:red; font-weight:bold; 元素的文本(wnbn)内容都为红色，粗体示例第66页/共86页第六十六页，共87页。选择符的进一步学习(xux) 关联选择(xunz)器 只选择(xunz)特定元素的子孙元素 div pcolor:red; font-weight:bold; 只选择嵌套在div元素(yun s)里的p元素(yun s)两者之间以空格进行分隔第67页/共86页第六十七页，共87页。htmlh

33、eadbodytitledivpp 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页。htmlbodypp #style p color:red; font-weight:bold; 选择(xunz)id为”style“的元素内嵌套的p元素第70

34、页/共86页第七十页，共87页。 课堂练习，问以下选择符的含义(hny)： ：学习网页源码时，能看懂各种选择符的含义(hny) .grid .grid table #grid table 新浪首页源文件中的CSS .grid,table 要求要求(yoqi) .grid table td 第71页/共86页第七十一页，共87页。选择符的进一步学习(xux) 伪类选择器： 对同一个HTML元素(yun s)的各种状态的一种定义方式 比如：对于超链接（）的正常状态、访问过的状态、光标移动上去的状态 常用伪类选择器： a:hover 光标移动到超链接上时的状态 a:visited 超链接访问过后的状

35、态示例(shl)第72页/共86页第七十二页，共87页。二、CSS细节(xji) CSS样式(yngsh) CSS选择符 CSS的引入方式 CSS样式(yngsh)的级联第73页/共86页第七十三页，共87页。2.3 应用CSS样式的不同(b tn)方式 HTML文档内定义内部(nib)样式表 链接外部样式表 嵌入外部样式表 直接定义HTML标记的style属性（内联样式）第74页/共86页第七十四页，共87页。2.3.1 HTML文档内定义(dngy)内部样式表 css pcolor:red; 第一段文字(wnz) 只在该页面(y min)内有效第75页/共86页第七十五页，共87页。2.3

36、.2 链接(lin ji)外部样式表 在文件里(后缀名为css)定义各种样式规则，页面(y min)中创建到该文件的外部链接bodybackground-color:#d2b48c;border:10px solid gray;padding:20px;font-family:微软雅黑;蓝色部分(b fen)写在单独的样式文件（后缀名为css)文件里不需要标记一个样式文件可被多个文档引入样式文件示例第76页/共86页第七十六页，共87页。 css . 之间的标记(bioj)链接外部样式文件相对(xingdu)或绝对地址链接示例1链接示例2链接外部样式文件表第77页/共86页第七十七页，共87页。2.3.3 嵌入(qin r)外部样式表 定义好的外部样式表还可以通过import命令嵌入在页面中，该命令通常放置(fngzh)在标记之间 旧版浏览器不支持（IE6及以下）import url(样式(yngsh)文件名.css)；相对或绝对地址示例第78页/共86页第七十八页，共87页。 内联样式表 内联样式直接(zhji)定义HTML标记的style属性 css 段落(dunlu)文字 HTML标记(bioj)的style属性style属性值 ：（若干条）css样式内联样式只针对