CSS基本选择器...ppt

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