CSS基础技术讲解篇

CSS http:/ PHPChina 工作室 http:/ Ze nd PH PC hina Tra ini ng 知识回顾 HTML中的列表分类 表格相关标签、属性 框架的作用 表单及表单控件 http:/ Ze nd PH PC hina Tra ini ng 内容摘要 掌握样式表的语法规则 样式表的分类： 行内样式表 内嵌样式表 外部样式表 掌握常用的样式 了解层 和 标签 http:/ Ze nd PH PC hina Tra ini ng 闪烁文本 移动文本 消隐文本 http:/ Ze nd PH PC hina Tra ini ng 设置属性 这个段落应用了样式 这个段落按默认样式显示 什么是样式？ 指定显示样式 样式规则 http:/ Ze nd PH PC hina Tra ini ng 常用的样式属性 属 性 CSS名称 说 明 颜色 color 文本属性 font-size 字体大小 font-family 字体 text-align 文本对齐 边框属性 (用于表 单元素 ) border-style 边框样式 border-width 边框宽度 border-color 边框颜色 定位属性 (position) top 顶部边距（上边距） left 左边距 width 宽度 height 高度 z-index z 轴索引号，用于层 http:/ Ze nd PH PC hina Tra ini ng 根据样式代码的位置，分为三类： 行内样式 内嵌样式 外部样式 样式的分类 在最后一个声明后面加上一个分号 (;) 是一个好习惯 http:/ Ze nd PH PC hina Tra ini ng 行内样式 您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内 样式”。行内样式使用元素标签的 STYLE 属性定义。 /*关键代码 -*/ 剩余时间：成交结束 新旧程度：全新 所 在 地：北京 宝贝数量： 5 件 浏 览 量： 220 次 另送价值 50元的充电器套装！ (一个充电器，两节充电电池 )可使用半年以 http:/ Ze nd PH PC hina Tra ini ng 应用样式 P font-size:20px; color:blue; text-align:center 我是段落 1 我是段落 2 我是段落 3 我们的样式绝对统一 内嵌样式 -1 样式表 样式规则 所有的段落都采用 P 样 式，保证样式统一 行内样式表局限于某个标签，如果希望本网页内的所以 同类标签都采用统一样式，这时应采用内嵌样式。 选择器 用分号隔开 http:/ Ze nd PH PC hina Tra ini ng 内嵌样式 -2 选择器 根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器 http:/ Ze nd PH PC hina Tra ini ng /*-关键代码 -*/ P /*设置样式：字体和背景色 */ font-family: System; font-size: 18px; color: #3333CC; H2 background-color: #CCFF33; text-align: center; 品种特征方面： 1、蛋鱼：蛋鱼 . 。 2、龙睛：龙睛 . 。 3、高头：高头 . 。 内嵌样式 -3 HTML选择器 HTML选择器 应用 H2样式 应用 P样式 http:/ Ze nd PH PC hina Tra ini ng 内嵌样式 -4 class类选择器 .myinput border: 1px solid; border-color:#D4BFFF; color:#2A00FF 用户名 密 码 CLASS类选择器 应用类选择器： class ” 类名 “ 类选择器的定义格式为： .类名 样式规则 ; http:/ Ze nd PH PC hina Tra ini ng #fire color:red; font-size: 24px; 我是二级标题，火是这样的 我是段落，火是这样的 内嵌样式 -5 ID选择器 ID选择器 ID选择器的定义格式为： ID名 样式规则 ; 应用 ID选择器： ID” ID名“ http:/ Ze nd PH PC hina Tra ini ng A /*设置超链接不带下划线 */ color: blue; text-decoration: none; /*文本修饰：无 */ A:hover /*鼠标在超链接上方停留时，带下划线 */ color: red; text-decoration:underline; /*文本修饰：下划线 */ HEAD 俺是超链接，移过来我就显示下划线 内嵌样式 -6 特殊的选择器 HTML选择器 特殊的伪类： A代表超链接， hover代表鼠标悬停 http:/ Ze nd PH PC hina Tra ini ng 外部样式 根据样式文件与网页的关联方式又分为： 链接（ LINK ）外部样式表 导入（ import）外部样式表 样式文件 P . 网页 2 网页 3 网页 1 http:/ Ze nd PH PC hina Tra ini ng 链接外部样式表 使用 LINK（链接）标签 ，语法： 第一步：创建样式表文件 newstyle.css 第二步：把样式文件和网页关联 样式文件： newstyle.css P . Onel.htm another.htm 第三步：浏览查看各网页 演示 ： 链接 样式表示例 http:/ Ze nd PH PC hina Tra ini ng 导入外部样式表 使用 import导入 ，语法： import 样式表文件 .css; 操作步骤同链接样式表 http:/ Ze nd PH PC hina Tra ini ng 外部样式文件 样式的混合使用 行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件 *.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式 对于某个 HTML标签： 1）如果有多种样式，如果规定 的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行 内样式表显示，如果没有，再 考虑内嵌样式显示，如果还没 有，最后采用外面样式表显示， 否则就按 HTML的默认样式显示； 内嵌样式 行内样式 某个 HTML标签 http:/ Ze nd PH PC hina Tra ini ng 层标签 关键代码 Z-index=1，我是第一层，我是容器，包含图片段落 Z-index=2，我是第二层，包含图片和段落 使用 Z index指定是哪一层 是块级容器标签，可以包 含图片、标题、段落、文字等 图片 段落 top left http:/ Ze nd PH PC hina Tra ini ng 标签 所有韩款童装 10元 /件起拍喽 是行级容器标签，不可 以包含图片、标题、段落等，只 能包含文字内容 http:/ Ze nd PH PC hina Tra ini ng CSS 的优点 改变浏览器的默认显示风格 页面内容和显示样式分离 可以重用样式表 方便网站维护 http:/ Ze nd PH PC hina Tra ini ng 课堂重点 样式分为行内样式、内嵌样式、外部样式 样式表包括选择器和样式规则，选择器又分为 HTML选择器、类选择器、 ID选择器以及特殊 的伪类 和 都是容器标签， 是块 级标签，可包含段落、标题等， 是行 级标签，不能包含段落、标题等，只能包含部 分文字 http:/ Ze nd PH PC hina Tra ini ng 谢 谢 http:/