文档介绍：层叠样式表
Learning HTML&CSS
第三章
Company Logo
课程要求与目标
了解CSS 的概念
掌握CSS 的基本语法
掌握如何使用样式表
了解<div>和<span>标签
Company Logo
为什么需要CSS样式表
标签能够实现的内容较为简单单一,上是没有任何的吸引力的,而且这样的网页制作方式要求程序员本身的工作量大量增加,而专业的美工无法在网页设计阶段充分的发挥所长,大量浪费了人力、时间成本。
当页面需要改变样式时,重复大量的工作严重降低程序开发人员的开发效率
随着网页设计技术的发展,人们已经渐渐不满足原有的一些HTML标记,而是希望能够为页面内容添加一些更加绚丽的属性,如鼠标标记、渐变效果等。CSS技术的发展使这些成为现实。
CSS是Cascading Style Sheet的缩写,可以翻译为“层叠样式表”或“级联样式表”,即“样式表”。
Company Logo
CSS简介
样式表为页面提供了丰富的美观元素,使页面更加美观和灵活。
样式表可以实现内容与样式的分离,方便团队协作开发,大大提高了网站开发效率。
程序员与美工分工非常明确,大大减少了程序员的工作量。
为网站开发提供了新的模式。
Company Logo
CSS优势
灵活控制网页中文字的字体、颜色、大小、间距、风格及位置。
随意设置一个文本块的行高、缩进,并可以为其加入三维效果的边框。
更方便地为网页中的任何元素设置不同的背景颜色和背景图片。
精确控制网页中各元素的位置。
可以与脚本语言相结合,使网页中的元素产生各种动态效果。
Company Logo
CSS样式表的功能
Company Logo
7
CSS样式表示例
<html>
<head>
<title>行内样式表示例</title>
</head>
<body>
<p style="font-family:华文彩云;font-size:36px">桂林山水甲天下
<p>桂林山水甲天下
</body>
</html>
先看看以下示例
两段文本都采用了同一标签<p>,但显示的样式不一样,显然是代码片段中的字体、字体大小等规定了第一段的显示样式
Company Logo
CSS基本语法(1)
选择器{ 样式属性:属性值; 样式属性:取值; }
选择器可以是多种形式的
例如要定义HTML标记中H2的样式,代码如下:
H2 { font-family : 黑体; font-size:24px ; }
选择器
字体属性为黑体
字体大小为24px
Company Logo
CSS基本语法(2)
<html>
<head><title>样式表示例</title>
<style type="text/css">
H1{font-family:Arial;font-size:24px;}
P{font-family:黑体;color:limegreen;}
</style></head>
<body>
<H1>这是应用了样式的H1元素
<H2>这是H2元素,它没有应用样式
<p>这是应用了样式的P元素
</body>
</html>
<style></style>表示样式标签
type="text/css"表示类型是样式表文本
属性
CSS名称
说明
字体属性
font-family
设置或检索文本的字体
Font-size
设置或检索文本字体的大小
Font-style
设置或检索文本的字体样式,即字体风格,主要设置字体是否为斜体。取值范围:
normal | italic | oblique
Font-weight
用于设置字体的粗细,取值范围:
Normal | bold | bolder | lighter | number
颜色及背景属性
Color
设置文本的颜色
Background-color
设置背景颜色
background-image
设置元素的背景图象
文本属性
Text-align
设置文本的对齐方式,如:左对齐、右对齐、居中对齐、两端对齐
Text-indent
设置文本第一行的缩进量,取值可以是一个长度或一个百分比
Vertical-align
设置文本的纵向位置
Company Logo
CSS样式表常见的属性