css教程方案.ppt

页面布局之框架布局 使用框架布局 如何实现这样的页面布局？ L o g o * 讲解要点： 讲师：花倩 中软培训中心 课程名称 web (css) HTML 样式单 第七章 HTML 样式单 为什么需要CSS样式表 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 样式表能实现内容与样式的分离，方便团队开发 HTML 样式单 CSS是Cascading Style Sheets（层叠样式表单）的简称 CSS的位置： 在style type=text/css/style中 CSS 语法由三部分构成： 选择器、属性、值 例如：p {color: red;} h1{ border:1px solid red;} style………….. /style 样式表信息必须包含在这对标签之间. 这对标签必须放在head/head中 style type=text/css !- - H1{color=blue;}- - /style HTML 样式单 1、内部样式表 head style type=text/css h1 {color: red} h3 {color: blue} /style /head 2、行内样式 body a href=lastpage.htm style=text-decoration:noneLINK!/a /body 3、连接外部样式表 link href=styles.css / 选择器 1.标签选择器 2.类选择器 3.ID选择器 分组使用样式表 多个标志相同属性的定义方式： B,I,H1{color:red} B 粗体 I 斜体 H1 1号标题 Css样式 定义在标签上的css格式 H1,H2,H3,H4,H5,H6{ Color:red; text-decoration:underline; Font-family:”黑体”; } Css样式 设定在ID上的css格式为 #id名 { 标志属性：属性值； 标志属性：属性值；…… 标志属性：属性值} 引用的方法： 标志　ID＝ID名。 Css样式 直接定义class ： .类名{标志属性：属性值；标志属性：属性值；……标志属性：属性值} 引用： HTML标志 CLASS=类名 css 样式 直接定义class ： .类名{标志属性：属性值；标志属性：属性值；……标志属性：属性值} 引用： HTML标志 CLASS=类名 定义Id ： # id名{标志属性：属性值；标志属性：属性值；……标志属性：属性值} 引用的方法也相同： 标志　ID＝ID名。 常用的样式属性 文本属性 文本属性 说 明 font-size 字体大小 font-family 字体类型 font-style 字体样式 color 设置或检索文本的颜色 text-align 文本对齐 使用font-size、font-family、 color实现 注意：font-style的属性值 font-weight属性 字体大小16px 要实现如下图所示的文本样式，该如何编写？ 常用的样式属性 STYLE type=text/css P { font-size: 12px; font-family: 宋体; text-align:left; } .bigFont { f ont-size: 16px; color:red; } /STYLE /HEAD BODY 【新闻】[设搜狐为首页] 9月1日 P class=bigFont·世锦赛刘翔12秒95夺冠成就大满贯/P P·我国实施不安全食品召回制度 遏制非法出口/P ….. 查看源代码 声明P标签样式 声明名称为bigFont类样式,它可被多个标签共享 应用类样式用 class＝”类名“ 常用的样式属性 背景属性 背景属性 说 明 background-color 设置背景颜色 background-image 设置背景图像 background-repeat 设置一个指定的图像如何被重复 可取值repeat-x、 repeat、 no-repeat、repeat-y 演示示例2：使用不同的背景属性 STYLE type=text/css …… table { background-image: url(images/type_back1.jpg); b