CSS基本选择器实用.pptx

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