HTML5 CSS3 JavaScript 网页设计基础与实战1-10章教材配套课件完整版电子教案.pptx

HTML5 CSS3 JavaScript 网页设计基础与实战;第1章 初识Web前端;了解Web前端发展历程;引言;1.1 Web前端发展历程;1.1 Web前端发展历程;1.1 Web前端发展历程;1.1 Web前端发展历程;1.1 Web前端发展历程;1.1 Web前端发展历程;1.1 Web前端发展历程;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;CSS可以改变HTML元素的样式。改变元素样式我们得先弄清楚3件事：“改变的对象是谁”、“改什么类型的样式”和“具体改成什么样子”。;1.2 Web开发的核心技术;1.2 Web开发的核心技术;CSS3样式用于辅助HTML5进行页面布局，CSS3有三种引入方式，不同的引入方式对于后期的维护难度也不相同。CSS3的三种引入方式为行内样式、内嵌样式和外链样式，样式的优先等级也有划分，行内样式优先于内嵌样式和外部样式，后两者是按照就近原则决定优先级。样式的引入方式不同，内容与样式的关联性也不同，关联性的强弱会影响后期代码的维护。 ;行内样式是使用style属性引入CSS3样式，示例代码如下;内嵌样式是使用style标签书写CSS代码。style标签写在head标签里面，示例代码如右所示;外链样式是CSS代码保存在扩展名为.css的样式表中，在HTML文件中使用link标签引用扩展名为.css的样式表，示例代码如下;通过选择器可以定位到CSS样式需要修饰的目标，CSS3选择器是在原有的CSS选择器基础之上又新增了部分选择器，大概可分为基本选择器和高级选择器，以及新增的结构伪类选择器、伪元素选择器、属性选择器等。;基本选择器有4种，分为通用选择器、标签选择器、类选择器和ID选择器。;CSS选择器具有权值，权值代表着优先级，权值越大，优先级越高。同种类型的选择器权值相同，后定义的选择器会覆盖先定义的选择器。;高级选择器有后代选择器、子代选择器、并集选择器等。;结构伪类选择器可根据文档结构的关系来匹配特点的元素。;伪元素选择器可用于在文???中插入假象的元素，在新版本里使用“:”与“::”区分伪类和伪元素。;属性选择器是根据标签的属性来匹配元素，使用中括号（[ ]）进行标识。;CSS3中对字体样式的设置主要有字体风格、字体粗细、字体大小、字体名称等。;字体属性（font）可以进行连写，连写顺序为字体风格（font-style）、字体粗细（font-weight）、字体大小（font-size）和字体名称（font-family），字体连写的示例代码如下。;CSS3中对背景样式的设置主要有背景颜色、背景图像、背景图像的重复性、背景图像滚动情况、背景图像位置等。;背景属性（background）可以进行连写，连写顺序为背景颜色（background-color）、背景图像（background-image）、背景图像的重复性（background-repeat）、背景图像滚动情况（background-attachment）、背景图像位置（background-position），背景连写的示例代码如下。;CSS3中对文本样式的设置主要有文本颜色、文本水平对齐方式、行高、文本修饰、文本转换、文本缩进、文本阴影等。;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.2 Web开发的核心技术;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;1.3 Web开发工具;课