Web前端开发基础（HTML+CSS+JavaScript）课件 第4章 CSS基础.pptxVIP

第四章CSS基础

第四章CSS基础

讲师:

日期:

Web前端开发基础

1

第四章CSS基础

学习目标

理解CSS的基本概念及其在网页设计中的作用。

掌握CSS基础和复合选择器的应用技巧。

学习CSS的显示模式及控制元素显示与隐藏的方法。

Web前端开发基础

2

第四章CSS基础

CSS简介

定义:CSS（CascadingStyleSheets）是用于美化网页的层叠样式表。

功能:通过样式规则控制网页的布局、颜色、字体和其他视觉元素。

与HTML的关系:HTML定义结构，CSS提供样式。

Web前端开发基础

3

第四章CSS基础

CSS语法

基本结构:

选择器{

属性1：属性值1；

属性2：属性值2；

语法规则:

属性和值之间用冒号:连接。

语句用分号;结束。

可同时设置多个属性。

Web前端开发基础

4

第四章CSS基础

CSS语法示例

示例代码:

运行结果:一个背景为蓝色的正方形。

Web前端开发基础

5

第四章CSS基础

CSS使用方式

行内样式表:

直接在HTML标签中使用style属性定义样式。

示例:pstyle=-:;-:;color:(,,)=r:ed;红色文本/p

优点:简单易用，适合小范围样式调整。缺点:不利于样式复用。

内部样式表:

在HTML文档的`head`___部分使用`style`___标签定义