[理学]清华紫光_class04_CSS.ppt

欢迎来到紫光软件集团——讲在培训之前 讲解人：王剑南 2010年7月14日 讲解时间 60分钟 回顾HTML 基础标记6 文字编辑标记6 表格标记3 表单标记5 CSS介绍 CSS基础语法 CSS字处理 CSS背景颜色 CSS文本属性 CSS定位 CSS是什么 Cascading Style Sheets 层叠式样表单 CSS作用 为什么要使用CSS HTML的缺点 字体设置复杂 检索、分类困难 维护量大 CSS的优点 更丰富的显示效果 更方便的使用 跨页面格式定义 缩减文件大小 CSS基本概念 元素 替换元素和非替换元素 块级元素和行内元素 一般的块级元素诸如段落p、标 题h1h2...、列表,ulolli 、表格table、表单form、DIVdiv和BODYbody等元素 行内元素则如: 表单元素input、超级链接a、图像img、span ........ CSS定义 链接外部文件 定义内部式样 内联定义 链接外部文件 定义内部式样 内联定义 基本格式 style标记 type属性 值：text/css 所有定义必须写在标记之内 编写要求 定义部分必须放在head标记之内 在body中只能用调用定义好的式样 CSS规则结构 选择器、属性和值 selector {property: value;} font {color: blue;} 调用举例 声明 对指定的选择符进行格式定义 property:values; H1{font-size:50;color:red;} 分组选择符 选择符1, 选择符2, ……, 选择符n{格式声明} h2, p {color: red ;} class选择符 class选择器以一个点号显示 .center {text-align: center} h1 class=center class派生选择器 定义包含指定标记格式全部转换 .fancy td {color: #f60;background: #666;} table class=“fancy”内所有td格式都为fancy class指定元素分类选择器 指定元素根据不同分类定义不同格式 td.fancy {color: #f60;background: #666;} 只有td class=“fancy”格式为fancy ID选择符 ID选择符的前面是# #red {color: red ;} p id=red这个段落是红色。/p id 派生选择器 #sidebar p {font-style: italic; color: red;} div id=sidebarp 4345345/p/div ID指定元素分类选择器 div#sidebar {font-style: italic; color: red;} class和ID的区别 id应该具有唯一性 class可以多次出现 字体设置 文字颜色 color 字体 font-family 字号 font-size 字体粗细 font-weight bold 黑体 指定的范围为100~900 normal是400，bold相当于700 字体格式 font-style指定斜体 italic草体风格斜体字 Oblique指标准倾斜 text-decoration指定字体修饰 Underline “下划线” overline “上划线” line-through“删除线” blink霓虹灯效果 用半角空格隔开之后就可以应用多个属性的值 颜色设置 背景颜色 background-color :颜色 背景图片 background-image:url(图片地址) body {background-image:url(/i/eg_bg_04.gif);} 背景图像的排列方式 background-repeat:排列方式 repeat —— 在水平和垂直方向上都是以瓷砖形式反复显示(初始值) repeat-x —— 只在水平方向重复显示 repeat-y —— 只在垂直方向重复显示 no- repeat —— 不重复只显示一个 背景图像的显示位置 background-positionl:显示位置 数值或%来进行 left和top的值就相当于是0%，center就相当于50%，right和bottom就相当于100% 如果只指定了一个的话，那其余的就相当于指定的是center 固定背景图像 background-attachment：是否固定 fixed 固定背景图像的位置 scroll背景图像和其他内容一起滚动(初始值) 文本属性设置 文本缩进 text-indent:数值 文本对齐 te