示例
样式表属性
• 字体属性—控制页面中出现的文本字体 – font-family：设置元素的字体，其值可为各种字体名称， 可以一次设置多个字体名称，用逗号隔开。例如： BODY {font-family: “Times New Roman”, “Arial Black”, serif}； – font-style：设置字体的显示样式，其值可为：normal、 italic、oblique、inherit。例如：BODY {font-style: italic}； – font-variant：将字体设置为小体的大写字母,其值可为： normal、small-caps和inherit。例如：P {font-variant: small-caps}；
嵌入式样式表来控制某一页，用内联要式 表控制某一个标签。
层叠样式表
• 不同级别的样式表
– CSS1—为网页设计者提供了控制页面显示的 方法。CSS1的属性包含对各个项的格式控制， 如：字体、文本样式、大小等。
– CSS-P—是指层叠样式表-布置。使用CSS-P属 性可以把元素放置到指定的网页位置。
• 属性告诉浏览器如何显示受控制的这些元 素。
什么是样式表？
• 通过样式表，我们只需在一个地方一次性 的设置所有的规则；
• 样式表缩短了开发和维护HTML文件的时间； • 样式表的使用非常灵活。用户可以组织一
个控制全站文件的样式表，也可以为一个 页面单独创建独立样式表；可以创建一个 覆盖全局的样式表，也可以创建一个控制 单一标签元素的样式表。
样式表属性
– border-top-width、border-right-width、borderbottom-width、border-left-width：这些属性可 用来指定容器元素所选的侧面的边框宽度，即 页和白填充之间的宽度，其值可为：thin、 medium、thick和inherit，还可以是有效的长度。 例如：P {border-top-width: 10px; border-leftwidth: 30px; border-right-width: 30px；borderbottom-width:10px}；
样式表和HTML文件的结合
• 实现样式表和HTML文件的结合共有四种方法： 1.使用嵌入式样式表
– 样式定义包含在开放式和闭合式的<STYLE>标 签之间；
– 样式块位于HTML文件内部，一般定义在开放 式和闭合式<HEAD>标签内部，或在</HEAD> 和<BODY>标签之间 。
样式表和HTML文件的结合
示例
样式表属性
• 容器属性—用来创建容器样式 – margin-top、margin-right、margin-bottom、marginleft：这些属性可用来定义容器所选的侧面距离边框外 部的页白宽度（也就是空白区域），其值可为：有效 的长度、百分数或者inherit。例如：P {margin-left: 50px}； – margin：可以用来一次性设置元素各个边的页白，而 不必分别定义不同的部分。如果只有一个值，那么上 下左右都用这个值；如果有两个值，分别代表上下和 左右；如果3个值，代表顶部、左右和底部。例如：P {margin: 5% 10%}。
– background-attachment：设置背景图片在窗体 中的依附形式：固定或滚动，其值可为：scroll、 fixed或inherit。例如：P {backgroundattachment: fixed}；
– background-position：设置某一内容框的背景图片距 离该框左上角的位置，其值可为：top、center、 bottom、left、right、inherit、以及任意两个允许的长 度单位或百分比。例如：H3 {background-position: 40px 20px}；
– background：是一种快捷属性，它可以一次性定义以 上提到的这些背景属性。定义的顺序如下： background-color、background-image、backgroundrepeat、background-attachment和backgroundposition。如果有些属性没有定义，就使用其默认值。 例如：P {background: pink url(“lolo.gif”) repeat-y bottom right}；
– 主要用于格式化单独的HTML文件； – 例如：
:::::::::::::::::::: <HEAD> <STYLE> <!— BODY {color: blue} --> </STYLE> </HEAD> ::::::::::::::::::::
样式表和HTML文件的结合
2.使用外部样式表 – 用来使多个文件具有相同的格式样式；
– font：是一种快捷属性，它可以一次性定义以 上提到的这些字体属性。定义的顺序如下： font-style、font-variant、font-weight、fontsize和font-family。如果有些属性没有定义，就 使用其默认值。例如：BODY {font: oblique, normal, bold, 20pt, “Times New Roman”}。
– CSS2—是最新的网页设计工具。其特性包括： 核心样式、媒体类型、听觉样式表、可下载字 体、固定位置、表格格式化、自动编号、文本 阴影和光标控制。
样式表属性
• 文本属性—用来控制页面中的文本 – text-indent：用来缩进块文本的首行，其值可 以是任何有效的长度单位或百分比。例如： H1{text-indent: 10px}； – text-transform—控制文本的大小写，其值可为： none、capitalize、uppercase、lowercase和 inherit。例如：P {text-transform: capitalize}； – text-align—控制文本的对齐方式，其值可以为： left、center、right、inherit和justify。例如： H3 {text-align: center} ；
– text-decoration—为指定文本增加文本装饰， 其值可为：none、underline、overline、blink、 line-through和inherit。例如：P {textdecoration: overline}；
– letter-spacing：控制字母之间的空白，其值可 为：标准的度量衡量、normal、inherit。例如： P {letter-spacing: 4px}；
HTML设计
使用样式表
内容
• 什么是样式表 • 样式表和HTML文件的结合的几种方式 • 什么是层叠样式表 • 样式表属性的设置
什么是样式表？
• 样式表是指告知浏览器如何显示个部分：选
择器和属性；
• 选择器告诉浏览器页面中的哪些元素受规 则控制；
样式表属性
– font-weight：设置字体的粗细程度,其值可为： normal、bold、bolder、lighter、inherit和100 到900之间的任一数字。例如：H4 {font-weight: bold}；
– font-size：控制字体的大小，其值可为绝对值， 如：xx-small、x-small、small、medium、 large、x-large、xx-large，也可以为相对值， 如larger、smaller，也可以是长度、百分数， 还可以是负的绝对值。例如：P {font-size: xxlarge}；
– 需要一个单独的样式表文件，所有的样式定义 都包含在这个文件当中；
– 样式表文件以“css”为扩展名； – 要把独立的css文件和HTML文件结合起来，有
两种途径：引用和链接；
– 使用引用方法时，要在HTML文件的style语句 块中加入“@import url (“…”);” 。
样式表和HTML文件的结合
样式表属性
– border-width：是可一次性指定所有边框宽度 的快捷属性,如果只设定一个值，那么4个边框 都用这个值；如果设定2个值，上下边框是一 个值，左右边框是一个值；如果设3个值，即 上边框、左右边框和下边框。例如：P {borderwidth: thick};
– <SPAN>标签：用来把字母和单词集合起来， 设置其显示属性。
层叠样式表
• 1994年，样式表开始应用于HTML； • 1996年12月，提出了一种新的样式表规
范——层叠样式表； • 允许在一个文件中使用多级样式； • 每个位置靠后的样式表类型都继承以前的
样式定义，并且重载那些相同的定义； • 因此，可以用外部样式表来控制全站，用
样式表和HTML文件的结合
3.使用内联样式表
– 用来取代当前已有的样式定义； – 使用“style”属性。 – 例如：
<P style=“color: red; font-size: 5px”>
样式表和HTML文件的结合
4.使用类 – 可以格式化HTML文件中的指定部分； – 在样式块的指定标签后面输入一个唯一的类名， 通过这样的方式可以定义一个样式类； – 例如： P.Classred {color: red} 在这里，<P>标签和类通过类名“classred”联 系起来。使用样式类，就需要把相应标签的 class属性都设置成相同的类名 <P class=“classred”>::::::::::</P>
样式表和HTML文件的结合
• 样式表优先级
– 样式定义的优先顺序是由它和相应标签的距离 来决定的；
– 内联样式表的优先级最高，其次是嵌入式样式 表和外部样式表；
– 特殊标签的优先级高于普通标签，例如，<H1> 标签的优先级高于<BODY>标签。
