WEB 前端 CSS 培训(一) 2010-6-18  杨华
课程总览 目标? 培训对象? 学什么?
课程总览 目标? 做好浏览器兼容,走标准之路 学习之前先看些常见 BUG DEMO 培训对象? 学什么?
课程总览 目标? 培训对象? 前端设计人员 前端 CSS 人员 前端 Javascript 人员 后端人员(了解) 学什么?
课程总览 目标? 培训对象? 学什么? 分 4-5 次课进行授课,以实例分析为主 HTML CSS 基础  布局,常见模型 浏览器兼容 总结, CSS 框架
本课介绍 1 . 1 HTML 与 XHTML 1 . 2  CSS 概述 1.3 CSS 选择器 1.4 CSS 常见属性 1.5  简写与优化 1.6  总结 小测试 答疑
1.1  HTML 与 XHTML HTML  超文本标签语言 XHTML  可扩展超文本标签语言 有何区别?
1.1  HTML 与 XHTML 区别: XHTML  是一个  W3C  标准  XHTML  更严格更纯净
1.1  HTML 与 XHTML W3C  指万维网联盟  是一个 会员组织   对 web 进行标准化
1.1  HTML 与 XHTML 最主要的不同: XHTML  元素必须被正确地嵌套  XHTML  元素必须被关闭  标签名必须用小写字母 XHTML  文档必须拥有根元素
1.1  HTML 与 XHTML 更多的  XHTML  语法规则: 属性名称必须小写 属性值必须加引号 属性不能简写 用  Id  属性代替  name  属性 XHTML DTD  定义了强制使用的  HTML  元素
1.1  HTML 与 XHTML   简写
1.1  HTML 与 XHTML <!DOCTYPE>  是强制使用的。 <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
1 . 2  CSS 概述 CSS  指层叠样式表  ( C ascading  S tyle  S heets)  作用: 定义 如何显示   HTML  元素  解决内容与表现分离的问题   提高工作效率
1 . 2  CSS 概述 表现方式: 外部样式表 内部样式表(位于  <head>  标签内部) 内联样式(在  HTML  元素内部) CSS 优先级问题 DEMO1.2
1.3 CSS 选择器 CSS  语法由三部分构成: 选择器、属性和值:   selector {property: value}  如: body {color: blue}
1.3 CSS 选择器 1. 标签选择器   以 “ 标签名 ” 来定义。   p {color: red}  <p> 这个段落是红色。 </p>  <p> 这个段落也是红色。 </p>
1.3 CSS 选择器 2.id  选择器 以 “ #”  来定义。   #red {color:red;}  <p id=&quot;red&quot;> 这个段落是红色。 </p>
1.3 CSS 选择器 3. 类选择器   以 “ .”  来定义。   .red {color: red}  <p class=&quot;red&quot;> 这个段落是红色。 </p>  <p class=&quot;red&quot;> 这个段落也是红色。 </p>
1.3 CSS 选择器 4. 群组选择器   元素之间用逗号分隔  p, td, li {  line-height:20px;  color:#c00;  } 
1.3 CSS 选择器 5. 派生选择器  给一个元素里的子元素定义样式  li strong {  font-weight:bold;  color:red }   <li> <strong> 我是子元素 </strong> </li>
1.3 CSS 选择器 6  伪类 selector:pseudo-class{property:value} a:link {color: #FF0000} /*  未访问 */  a:visited {color: #00FF00} /*  已访问 */  a:hover {color: #FF00FF} /*  鼠标移动到上  */ a:active {color: #0000FF} /*  点击时的链接  */  :first-letter :first-line  DEMO1.3
1.3 CSS 选择器 6  继承 根据  CSS ,子元素从父元素继承属性。  关于 CSS RESET  和优先级
1.4 CSS 常见属性 1  基本属性 基本属性可以对照参考手册
1.4 CSS 常见属性 2  文字类   font-style: italic; font-weight: bold; font-size: 12px;    line-height: 150%; color: red; font-family : “Lucida Grande”, Verdana, 宋体 ,sans-serif;
1.4 CSS 常见属性 2  文字类 缩进文本 p {text-indent: 24px;}  强制不换行: white-space:nowrap; 自动换行: word-wrap: break-word;  强制英文单词断行:  word-break:break-all;  字符转换  text-transform none uppercase lowercase capitalize DEMO1.4.2
1.4 CSS 常见属性 3  背景 body {background-color: gray;}  body {background-image : url(xxx.gif);}  注:背景属性都不能继承
1.4 CSS 常见属性 3  背景 图片背景相关属性 body { background-image:url(xxx.gif); background-repeat:no-repeat; background-position:50px 100px;  background-attachment:fixed;  }  background-position: center  top  bottom right  left  Px  %  DEMO1.4.3
1.4 CSS 常见属性 3  背景 body {background-color: gray;}  body {background-image : url(xxx.gif);}  css sprites :图片合并技术 DEMO1.4.3 注:背景属性都不能继承
1.4 CSS 常见属性 3  背景 css sprites : 图片合并技术
1.4 CSS 常见属性 4  框模型 W3C 盒子模型 padding margin border width 通过 DEMO 做初步了解,后续课程做详细分析 DEMO1.4.4
1.4 CSS 常见属性 5 CSS  定位   块级元素 (block)  行内元素 (inline)  CSS  定位机制 普通流、浮动和绝对定位。
1.4 CSS 常见属性 5 CSS  定位   position  : static 静态 无偏移   relative   相对 可设置偏移 absolute   绝对  fixed   固定 DEMO1.4.5
1.4 CSS 常见属性 5 CSS  定位   浮动 float 文本环绕 布局 DEMO1.4.5
1.5  简写与优化 border:1px solid #000;  margin:1px 2px 3px 4px; margin :1px 2px; ==  margin :1px 2px 1px 2px; margin :1px 2px 3px  ==  margin :1px 2px 3px 2px; background:#f00 url(background.gif) no-repeat fixed 0 0; list-style:square inside url(image.gif);
1.5  简写与优化 font:italic small-caps bold 12px/140% &quot;Lucida Grande&quot;,sans-serif;
1.6  总结 小测试 答疑 总结: 学到哪些? 注意哪些?
1.6  总结 小测试 答疑 测试: 主要测试对 W3C 标准的理解 对常见样式的熟悉程度 答疑

Css

  • 1.
    WEB 前端 CSS培训(一) 2010-6-18 杨华
  • 2.
  • 3.
    课程总览 目标? 做好浏览器兼容,走标准之路学习之前先看些常见 BUG DEMO 培训对象? 学什么?
  • 4.
    课程总览 目标? 培训对象?前端设计人员 前端 CSS 人员 前端 Javascript 人员 后端人员(了解) 学什么?
  • 5.
    课程总览 目标? 培训对象?学什么? 分 4-5 次课进行授课,以实例分析为主 HTML CSS 基础 布局,常见模型 浏览器兼容 总结, CSS 框架
  • 6.
    本课介绍 1 .1 HTML 与 XHTML 1 . 2 CSS 概述 1.3 CSS 选择器 1.4 CSS 常见属性 1.5 简写与优化 1.6 总结 小测试 答疑
  • 7.
    1.1 HTML与 XHTML HTML 超文本标签语言 XHTML 可扩展超文本标签语言 有何区别?
  • 8.
    1.1 HTML与 XHTML 区别: XHTML 是一个 W3C 标准 XHTML 更严格更纯净
  • 9.
    1.1 HTML与 XHTML W3C 指万维网联盟 是一个 会员组织 对 web 进行标准化
  • 10.
    1.1 HTML与 XHTML 最主要的不同: XHTML 元素必须被正确地嵌套 XHTML 元素必须被关闭 标签名必须用小写字母 XHTML 文档必须拥有根元素
  • 11.
    1.1 HTML与 XHTML 更多的 XHTML 语法规则: 属性名称必须小写 属性值必须加引号 属性不能简写 用 Id 属性代替 name 属性 XHTML DTD 定义了强制使用的 HTML 元素
  • 12.
    1.1 HTML与 XHTML   简写
  • 13.
    1.1 HTML与 XHTML <!DOCTYPE> 是强制使用的。 <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
  • 14.
    1 . 2 CSS 概述 CSS 指层叠样式表 ( C ascading  S tyle  S heets) 作用: 定义 如何显示   HTML 元素 解决内容与表现分离的问题 提高工作效率
  • 15.
    1 . 2 CSS 概述 表现方式: 外部样式表 内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) CSS 优先级问题 DEMO1.2
  • 16.
    1.3 CSS 选择器CSS 语法由三部分构成: 选择器、属性和值: selector {property: value} 如: body {color: blue}
  • 17.
    1.3 CSS 选择器1. 标签选择器 以 “ 标签名 ” 来定义。 p {color: red} <p> 这个段落是红色。 </p> <p> 这个段落也是红色。 </p>
  • 18.
    1.3 CSS 选择器2.id 选择器 以 “ #” 来定义。 #red {color:red;} <p id=&quot;red&quot;> 这个段落是红色。 </p>
  • 19.
    1.3 CSS 选择器3. 类选择器 以 “ .” 来定义。 .red {color: red} <p class=&quot;red&quot;> 这个段落是红色。 </p> <p class=&quot;red&quot;> 这个段落也是红色。 </p>
  • 20.
    1.3 CSS 选择器4. 群组选择器 元素之间用逗号分隔 p, td, li {  line-height:20px;  color:#c00;  } 
  • 21.
    1.3 CSS 选择器5. 派生选择器 给一个元素里的子元素定义样式 li strong {  font-weight:bold;  color:red }  <li> <strong> 我是子元素 </strong> </li>
  • 22.
    1.3 CSS 选择器6 伪类 selector:pseudo-class{property:value} a:link {color: #FF0000} /* 未访问 */ a:visited {color: #00FF00} /* 已访问 */ a:hover {color: #FF00FF} /* 鼠标移动到上 */ a:active {color: #0000FF} /* 点击时的链接 */ :first-letter :first-line DEMO1.3
  • 23.
    1.3 CSS 选择器6 继承 根据 CSS ,子元素从父元素继承属性。 关于 CSS RESET 和优先级
  • 24.
    1.4 CSS 常见属性1 基本属性 基本属性可以对照参考手册
  • 25.
    1.4 CSS 常见属性2 文字类 font-style: italic; font-weight: bold; font-size: 12px;   line-height: 150%; color: red; font-family : “Lucida Grande”, Verdana, 宋体 ,sans-serif;
  • 26.
    1.4 CSS 常见属性2 文字类 缩进文本 p {text-indent: 24px;} 强制不换行: white-space:nowrap; 自动换行: word-wrap: break-word; 强制英文单词断行: word-break:break-all; 字符转换 text-transform none uppercase lowercase capitalize DEMO1.4.2
  • 27.
    1.4 CSS 常见属性3 背景 body {background-color: gray;} body {background-image : url(xxx.gif);} 注:背景属性都不能继承
  • 28.
    1.4 CSS 常见属性3 背景 图片背景相关属性 body { background-image:url(xxx.gif); background-repeat:no-repeat; background-position:50px 100px; background-attachment:fixed; } background-position: center top bottom right left Px % DEMO1.4.3
  • 29.
    1.4 CSS 常见属性3 背景 body {background-color: gray;} body {background-image : url(xxx.gif);} css sprites :图片合并技术 DEMO1.4.3 注:背景属性都不能继承
  • 30.
    1.4 CSS 常见属性3 背景 css sprites : 图片合并技术
  • 31.
    1.4 CSS 常见属性4 框模型 W3C 盒子模型 padding margin border width 通过 DEMO 做初步了解,后续课程做详细分析 DEMO1.4.4
  • 32.
    1.4 CSS 常见属性5 CSS 定位 块级元素 (block) 行内元素 (inline) CSS 定位机制 普通流、浮动和绝对定位。
  • 33.
    1.4 CSS 常见属性5 CSS 定位 position  : static 静态 无偏移 relative 相对 可设置偏移 absolute 绝对 fixed 固定 DEMO1.4.5
  • 34.
    1.4 CSS 常见属性5 CSS 定位 浮动 float 文本环绕 布局 DEMO1.4.5
  • 35.
    1.5 简写与优化border:1px solid #000; margin:1px 2px 3px 4px; margin :1px 2px; == margin :1px 2px 1px 2px; margin :1px 2px 3px == margin :1px 2px 3px 2px; background:#f00 url(background.gif) no-repeat fixed 0 0; list-style:square inside url(image.gif);
  • 36.
    1.5 简写与优化font:italic small-caps bold 12px/140% &quot;Lucida Grande&quot;,sans-serif;
  • 37.
    1.6 总结小测试 答疑 总结: 学到哪些? 注意哪些?
  • 38.
    1.6 总结小测试 答疑 测试: 主要测试对 W3C 标准的理解 对常见样式的熟悉程度 答疑