第二讲Dreamweaver.ppt

Dreamweaver 胡静 教学目标 Css的概念 Css的基本语法 用css设置丰富的文字效果 Css的概念 Css(cascading style sheet),中文译为层叠样式表,它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。 CSS的编辑 Css代码，在默认情况下都采用粉红色进行语法着色，而html代码听标记则是蓝色，正文字默认情况下为黑色。 CSS语法 每一句结束都用;结束 属性：值 每一个样式用{}括起来 浏览器与CSS 网上的浏览器各式各样，绝大多数浏览器对CSS支持都很好。不过每一个浏览器的效果不一样。 使用CSS制作网页，一个基本的要求就是主流的浏览器之间的显示效果要基本一致。通常的做法是一边编写，一边在两个不同的浏览器上进行预览及时地调整各个细节。 CSS样式——行内样式 行内样式是所有样式方法中最为直接的一种，它直接对HTML的标记使用style属性，然后将CSS代码直接写在其中。 语法 标记 style=“属性：值;……” 行内样式是最为简单的CSS使用方法但由于需要为每一个标记设置style属性，后期维护成本很高，而且网页容易过胖，因此不推荐使用。 内嵌式 内嵌样式表就是将CSS写在head与/head之间，并且用style/style标记进行声明。 语法 style type=“text/css” 样式名{属性：值； …… } /style CSS——链接式 链接式CSS样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便。 语法 在head中link href=“样式文件” type=“text/css” rel=“stylesheet” CSS——导入样式 采用import方式导入的样式表。和嵌入样式有点相同。 语法： head中 style type=“text/css” @import url(文件名) /style Css的基本语法 标记选择器语法 类别选择器 语法 Id选择器 Id选择器只能在HTML页面中使用一次，针对性更强 语法 选择器声明 集体声明 选择器之间用逗号隔开 全局声明 选择器为* 选择器嵌套 语法: 标记选择器 标记选择器{属性:值……} id选择器 标记选择器{属性:值……} 字体 Font-family:字体 注意： sans-serif和serif不是单个字体的名称，而是一类字体的统称，当客户端没有指定字体时可以使用本机上的默认字体。 文字大小 Font-size:可以设置相对大小也可以绝对大小 绝对大小的单位 相对大小:随显示器和父标记的改变而改变。 例如：xx-small、x-small、small、medium、x-large、xx-large,px（像素），%,em（倍数） 文字颜色 Color:颜色 颜色的写法：英文单词、#三位十六进制、#六位十六进制，rgb(数字/百分比,数字/百分比,数字/百分比) 文字粗细 Font-weight:后面可以为数值(100-900),可bold,normal(标准风格） 文字的下划线、顶划线、删除线 Text-decoration： 属性值：underline、overline、line-through,如果设置多个属性值的话可以用空格隔开 英文字母的大小写 Text-transform： Capitalize:每个单词的首字母大写 Uppercase:所有字母大写 Lowercase所有字母小写 CSS段落文字 段落水平对齐方式 Text-align:left、right、center 段落的垂直对齐 Vertical-align:属性值 属性值: top顶端对齐 Bottom底端对齐 Middle中间对齐 行间距和字间距 行间距:line-height 属性值为数值 字间距:letter-spacing 属性值为数值,值可正可负 * * H1 Color : red; { } font-size:25px; 标记选择器 属性 属性 值 值 .class Color : red; { } font-size:25px; 类别选择器 属性 属性 值 值 类别名称 #id Color : red; { } font-size:25px; 标记选择器 属性 属性 值 值 1pc=12pt pc 印刷的点数 Pt 毫米 Mm 厘米 Cm 英寸 In 说明 绝对单位 *