网页美化_DIV层_CSS样式.ppt

DIV层运用 CSS样式 主讲 夏琳 CSS样式基本介绍 1 什么是CSS样式2 CSS样式表的功能3 CSS的语法4 CSS样式在网页中的四种存在5 CSS样式面板6 CSS样式实例 什公是CSS样式 CSS是 Cascadingstylesheet 的缩写 中文译为层叠样式表 是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 是对HTML语法的革新 CSS简化了HTML中各种繁琐的标签 使各标签的属性更具一般性和通用性 扩充原来的功能 简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计 CSS样式表的功能 可以灵活地控制网页中文字的字体 颜色 大小 间距 风格及位置 可以灵活地设置一个文本块的行高 缩进 并可以加入三维效果的边框 CSS以HTML为基础 提供了丰富的格式化功能 如字体 颜色 背景 整体排版等等 CSS样式表的优点 CSS使页面载入更快 CSS可以降低网站的流量 CSS使设计师在修改设计时更有效率 而代价更低 CSS使整个站点保持视觉的一致性 CSS使站点可以更好地被搜索引擎找到 CSS使站点对浏览者和浏览器更具亲和力 掌握CSS可以提高设计师的职场竞争力 CSS的语法 CSS的定义是由三个部分构成 选择符 selector 属性 properties 和属性的取值 value 基本格式如下 selector property value 选择符 属性 值 其中 HTML标签不带尖括号 标签属性 属性值参数是一一对应的 每个属性与属性值之间用分号隔开 属性名由两个或两个以上的单词构成时 单词之间以 隔开 基本语法 P font family 宋体 font size 9pt color 000000 Td font family 楷体 font size 20pt font style italic font weigh 800 text decoration blink color 000000 标记选择符HTML标记选择符是对页面中的同一类HTML元素采用同一样式的设置 使其风格一致 格式 HTML标记 CSS样式属性 取值 CSS样式属性 取值 例如 要使页面中应用了标记的文字全部呈现红色 可这样设置 文字内容文字内容文字内容 P font family 宋体 font size 9pt line height 12pt color 00000 Td font family 楷体 GB2312 font size 20pt font style italic A hover background color ffccff color ff6666 text decortion underline float left A link color ff33ff text decoration none A visited color 6600ff text decorton none A active color green text decoration none background color ffcc99 类选择符你能够把相同的元素分类定义不同的样式 定义类选择符时 在自定类的名称前面加一个点号 假如你想要两个不同的段落 一个段落向右对齐 一个段落居中 你可以先定义两个类 p right text align right p center text align center 然后用不在不同的段落里 只要在HTML标记里加入你定义的class参数 这个段落向右对齐的这个段落是居中排列的注意 类的名称可以是任意英文单词或以英文开头与数字的组合 一般以其功能和效果简要命名 2 类选择符 类选择符还有一种用法 在选择符中省略HTML标记名 这样可以把几个不同的元素定义成相同的样式 center text align center 定义 center的类选择符为文字居中排列 这样的类可以被应用到任何元素上 下面我们使h1元素 标题1 和p元素 段落 都归为 center 类 这使两个元素的样式都跟随 center 这个类选择符 这个标题是居中排列的这个段落也是居中排列的注意 这种省略HTML标记的类选择符是我们经后最常用的CSS方法 使用这种方法 我们可以很方便的在任意元素上套用预先定义好的类样式 HTML页面中ID参数指定了某个单一元素 ID选择符是用来对这个单一元素定义单独的样式 ID选择符的应用和类选择符类似 只要把CLASS换成ID即可 将上例中类用ID替代 这个段落向右对齐定义ID选择符要在ID名称前加上一个 号 和类选择符相同 定义ID选择符的属性也有两种方法 下面这个例子 ID属性将匹配所有id intro 的元素 intro font size 110 font weight bold color 0000ff background color transparent 字体尺寸为默认尺寸的110 粗体 蓝色 背景颜色透明 3 ID选择符 下面这个例子 ID属性只匹配id intro 的段落元素 p intro font size 110 font weight bold color 0000ff background color transparent 注意 ID选择符局限性很大 只能单独定义某个元素的样式 一般只在特殊情况下使用 4 选择符组你可以把相同属性和值的选择符组合起来书写 用逗号将选择符分开 这样可以减少样式重复定义 h1 h2 h3 h4 h5 h6 color green 这个组里包括所有的标题元素 每个标题元素的文字都为绿色 p table font size 9pt 段落和表格里的文字尺寸为9号字 效果完全等效于 p font size 9pt table font size 9pt 你可以在CSS中插入注释来说明你代码的意思 注释有利于你或别人以后编辑和更改代码时理解代码的含义 在浏览器中 注释是不显示的 CSS注释以 开头 以 结尾 如下 定义段落样式表 p text align center 文本居中排列 color black 文字为黑色 font family arial 字体为arial 5 注释 CSS样式在网页中的三种存在方式 1 外部文件方式 外联样式表 CSS以文件的形式存在 在HTML文档头通过文件引用进行控制 CSS文件的引用是在标签之间写下列语句 2 内嵌样式不以文件的形式存在 仅作用于本文档 直接定义在之间 3 直接插入式 行内样式 只需要在每个HTML标签后书写CSS属性 作用范围只限于本标签 在统一站点风格上 用第一方式 在某个网页风格统一上 用第二种方式 而在网页内部某个标签的具体调整上 用第三种方式 4 导入式样式 导入样式表和外联样式表在概念上类似 都是将多个页面所共用的CSS单独保存在一个CSS文件中 在HTML页面的部分调用这个文件 不同的是导入样式表形式上有点像外联样式来得及和内嵌样式表的结合 与外联样式表的区别是导入样式表在浏览器解释HTML代码是将外部CSS文件中的内容全部调入给页面中 而外联样式表则不将外部CSS文件中的内容调入给页面中 而只在调用到该样式时才在外部CSS文件中调用该样式的定义 格式 1 显示 CSS样式 面板的方式 打开 窗口 菜单 CSS 样式 2 样式视图 CSS样式面板 在Type里有三种样式表类型可供选择 lMakeCustonStyle class 创建自定义样式 自定义一个样式 可以作为class属性应用于页面中 2RedefineHTMLTag 重定义HTML标记 对指定的HTML标记的默认格式进行重新定义 3UseCSSSelector 使用CSS选择符 对特定的标签组合 或者包含有指定ID属性的所有标签进行格式定义 创建自定义样式 名称须以 开头 可应用到任何范围 重定义HTML标签 将扩充某个HTML标签的功能 使用CSS选择器 重新定义一些标签的特定组合格式 外部 将以文件的形式存在 仅对该文档 内嵌式样式 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性 Dreamweaver4把这些属性分为Type 类型 Background 背景 Block 块 Box 盒子 Border 边框 List 列表 Positioning 定位 Extensions 扩展 八个部分 如左图 下面我们分别详细讲解 CSS提供了一些内置的多媒体滤镜特效 使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上 例如图片 文本容器 以及其他一些对象 Dreamweaver4提供了16种滤镜可供选择 如下图 创建新的CSS样式创建新的CSS样式的步骤如下 1 将添加点放在文档中 然后执行以下操作之一打开 新建CSS样式 对话框 2 定义CSS样式的类型 3 选择定义样式的位置 4 单击 确定 出现 CSS样式定义 对话框 5 选择要为新CSS样式设置的样式选项 6 设置完样式属性后 单击 确定 CSS样式实例 内嵌样式 内嵌式样式 InlineStyle 这个内嵌样式 InlineStyle 定义段落里面的文字是20pt字体 字体颜色是红色 这段文字没有使用内嵌样式 CSS样式实例 内部样式表 H1 mylayout border width 1 border solid text align center color red 这个标题使用了Style 这个标题没有使用Style CSS样式实例 内部样式表 GenericClassSelector center text align center 这个标题居中显示 这个段落居中显示 CSS样式实例 外部样式表 这个标题使用了Style 这个标题没有使用Style CSS样式实例 背景颜色属性 背景颜色background colorbody background color 99FF00 这个HTML使用了CSS的background color属性 将HTML的背景颜色变成翠绿色 CSS样式实例 背景重复属性 背景重复background repeatbody background image url images css tutorials background jpg background repeat repeat y 这个HTML使用了CSS的background repeat属性 使背景图片竖向重复 常用的background repeat的属性值有 repeat x 横向重复 repeat Y 横向重复 no repeat 不重复 background repeat属性要和background image一起用 CSS样式实例 边距属性 CSS边距属性margin D1 border 1pxsolid FF0000 D2 border 1pxsolidgray D3 margin 0 5cm1cm2 5cm1 5cm border 1pxsolidgray 没有margin上面两个div没有设置边距属性 margin 仅设置了边框属性 border 外面那个div的border设为红色 里面那个div的border属性设为灰色 和上面两个div的CSS属性设置不同的是 下面两个div中 里面的那个div设置了边距属性 margin 设定上边距为0 5cm 右边距为1cm 下边距为2 5cm 左边距为1 5cm 上下左右边距宽度各不同 CSS样式实例 文本修饰属性 文本修饰属性text decoration p1 text decoration none p2 text decoration underline p3 text decoration line through p4 text decoration overline 文本修饰属性 text decoration 的缺省值是none 这段的文本修饰属性 text decoration 值是underline 这段的文本修饰属性 text decoration 值是line through 这段的文本修饰属性 text decoration 值是overline CSS样式实例 文本缩进属性 文本缩进属性text indent p1 text indent