SlideShare a Scribd company logo
网页制作初步 —— CSS 应用入门
CSS 应用入门 ,[object Object],[object Object],[object Object],[object Object],重点与难点
CSS 应用入门 ,[object Object],1.1 CSS 的基本概念 1. CSS 简介 CSS 是一系列格式设置规则,它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时,内容与表现形式是相互分开的。页面内容( HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一部分(通常为 <head> 部分)中。
CSS 应用入门 ,[object Object],1.1 CSS 的基本概念 1. CSS 简介 CSS 可以控制许多 HTML 无法控制的属性。例如,可以为所选文本指定不同的字体大小和单位(像素、磅值等)。通过使用 CSS 从而以像素为单位设置字体大小,还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。除设置文本格式外,还可以使用 CSS 控制 Web 页面中块级别元素的格式和定位。例如,可以设置块级元素的边距和边框、其他文本周围的浮动文本等。
CSS 应用入门 ,[object Object],[object Object],[object Object],[object Object],[object Object],1.2 CSS 的特征 1. CSS 简介
CSS 应用入门 ,[object Object],1.2 CSS 的特征 1. CSS 简介 1.3 CSS 样式表的功能 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS 应用入门 ,[object Object],2.  使用 CSS 在 Dreamweaver 里,有非常方便的 CSS 编辑器,即使网页制作者对 CSS 代码不是很熟悉,也同样能编辑出优秀的 CSS 样式表。 在 Dreamweaver 8 中,可以通过菜单命令创建 CSS 样式表,也可以通过“ CSS 样式”面板创建 CSS 样式表。在菜单栏选择“文本( T )”—“ CSS 样式( C )”—“新建( N )”命令,打开“新建 CSS 规则”对话框,即可在对话框中对样式表进行设置。 2.1  建立类样式
CSS 应用入门 ,[object Object],[object Object],[object Object],[object Object],2.1  建立类样式 2.  使用 CSS
CSS 应用入门 ,[object Object],[object Object],2.2  建立标签样式 2.  使用 CSS
CSS 应用入门 ,[object Object],[object Object],2.3  建立自定义高级样式 2.  使用 CSS ,[object Object]
CSS 应用入门 2.3  建立自定义高级样式 2.  使用 CSS ,[object Object],[object Object],[object Object]
CSS 应用入门 3.  设置 CSS 属性 控制网页元素外观的 CSS 样式用来定义字体、颜色、边距和字间距等属性,可以使用 Dreamweaver 来对所有的 CSS 属性进行设置。 CSS 属性被分为 8 大类,分别为“类型”、“背景”、“区块”、“方框”、“边框”、“列表”、“定位”和“扩展”。 3.1  设置文本属性 使用“ CSS 规则定义”对话框中的“类型”选项可以定义文本的基本属性。
CSS 应用入门 3.1  设置文本属性 3.  设置 CSS 属性 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS 应用入门 3.  设置 CSS 属性 在“分类”列表框中选择“背景”,背景属性的功能主要是在网页的元素后面加入固定的背景颜色或图像。 3.2  设置背景样式
CSS 应用入门 3.2  设置背景样式 3.  设置 CSS 属性 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS 应用入门 3.3  设置区块样式 3.  设置 CSS 属性 CSS 的“区块”类别可以定义段落的间距和对齐设置。 ,[object Object],[object Object],[object Object]
CSS 应用入门 3.3  设置区块样式 3.  设置 CSS 属性 ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS 应用入门 3.4  设置方框样式 3.  设置 CSS 属性 CSS 的“方框”类别可以为控制元素在页面上的放置方式的标签和属性定义设置。 ,[object Object],[object Object],[object Object]
CSS 应用入门 3.4  设置方框样式 3.  设置 CSS 属性 ,[object Object],[object Object],[object Object]
CSS 应用入门 3.5  设置边框样式 3.  设置 CSS 属性 CSS 的“边框”类别可以定义元素周围边框的设置。 ,[object Object],[object Object],[object Object],[object Object]
CSS 应用入门 3.6  设置列表样式 3.  设置 CSS 属性 CSS 的“列表”类别为列表标签定义列表设置。 ,[object Object],[object Object],[object Object],[object Object]
CSS 应用入门 3.7  设置定位样式 3.  设置 CSS 属性 CSS 的“定位”样式属性使用“层”首选参数中定义层的默认标签,将标签或所选文本块更改为新层。
CSS 应用入门 3.7  设置定位样式 3.  设置 CSS 属性 ,[object Object],[object Object],[object Object],[object Object],[object Object]
CSS 应用入门 3.8  设置扩展样式 3.  设置 CSS 属性 “ 扩展”样式属性包含两部分。 ,[object Object],[object Object]
CSS 应用入门 练习题 ,[object Object],[object Object]

More Related Content

Viewers also liked

多媒体元素的网页呈现
多媒体元素的网页呈现多媒体元素的网页呈现
多媒体元素的网页呈现mazhenglu
 
1. introduction to algorithm
1. introduction to algorithm1. introduction to algorithm
1. introduction to algorithm
Geunhyung Kim
 
4. stack
4. stack4. stack
4. stack
Geunhyung Kim
 
11. git basic
11. git basic11. git basic
11. git basic
Geunhyung Kim
 
Ejemplo LOGIN conectado a una base de datos
Ejemplo LOGIN conectado a una base de datosEjemplo LOGIN conectado a una base de datos
Ejemplo LOGIN conectado a una base de datos
Vane Borjas
 
Ejemplo ACTUALIZAR registros desde Visual Basic 2012
Ejemplo ACTUALIZAR registros desde Visual Basic 2012Ejemplo ACTUALIZAR registros desde Visual Basic 2012
Ejemplo ACTUALIZAR registros desde Visual Basic 2012
Vane Borjas
 
3. linked list
3. linked list3. linked list
3. linked list
Geunhyung Kim
 
Ejemplo GUARDAR registros desde Visual Basic 2012
Ejemplo GUARDAR registros desde Visual Basic 2012Ejemplo GUARDAR registros desde Visual Basic 2012
Ejemplo GUARDAR registros desde Visual Basic 2012
Vane Borjas
 
5. queue
5. queue5. queue
5. queue
Geunhyung Kim
 

Viewers also liked (9)

多媒体元素的网页呈现
多媒体元素的网页呈现多媒体元素的网页呈现
多媒体元素的网页呈现
 
1. introduction to algorithm
1. introduction to algorithm1. introduction to algorithm
1. introduction to algorithm
 
4. stack
4. stack4. stack
4. stack
 
11. git basic
11. git basic11. git basic
11. git basic
 
Ejemplo LOGIN conectado a una base de datos
Ejemplo LOGIN conectado a una base de datosEjemplo LOGIN conectado a una base de datos
Ejemplo LOGIN conectado a una base de datos
 
Ejemplo ACTUALIZAR registros desde Visual Basic 2012
Ejemplo ACTUALIZAR registros desde Visual Basic 2012Ejemplo ACTUALIZAR registros desde Visual Basic 2012
Ejemplo ACTUALIZAR registros desde Visual Basic 2012
 
3. linked list
3. linked list3. linked list
3. linked list
 
Ejemplo GUARDAR registros desde Visual Basic 2012
Ejemplo GUARDAR registros desde Visual Basic 2012Ejemplo GUARDAR registros desde Visual Basic 2012
Ejemplo GUARDAR registros desde Visual Basic 2012
 
5. queue
5. queue5. queue
5. queue
 

Css应用入门

  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. CSS 应用入门 3. 设置 CSS 属性 控制网页元素外观的 CSS 样式用来定义字体、颜色、边距和字间距等属性,可以使用 Dreamweaver 来对所有的 CSS 属性进行设置。 CSS 属性被分为 8 大类,分别为“类型”、“背景”、“区块”、“方框”、“边框”、“列表”、“定位”和“扩展”。 3.1 设置文本属性 使用“ CSS 规则定义”对话框中的“类型”选项可以定义文本的基本属性。
  • 13.
  • 14. CSS 应用入门 3. 设置 CSS 属性 在“分类”列表框中选择“背景”,背景属性的功能主要是在网页的元素后面加入固定的背景颜色或图像。 3.2 设置背景样式
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22. CSS 应用入门 3.7 设置定位样式 3. 设置 CSS 属性 CSS 的“定位”样式属性使用“层”首选参数中定义层的默认标签,将标签或所选文本块更改为新层。
  • 23.
  • 24.
  • 25.