《CSS基本选择器资料实用实用教案》由会员分享，可在线阅读，更多相关《CSS基本选择器资料实用实用教案（35页珍藏版）》请在金锄头文库上搜索。
1、项目项目(xingm)(xingm)一：制作一：制作个人主页个人主页项目描述：为了展示自己的才艺，记录自己的心事，分享自己的兴趣爱好，某同学决定制作一个个人网站。项目目标：能够使用（X）HTML搭建网页的结构；学会在HTML中引入CSS；能够对文字和图片进行简单的修饰。项目任务：任务1编写网站首页结构任务2超链接到其它(qt)页面任务3实现网站首页的文字效果任务4实现首页和二级页面的背景效果第1页/共34页第一页，共35页。任务任务(rn wu)(rn wu)三：实现个人主页的文字效果三：实现个人主页的文字效果技能目标：1、能够在html页中以多种方式引入CSS；2、能够对文本进行修饰知识目标
2、：了解CSS的概念；CSS引入网页的方法CSS语法(yf)规则，命名规则与文字相关的CSS属性名、属性值第2页/共34页第二页，共35页。相关相关(xinggun)(xinggun)知识：知识：CSS的概念和语法1.1基本CSS选择器1.2在HTML中使用CSS的方法1.3复合选择器1.4CSS的继承特性1.5第3页/共34页第三页，共35页。CSS概念CascadingStyleSheet层叠样式表。CSS作用在网页中实现网页结构内容和表现形式的分离，将原来由HTML语言所承担的一些与结构无关的功能剥离出来(chli)，改由CSS来完成。1.1 CSS1.1 CSS的概念(ginin)(gi
3、nin)和语法第4页/共34页第四页，共35页。CSS的标准目前有三个CSS标准。CSS1、CSS2和CSS3。CSS1于1996年12月通过，CSS2则于1998年5月通过。CSS3在CSS2的基础上增加(zngji)了很多新的样式和效果。但现在支持CSS3的浏览器版本要求较高。CSS文档中大小写不敏感1.1CSS的概念(ginin)和语法第5页/共34页第五页，共35页。在介绍( jisho)CSS语法之前，先思考一个生活中的问题。1.1CSS的概念(ginin)和语法第6页/共34页第六页，共35页。张飞身高:185cm;体重:105kg;性别(xngbi):男;性格:暴躁;民族:汉族;
4、第7页/共34页第七页，共35页。这个表实际上是由3个要素组成的，即姓名(xngmng)、属性和属性值。第8页/共34页第八页，共35页。CSS的作用就是设置网页的各个(gg)组成部分的表现形式。因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致如下：第9页/共34页第九页，共35页。2级标题字体:宋体;大小:15像素;颜色(yns):红色;装饰:下划线第10页/共34页第十页，共35页。再进一步，如果把上面的表格用英语(yny)写出来：h2font-family:宋体;font-size:15px;color:red;text-decoration:underline;第
5、11页/共34页第十一页，共35页。CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由3个基本( jbn)部分“对象”、“属性”和“值”组成的。第12页/共34页第十二页，共35页。CSS基本语法选择符属性名1:属性值1;属性名2:属性值2;选择符：指被设样式的对象：表示此符号(fho)内的一组样式是对指定对象设置的。属性名:属性值：具体的样式CSS注释：/*被注释内容*1.1CSS的概念(ginin)和语法注意(zh y)冒号和分号第13页/共34页第十三页，共35页。1.2 1.2 基本基本(j
6、bn)CSS(jbn)CSS选择器选择器在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个(y)专门的名称选择器（selector）。第14页/共34页第十四页，共35页。1.2.1 1.2.1 标记标记(bioj)(bioj)选择器选择器标记选择器中的“标记”指XHTML中的标记。CSS可以定义几乎所有HTML标记中内容(nirng)的样式。例如body、h1-h6、p、a、div、ul等。例：对HTML语言中的分段标记P进行字体定义： p font-family: 宋体; 第15页/共34页第十五页，共35页。1.2.2 1.2.2 类别类别(li
7、bi)(libi)选择器选择器表示方法：在字符的前面加前缀句点“.”“.”来表示类别选择器。引用方法：在此处定义的类名在页面中的元素(yun s)(yun s)用classclass属性的值来引用。 例：定义了一个类选择器title1title1，用来定义字体的大小：.title1 font-size:12px; .title1 font-size:12px; 在页面中使用定义的样式：学校网站开发 注意：类名不能以数字开头。CSSCSS的类名只能包含字母和数字。第16页/共34页第十六页，共35页。class选择器.redcolor:red;/*红色(hngs)*/font-size:18px
8、;/*文字大小*/第17页/共34页第十七页，共35页。.greencolor:green;/*绿色(ls)*/font-size:20px;/*文字大小*/第18页/共34页第十八页，共35页。class选择器1class选择器2h3同样(tngyng)适用第19页/共34页第十九页，共35页。1.2.3 ID1.2.3 ID选择器选择器表示方法：字符前加“#”“#”。引用方法：在元素的idid属性中引用。例如：title2 font-size:larger; font-title2 font-size:larger; font-weight:bold; weight:bold; 这个(zh
9、 ge)CSS(zh ge)CSS规则只能用在具有这个(zh (zh ge)idge)id属性的元素上， 学校网站开发第20页/共34页第二十页，共35页。练习：若html中有如下代码：我是页页头部我是正文部分若想将以上文字的颜色(yns)设置为红色，则需要怎样设置选择器？第21页/共34页第二十一页，共35页。1.2.4 1.2.4 通用通用(tngyng)(tngyng)选择器选择器表示(biosh)方法：*作用：指定的样式可应用在页面里的所有元素。例如：把页面中所有支持字体属性的样式都设为“宋体”：*font-family:宋体;第22页/共34页第二十二页，共35页。1.3 1.3 在
10、在HTMLHTML中使用中使用(shyng)CSS(shyng)CSS的方法的方法 1.3.1 行内(xn ni)式在HTML标记中使用style属性，直接写入需要定义的样式。例如：内嵌样式表 其中各个属性之间用“;”隔开，属性与属性值之间用“:”隔开。 第23页/共34页第二十三页，共35页。正文(zhngwn)内容1正文(zhngwn)内容2正文(zhngwn)内容3第24页/共34页第二十四页，共35页。1.3.2 1.3.2 内嵌式内嵌式在HTML文档头部标记(bioj)中，用标记(bioj)来存放样式表代码。例如：在标记(bioj)中加入样式表代码，书写格式如下：选择器属性名a：属性
11、值a；属性名b：属性值b 第25页/共34页第二十五页，共35页。页面(ymin)标题pcolor:#0000FF;font-size:25px;第26页/共34页第二十六页，共35页。这是第1行正文(zhngwn)内容这是第2行正文(zhngwn)内容这是第3行正文(zhngwn)内容第27页/共34页第二十七页，共35页。1.3.3 1.3.3 外部外部(wib)(wib)样式表的引入样式表的引入网站中有单独的CSS文件（扩展名为CSS），在主文档中调用CSS文件。调用的方法:1、链接式在页面的头部标记中加入使用link标记及其属性(shxng)格式：第28页/共34页第二十八页，共35页
12、。2、导入式在页面的头部标记中使用(shyng)import使用(shyng)方法：importurl(“样式文件名);第29页/共34页第二十九页，共35页。1.4文字常用(chnyn)的属性名、属性值1、文字属性字体（font-family）文字大小（font-size）文字样式（font-style）文字粗细（font-weight）2、文本属性首行缩进(su jn)（text-indent）文本颜色（color）文本对齐属性（text-align）文本修饰（text-decoration）第30页/共34页第三十页，共35页。知识点小结(xioji)CSS规则(guz)格式？CSSCS
13、S选择器的基本(jbn)(jbn)类型？CSSCSS引入的方式？第31页/共34页第三十一页，共35页。任务(rnwu)实践参考步骤(bzhu)：打开个人主页的首页文件“index.html”。使用链接式添加样式表。给各文字部分添加ID或class。使用合适的选择器编写文字的样式规则。测试首页。第32页/共34页第三十二页，共35页。小结(xioji)根据网页内容和个人习惯不同，同一个页面的样式表中的选择器的使用也不相同。在编写代码时遵循的原则是简洁( jinji)、易维护。考虑到易维护性，在做网站时一般先将网页的结构做出来，然后再写样式。这样可避免重复写样式规则。第33页/共34页第三十三页，共35页。感谢您的欣赏(xnshng)！第34页/共34页第三十四页，共35页。内容(nirng)总结项目一：制作个人主页。任务1编写网站首页结构。任务2超链接到其它页面。任务3实现网站首页的文字效果。任务4实现首页和二级页面的背景效果。CSS语法规则，命名规则。表示方法：在字符的前面加前缀句点“.”来表示类别选择器。引用方法：在元素的id属性中引用。这个CSS规则只能用在具有这个id属性的元素上，。若想将以上文字的颜色设置为红色，则需要(xyo)怎样设置选择器。感谢您的欣赏第三十五页，共35页。
