HTML语言与网页设计
——CSS技术
目录
什么是 CSS
在网页中使用 CSS
CSS样式定义
CSS属性
什么是 CSS
CSS（ Cascading Style Sheet，层
叠样式表）是一种格式化网页的
标准方式，它扩展了 HTML 的功
能，使网页设计者能够以更有效
的方式设置网页格式。
演示 ——层叠样式表示例
在网页中使用 CSS
HTML 标记符的 style 属性
<P style=“text-align:center”
>
在网页中使用 CSS
STYLE 标记符
<STYLE>样式定义 </STYLE>
在网页中使用 CSS
LINK 标记符
<LINK rel=“stylesheet”
type=“text/css”
href=“stylesheet.css”>
演示 ——使用 CSS的三种方式
CSS样式定义
样式表项的组成：
Selector{property1:value1;pr
operty2:value2;property3:val
ue3;…… }
CSS样式定义
常用 Selector类型
HTML标记符
用户定义的类
用户定义的 ID
虚类
HTML Selector
HTML标记符是最常用的
selector，它重新定义了 HTML
标记符的显示效果。
H1{text-
align:center;color:red}
HTML Selector
具有上下文关系的 HTML标记符
P B{color:red}
演示 ——HTML Selector效果
用户定义的类与 ID
Selector.classname{property:v
alue… }
.classname{property:value… }
#idname{property:value… }
演示 ——用户定义类与 ID
虚类 Selector
:link 未访问过的超链接
:visited 访问过的超链接
:active 活动超链接
:hover 悬停状态的超链接
虚类 Selector
例如：
所有超链接去下划线,a{text-
decoration:none}
悬停变色,hover{color:red}
演示 ——虚类 selector效果
CSS属性 ——字体属性
font-family
font-style
(normal/italic/oblique)
font-weight
(normal/bold/bolder/lighte
r/100/… )
CSS属性 ——字体属性
font-size (绝对大小 /相对大小
/长度值 /百分比 )
font (顺序：
weight>variant>style>size
/line-height>family)
演示 ——字体属性
CSS属性 ——颜色与背景属性
color
background-color
background-image
background-
attachment(scroll/fixed)
演示 ——颜色与背景属性
CSS属性 ——文本属性
line-height
text-
align(left/right/center/justify)
text-
decoration(none/underline/over
line)
text-indent
演示 ——文本属性