《网页设计语言教程》第10章 CSS的基础知识－new

第10章cSS的基础知识

第10章 CSS的基础知识

10.1什么是样式表 10.2样式表的基本结构 10.3如何在网页中加入css 10.4div与span标签 10.50SS的几个特性

10.1 什么是样式表 10.2 样式表的基本结构 10.3 如何在网页中加入css 10.4 div与span标签 10.5 CSS的几个特性

10.1什么是样式表 ☆CSS是 Cascading style Sheet的缩 写。译作「层叠样式表单」。 是用于控制网页元素的显示方式 ☆样式表的宗旨就是将结构(内容)和格式分离 令css也是一种标记语言,有很多属性来源于 HTML,它也需要通过浏览器解释执行

❖CSS 是 Cascading Style Sheet 的缩 写。译作「层叠样式表单」。 ❖是用于控制网页元素的显示方式 ❖样式表的宗旨就是将结构(内容)和格式分离 ❖CSS也是一种标记语言，有很多属性来源于 HTML，它也需要通过浏览器解释执行。 10.1 什么是样式表

10.2样式表的基本结构 个样式表由许多样式规则组成的,用以告诉浏览 器怎样去显示一个网页文档。 >样式表的核心是规则,样式表的规则格式如下: Selectorproperty 1: valuel; property 2 value2; property 3: value3; ... Selector定义样式作用的对象 l- property为CSs属性,vaue为.属性对应的值

10.2 样式表的基本结构 ➢ 一个样式表由许多样式规则组成的，用以告诉浏览 器怎样去显示一个网页文档。 ➢ 样式表的核心是规则，样式表的规则格式如下： Selector{property1:value1;property2 :value2;property3:value3;……} i. Selector定义样式作用的对象 ii.property为CSS属性，value为属性对应的值

样式定义的语法示例 样式属性)(属性取值 HIl{ text-align: center;font- family:黑体} 选择器 样式定义

样式定义的语法示例 H1 {text-align:center; font-family:黑体} 选择器 样式定义 样式属性 属性取值

常用 Selector类型 ·HTML标记符 用户定义的类 用户定义的D 虚类

常用Selector类型 • HTML标记符 • 用户定义的类 • 用户定义的ID • 虚类

HTML标记符的 Selector ·HTML标记符是最常用的 selector,它 重新定义了HTML标记符的显示效果。 例如: H1ftext-align:center;color:redy 使所有用H1标记符修饰的内容都居中和用 红色显示 示例如下

HTML标记符的Selector • HTML标记符是最常用的selector，它 重新定义了HTML标记符的显示效果。 例如： • H1{text-align:center;color:red} • 使所有用H1标记符修饰的内容都居中和用 红色显示。 • 示例如下

例10-1:建立一个简单的样式表 简单的样式表 h1 coloraredhfont-size:35 px; font-family:黑体} pbackgroundeyellow;c。lor:blue;font-size25px; font-family:隶书 body bgcol。r= ightblue center>样式表 p>这是一个简单的样式表 </html

例10-1：建立一个简单的样式表 简单的样式表 样式表 这是一个简单的样式表

用户定义类 定义方式 classnametproperty:value.I 表示任何带有 class属性为 classname 的标记符都采用所定义的样式

用户定义类 • 定义方式 classname{property:value…} 表示任何带有class属性为classname 的标记符都采用所定义的样式

定义方式 ≯s, classmanθ样式属性:属性值:样式属性: 属性值:mm 所有HTML标签都可引用它 ·*符号可以省略 HTML标签。 classname样式属性a属性值:样式 属性:属性值 只有该指定的标签才能引用它

定义方式 ➢* . classname{样式属性:属性值; 样式属性: 属性值;......} •所有HTML标签都可引用它 •*符号可以省略 ➢HTML标签. classname{样式属性:属性值; 样式 属性:属性值;......} •只有该指定的标签才能引用它