CSS基本选择器...ppt

《CSS基本选择器...ppt》由会员分享，可在线阅读，更多相关《CSS基本选择器...ppt（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 网站前台布局与设计网站前台布局与设计项目描述：项目描述：为了展示自己的才艺，记录自己的心事，分享自己的兴趣爱好，某同学决定制作一个个人网站。项目目标：项目目标：能够使用（X）HTML搭建网页的结构；学会在HTML中引入CSS；能够对文字和图片进行简单的修饰。项目任务：项目任务：任务1编写网站首页结构任务任务2 2超链接到其它页面超链接到其它页面任务3实现网站首页的文字效果任务4实现首页和二级页面的背景效果任务三：实现个人主页的文字效果任务三：实现个人主页的文字效果技能目标：1、能够在、能够在html页中以多种方式引入页中以多种方式引入CSS；2、能够对文本进行修饰、能够对文本进行修饰 知识目

2、标：1.了解了解CSS的概念；的概念；2.CSS引入网页的方法引入网页的方法3.CSS语法规则，命名规则语法规则，命名规则4.与文字相关的与文字相关的CSS属性名、属性值属性名、属性值 相关知识：相关知识：CSS的概念和语法的概念和语法1.1基本基本CSS选择器选择器1.2在在HTML中使用中使用CSS的方法的方法1.3复合选择器复合选择器1.4CSS的继承特性的继承特性1.5 CSSCSS概念概念 Cascading Style SheetCascading Style Sheet层叠样式表。层叠样式表。CSSCSS作用作用在网页中实现网页结构内容和表现形式的分离，将原在网页中实现网页结构内

3、容和表现形式的分离，将原来由来由HTMLHTML语言所承担的一些与结构无关的功能剥语言所承担的一些与结构无关的功能剥离出来，改由离出来，改由CSSCSS来完成。来完成。1.1 CSS1.1 CSS的概念和语法的概念和语法CSSCSS的标准的标准目前有三个目前有三个CSSCSS标准。标准。CSS1CSS1、CSS2CSS2和和CSS3CSS3。CSS1CSS1于于19961996年年1212月通过，月通过，CSS2CSS2则于则于19981998年年5 5月通过。月通过。CSS3CSS3在在CSS2CSS2的基础上增加了很多新的样式和效果。但现在的基础上增加了很多新的样式和效果。但现在支持支持C

4、SS3CSS3的浏览器版本要求较高。的浏览器版本要求较高。CSSCSS文档中大小写不敏感文档中大小写不敏感1.1 CSS的概念和语法的概念和语法 在介绍在介绍CSSCSS语法之前，先思考一个生活中的问语法之前，先思考一个生活中的问题。题。1.1 CSS的概念和语法的概念和语法 张飞张飞 身高身高:185cm;:185cm;体重体重:105kg;:105kg;性别性别:男男;性格性格:暴躁暴躁;民族民族:汉族汉族;这个表实际上是由这个表实际上是由3 3个要素组成的，即姓名、个要素组成的，即姓名、属性和属性值。属性和属性值。CSSCSS的作用就是设置网页的各个组成部分的表的作用就是设置网页的各个组

5、成部分的表现形式。现形式。因此，如果把上面的表格换成描述网页上一个因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致如下：标题的属性表，可以设想应该大致如下：2 2级标题级标题 字体字体:宋体宋体;大小大小:15:15像素像素;颜色颜色:红色红色;装饰装饰:下划线下划线 再进一步，如果把上面的表格用英语写出来：再进一步，如果把上面的表格用英语写出来：h2h2 font-family:font-family:宋体宋体;font-size:15px;font-size:15px;color:red;color:red;text-decoration:underline;text

6、-decoration:underline;CSSCSS的思想就是首先指定对什么的思想就是首先指定对什么“对象对象”进行进行设置，然后指定对该对象的哪个方面的设置，然后指定对该对象的哪个方面的“属性属性”进进行设置，最后给出该设置的行设置，最后给出该设置的“值值”。因此，概括来说，因此，概括来说，CSSCSS就是由就是由3 3个基本部分个基本部分“对象对象”、“属性属性”和和“值值”组成的。组成的。CSSCSS基本语法基本语法 选择符选择符 属性名属性名1:1:属性值属性值1;1;属性名属性名2:2:属性值属性值2;2;选择符：选择符：指被设样式的对象指被设样式的对象 ：表示此符号内的一组样式

7、是对指定对象设置的。表示此符号内的一组样式是对指定对象设置的。属性名属性名:属性值属性值 ：具体的样式具体的样式CSSCSS注释：注释：/*/*被注释内容被注释内容 *1.1 CSS的概念和语法的概念和语法注意冒号和分号注意冒号和分号1.2 1.2 基本基本CSSCSS选择器选择器 在在CSSCSS的的3 3个组成部分中，个组成部分中，“对象对象”是很重要的，是很重要的，它指定了对哪些网页元素进行设置，因此，它有一它指定了对哪些网页元素进行设置，因此，它有一个专门的名称个专门的名称选择器（选择器（selectorselector）。）。1.2.1 1.2.1 标记选择器标记选择器标记选择器中的

8、标记选择器中的“标记标记”指指XHTMLXHTML中的标记。中的标记。CSSCSS可以定义几乎所有可以定义几乎所有HTMLHTML标记中内容的样式。例如标记中内容的样式。例如bodybody、h1-h6h1-h6、p p、a a、divdiv、ulul等。等。例：对例：对HTMLHTML语言中的分段标记语言中的分段标记P P进行字体定义：进行字体定义：p font-family:p font-family:宋体宋体;1.2.21.2.2 类别选择器类别选择器表示方法：在字符的前面加前表示方法：在字符的前面加前缀句点句点“.”来表示来表示类别选择器。器。引用方法：在此引用方法：在此处定定义的的类

9、名在名在页面中的元素用面中的元素用classclass属性的属性的值来来引用。引用。例：定例：定义了一个了一个类选择器器title1title1，用来定，用来定义字体的大小：字体的大小：.title1 font-size:12px;.title1 font-size:12px;在在页面中使用定面中使用定义的的样式：式：学校网站开学校网站开发 注意：注意：类名不能以数字开名不能以数字开头。CSSCSS的的类名只能包含字母和数字。名只能包含字母和数字。class class选择器选择器 style type=text/.red .red color:redcolor:red;/*/*红色红色*/f

