第一章 CSS内容回顾.pptVIP

第一章　 CSS内容回顾 本章目标 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单 回顾HTML-1 回顾HTML-2 为什么需要CSS样式表 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 为什么需要CSS样式表 样式表能实现内容与样式的分离，方便团队开发 样式表的基本语法 样式表的基本结构 样式表的基本语法 样式表的基本语法 如果希望其他的标签也能采用P标签的样式，怎么办？ 样式表的基本语法 常用的样式属性 文本属性 常用的样式属性 小结1 编写如下图所示效果对应的HTML代码 常用的样式属性 背景属性 常用的样式属性 方框属性 常用的样式属性 常用的样式属性 常用的样式属性 常用的样式属性 要实现下图细边框的效果，该如何编写样式规则？ 常用的样式属性 常用的样式属性 特殊样式（超连接） a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ 小结2 常用的样式属性 常用的样式属性 样式表的三类应用方式 内嵌样式表 内嵌样式表使用格式如下： 行内（嵌入）样式表 外部样式表文件 内嵌样式表 行内（嵌入）样式表 行内（嵌入）样式表 行内（嵌入）样式表 外部样式表文件 外部样式表文件 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（@import）外部样式表 链接（LINK ）外部样式表 使用LINK（链接）标签 : HEAD LINK href=newsyle.css rel=stylesheet type=text/css /HEAD 导入（@import）外部样式表 使用@import导入 ，语法： HEAD STYLE TYPE=text/css @ import newstyle.css; /STYLE /HEAD 样式文件.css 网页2 网页3 网页1 …… 第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页绑定 第三步：浏览查看各网页 样式文件： newstyle.css Link_Outcss1.html Link_Outcss2.html 引入的样式文件 引入样式表文件 常用的HTML标签有哪些？ 插入一条水平分隔线 HR 定义超级链接 A 定义文本的段落 P 在文本中插入一个换行 BR 插入一张图像 IMG 定义文档的主体 BODY 定义文字的字体、字号和颜色 FONT 实现页面中文字或图片的滚动 MARQUEE 设定显示在浏览器左上方的标题内容 TITLE 定义文档的头部 HEAD 界定一个完整的HTML文档 HTML 说 明 标签名称 请说明表格的基本结构以及跨行、跨列的用法？ TABLE border=1 TR TD rowspan=跨的行数 单元格内容 /TD TD colspan=跨的列数 单元格内容 /TD …… /TR …… /TABLE 请简述表单的基本结构？常用表单元素有哪些？ 如何使用样式表定义统一的字体外观和文本框的细边框样式？ 表单的基本结构： FORM action= method=post name=myForm …… /FORM 常用的表单元素有： 文本框（text）、密码框（password）、单选按钮（radio）、 复选框（checkbox）、列表框（select和option）、 按钮（button、submit和reset）、多行文本框（textarea）。 统一的字体外观： font-family:黑体; font-size:18px; color:#FF0000; 细边框样式： border-width:1px; border-style:solid; 内容相同 外观不同 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 STYLE type=text/css P {color:red; font-size:30px; font-family:隶书;} …… /STYLE 声明文档样式表结束 文档样式表开始，类型为CSS样式 样式规则 选择器 样式规则 P {color:red; font-size:30px; font-fa