Web 前端开发技术（HTML5+CSS3+JavaScript+jQuery） 课件 项目四　 CSS 基础.pptx

CSS基础Web前端开发技术篇2：CSS技术

本项目重点介绍CSS的语法规则和使用方式,以及选择器的应用,简略介绍CSS的继承与层叠。通过引入CSS属性及使用不同的选择器,引导学生在实际开发项目时学会突出重点而非面面俱到,遵循以用户为导向的原则,培养学生在开发过程中对细节的把控能力,同时提升对问题的总结能力、分析能力和解决能力。序言

目录CONTENTSCSS概述CSS基本语法CSS选择SS继承与层叠

01CSS概述Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenoneshorizon.

CSS概述由于Netscape和Microsoft两家公司在自己的浏览器软件中不断地将新的HTML标记和属性(如字体标记和颜色属性等)添加到HTML规范中,因此导致创建具有清晰的文档内容并独立于文档表现层的站点变得越来越困难。为了解决这个问题,HakonWiumLie(哈肯·维姆·莱,挪威)和BertBos(伯特·波斯,荷兰)于1994年共同发明了级联样式表。级联样式表(CascadingStyleSheet,CSS),也称为层叠样式表,是一种用于描述网页或文档外观和样式的语言。它允许网页设计者通过CSS规则来控制网页中元素的位置、大小、颜色等视觉特性。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页中各元素进行格式化。CSS能够对网页中各元素位置的排版进行像素级的精确控制,支持几乎所有的字体、字号样式,拥有对网页对象和模型样式进行编辑的能力。CSS的主要优势之一是支持内容和样式的分离,这意味着网页的结构(内容)和外观(样式)可以分开处理,这种分离提高了网站的可维护性和重用性。CSS概述

02CSS基本语法Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenoneshorizon.

语法规则1.选择器选择器可以是HTML标记名称或属性的值,也可以是自定义的标识符。选择器选择网页上的具体对象和元素,指定了CSS属性规则应用的对象。浏览器根据选择器严格解析匹配元素,再将定义的属性值应用到匹配的对象和元素上。当多条属性规则作用于同一个元素时,采用就近原则,越接近该元素的属性规则优先级就越高。2.属性CSS提供了丰富的属性,包括宽度、高度、颜色、大小等。例如,font-style属性用于设置文本的体,color属性用于设置文本的颜色等。一个对象元素可以同时设置多组属性效果。多组属性设置之间用分号隔开。不同的对象元素可以设置的属性有差别,如文本可以设置字体属性,而图像无字体属性。应用CSS3中新增的部分属性时,要考虑浏览器的兼容性。CSS基本语法

语法规则3.属性值每个属性可以设置的属性值不同。在CSS中,有些属性可以设置多个属性值,用逗号分隔,其基本语法格式如下。selector{font-family:楷体_gb2312,黑体,TimesNewRoman;}该样式表说明了可以使用楷体_gb2312、黑体、TimesNewRoman3种字体来设置selector的字体效果。若在系统中找不到楷体_gb2312,则使用黑体;若找不到黑体,则使用TimesNewRoman,即按出现的先后顺序优先选择。4.注释像其他语言一样,CSS允许用户在源代码中嵌入注释。CSS注释可以被浏览器忽略,不影响网页效果。CSS基本语法

语法规则注释有助于记住复杂的属性规则的作用、应用的范围等,便于属性规则的后期维护和应用。CSS注释以字符“/?”开始,以字符“?/”结束。注释格式如下。/*这是多行注释CSS文件名:out.css功能说明:定义属性*//*单行注释属性段落p*/p{font-size:20px;/*行尾注释定义字号*/}“/?……?/”这种格式可以单独一行书写,也可以写在语句的后面;可以注释一行,也可以注释多行。注释不能嵌套。CSS基本语法

使用方式CSS的使用方式是指属性规则作用到网页元素的方式,通常有行内属性、内嵌属性、链接属性和导入属性。1.行内属性行内属性是把CSS属性规则直接添加到HTML标记中,作为