10、ont-size:18px;font-size:18px;/*/*文字大小文字大小*/.green.green color:greencolor:green;/*/*绿色绿色*/font-size:20px;/*font-size:20px;/*文字大小文字大小*/class class选择器选择器11 class class选择器选择器22 h3 h3同样适用同样适用 1.2.3 ID1.2.3 ID选择器选择器表示方法：字符前加表示方法：字符前加“#”。引用方法：在元素的引用方法：在元素的idid属性中引用。属性中引用。例如：例如：title2 font-title2 font-size:

11、largersize:larger;font-;font-weight:boldweight:bold;这个这个CSSCSS规则只能用在具有这个规则只能用在具有这个idid属性的元素上，属性的元素上，学校网站开发学校网站开发 练习：练习：若若htmlhtml中有如下代码：中有如下代码：我是页页头部我是页页头部我是正文部分我是正文部分若想将以上文字的颜色设置为红色，则需要怎样设置若想将以上文字的颜色设置为红色，则需要怎样设置选择器？选择器？1.2.4 1.2.4 通用选择器通用选择器表示方法：表示方法：*作用：作用：指定的样式可应用在页面里的所有元素。指定的样式可应用在页面里的所有元素。例如：把

12、页面中所有支持字体属性的样式都设为例如：把页面中所有支持字体属性的样式都设为“宋体宋体”：*font-family:font-family:宋体宋体;1.3 1.3 在在HTMLHTML中使用中使用CSSCSS的方法的方法 1.3.1 1.3.1 行内式行内式在在HTMLHTML标记中使用标记中使用stylestyle属性，直接写入需要定义的样式。属性，直接写入需要定义的样式。例如：例如：p style=内嵌样式内嵌样式表表 其中各个属性之间用其中各个属性之间用“;”隔开，属性与属性值之间用隔开，属性与属性值之间用“:”隔开。隔开。p style=color:#FF0000;font-size

13、:20px;text-;正文内容正文内容11 p style=color:#000000;font-;正文内容正文内容22 p style=color:#FF00FF;font-size:25px;font-;正文内容正文内容33 1.3.2 1.3.2 内嵌式内嵌式 在HTML文档头部标记中，用标记来存放样式表代码。例如：在标记中加入样式表代码，书写格式如下：选择器属性名a：属性值a；属性名b：属性值b 页面标题页面标题 style type=text/ppcolor:#0000FF;color:#0000FF;font-size:25px;font-size:25px;这是第这是第1 1行

14、正文内容行正文内容 这是第这是第2 2行正文内容行正文内容 这是第这是第3 3行正文内容行正文内容 1.3.3 1.3.3 外部样式表的引入外部样式表的引入网站中有单独的网站中有单独的CSSCSS文件（扩展名为文件（扩展名为CSSCSS），在），在主文档中调用主文档中调用CSSCSS文件。文件。调用的方法调用的方法:1 1、链接式、链接式在页面的头部标记在页面的头部标记中加入使用中加入使用linklink标记及其属性标记及其属性格式：格式：link /2 2、导入式、导入式 在页面的头部标记在页面的头部标记中使用中使用 import import 使用方法：使用方法：import import

15、 urlurl(“(“样式文件名样式文件名););1.4 文字常用的属性名、属性值文字常用的属性名、属性值1 1、文字属性、文字属性字体（字体（font-familyfont-family）文字大小（文字大小（font-sizefont-size）文字样式（文字样式（font-stylefont-style）文字粗细（文字粗细（font-weightfont-weight）2 2、文本属性、文本属性首行缩进（首行缩进（text-indenttext-indent）文本颜色（文本颜色（colorcolor）文本对齐属性（文本对齐属性（text-aligntext-align）文本修饰（文本修饰（

16、text-decorationtext-decoration）知识点小结知识点小结CSSCSS规则格式？规则格式？CSSCSS选择器的基本类型？选择器的基本类型？CSSCSS引入的方式？引入的方式？任务实践任务实践参考步骤：参考步骤：1.1.打开个人主页的首页文件打开个人主页的首页文件“index.htmlindex.html”。2.2.使用链接式添加样式表。使用链接式添加样式表。3.3.给各文字部分添加给各文字部分添加IDID或或classclass。4.4.使用合适的选择器编写文字的样式规则。使用合适的选择器编写文字的样式规则。5.5.测试首页。测试首页。小结小结根据网页内容和个人习惯不同，同一个页面的样式表根据网页内容和个人习惯不同，同一个页面的样式表中的选择器的使用也不相同。在编写代码时遵循的中的选择器的使用也不相同。在编写代码时遵循的原则是简洁、易维护。原则是简洁、易维护。考虑到易维护性，在做网站时一般先将网页的结构做考虑到易维护性，在做网站时一般先将网页的结构做出来，然后再写样式。这样可避免重复写样式规则。出来，然后再写样式。这样可避免重复写样式规则。