《DreamweaverCS6网页设计与制作》第4章css基础知识刘敏娜主编详解.ppt

css+div网页样式与布局 css+div网页样式与布局 css基本语法 css设置图片格式 css设置网页中的背景 css设置表格与表单的样式 css设置页面和浏览器的元素 用css制作实用的菜单 css基本语法 css（cascading style sheet），中文名为层叠样式表，用于控制网页样式并允许将样式信息与网页内容分离的一种标志性语言。 引入它是为了使html语言能够更好的适应页面的美工设计。 如何编辑css css文件是纯文本文件。 使用文字处理软件均可编辑。推荐dreamweaver软件。 使用css控制页面 行内样式 内嵌式 链接式 导入式 行内式 所有样式中最直接的一种，它直接对html的标记使用style属性，然后将css代码直接写在其中。 如：p style=“color:#ff0000;font-size:20px;text-decoration:underline;”正文内容/p 行内样式是最为简单的css使用方法，但后期维护不容易，不推荐使用。 内嵌式 将css写在head/head之间，并且用style/style标记声明。 如： 链接式 链接式css样式表是使用频率最高的样式。 如：link href=“1.css” type=“text/css” rel=“stylesheet” 导入式 与链接式功能相似，只是语法和运作方式不同。 采用import方式导入的样式表，在html文件初始化时，会被导入到html文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在html标记需要格式时才以链接形式引入。 导入式 语法： css标记选择器 html head titleclass选择器/title style type=text/css !-- .one{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */ } .two{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ } .three{ color:cyan; /* 青色 */ font-size:22px; /* 文字大小 */ } -- /style /head body p class=oneclass选择器1/p p class=twoclass选择器2/p p class=threeclass选择器3/p h3 class=twoh3同样适用/h3 /body /html 补充 可以在标记声明后接类别名称没来区别标记。 html head title标记选择器.class/title style type=text/css !-- h3{ /* 标记选择器 */ color:blue; font-size:18px; } h3.special{ /* 标记.类别选择器 */ color:red; /* 红色 */ font-size:23px; /* 文字大小 */ } .special{ /* 类别选择器 */ color:green; } -- /style /head body h3标记选择器.class1/h3 h3 class=special标记选择器.class3/h3 p class=special使用于别的标记/p /body /html ID选择器 使用方法与class选择器基本相同，不同在于ID选择器只能在html页面中使用一次。 #one {color:red;} ……. p id=“one”……/p html head titleID选择器/title style type=text/css !-- #one{ font-weight:bold; /* 粗体 */ } #two{ font-size:30px; /* 字体大小 */ color:#009900; /* 颜色 */ } -- /style /head body p id=oneID选择器1/p p id=twoID选择器2/p /body /html Css设置文字效果 Css文字样式 首字放大效果 Css设置图片效果 图片样式 图片的对齐 图文混排 图文实例 图片样式 图片边框 (border-color,border-sytle,border-width) 图片缩放：width与height实现 图片对齐： 横向对齐：分左中右，text-align:left 纵向对齐：主要体现在与文字搭配的情况。Vertical-align:middle